介绍jQuery的层次选择器，包括后代选择器、子元素选择器、相邻兄弟选择器和一般兄弟选择器的用法。
层次选择器通过元素之间的层次关系来选择元素。
选择指定元素的所有后代元素。
$("div p") // 选择 div 元素的所有后代 p 元素
选择指定元素的直接子元素。
$("div > p") // 选择 div 元素的所有直接子元素 p
选择指定元素之后的下一个兄弟元素。
$("div + p") // 选择 div 元素之后的下一个 p 元素
选择指定元素之后的所有兄弟元素。
$("div ~ p") // 选择 div 元素之后的所有 p 兄弟元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器示例</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.demo-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
#container {
padding: 20px;
background-color: white;
border-radius: 5px;
border: 2px solid #3498db;
}
.child {
padding: 15px;
margin: 10px 0;
background-color: #ecf0f1;
border-radius: 5px;
}
.grandchild {
padding: 10px;
margin: 5px 0;
background-color: #bdc3c7;
border-radius: 3px;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.info-box {
padding: 15px;
margin-top: 15px;
background-color: white;
border-radius: 5px;
border: 2px solid #3498db;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 层次选择器</h1>
<div class="demo-section">
<h3>层次结构</h3>
<div id="container">
<div class="child">直接子元素 1</div>
<div class="child">直接子元素 2
<div class="grandchild">后代元素 1</div>
<div class="grandchild">后代元素 2</div>
</div>
<p class="child">直接子元素 3</p>
<p>直接子元素 4</p>
<span>直接子元素 5</span>
</div>
<div style="margin-top: 20px;">
<button onclick="testDescendant()">后代选择器</button>
<button onclick="testChild()">子元素选择器</button>
<button onclick="testNext()">相邻兄弟</button>
<button onclick="testSiblings()">所有兄弟</button>
<button onclick="resetAll()">重置</button>
</div>
<div id="result" class="info-box"></div>
</div>
</div>
<script>
function showMessage(msg) {
$("#result").text(msg);
}
function testDescendant() {
var count = $("#container div").length;
showMessage("后代选择器 $('#container div')：选择了 " + count + " 个 div 元素");
$("#container div").css("background-color", "#f39c12");
}
function testChild() {
var count = $("#container > div").length;
showMessage("子元素选择器 $('#container > div')：选择了 " + count + " 个直接子 div 元素");
$("#container > div").css("background-color", "#9b59b6");
}
function testNext() {
var text = $("#container > div:first + p").text();
showMessage("相邻兄弟选择器 $('#container > div:first + p')：" + text);
$("#container > div:first + p").css("background-color", "#1abc9c");
}
function testSiblings() {
var count = $("#container > div:first ~ p").length;
showMessage("一般兄弟选择器 $('#container > div:first ~ p')：选择了 " + count + " 个 p 元素");
$("#container > div:first ~ p").css("background-color", "#e74c3c");
}
function resetAll() {
$(".child").css("background-color", "#ecf0f1");
$(".grandchild").css("background-color", "#bdc3c7");
$("#result").empty();
}
</script>
</body>
</html>
层次选择器通过元素之间的层次关系来选择元素，包括后代、子元素、相邻兄弟和一般兄弟选择器。