jQuery层次选择器

最新推荐文章于 2021-10-30 21:58:07 发布

原创最新推荐文章于 2021-10-30 21:58:07 发布 · 7.8k 阅读

8 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了jQuery中的层次选择器，这些选择器基于DOM元素的层次关系，包括后代、子元素、相邻和兄弟元素的选择。例如，`$("prev+next")`等同于`.next()`方法，用于选取prev元素后的第一个同辈next元素；而`$("prev~siblings")`等同于`.nextAll()`，用于选取prev元素后的所有同辈元素。

层次选择器

通过DOM元素之间的结构（层次关系）来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等。

层次选择器
选择器	描述	返回	示例
$("ancestor descendant")	选取ancenstor元素中所有descendant（后代）元素，不仅仅是直接子元素	集合元素	$("div span")选取<div>里的所有<span>元素
$("parent>child")	选取parent元素下的child（子）元素，直接子元素，例如：不包括子元素中的子元素	集合元素	$("div>span")选取<div>元素下名为<span>的元素
$("prev+next")	选取紧接在prev元素后的next元素	集合元素	$(".one+div")选取class为one的下一个<div>元素
$("prev~siblings")	选取prev元素之后所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面的所有<div>同辈与阿奴

其中：$("prev+next")选择器是选取prev元素后的第一个同辈next元素，可以用next()方法来代替，$("prev~siblings")选择器是选取prev元素后所有的siblings同辈元素，可以用nextAll()方法代替。

$(".one+div") ------------> $(".one").next("div");

$(".one~div") ------------> $(".one").nextAll("div");

层次选择器示例

层次选择器示例
功能	代码	执行结果
改变<body>内所有<div>的背景	$("body div") .css("backgroundColor","#eee");
改变<body>内子元素<div>的背景	$("body>div") .css("backgroundColor","#eee");
改变id为one的下一个<div>同辈元素的背景	$("#one+div") .css("backgroundColor","#eee");
改变id为two的元素后面所有的同辈元素的背景	$("#one~div") .css("backgroundColor","#eee");