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
选择所有没有兄弟元素，且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

jQuery子元素选择器相关推荐

jQuery 子元素选择器 find() 和 children()
在前面的文章中多次提到了子元素和直接子元素,本篇文章来说明这两者的区别. <div id="list"><div name="a"> ...
jquery子元素过滤选择器
jquery子元素过滤选择器子元素过滤选择器需要我们时刻理元素的父元素和子元素,只要这样我们才能运用的得心应手. 1.:nth-child选择器匹配每一个父元素下面的的第index个子元素或者奇偶 ...
jquery子元素过滤选择器:nth-child、:first-child、:last-child、:only-child
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery子元素过滤选择器 jquery子元素过滤选择器,包括:nth-child.:first-child.:last-ch ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
011_CSS子元素选择器
1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素. 2. 选择子元素 2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的 ...
css直接子元素怎么用,CSS 子元素选择器使用实例
与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素. 子元素选择器使用大于号">"做为连接符. 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子 ...
【Google】【内部样式表】【外部样式表：听力地点方向题】【设置字体间距】【多类、子元素选择器】【网页设计与网站开发HTML、CSS、JavaScript】【第 8 章】CSS基础——实验题1-6
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 目录实验1 1.题目 2.代码 3.网页运行效果实验2 1.题目 2.代码 3 ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...
html后代选择器和子代选择器,CSS后代选择器与子元素选择器的区别
今天在看css基础的时候,发现了一个很有趣的事情,那就是后代选择器与子元素选择器. 说来也惭愧,我以前一直以为,这俩是同一个东西,只是叫法不同而已,后来才发现,原来这俩是两个不同的东西. 后代选 ...

jQuery子元素选择器

7.jQuery子元素选择器

jQuery子元素选择器相关推荐

最新文章

热门文章