苏飞论坛

标题: jQuery层次选择器总结 [打印本页]

---

作者: 范范    时间: 2017-11-21 21:36
标题: jQuery层次选择器总结
   在开发中，我们并不是单纯的使用表单选择器，去获取当前元素，然后进行修改就可以的。
    经常会使用到，根据表单元素，获取当前元素，然后再根据当前的元素，获取其他的同级的，子级的，父级的等元素
    这是就是用到了层次选择器，本次就主要说下层次选择器的用法。

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集合
(, 下载次数: 84)

上传

点击文件名下载附件

---

作者: 范范    时间: 2017-11-21 21:44
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’ 元素 (, 下载次数: 102)

上传

点击文件名下载附件

---

作者: 范范    时间: 2017-11-21 21:45
沙发沙发  明天继续更新哈

---

作者: 站长苏飞    时间: 2017-11-22 09:49
我只是路过打酱油的。

---

作者: 范范    时间: 2017-11-22 20:22
继续更新，继续更新层次选择器的内容喽

---

作者: 范范    时间: 2017-11-22 20:47
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：
(, 下载次数: 83)

上传

点击文件名下载附件

如上图所示，‘+’的层次选择器，就是选择在同一层中（即，同一级的）的 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
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>

(, 下载次数: 84)

上传

点击文件名下载附件

如上图所示：
$('#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
以上就是总结的，jQuery的层次选择器，基本上就是在层次上，同级，子级，父级的内容查询，理解了，就会很好处理的

---

作者: 范范    时间: 2018-1-16 19:55
路过支持下自己哈

---

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

Powered by Discuz! X3.4