jQuery层次选择器

层次选择器

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

层次选择器

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

 

 

 

 

 

 

 

 

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

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

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

层次选择器示例

层次选择器示例

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