jQuery 选择器

Created: October-14, 2018

在本教程中，你将学习如何使用 jQuery 选择 HTML 元素。

使用 jQuery 选择元素

JavaScript 最常用于获取或修改页面上 HTML 元素的内容或值，以及应用某些效果，如 show，hide，animations 等。但是，在你执行任何操作之前，你需要查找或选择目标 HTML 元素。

通过典型的 JavaScript 方法选择元素可能会非常痛苦，但 jQuery 在这里就像一个魔术。使 DOM 元素选择简单易行的能力是 jQuery 最强大的功能之一。

提示： jQuery 几乎支持最新 CSS3 规范中定义的所有选择器，并且它有自己的自定义选择器。这些自定义选择器极大地增强了在页面上选择 HTML 元素的功能。

在以下部分中，你将看到一些在页面上选择元素并使用 jQuery 对它们执行某些操作的常用方法。

按 ID 选择元素

你可以使用 ID 选择器在页面上选择具有唯一 ID 的单个元素。

例如，当文档准备好被操作时，以下 jQuery 代码将选择并突出显示具有 ID 属性 id="mark" 的元素。

<script type="text/javascript">
$(document).ready(function(){
    // Highlight element with id mark
    $("#mark").css("background", "yellow");
});
</script>

在上面的示例中，$(document).ready() 事件用于使用 jQuery 安全地操作页面。此事件中包含的代码仅在页面 DOM 准备就绪后才会运行。我们将在下一章中详细了解这些事件。

按类名选择元素

类选择器可用于选择具有特定类的元素。

例如，当文档准备好时，以下 jQuery 代码将选择并突出显示具有 class 属性 class="mark" 的元素。

<script type="text/javascript">
$(document).ready(function(){
    // Highlight elements with class mark
    $(".mark").css("background", "yellow");
});
</script>

按名称选择元素

元素选择器可用于根据元素名称选择元素。

例如，以下 jQuery 代码将选择并突出显示所有段落，即文档准备好后的 <p> 元素。

<script type="text/javascript">
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "yellow");
});
</script>

按属性选择元素

你可以使用属性选择器按其 HTML 属性之一选择元素，例如链接的 target 属性或输入的 type 属性等。

例如，以下 jQuery 代码将选择并突出显示所有文本输入，即文档准备好时 type="text" 的 <input> 元素。

<script type="text/javascript">
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "yellow");
});
</script>

按复合 CSS 选择器选择元素

你还可以组合 CSS 选择器，使你的选择更加精确。

例如，你可以将类选择器与元素选择器组合在一起，以查找具有特定类型和类的文档中的元素。

<script type="text/javascript">
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>

jQuery 自定义选择器

除了 CSS 定义的选择器之外，jQuery 还提供了自己的自定义选择器，以进一步增强在页面上选择元素的功能。

<script type="text/javascript">
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>