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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 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 array_intersect()函数使用代码
2009/01/14 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP new static 和 new self详解
2017/02/19 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python常用外部指令执行代码实例
2020/11/05 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
新浪网技术部笔试题
2016/08/26 面试题
三八妇女节活动主持词
2014/03/17 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js