700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jQuery子元素选择器

jQuery子元素选择器

时间:2019-03-21 20:51:20

相关推荐

jQuery子元素选择器

7.jQuery子元素选择器

7.1:first-child

匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

<ul><li>John</li><li>Karl</li><li>Brandon</li></ul><ul><li>Glen</li><li>Tane</li><li>Ralph</li></ul>jQuery 代码:$("ul li:first-child")结果:[ <li>John</li>, <li>Glen</li> ]

7.2:first-of-type

结构化伪类,匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。解释的很模糊,网上搜了很多都是扯淡的解释,作者也只能自己一个个试,试了几十次才弄的稍微有点清楚,如果错了,慢点拍砖,怕怕。直接看示例。

<div id="n1"><div id="n2" class="abc"><label id="n3">label1</label><span id="n4">span1</span><span id="n5" class="abc">span2</span><span id="n6">span3</span></div><div id="n7"><span id="n8" class="abc">span1</span><span id="n9">span2</span></div></div>jQuery 代码:$("span:first-of-type");结果://n4虽然不是n2的第一个子元素,但它是n2所有span类型子元素中的第一个,因此可以匹配[<span id="n4">span1</span>,<span id="n8" class="abc">span1</span>]

7.3:last-child

匹配最后一个子元素

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

<ul><li>John</li><li>Karl</li><li>Brandon</li></ul><ul><li>Glen</li><li>Tane</li><li>Ralph</li></ul>jQuery 代码:$("ul li:last-child")结果:[ <li>Brandon</li>, <li>Ralph</li> ]

7.4:last-of-type

结构化伪类,匹配E的父元素的最后一个E类型的孩子大体的意思跟 :first-of-type差不多,只是一个是第一个元素,一个是最后一个元素,这里就不赘述了。

7.5::nth-child

匹配其父元素下的第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)

在每个 ul 查找第 2 个li

<ul><li>John</li><li>Karl</li><li>Brandon</li></ul><ul><li>Glen</li><li>Tane</li><li>Ralph</li></ul>jQuery 代码:$("ul li:nth-child(2)")结果:[ <li>Karl</li>, <li>Tane</li> ]

7.6:nth-last-child(n|even|odd|formula)

选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。

因为jQuery的实现:nth-child(n)是严格来自CSS规范,所以n值是“1索引”,也就是说,从1开始计数。对于所有其他选择器表达式,jQuery遵循JavaScript的“0索引”的计数。因此,给定一个单一

包含两个, (′li:nth−child(1)′)选择第一个<li>,而('li:nth-child(1)')选择第一个<li>,而(′li:nth−child(1)′)选择第一个<li>,而(‘li:eq(1)’)选择第二个。这个不寻常的用法,可进一步讨论中找到W3C CSS specification.

<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>$("ul li:nth-last-child(2)");

7.7::nth-of-type(n|even|odd|formula)

选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。

因为jQuery的实现:nth-是严格来自CSS规范,n值是“1-indexed”,也就是说,从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ,jQuery遵循JavaScript的“0索引”的计数。这个不寻常的用法,可进一步讨论中找到W3C CSS specification.

<div><span>John</span><b>Kim</b><span>Adam</span><b>Rafael</b><span>Oleg</span></div><div><b>Dave</b><span>Ann</span></div><div><i><span>Maurice</span></i><span>Richard</span><span>Ralph</span><span>Jason</span></div>$("span:nth-of-type(2)");

7.8:nth-of-type(n|even|odd|formula)

选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。

因为jQuery的实现:nth-是严格来自CSS规范,n值是“1-indexed”,也就是说,从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ,jQuery遵循JavaScript的“0索引”的计数。这个不寻常的用法,可进一步讨论中找到W3C CSS specification.

<div><span>John</span><b>Kim</b><span>Adam</span><b>Rafael</b><span>Oleg</span></div><div><b>Dave</b><span>Ann</span></div><div><i><span>Maurice</span></i><span>Richard</span><span>Ralph</span><span>Jason</span></div>$("span:nth-of-type(2)");

7.9::only-child

如果某个元素是父元素中唯一的子元素,那将会被匹配如果父元素中含有其他元素,那将不会被匹配。(注:这里的其他元素并不包含文本节点,用$(‘p img:only-child’)是可以匹配,感谢:nwujiajie 指正)

<ul><li>John</li><li>Karl</li><li>Brandon</li></ul><ul><li>Glen</li></ul>jQuery 代码:$("ul li:only-child")结果:[ <li>Glen</li> ]

7.10:only-of-type

选择所有没有兄弟元素,且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。