介绍jQuery的内容选择器，包括:contains、:has、:empty、:parent等内容过滤选择器的用法。
内容选择器根据元素的内容来选择元素。
$(":contains('Hello')") // 选择所有包含文本 "Hello" 的元素
$(":empty") // 选择所有不包含子元素或文本的元素
$("div:has(p)") // 选择所有包含 p 元素的 div 元素
$(":parent") // 选择所有包含子元素或文本的元素
<!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;
}
.content-box {
padding: 15px;
margin: 10px 0;
background-color: white;
border-radius: 5px;
border: 1px solid #ddd;
}
.empty-box {
padding: 15px;
margin: 10px 0;
background-color: #fff3cd;
border-radius: 5px;
border: 1px dashed #ffc107;
}
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>:contains 选择器</h3>
<div class="content-box">
<p>这是一个包含 jQuery 的段落</p>
</div>
<div class="content-box">
<p>这是一个普通的段落</p>
</div>
<div class="content-box">
<p>jQuery 是一个 JavaScript 库</p>
</div>
<div style="margin-top: 20px;">
<button onclick="testContains()">:contains('jQuery')</button>
<button onclick="resetContains()">重置</button>
</div>
<div id="result1" class="info-box"></div>
</div>
<div class="demo-section">
<h3>:empty 和 :parent 选择器</h3>
<div class="content-box">
<p>包含内容的 div</p>
</div>
<div class="empty-box"></div>
<div class="content-box">
<span>包含 span 的 div</span>
</div>
<div class="empty-box"></div>
<div style="margin-top: 20px;">
<button onclick="testEmpty()">:empty</button>
<button onclick="testParent()">:parent</button>
<button onclick="resetEmpty()">重置</button>
</div>
<div id="result2" class="info-box"></div>
</div>
<div class="demo-section">
<h3>:has 选择器</h3>
<div class="content-box">
<p>包含 p 元素的 div</p>
</div>
<div class="content-box">
<span>不包含 p 元素的 div</span>
</div>
<div class="content-box">
<div>
<p>嵌套在 div 中的 p 元素</p>
</div>
</div>
<div class="content-box">
<span>只有 span 的 div</span>
</div>
<div style="margin-top: 20px;">
<button onclick="testHas()">:has(p)</button>
<button onclick="resetHas()">重置</button>
</div>
<div id="result3" class="info-box"></div>
</div>
</div>
<script>
function showMessage(id, msg) {
$("#" + id).text(msg);
}
function testContains() {
var count = $(":contains('jQuery')").length;
showMessage("result1", ":contains('jQuery') 选择器：选择了 " + count + " 个包含 'jQuery' 文本的元素");
$(":contains('jQuery')").css("background-color", "#d4edda");
}
function resetContains() {
$(".content-box").css("background-color", "white");
$("#result1").empty();
}
function testEmpty() {
var count = $(":empty").length;
showMessage("result2", ":empty 选择器：选择了 " + count + " 个空元素");
$(":empty").css("background-color", "#f8d7da");
}
function testParent() {
var count = $(":parent").length;
showMessage("result2", ":parent 选择器：选择了 " + count + " 个非空元素");
$(":parent").css("border", "2px solid #28a745");
}
function resetEmpty() {
$(".content-box").css("background-color", "white");
$(".empty-box").css("background-color", "#fff3cd");
$(":parent").css("border", "1px solid #ddd");
$("#result2").empty();
}
function testHas() {
var count = $("div:has(p)").length;
showMessage("result3", "div:has(p) 选择器：选择了 " + count + " 个包含 p 元素的 div");
$("div:has(p)").css("background-color", "#d1ecf1");
}
function resetHas() {
$(".content-box").css("background-color", "white");
$("#result3").empty();
}
</script>
</body>
</html>
内容选择器根据元素的内容来选择元素，包括文本内容、子元素等。