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>