源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

juqery 学习之三 选择器 子元素与表单

  • 时间:2022-04-30 06:06 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:juqery 学习之三 选择器 子元素与表单

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)

Matches the nth-child of its parent.
[h1]返回值[/h1] Array<Element> [h1]参数[/h1] [b]index [/b](Number) : 要匹配元素的序号,从1开始 [h1]示例[/h1] 在每个 ul 查找第 2 个li [b]HTML 代码:[/b]
<ul>   <li>John</li>   <li>Karl</li>   <li>Brandon</li> </ul> <ul>   <li>Glen</li>   <li>Tane</li>   <li>Ralph</li> </ul>
[b]jQuery 代码:[/b]
$("ul li:nth-child(2)")
[b]结果:[/b]
[ <li>Karl</li>,   <li>Tane</li> ] --------------------------------------------------------------------------------

:first-child

匹配第一个子元素
':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

Matches the first child of its parent.
[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 在每个 ul 中查找第一个 li [b]HTML 代码:[/b]
<ul>   <li>John</li>   <li>Karl</li>   <li>Brandon</li> </ul> <ul>   <li>Glen</li>   <li>Tane</li>   <li>Ralph</li> </ul>
[b]jQuery 代码:[/b]
$("ul li:first-child")
[b]结果:[/b]
[ <li>John</li>, <li>Glen</li> ]
--------------------------------------------------------------------------------

:last-child

匹配最后一个子元素
':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

Matches the last child of its parent.
[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 在每个 ul 中查找最后一个 li [b]HTML 代码:[/b]
<ul>   <li>John</li>   <li>Karl</li>   <li>Brandon</li> </ul> <ul>   <li>Glen</li>   <li>Tane</li>   <li>Ralph</li> </ul>
[b]jQuery 代码:[/b]
$("ul li:last-child")
[b]结果:[/b]
[ <li>Brandon</li>, <li>Ralph</li> ]
--------------------------------------------------------------------------------

:only-child

如果某个元素是父元素中唯一的子元素,那将会被匹配
如果父元素中含有其他元素,那将不会被匹配。

Matches the only child of its parent.
[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 在 ul 中查找是唯一子元素的 li [b]HTML 代码:[/b]
<ul>   <li>John</li>   <li>Karl</li>   <li>Brandon</li> </ul> <ul>   <li>Glen</li>
[b]jQuery 代码:[/b]
$("ul li:only-child")
[b]结果:[/b]
[ <li>Glen</li> ]
--------------------------------------------------------------------------------

:input

匹配所有 input, textarea, select 和 button 元素

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有的input元素 [b]HTML 代码:[/b]
<form>   <input type="text" />   <input type="checkbox" />   <input type="radio" />   <input type="image" />   <input type="file" />   <input type="submit" />   <input type="reset" />   <input type="password" />   <input type="button" />   <select><option/></select>   <textarea></textarea>   <button></button> </form>
[b]jQuery 代码:[/b]
$(":input")
[b]结果:[/b]
[ <input type="text" />, <input type="checkbox" />, <input type="radio" />, <input type="image" />, <input type="file" />, <input type="submit" />, <input type="reset" />, <input type="password" />, <input type="button" /> ]
--------------------------------------------------------------------------------

:text

匹配所有的单行文本框

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有文本框 [b]HTML 代码:[/b]
<form>   <input type="text" />   <input type="checkbox" />   <input type="radio" />   <input type="image" />   <input type="file" />   <input type="submit" />   <input type="reset" />   <input type="password" />   <input type="button" />   <select><option/></select>   <textarea></textarea>   <button></button> </form>
[b]jQuery 代码:[/b]
$(":text")
[b]结果:[/b]
[ <input type="text" /> ]
--------------------------------------------------------------------------------

:password

匹配所有密码框

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有密码框 [b]HTML 代码:[/b]
<form>   <input type="text" />   <input type="checkbox" />   <input type="radio" />   <input type="image" />   <input type="file" />   <input type="submit" />   <input type="reset" />   <input type="password" />   <input type="button" />   <select><option/></select>   <textarea></textarea>   <button></button> </form>
[b]jQuery 代码:[/b]
$(":password")
[b]结果:[/b]
[ <input type="password" /> ]
--------------------------------------------------------------------------------

:radio

匹配所有单选按钮

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有单选按钮 [b]HTML 代码:[/b]
<form>   <input type="text" />   <input type="checkbox" />   <input type="radio" />   <input type="image" />   <input type="file" />   <input type="submit" />   <input type="reset" />   <input type="password" />   <input type="button" />   <select><option/></select>   <textarea></textarea>   <button></button> </form>
[b]jQuery 代码:[/b]
$(":radio")
[b]结果:[/b]
[ <input type="radio" /> ]
--------------------------------------------------------------------------------

:submit

匹配所有提交按钮

[h1]返回值[/h1] Array<Element> [h1]示例[/h1] 查找所有提交按钮 [b]HTML 代码:[/b]
<form>   <input type="text" />   <input type="checkbox" />   <input type="radio" />   <input type="image" />   <input type="file" />   <input type="submit" />   <input type="reset" />   <input type="password" />   <input type="button" />   <select><option/></select>   <textarea></textarea>   <button></button> </form>
[b]jQuery 代码:[/b]
$(":submit")
[b]结果:[/b]
[ <input type="submit" /> ]
其他的一些 都是一样的道理:image   ,:reset,:button,:file,:hidden !@#@!%$%
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部