详细介绍jQuery的各种选择器，包括基本选择器、层次选择器、过滤选择器、表单选择器、属性选择器和内容选择器。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
$(selector).action()
$("p") // 选择所有 <p> 元素
$("#test") // 选择 id="test" 的元素
$(".test") // 选择所有 class="test" 的元素
$("*") // 选择所有元素
$("p, .test") // 选择所有 p 元素和 class="test" 的元素
$("div p") // 选择 div 元素的所有后代 p 元素
$("div > p") // 选择 div 元素的所有直接子元素 p
$("div + p") // 选择 div 元素之后的下一个 p 元素
$("div ~ p") // 选择 div 元素之后的所有 p 兄弟元素
$("p:first") // 选择第一个 p 元素
$("p:last") // 选择最后一个 p 元素
$("tr:even") // 选择偶数位置的 tr 元素
$("tr:odd") // 选择奇数位置的 tr 元素
$("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...）
$(":animated") // 选择当前正在执行动画的所有元素
$(":focus") // 选择当前获得焦点的元素
$(":root") // 选择文档的根元素
$(":target") // 选择由文档 URI 的格式化识别码表示的目标元素
$(":input") // 选择所有 input, textarea, select, button 元素
$(":text") // 选择所有 type="text" 的 input 元素
$(":password") // 选择所有 type="password" 的 input 元素
$(":radio") // 选择所有 type="radio" 的 input 元素
$(":checkbox") // 选择所有 type="checkbox" 的 input 元素
$(":submit") // 选择所有 type="submit" 的 input 元素
$(":reset") // 选择所有 type="reset" 的 input 元素
$(":button") // 选择所有 type="button" 的 input 元素和 button 元素
$(":image") // 选择所有 type="image" 的 input 元素
$(":file") // 选择所有 type="file" 的 input 元素
$(":enabled") // 选择所有启用的元素
$(":disabled") // 选择所有禁用的元素
$(":selected") // 选择所有被选中的 option 元素
$(":checked") // 选择所有被选中的 checkbox 或 radio 元素
$("[href]") // 选择所有带有 href 属性的元素
$("[href='#']") // 选择所有 href 属性值等于 "#" 的元素
$("[href!='#']") // 选择所有 href 属性值不等于 "#" 的元素
$("[href^='https']") // 选择所有 href 属性值以 "https" 开头的元素
$("[href$='.pdf']") // 选择所有 href 属性值以 ".pdf" 结尾的元素
$("[href*='example']") // 选择所有 href 属性值包含 "example" 的元素
$("input[id][name$='man']") // 选择所有带有 id 属性且 name 属性值以 "man" 结尾的 input 元素
$(":contains('Hello')") // 选择所有包含文本 "Hello" 的元素
$(":empty") // 选择所有不包含子元素或文本的元素
$("div:has(p)") // 选择所有包含 p 元素的 div 元素
$(":parent") // 选择所有包含子元素或文本的元素
$(":hidden") // 选择所有隐藏的元素
$(":visible") // 选择所有可见的元素
$("ul li:first-child") // 选择每个 ul 元素的第一个 li 元素
$("ul li:last-child") // 选择每个 ul 元素的最后一个 li 元素
$("ul li:nth-child(2)") // 选择每个 ul 元素的第二个 li 元素
$("p:first-of-type") // 选择每个 p 元素的第一个 p 元素
$("p:last-of-type") // 选择每个 p 元素的最后一个 p 元素
$("p:nth-of-type(2)") // 选择每个 p 元素的第二个 p 元素
$("ul li:only-child") // 选择每个 ul 元素的唯一子元素 li
$("p:only-of-type") // 选择每个 p 元素的唯一 p 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 选择器示例</title>
<style>
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.demo-section {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
border-radius: 8px;
margin: 10px;
display: inline-block;
}
.test {
background-color: #e74c3c;
}
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 class="box" id="box1">盒子 1</div>
<div class="box test" id="box2">盒子 2</div>
<div class="box" id="box3">盒子 3</div>
<button onclick="testElement()">元素选择器</button>
<button onclick="testId()">ID 选择器</button>
<button onclick="testClass()">类选择器</button>
<button onclick="testMultiple()">多元素选择器</button>
<button onclick="resetBoxes()">重置</button>
<div id="result" class="info-box"></div>
</div>
<div class="demo-section">
<h3>层次选择器</h3>
<div id="container">
<div>直接子元素 1</div>
<div>直接子元素 2
<div>后代元素 1</div>
<div>后代元素 2</div>
</div>
<p>直接子元素 3</p>
</div>
<button onclick="testDescendant()">后代选择器</button>
<button onclick="testChild()">子元素选择器</button>
<button onclick="testNext()">相邻兄弟</button>
<button onclick="testSiblings()">所有兄弟</button>
</div>
<div class="demo-section">
<h3>过滤选择器</h3>
<ul id="list">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
<li>项目 4</li>
<li>项目 5</li>
</ul>
<button onclick="testFirst()">:first</button>
<button onclick="testLast()">:last</button>
<button onclick="testEven()">:even</button>
<button onclick="testOdd()">:odd</button>
<button onclick="testEq()">:eq()</button>
</div>
<div class="demo-section">
<h3>表单选择器</h3>
<input type="text" placeholder="文本输入">
<input type="password" placeholder="密码输入">
<input type="checkbox"> 复选框
<input type="radio"> 单选框
<button>按钮</button>
<button onclick="testFormInputs()">测试表单</button>
</div>
</div>
<script>
function showMessage(msg) {
$("#result").text(msg);
}
function testElement() {
var count = $(".box").length;
showMessage("元素选择器：选择了 " + count + " 个 .box 元素");
}
function testId() {
var text = $("#box2").text();
showMessage("ID 选择器：" + text);
}
function testClass() {
var count = $(".test").length;
showMessage("类选择器：选择了 " + count + " 个 .test 元素");
}
function testMultiple() {
var count = $(".box, .test").length;
showMessage("多元素选择器：选择了 " + count + " 个元素");
}
function resetBoxes() {
$(".box").css("background-color", "#3498db");
$("#result").empty();
}
function testDescendant() {
var count = $("#container div").length;
alert("后代选择器：选择了 " + count + " 个 div 元素");
}
function testChild() {
var count = $("#container > div").length;
alert("子元素选择器：选择了 " + count + " 个直接子 div 元素");
}
function testNext() {
var text = $("#container > div:first + p").text();
alert("相邻兄弟：" + text);
}
function testSiblings() {
var count = $("#container > div:first ~ p").length;
alert("所有兄弟：选择了 " + count + " 个 p 元素");
}
function testFirst() {
$("#list li:first").css("color", "red");
}
function testLast() {
$("#list li:last").css("color", "blue");
}
function testEven() {
$("#list li:even").css("background-color", "#f0f0f0");
}
function testOdd() {
$("#list li:odd").css("background-color", "#e0e0e0");
}
function testEq() {
$("#list li:eq(2)").css("font-weight", "bold");
}
function testFormInputs() {
var textInputs = $("input[type='text']").length;
var passwordInputs = $("input[type='password']").length;
var checkboxes = $("input[type='checkbox']").length;
var radios = $("input[type='radio']").length;
var buttons = $("button").length;
alert("文本输入：" + textInputs + "\n" +
"密码输入：" + passwordInputs + "\n" +
"复选框：" + checkboxes + "\n" +
"单选框：" + radios + "\n" +
"按钮：" + buttons);
}
</script>
</body>
</html>
jQuery 选择器是 jQuery 的核心功能之一，掌握各种选择器的用法对于高效使用 jQuery 至关重要。选择器支持 CSS1-CSS3 的所有选择器，以及 jQuery 特有的选择器。