jQuery选择器：解锁HTML元素操作的强大工具
jQuery 选择器详解
jQuery 选择器允许你以非常灵活的方式选择 HTML 元素，并对它们进行操作。以下是一些基本示例，展示了如何使用 jQuery 选择器来操作 HTML 元素。
1. 选择元素
假设我们有以下 HTML 结构：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 选择器示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">这是一个 div 元素。</div>
<p class="myClass">这是一个 p 元素。</p>
<button>点击我</button>
</body>
</html>
2. 使用 jQuery 选择器
选择 ID
$(document).ready(function(){
$("button").click(function(){
$("#myDiv").hide(); // 隐藏 id 为 "myDiv" 的元素
});
});
选择类
$(document).ready(function(){
$("button").click(function(){
$(".myClass").hide(); // 隐藏所有 class 为 "myClass" 的元素
});
});
选择元素
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); // 隐藏所有的 <p> 元素
});
});
选择属性
$(document).ready(function(){
$("button").click(function(){
$("[type='text']").val('Hello World!'); // 选择所有 type="text" 的 input 元素，并设置其值为 "Hello World!"
});
});
3. 组合选择器
你也可以组合使用不同的选择器，例如选择所有 <p> 元素和所有带有 class="myClass" 的元素：
$(document).ready(function(){
$("button").click(function(){
$("p, .myClass").hide(); // 同时隐藏 <p> 元素和 class 为 "myClass" 的元素
});
});
4. 过滤选择器
jQuery 提供了一系列过滤选择器，它们允许你根据特定的条件选择元素。
选择第一个元素
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide(); // 隐藏第一个 <p> 元素
});
});
选择最后一个元素
$(document).ready(function(){
$("button").click(function(){
$("p:last").hide(); // 隐藏最后一个 <p> 元素
});
});
选择偶数索引的元素
$(document).ready(function(){
$("button").click(function(){
$("p:even").hide(); // 隐藏索引为偶数的 <p> 元素（从 0 开始计数）
});
});
选择奇数索引的元素
$(document).ready(function(){
$("button").click(function(){
$("p:odd").hide(); // 隐藏索引为奇数的 <p> 元素（从 0 开始计数）
});
});
5. 表单选择器
jQuery 也提供了一些专门用于选择表单元素的选择器。
选择所有 input 元素
$(document).ready(function(){
$("button").click(function(){
$(":input").val("Hello World!"); // 设置所有 input 元素的值为 "Hello World!"
});
});
选择所有选中的复选框
$(document).ready(function(){
$("button").click(function(){
$("input:checked").each(function(){
alert($(this).val()); // 弹出所有选中的复选框的值
});
});
});
选择所有选中的选项
$(document).ready(function(){
$("button").click(function(){
$("select option:selected").each(function(){
alert($(this).text()); // 弹出所有选中的选项的文本
});
});
});
6. 子元素选择器
jQuery 提供了选择特定父元素下的子元素的选择器。
选择直接子元素
$(document).ready(function(){
$("button").click(function(){
$("div > p").hide(); // 隐藏所有 div 元素的直接子元素 p
});
});
选择所有后代元素
$(document).ready(function(){
$("button").click(function(){
$("div p").hide(); // 隐藏所有 div 元素内的 p 元素（不仅仅是直接子元素）
});
});
7. 兄弟元素选择器
jQuery 也允许你选择某个元素之后的兄弟元素。
选择下一个兄弟元素
$(document).ready(function(){
$("button").click(function(){
$("p + p").hide(); // 隐藏所有紧跟在另一个 p 元素后的 p 元素
});
});
选择所有后面的兄弟元素
$(document).ready(function(){
$("button").click(function(){
$("p ~ p").hide(); // 隐藏所有在某个 p 元素之后的所有 p 元素
});
});
8. 过滤方法
除了选择器，jQuery 还提供了一系列过滤方法，允许你更灵活地选择元素。
过滤方法示例
$(document).ready(function(){
$("button").click(function(){
$("p").filter(function(index){
return index % 2 === 0; // 过滤出索引为偶数的 p 元素
}).hide();
});
});
9. 表单过滤选择器
jQuery 还有一些专门用于表单的过滤选择器。
选择启用的元素
$(document).ready(function(){
$("button").click(function(){
$("input:enabled").val("Enabled!"); // 设置所有启用的 input 元素的值为 "Enabled!"
});
});
选择禁用的元素
$(document).ready(function(){
$("button").click(function(){
$("input:disabled").val("Disabled!"); // 设置所有禁用的 input 元素的值为 "Disabled!"
});
});
通过这些示例，你可以看到 jQuery 选择器和过滤方法的强大功能，它们允许你以非常灵活和高效的方式选择和操作 HTML 元素。无论是简单的选择器还是复杂的过滤条件，jQuery 都能满足你的需求。