jQuery 选择器
在本教程中，您将学习如何使用 jQuery 选择 HTML 元素。
使用 jQuery 选择元素
JavaScript 最常用于获取或修改页面上 HTML 元素的内容或值，以及应用一些效果，如显示、隐藏、动画等。但是，在执行任何操作之前，您需要查找或选择 目标 HTML 元素。
通过典型的 JavaScript 方法选择元素可能非常痛苦，但 jQuery 在这里就像魔术一样工作。 使 DOM 元素选择变得简单和容易的能力是 jQuery 最强大的功能之一。
提示： jQuery 几乎支持最新 CSS3 规范中定义的所有 选择器，并且它有自己的自定义选择器。 这些自定义选择器极大地增强了在页面上选择 HTML 元素的能力。
在以下部分中，您将看到一些在页面上选择元素并使用 jQuery 对它们进行操作的常用方法。
按 ID 选择元素
您可以使用 ID 选择器选择页面上具有唯一 ID 的单个元素。
例如，当文档准备好被操作时，下面的 jQuery 代码将选择并突出显示具有 ID 属性 id="mark" 的元素。
<script>
$(document).ready(function(){
// 使用 id 标记突出显示元素
$("#mark").css("background", "yellow");
});
</script>在上面的示例中，$(document).ready() 是一个事件，用于使用 jQuery 安全地操作页面。 此事件中包含的代码仅在页面 DOM 准备好后才会运行。 我们将在下一章详细了解这些事件。
按类名选择元素
类选择器可用于选择具有特定类的元素。
例如，当文档准备好时，以下 jQuery 代码将选择并突出显示具有类属性 class="mark" 的元素。
<script>
$(document).ready(function(){
// 用类标记突出显示元素
$(".mark").css("background", "yellow");
});
</script>按名称选择元素
元素选择器可用于根据元素名称选择元素。
例如，下面的 jQuery 代码将选择并突出显示所有段落，即准备好文档的 <p> 元素。
<script>
$(document).ready(function(){
// 突出显示段落元素
$("p").css("background", "yellow");
});
</script>按属性选择元素
您可以使用属性选择器通过其 HTML 属性之一选择元素，例如链接的 target 属性或输入的 type 属性等。
例如，当文档准备好时，以下 jQuery 代码将选择并突出显示所有文本输入，即带有 type="text" 的 <input> 元素。
<script>
$(document).ready(function(){
// 突出显示段落元素
$('input[type="text"]').css("background", "yellow");
});
</script>通过复合 CSS 选择器选择元素
您还可以组合 CSS 选择器以使您的选择更加精确。
例如，您可以将类选择器与元素选择器结合使用，以在文档中查找具有特定类型和类的元素。
<script>
$(document).ready(function(){
// 仅突出显示带有类标记的段落元素
$("p.mark").css("background", "yellow");
// 仅突出显示带有 ID 标记的元素内的 span 元素
$("#mark span").css("background", "yellow");
// 突出显示 ul 元素内的 li 元素
$("ul li").css("background", "red");
// 仅在带有 id 标记的 ul 元素内突出显示 li 元素
$("ul#mark li").css("background", "yellow");
// 用类标记突出显示所有 ul 元素内的 li 元素
$("ul.mark li").css("background", "green");
// 突出显示所有带有目标空白的锚元素
$('a[target="_blank"]').css("background", "yellow");
});
</script>jQuery 自定义选择器
除了 CSS 定义的选择器 之外，jQuery 还提供了自己的自定义选择器，以进一步增强在页面上选择元素的能力。
<script>
$(document).ready(function(){
// 突出显示出现在奇数位置的表格行
$("tr:odd").css("background", "yellow");
// 突出显示出现在偶数位置的表格行
$("tr:even").css("background", "orange");
// 突出显示第一段元素
$("p:first").css("background", "red");
// 突出显示最后一段元素
$("p:last").css("background", "green");
// 突出显示表单内带有文本类型的所有输入元素
$("form :text").css("background", "purple");
// 突出显示表单内输入密码的所有输入元素
$("form :password").css("background", "blue");
// 突出显示表单内所有类型为 submit 的输入元素
$("form :submit").css("background", "violet");
});
</script>