苏飞论坛广告位

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

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

HttpHelper万能框架(V2.1) HttpHelper官方出品,无敌框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V1.9) 最牛的爬虫类,没有爬不到只有想不到 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 296|回复: 3

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

[复制链接]
  • TA的每日心情
    奋斗
    3 天前
  • 签到天数: 172 天

    [LV.7]常住居民III

    发表于 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  选择所有没有兄弟元素,且具有相同的元素名称的元素











  • TA的每日心情
    奋斗
    3 天前
  • 签到天数: 172 天

    [LV.7]常住居民III

     楼主| 发表于 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





  • TA的每日心情
    奋斗
    3 天前
  • 签到天数: 172 天

    [LV.7]常住居民III

     楼主| 发表于 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> ]




  • TA的每日心情
    奋斗
    3 天前
  • 签到天数: 172 天

    [LV.7]常住居民III

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

    本版积分规则

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

    GMT+8, 2018-6-24 15:30

    © 2017-2018

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