jQuery子元素选择器轻松了解

范范

子元素选择器  顾名思义，就是查找页面中的子元素的jQuery选择器。
jQuery中的子元素选择器有如下几种：
1.:first-child  匹配所给选择器( :之前的选择器)的第一个子元素
2.:first-of-type  匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。
3.:last-child   匹配最后一个子元素
4.:last-of-type 匹配E的父元素的最后一个E类型的孩子
5.:nth-child   匹配其父元素下的第N个子或奇偶元素
6.:nth-last-child()   选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
7.:nth-last-of-type()  选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个
8.:nth-of-type()  选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
9.: only-child   如果某个元素是父元素中唯一的子元素，那将会被匹配
10.: only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素


以上就是所有的子元素选择器，这些讲解都比较笼统，不是很好理解，
下面可以查看详细的例子，以便于轻松了解各个子元素选择器的具体用法与解释。


1.:first-child
匹配所给选择器( :之前的选择器)的第一个子元素

详细实例讲解如下
类似 选择器:first 匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)


下面，就通过以下代码实例，详细了解下 :first-child 与 :first的区别
html代码：

[HTML] 纯文本查看 复制代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("ul li:first-child")

输出结果：

[HTML] 纯文本查看 复制代码

[ <li>John</li>, <li>Glen</li> ]

通过本实例，:first-child可以轻松看到， 在每个ul中查找第一个li


jQuery代码：

[JavaScript] 纯文本查看 复制代码

$('ul li:first')

输出结果：

[HTML] 纯文本查看 复制代码

[ <li>John</li> ]

可以轻松看到，:first 查找ul 中的第一个li元素


2.:first-of-type  匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器
点击查看详细实例


3.:last-child   匹配最后一个子元素
点击查看详细实例分析


4.:last-of-type  匹配E的父元素的最后一个E类型的孩子

与 :first-of-type  用法一样，只是一个是获取 第一个  另一个是获取  最后一个元素
点击查看 :first-of-type 的详细实例分析


5.:nth-child   匹配其父元素下的第N个子或奇偶元素
点击查看详细实例分析


6.:nth-last-child()   选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
点击查看详细实例分析



7.:nth-last-of-type()  选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个
8.:nth-of-type()  选择同属于一个父元素之下，并且标签名相同的子元素中的第n个
9. : only-child   如果某个元素是父元素中唯一的子元素，那将会被匹配
10. : only-of-type  选择所有没有兄弟元素，且具有相同的元素名称的元素

范范

2.:first-of-type  匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。

具体实例代码如下：查找作为父元素的 span类型子元素 中的"长子"的span标签（获取第一个span元素的子元素）
html代码：

[HTML] 纯文本查看 复制代码

<div id="n1">[/color]
[color=#000000]    <div id="n2" class="abc">[/color]
[color=#000000]        <label id="n3">label1</label>[/color]
[color=#000000]        <span id="n4">span1</span>[/color]
[color=#000000]        <span id="n5" class="abc">span2</span>[/color]
[color=#000000]        <span id="n6">span3</span>[/color]
[color=#000000]    </div>[/color]
[color=#000000]    <div id="n7">[/color]
[color=#000000]        <span id="n8" class="abc">span1</span>[/color]
[color=#000000]        <span id="n9">span2</span>[/color]
[color=#000000]    </div>[/color]
[color=#000000]</div>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("span:first-of-type")

输出结果：

[HTML] 纯文本查看 复制代码

[<span id="n4">span1</span>,<span id="n8" class="abc">span1</span>]

通过输出可以看到，n4虽然不是n2的第一个子元素，但它是n2所有span类型子元素中的第一个，因此可以匹配

查看另一个实例如下：
html代码：

[HTML] 纯文本查看 复制代码

<div id="n1">[/color]
[color=#000000]    <div id="n2" class="abc">[/color]
[color=#000000]        <label id="n3">label1</label>[/color]
[color=#000000]        <span id="n4">span1</span>[/color]
[color=#000000]        <span id="n5" class="abc">span2</span>[/color]
[color=#000000]        <span id="n6">span3</span>[/color]
[color=#000000]    </div>[/color]
[color=#000000]    <div id="n7">[/color]
[color=#000000]        <span id="n8" class="abc">span1</span>[/color]
[color=#000000]        <span id="n9">span2</span>[/color]
[color=#000000]    </div>[/color]
[color=#000000]</div>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$(".abc:first-of-type")

输出结果：

[HTML] 纯文本查看 复制代码

[<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]

输出结果简介：
.abc可以匹配id分别为n2、n5、n8的3个元素，
n2是n1所有div类型子元素中的第一个，n8是n7所有span类型子元素中的第一个，

但n5不是n2所有span类型子元素中的第一个，因此不能匹配n5

范范

3.  :last-child   匹配最后一个子元素
实例代码如下：
  在每个 ul 中查找最后一个 li
html代码：

[HTML] 纯文本查看 复制代码

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("ul li:last-child")

输出结果：

[HTML] 纯文本查看 复制代码

[ <li>Brandon</li>, <li>Ralph</li> ]

范范

jQuery的子元素选择器，有点绕，不太好理解，根据实例多了解的好  哈哈