class=mini的div
^^span元素^^
--span元素--
1、后代元素选择器
选择器：ancestor descendant
描述：在给定的祖先元素下匹配所有的后代元素。
返回值：元素集合
示例：
$(document).ready(function(){
$("body div").css("background","#ffbbaa");
});
2、子元素选择器
选择器：parent > child
描述：在给定的祖先元素下匹配所有的子元素。
返回值：元素集合
示例：
$(document).ready(function(){
$("body > div").css("background","#ffbbaa");
$("body > div.aaa").css("background", "#ffbbaa");
});
3、相邻元素选择器
选择器：prev + next
描述：匹配所有紧接在 prev 元素后的 next 元素（prev和next必须是相邻的兄弟关系）。
返回值：元素集合
示例：
$(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");
});
4、兄弟元素选择器
选择器：prev ~ siblings
描述：匹配 prev 元素之后的所有siblings兄弟元素。
返回值：元素集合
示例：
$(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");
});
5、prev()和prevAll()
筛选方法：prev()
描述：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
返回值：元素集合
示例：
$(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");
});
筛选方法：prevAll()
描述：查找当前元素之前所有的同辈元素。
返回值：元素集合
示例：
$(document).ready(function(){
$("#two").prevAll("div").css("background", "#ffbbaa");
});
看完上述内容，你们掌握如何在jQuery中使用层次选择器的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
网站标题：如何在jQuery中使用层次选择器
文章链接：http://cdkjz.cn/article/ipiihg.html
