苏飞论坛

标题: jQuery子元素选择器轻松了解 [打印本页]

作者: 范范 时间: 2018-3-9 21:21
标题: 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  选择所有没有兄弟元素，且具有相同的元素名称的元素

作者: 范范 时间: 2018-3-9 21:34
2.:first-of-type 匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。

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

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

<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代码：

[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">

    <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代码：

[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

作者: 范范 时间: 2018-3-9 21:39
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> ]

作者: 范范 时间: 2018-3-9 22:14
jQuery的子元素选择器，有点绕，不太好理解，根据实例多了解的好哈哈

欢迎光临苏飞论坛 (http://www.sufeinet.com/)