jQuery层次选择器总结

范范 · 发表于 2017-11-21 21:36:17

在开发中，我们并不是单纯的使用表单选择器，去获取当前元素，然后进行修改就可以的。
经常会使用到，根据表单元素，获取当前元素，然后再根据当前的元素，获取其他的同级的，子级的，父级的等元素
这是就是用到了层次选择器，本次就主要说下层次选择器的用法。

1. ancestor descendant 获取元素中的所有子孙元素

例："form input" 选中form中所有的input元素

即：ancestor（祖先）为form，descendant（子孙）为input
$(".bgRed div") 选择css类为bgRed的元素中所有的<div>元素

实例如下：

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

<ul class="job-hotspot oh">            <li>
                <a href="http://baidu.com/532031" target="_blank">
                    <img src="http://imga.baidu.com/201711/21/25402bbeeb1b4ef18af746ee1638d1e6.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2022005" class="text ellipsis">古建项目经理</a>
            </li>
            <li>
                <a href="http://baidu.com/531576" target="_blank">
                    <img src="http://imga.baidu.com/201710/24/71cfeb3e61874a65834878ae14740768.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2021005" class="text ellipsis">电话销售</a>
            </li>
            <li>
                <a href="http://baidu.com/20677" target="_blank">
                    <img src="http://imga.baidu.com/201710/25/4ee6c4750ffd473eb43c49f9a67d0169.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/54315" class="text ellipsis">工程类相关技术人员</a>
            </li>
            <li>
                <a href="http://baidu.com/514540" target="_blank">
                    <img src="http://imga.baidu.com/201711/15/bae05709addc4bc89c6c707bfde56272.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/1733462" class="text ellipsis">城市规划师</a>
            </li>
            <li>
                <a href="http://baidu.com/92044" target="_blank">
                    <img src="http://imga.baidu.com/201711/1/1faa0f38aae542029d5fb106e634ae2b.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/734223" class="text ellipsis">观赏植物育种技术员</a>
            </li>
    </ul>

js如下：
$('.job-hotspot li')
可获取样式为 ‘job-hotspot’ 下面的所有的子 li集合

范范 · 发表于 2017-11-21 21:44:37

parent>child 选择parent的直接子节点child
注：child必须包含在parent中，并且父类是parent元素此处获取的是当前父元素下的一级子元素，并不是所有的子孙元素
例：$(".myList>li") 选择css类为myList元素中的直接子节点<li>对象，即获取的为儿子辈的子元素，并不是子孙所有子元素

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

<ul class="job-hotspot oh">
            <li>
                <a href="http://baidu.com/532031" target="_blank">
                    <img src="http://imga.baidu.com/201711/21/25402bbeeb1b4ef18af746ee1638d1e6.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2022005" class="text ellipsis">古建项目经理</a>
            </li>
            <li>
                <a href="http://baidu.com/531576" target="_blank">
                    <img src="http://imga.baidu.com/201710/24/71cfeb3e61874a65834878ae14740768.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2021005" class="text ellipsis">电话销售</a>
            </li>
            <li>
                <a href="http://baidu.com/20677" target="_blank">
                    <img src="http://imga.baidu.com/201710/25/4ee6c4750ffd473eb43c49f9a67d0169.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/54315" class="text ellipsis">工程类相关技术人员</a>
            </li>
            <li>
                <a href="http://baidu.com/514540" target="_blank">
                    <img src="http://imga.baidu.com/201711/15/bae05709addc4bc89c6c707bfde56272.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/1733462" class="text ellipsis">城市规划师</a>
            </li>
            <li>
                <a href="http://baidu.com/92044" target="_blank">
                    <img src="http://imga.baidu.com/201711/1/1faa0f38aae542029d5fb106e634ae2b.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/734223" class="text ellipsis">观赏植物育种技术员</a>
            </li>
    </ul>

js如下：
$('.job-hotspot>li')
可以获取到5个，子元素 li
$('.job-hotspot>a')
获取不到任何的 ‘a’ 元素（因为a元素并不是样式 ‘job-hotspot’ 的子元素）
使用上面所说的 $('.job-hotspot a') 就可以获取当前html中在样式 ‘job-hotspot’ 中的所有 ‘a’ 元素

范范 · 发表于 2017-11-21 21:45:49

沙发沙发明天继续更新哈

站长苏飞 · 发表于 2017-11-22 09:49:32

我只是路过打酱油的。

范范 · 发表于 2017-11-22 20:22:05

继续更新，继续更新层次选择器的内容喽

范范 · 发表于 2017-11-22 20:47:25

3、prev+next 选择在prev元素后面的next元素
注：prev与next是两个同级别的元素
例：$("#hibiscus+img") 选中在id为 hibiscus 元素后面的 img 元素

例：

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

<ul class="job-hotspot oh">
            <li id="job1">
                <a href="http://baidu.com/532031" target="_blank">
                    <img src="http://imga.baidu.com/201711/21/25402bbeeb1b4ef18af746ee1638d1e6.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2022005" class="text ellipsis">古建项目经理</a>
            </li>
            <li>
                <a href="http://baidu.com/531576" target="_blank">
                    <img src="http://imga.baidu.com/201710/24/71cfeb3e61874a65834878ae14740768.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2021005" class="text ellipsis">电话销售</a>
            </li>
            <li>
                <a href="http://baidu.com/20677" target="_blank">
                    <img src="http://imga.baidu.com/201710/25/4ee6c4750ffd473eb43c49f9a67d0169.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/54315" class="text ellipsis">工程类相关技术人员</a>
            </li>
            <li id="job4">
                <a href="http://baidu.com/514540" target="_blank">
                    <img src="http://imga.baidu.com/201711/15/bae05709addc4bc89c6c707bfde56272.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/1733462" class="text ellipsis">城市规划师</a>
            </li>
            <li id="job5">
                <a href="http://baidu.com/92044" target="_blank">
                    <img src="http://imga.baidu.com/201711/1/1faa0f38aae542029d5fb106e634ae2b.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/734223" class="text ellipsis">观赏植物育种技术员</a>
            </li>
    </ul>

jquery：

如上图所示，‘+’的层次选择器，就是选择在同一层中（即，同一级的）的 A元素后面的B元素
在jq - ‘$('#job4+li')’中，可以明显的看到， id为‘job5’的li元素，与id为 ‘job4’ 的元素同级，并且job5 在job4 后面
在jq - ‘$('#job5+li')’中，可以看到，同级的li中，job5 为最后一个元素，故此jq没有查到任何内容
在jq - ‘$('#job1+a')’中，可以看到，id 为 job1 的元素是li 在同级中，不存在a元素（a 元素是li的子元素），故查不到信息

范范 · 发表于 2017-11-22 20:56:44

prev ~siblings 选择prev后面的根据siblings过滤的元素
注：siblings为过滤器
例：$("#someDiv ~ [title]") 选择id为someDiv的对象后面所有带title属性的元素

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

<ul class="job-hotspot oh">
            <li id="job1">
                <a href="http://baidu.com/532031" target="_blank">
                    <img src="http://imga.baidu.com/201711/21/25402bbeeb1b4ef18af746ee1638d1e6.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2022005" class="text ellipsis">古建项目经理</a>
            </li>
            <li>
                <a href="http://baidu.com/531576" target="_blank">
                    <img src="http://imga.baidu.com/201710/24/71cfeb3e61874a65834878ae14740768.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/2021005" class="text ellipsis">电话销售</a>
            </li>
            <li>
                <a href="http://baidu.com/20677" target="_blank">
                    <img src="http://imga.baidu.com/201710/25/4ee6c4750ffd473eb43c49f9a67d0169.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/54315" class="text ellipsis">工程类相关技术人员</a>
            </li>
            <li id="job4">
                <a href="http://baidu.com/514540" target="_blank">
                    <img src="http://imga.baidu.com/201711/15/bae05709addc4bc89c6c707bfde56272.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/1733462" class="text ellipsis">城市规划师</a>
            </li>
            <li id="job5">
                <a href="http://baidu.com/92044" target="_blank">
                    <img src="http://imga.baidu.com/201711/1/1faa0f38aae542029d5fb106e634ae2b.jpg">
                </a>
                    <a target="_blank" href="http://baidu.com/Job/734223" class="text ellipsis">观赏植物育种技术员</a>
            </li>
    </ul>

如上图所示：
$('#job1 ~[target]') 因为target 是html中a标签的属性， a标签与 #job1 不是同级元素，故查询不到内容
$('#job1 ~[id]') #job1 查询到的是第一个li元素在其后面还有4个li元素但是只有两个li是存在id属性的（job4， job5）故此处查询的几位，id为job1 对象后面的，存在id属性的所有元素即（job4 job5两个li元素）

范范 · 发表于 2017-11-22 20:58:26

以上就是总结的，jQuery的层次选择器，基本上就是在层次上，同级，子级，父级的内容查询，理解了，就会很好处理的

范范 · 发表于 2018-1-16 19:55:24

路过支持下自己哈

		自动登录	找回密码
密码			马上注册

[Jquery] jQuery层次选择器总结