http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 3167|回复: 3

[Jquery] jQuery子元素选择器轻松了解

[复制链接]
发表于 2018-3-9 21:21:40 | 显示全部楼层 |阅读模式
子元素选择器  顾名思义,就是查找页面中的子元素的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  选择所有没有兄弟元素,且具有相同的元素名称的元素













1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-3-9 21:34:29 | 显示全部楼层
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





 楼主| 发表于 2018-3-9 21:39:30 | 显示全部楼层
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:01 | 显示全部楼层
jQuery的子元素选择器,有点绕,不太好理解,根据实例多了解的好  哈哈
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-3-29 06:26

© 2014-2021

快速回复 返回顶部 返回列表