jQuery选择器之层次选择器用法实例分析


Posted in jQuery onFebruary 19, 2019

本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考,具体如下:

前面一篇介绍了几种基本的jQuery选择器,今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、相邻元素和兄弟元素等,我们可以通过DOM元素之间的层次关系来获取想要的元素。为了更好的学习,我们先列出一段HTML代码:

<body>
  <div id="one" class="aaa">
    id=one,class=aaa的div
    <br />
    <div class="mini">class=mini</div>
  </div>
  <div id="two" class="aaa">
    id=two,class=aaa的div
    <br />
    <div class="mini">class=mini的div</div>
    <div class="mini">class=mini的div</div>
  </div>
  <div class="bbb">
    class=bbb的div
    <div class="mini">class=mini的div</div>
    <div class="mini">class=mini的div</div>
  </div>
  <span>^^span元素^^</span>
  <span>--span元素--</span>
</body>

1、后代元素选择器

选择器:ancestor descendant
描述:在给定的祖先元素下匹配所有的后代元素。
返回值:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("body div").css("background","#ffbbaa");
  });
</script>

2、子元素选择器

选择器:parent > child
描述:在给定的祖先元素下匹配所有的子元素。
返回值:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("body > div").css("background","#ffbbaa");
    $("body > div.aaa").css("background", "#ffbbaa");
  });
</script>

3、相邻元素选择器

选择器:prev + next
描述:匹配所有紧接在 prev 元素后的 next 元素(prev和next必须是相邻的兄弟关系)。
返回值:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    //【写法1】写法1与写法2等价
    $("#one + span").css("background","#ffbbaa");
    //【写法2】
    $("#one").next("span").css("background","#ffbbaa");
    //【写法3】写法3、写法4与写法5等价
    $("#one").nextAll("span:first").css("background","#ffbbaa");
    //【写法4】
    $("#one").nextAll("span:eq(0)").css("background","#ffbbaa");
    //【写法5】
    $("#one").nextAll("span").eq(0).css("background","#ffbbaa");
  });
</script>
  • 当#one元素之后存在兄弟span元素,但span元素均与#one元素不相邻时,写法3、写法4和写法5可以查询到结果,写法1和写法2查询不到结果。
  • 当#one元素之后存在相邻的兄弟span元素时,写法1、写法2、写法3、写法4和写法5查询到的结果相同。

4、兄弟元素选择器

选择器:prev ~ siblings
描述:匹配 prev 元素之后的所有siblings兄弟元素。
返回值:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    //【写法1】写法1与写法2等价
    $("#two ~ div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa");
    //【写法2】
    $("#two").nextAll("div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa");
  });
</script>

5、prev()和prevAll()

筛选方法:prev()
描述:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
返回值:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    //【写法1】
    $("span:first").prev(".bbb").css("background", "#ffbbaa");
    //【写法2】写法2、写法3和写法4等价
    $("span:first).prevAll(".bbb:first").css("background", "#ffbbaa");
    //【写法3】
    $("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa");
    //【写法4】
    $("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa");
  });
</script>
  • 当span:first元素之前存在兄弟.bbb元素,但.bbb元素均与span:first元素不相邻时,写法2、写法3和写法4可以查询到结果,写法1查询不到结果。
  • 当span:first元素之前存在相邻的兄弟.bbb元素时,写法1、写法2、写法3和写法4查询到的结果相同。

筛选方法:prevAll()
描述:查找当前元素之前所有的同辈元素。
返回值:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("#two").prevAll("div").css("background", "#ffbbaa");
  });
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
You might like
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python实现简单的代理服务器
2015/07/25 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Django框架多表查询实例分析
2018/07/04 Python
Django如何自定义分页
2018/09/25 Python
详解Python3中ceil()函数用法
2019/02/19 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
服务型党组织建设典型材料
2014/05/07 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python