<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
body{
font-family: "Microsoft YaHei"
}
.cGreen{background-color: #4CA902}
.cPink{background-color: #ED4A9F}
.cBlue{background-color: #0092E7}
.cCyan{background-color: #01A6A2}
.cYellow{background-color: #DCA112}
.cRed{background-color: #B7103B}
.cPurple{background-color: #792F7C}
.cBlack{background-color: #110F10}
.hide{display: none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
// div2 下的span（子/孙/..）
$("#div2 span").addClass("cRed");
});
$("#btn2").click(function(){
// div2下的所有子元素span （不包含孙子元素）
$("#div2 > span").addClass("cRed");
});
$("#btn3").click(function(){
// 选择 div2相邻的 下一个div (1.平级； 2.相邻)
$("#div2 + div").addClass("cRed");
});
$("#btn4").click(function(){
// 选择div2之后的所有平级的div
$("#div2 ~ div").addClass("cRed");
});
$("#btn5").click(function(){
// 选择div2的所有兄弟元素 （div2平级的之前、之后的所有div）
$("#div2").siblings("div").addClass("cRed");
});
});
</script>
</head>
<body>
<div>div1</div>
<div id="div2">div2
<span>div2-span1</span>
<span>div2-span2</span>
<a>
<span>div2-a-span3</span>
</a>
</div>
<span>span</span>
<div>div3</div>
<div>div4</div>
<br><br>
<hr>
<input type="button" id="btn1" value="选取id为div2的所有span后代元素">
<input type="button" id="btn2" value="选取id为div2的所有span子元素">
<input type="button" id="btn3" value="选取id为div2的下一个div兄弟元素">
<input type="button" id="btn4" value="选取id为div2之后的所有div兄弟元素">
<input type="button" id="btn5" value="选取id为div2的所有div兄弟元素">
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1298962.html
