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 dataTable 获取某行数据
May 05 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery实现上传图片功能
Jun 29 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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
写一个用户在线显示的程序
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
编程语言Python的发展史
2014/09/26 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python文件读写代码实例
2019/10/21 Python
python绘图模块之利用turtle画图
2021/02/12 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
淘宝活动策划方案
2014/02/06 职场文书
酒店节能降耗方案
2014/05/08 职场文书
博士导师推荐信
2015/03/25 职场文书
活动费用申请报告
2015/05/15 职场文书
西游记读书笔记
2015/06/25 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android