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 validata插件实现方法
Jun 25 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery 移除事件的方法
Jun 20 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
yii去掉必填项中星号的方法
2015/12/28 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python 处理string到hex脚本的方法
2018/10/26 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Pandas中resample方法详解
2019/07/02 Python
Python selenium自动化测试模型图解
2020/04/15 Python
jupyter 导入csv文件方式
2020/04/21 Python
python中判断文件结束符的具体方法
2020/08/04 Python
南京某公司笔试题
2013/01/27 面试题
电气自动化大学生求职信
2013/10/16 职场文书
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
安全生产检查通报
2014/01/29 职场文书
综合实践教学反思
2014/01/31 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
详细介绍python类及类的用法
2021/05/31 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android