介绍jQuery的过滤选择器，包括基本过滤选择器、子元素过滤选择器、内容过滤选择器、可见性过滤选择器和属性过滤选择器。
过滤选择器通过特定的过滤条件来选择元素。
$("p:first") // 选择第一个 p 元素
$("p:last") // 选择最后一个 p 元素
$("tr:even") // 选择偶数位置的 tr 元素（索引 0, 2, 4...）
$("tr:odd") // 选择奇数位置的 tr 元素（索引 1, 3, 5...）
$("li:eq(2)") // 选择第三个 li 元素（索引从 0 开始）
$("li:gt(2)") // 选择索引大于 2 的 li 元素
$("li:lt(2)") // 选择索引小于 2 的 li 元素
$("p:not(.test)") // 选择所有不包含 class="test" 的 p 元素
$(":header") // 选择所有标题元素（h1, h2, h3...）
$("ul li:first-child") // 选择每个 ul 元素的第一个 li 元素
$("ul li:last-child") // 选择每个 ul 元素的最后一个 li 元素
$("ul li:nth-child(2)") // 选择每个 ul 元素的第二个 li 元素
$(":contains('Hello')") // 选择所有包含文本 "Hello" 的元素
$(":empty") // 选择所有不包含子元素或文本的元素
$("div:has(p)") // 选择所有包含 p 元素的 div 元素
$(":parent") // 选择所有包含子元素或文本的元素
$(":hidden") // 选择所有隐藏的元素
$(":visible") // 选择所有可见的元素
<!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;
}
#list {
list-style: none;
padding: 0;
}
#list li {
padding: 10px;
margin: 5px 0;
background-color: white;
border-radius: 5px;
border: 1px solid #ddd;
}
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>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
<li>项目 4</li>
<li>项目 5</li>
<li>项目 6</li>
</ul>
<div style="margin-top: 20px;">
<button onclick="testFirst()">:first</button>
<button onclick="testLast()">:last</button>
<button onclick="testEven()">:even</button>
<button onclick="testOdd()">:odd</button>
<button onclick="testEq()">:eq(2)</button>
<button onclick="testGt()">:gt(2)</button>
<button onclick="testLt()">:lt(2)</button>
<button onclick="resetList()">重置</button>
</div>
<div id="result" class="info-box"></div>
</div>
<div class="demo-section">
<h3>内容过滤选择器</h3>
<div>
<p>包含 jQuery 的段落</p>
<p>不包含关键字的段落</p>
<p>这是 jQuery 教程</p>
<div>空的 div</div>
</div>
<div style="margin-top: 20px;">
<button onclick="testContains()">:contains</button>
<button onclick="testEmpty()">:empty</button>
<button onclick="testParent()">:parent</button>
</div>
</div>
</div>
<script>
function showMessage(msg) {
$("#result").text(msg);
}
function testFirst() {
$("#list li:first").css("background-color", "#e74c3c");
showMessage(":first 选择第一个元素");
}
function testLast() {
$("#list li:last").css("background-color", "#3498db");
showMessage(":last 选择最后一个元素");
}
function testEven() {
$("#list li:even").css("background-color", "#f39c12");
showMessage(":even 选择偶数位置的元素（索引 0, 2, 4...）");
}
function testOdd() {
$("#list li:odd").css("background-color", "#9b59b6");
showMessage(":odd 选择奇数位置的元素（索引 1, 3, 5...）");
}
function testEq() {
$("#list li:eq(2)").css("background-color", "#1abc9c");
showMessage(":eq(2) 选择索引为 2 的元素（第三个元素）");
}
function testGt() {
$("#list li:gt(2)").css("background-color", "#e67e22");
showMessage(":gt(2) 选择索引大于 2 的元素");
}
function testLt() {
$("#list li:lt(2)").css("background-color", "#16a085");
showMessage(":lt(2) 选择索引小于 2 的元素");
}
function resetList() {
$("#list li").css("background-color", "white");
$("#result").empty();
}
function testContains() {
$("p:contains('jQuery')").css("background-color", "#d4edda");
alert(":contains('jQuery') 选择包含 'jQuery' 文本的元素");
}
function testEmpty() {
$(":empty").css("background-color", "#fff3cd");
alert(":empty 选择不包含子元素或文本的元素");
}
function testParent() {
$(":parent").css("border", "2px solid #007bff");
alert(":parent 选择包含子元素或文本的元素");
}
</script>
</body>
</html>
过滤选择器通过特定的过滤条件来选择元素，包括基本过滤、子元素过滤、内容过滤和可见性过滤选择器。