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 相关文章推荐
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
如何基于jQuery实现五角星评分
Sep 02 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python判断字符串与大小写转换
2015/06/08 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
全陪导游欢迎词
2014/01/17 职场文书
教师个人自我鉴定
2014/02/08 职场文书
运输服务质量承诺书
2014/03/27 职场文书
家长对学生的评语
2014/04/18 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
2014财务年度工作总结
2014/11/11 职场文书
党员先进事迹材料
2014/12/19 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers