jQuery中的层次选择器
常见的层次关系包括:父子、后代、兄弟、相邻。
- $(“M N”) 等价于 $(M).find(N);表示选择后代。
- $(“M>N”) 等价于 $(M).children(N);表示选择子代。
- $(“M~N”) 等价于 $(M).nextAll(N);表示在兄弟之中选择后面所有兄弟。
- $(“M+N”) 等价于 $(M).next(N);表示在兄弟之中只选择后面那个兄弟。
HTML文件代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="first">
<p>子元素</p>
<p>子元素</p>
<p>子元素</p>
<div id="second">
<p>div中的子元素</p>
<p>div中的子元素</p>
</div>
<p>子元素</p>
<p>子元素</p>
</div>
</body>
</html>
后代选择器
js代码:
$(function (){
$("#first p").css("color", "skyblue");
})
效果:
子代选择器
js代码;
$(function (){
$("#first").children("p").css("color", "skyblue");
})
效果:
兄弟选择器
js代码:
$(function (){
$("#second~p").css("color", "skyblue");
})
效果:
相邻选择器
js代码:
$(function (){
$("#second+p").css("color", "skyblue");
})
效果:
我们改一下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jQuery/jQuery3.6.0-min.js"></script>
<script src="./test04.js"></script>
</head>
<body>
<p>子元素</p>
<p>子元素</p>
<p>子元素</p>
<div id="second">
<p>div中的子元素</p>
<p>div中的子元素</p>
</div>
<p>子元素</p>
<p>子元素</p>
</body>
</html>
$(function (){
$("p+p").css("color", "skyblue");
})
效果: