jQuery选择器之层次选择器用法实例分析
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery配合.NET实现点击指定绑定数据并且能够一键下载
本篇文章主要介绍了jquery配合.NET实现点击指定绑定数据并且能够一键下载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-10-10
这里给大家分享的效果是像百度的搜索框一样，当用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便，增加用户体验。2015-07-07
这篇文章介绍了jQuery 绑定事件到动态创建的元素上的方法实例，有需要的朋友可以参考一下2013-08-08
B/S开发的朋友，首页常常需要一些新闻图片切换的特效，鉴于jQuery良好的插件开发机制，我也常常自己写一些实用的小插件，这里分享一个新闻图片切换插件2011-10-10
大家应该都会有这样一种感觉，data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此。下面就来详细深入的学习下jQuery中的data()，感兴趣的朋友们可以参考借鉴。2016-12-12
在深入了解jQuery的各个细节之前，需要对jQuery的设计思想有一个大致的了解。在遇到问题时， 知道应该使用jQuery的哪一个功能，然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jQuery实现html可联动的百分比进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
使用ajax在前端验证是否执行某个操作，下面为大家介绍下jquery.post的具体使用2014-01-01
jQuery学习笔记之jQuery的DOM操作实现方法， 学习jquery与dom操作的朋友可以参考下。2010-12-12
jquery如何退出each循环的? 在回调函数里return false即可，大多数jq的方法都是如此的2014-02-02
最新评论