jQuery - 選擇器

jQuery 最重要的功能是由其選擇器提供的。本教程將透過簡單的示例解釋 jQuery 選擇器，涵蓋所有三個標準選擇器。

jQuery 選擇器

jQuery 選擇器用於從 HTML 文件中選擇 HTML 元素。假設給定一個 HTML 文件，您需要從中選擇所有 <div>。這時 jQuery 選擇器將有所幫助。

jQuery 選擇器可以基於以下條件查詢 HTML 元素（即選擇 HTML 元素）：

HTML 元素名稱
元素 ID
元素類
元素屬性名稱
元素屬性值
更多條件

jQuery 庫利用層疊樣式表 (CSS) 選擇器的強大功能，使我們能夠快速輕鬆地訪問文件物件模型 (DOM) 中的元素或元素組。

jQuery 選擇器在 HTML 文件上的工作方式與SQL SELECT 語句在資料庫上選擇記錄的方式非常相似。

jQuery 選擇器語法

以下是選擇 HTML 元素的 jQuery 選擇器語法：

$(document).ready(function(){
    $(selector)
});

jQuery 選擇器以美元符號$開頭，然後我們將選擇器放在括號()內。這裡$()稱為工廠函式，在選擇給定文件中的元素時，它使用以下三個構建塊：

選擇器名稱	描述
元素選擇器	表示 DOM 中可用的 HTML 元素名稱。例如，$('p') 選擇文件中的所有段落 <p>。
#id 選擇器	表示 DOM 中具有給定 ID 的 HTML 元素。例如，$('#some-id') 選擇文件中具有some-id作為元素 ID 的單個元素。
.class 選擇器	表示 DOM 中具有給定類的 HTML 元素。例如，$('.some-class') 選擇文件中所有具有some-class類的元素。

所有上述選擇器都可以單獨使用，也可以與其他選擇器結合使用。所有 jQuery 選擇器都基於相同的原理，只是有一些調整。

元素選擇器

jQuery 元素選擇器根據元素名稱選擇 HTML 元素。以下是元素選擇器的簡單語法：

$(document).ready(function(){
    $("Html Element Name")
});

請注意，使用元素名稱作為 jQuery 選擇器時，我們不提供帶角括號的元素。例如，我們只提供普通的p，而不是<p>。

示例

以下是一個示例，用於從 HTML 文件中選擇所有<p>元素，然後更改這些段落的背景顏色。在這個示例生成的輸出中，您將看不到任何<p>元素。您也可以更改程式碼以使用不同的元素名稱作為選擇器，然後單擊圖示來驗證結果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("p").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery element Selector</h1>

   <p>This is p tag</p>
   <span>This is span tag</span>
   <div>This is div tag</div>
</body>
</html>

#id 選擇器

jQuery #id 選擇器根據元素的id屬性選擇 HTML 元素。以下是#id選擇器的簡單語法：

$(document).ready(function(){
    $("#id of the element")
});

要使用 jQuery #id 選擇器，您需要確保id屬性應唯一分配給所有 DOM 元素。如果您的元素具有相同的 id，則不會產生正確的結果。

示例

以下是一個示例，用於選擇id為foo的<p>元素，並更改這些段落的背景顏色。您也可以更改程式碼以使用不同的元素 id 屬性作為選擇器，然後單擊圖示來驗證結果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery #id Selector</h1>

   <p id="foo">This is foo p tag</p>
   <span id="bar">This is bar span tag</span>
   <div id="bill">This is bill div tag</div>
</body>
</html>

.class 選擇器

jQuery .class 選擇器根據元素的class屬性選擇 HTML 元素。以下是.class選擇器的簡單語法：

$(document).ready(function(){
    $(".class of the element")
});

因為類可以分配給 HTML 文件中的多個 HTML 元素，所以使用單個.class選擇器語句找出多個元素是完全可能的。

示例

以下是一個示例，用於選擇所有class為foo的元素，並更改這些元素的背景顏色。您也可以更改程式碼以使用不同的元素類名作為選擇器，然後單擊圖示來驗證結果。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $(".foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery .class Selector</h1>

   <p class="foo">This is foo p tag</p>
   <p class="foo">This is one more foo p tag</p>
   <span class="bar">This is bar span tag</span>
   <div class="bill">This is bill div tag</div>
</body>
</html>

到目前為止，我們只介紹了三個標準的 jQuery 選擇器。有關所有這些 jQuery 選擇器的完整詳細資訊，您可以訪問jQuery 選擇器參考。

列印頁面