與JQuery選擇DOM選擇的初學者指南

作為前端開發人員或設計師，您在日常項目中必須使用文檔對像模型 (DOM)。近年來，隨著 JavaScript 技術的改進，在 DOM 中選擇元素並應用動態功能已變得越來越普遍。因此，我們需要掌握使用 DOM 元素的知識，以避免衝突並優化性能。 jQuery 是最流行和最常用的 JavaScript 庫之一，它具有高級的 DOM 選擇和過濾功能。在本文中，我們將探討如何在 jQuery 的幫助下，通過考慮實際場景來過濾 DOM 元素。讓我們開始吧。

要點

• jQuery 是一個常用的 JavaScript 庫，它提供高級的 DOM 選擇和過濾功能。對於前端開發人員來說，深入了解 DOM 元素以避免衝突並優化性能至關重要。
• HTML 元素標籤、ID、類和數據屬性用於在 DOM 樹中選擇元素。 ID 是唯一標識符，類用於設置元素樣式以及用於過濾和選擇元素，數據屬性為元素定義私有數據。
• jQuery 允許選擇唯一元素、使用類選擇多個元素、使用多個類選擇元素、使用數據屬性選擇元素以及使用多個數據屬性選擇元素。防止具有相同 ID 的元素重複以及區分用於選擇和功能目的的樣式類至關重要。

ID、類和數據屬性簡介

通常，我們使用 HTML 元素標籤、ID、類和數據屬性來選擇 DOM 樹中的元素。大多數開發人員都熟悉使用 HTML 標籤進行選擇。但是，新手開發人員往往會誤用 ID、類和數據屬性，而不知道它們在各種場景中的確切含義和必要性。因此，在我們進入實際場景之前，讓我們先確定這三個選項中的每一個。

• ID – 用作文檔中的唯一標識符。因此，我們不應為多個元素使用相同的 ID，即使這是可能的。通常，我們使用元素 ID 來使用 jQuery 選擇元素。
• 類 – 用於使用 CSS 設置元素樣式。但是，當無法使用 ID 過濾元素時，類通常用於過濾和選擇元素。
• 數據屬性 – 用於為元素定義私有數據。我們可以為單個元素設置多個數據屬性，以存儲前端功能所需的所有數據。

使用 ID、類和數據屬性的實際場景

在本節中，我們將介紹使用這些過濾和選擇選項的一些常見用例，以及每個選項如何適應不同的場景。實際上，在不同場景中使用這些選項的可能性是無限的。因此，我們將考慮本文的範圍，關注最重要的內容。

場景 1 – 選擇文檔中的唯一元素

這是我們用於選擇任何元素的最基本和最常見的場景。選擇表單值進行驗證可以被認為是此類場景的一個很好的例子。我們使用 HTML 元素 ID 來選擇元素，如下面的 jQuery 代碼所示：

$("#elementID").val();

使用此方法時，重要的是要防止具有相同 ID 的元素重複。

場景 2 – 使用類選擇多個元素

通常，當我們想要過濾文檔中的多個元素時，我們會使用類屬性。與 ID 不同，我們可以使用多個具有相同 CSS 類的元素。通常，這些類型的相似元素是通過循環生成的。假設我們有一個包含用戶數據的記錄列表，如下面的 HTML 代碼所示。我們有一個“刪除”按鈕，用戶可以通過單擊該按鈕來刪除記錄。

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

現在，我們有多個類似元素的實例，因此我們不能使用 ID 來過濾確切的記錄。讓我們看看如何使用給定的 CSS 類來過濾行。

var rows = $(".user_data");

在前面的代碼中，rows 變量將包含所有三個具有類 user_data 的行。現在讓我們看看如何使用類選擇器在單擊按鈕時刪除行。

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

在此技術中，我們遍歷所有匹配的元素，並使用指向被單擊按鈕的 $(this) 對像在當前項目上執行函數。這是處理多個元素最廣泛使用的方法。現在讓我們看看新手開發人員在此類場景中的一些常見錯誤。

• 使用 ID 而不是類

有很多情況下，開發人員在循環中使用相同的 ID 來生成類似的 HTML 代碼，而不是類。一旦使用了相同的 ID，它只會影響第一個元素。其餘元素將無法按預期工作。因此，請確保在循環中創建動態 ID，並使用類名進行元素選擇。

• 使用類名而不是 $(this) 對象

許多新手開發人員犯的另一個錯誤是缺乏對上下文和當前對象使用的了解。遍歷多個元素時，我們可以使用 jQuery $(this) 來引用當前元素。許多開發人員在循環中使用類名，因此無法獲得預期的結果。因此，切勿在循環中使用類名，如下面的代碼所示：

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

這是選擇元素的一種廣泛使用的方法，因此了解如何有效地使用此方法非常重要。 CSS 類用於樣式目的。但在這裡，我們將其用於元素選擇目的。將 CSS 類用於選擇目的並不是最好的方法，有時它可能會導致佈局衝突。例如，在與團隊合作時，開發人員可能會僅使用 CSS 類來為 jQuery 提供動態功能。設計師可能會注意到這些類不用於樣式目的，因此有可能在不知道其重要性的情況下刪除它們。因此，最好為僅用於各種功能而不是樣式目的的 CSS 類使用一些前綴。

場景 3 – 使用多個類選擇元素

有些應用程序和網站嚴重依賴 JavaScript 並提供高度動態的客戶端功能。在這種情況下，我們可能會使用大量的類和 ID 來進行過濾、選擇和應用功能。假設我們有一個用戶記錄列表，需要根據角色在客戶端進行過濾。我們可以將角色定義為 CSS 類以簡化過濾過程。考慮以下代碼片段：

$("#elementID").val();

假設我們想要獲取同時具有開發人員和設計師角色的用戶。在這種情況下，我們可以使用多個 CSS 類，如下面的代碼所示：

<table>
  <tr><td>Mark</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>John</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
  <tr><td>Mike</td><td><button type='button' class='user_data' value='Delete'></button></td></tr>
</table>

我們可以使用任意數量的類，一個接一個地匹配同一元素上的多個類。確保類之間不要使用空格，因為它會改變選擇的意思和結果。考慮具有空格的同一代碼行：

var rows = $(".user_data");

現在，代碼將查找具有名為開發人員的父元素的設計師。因此，請習慣這兩種實現之間的區別，並明智地使用它。類似地，我們可以在使用此技術時混合 ID 和類。

場景 4 – 使用數據屬性選擇元素

HTML5 引入了自定義數據屬性，我們可以在其中定義與 HTML 元素相關的數據。這些數據屬性具有一組特定的約定，並被認為是私有數據。因此，現在我們可以使用數據屬性存儲與任何元素相關的數據，而不是向服務器發出多個 AJAX 請求。讓我們看看如何使用自定義數據屬性而不是 CSS 類來實現場景 2。

$(".user_data").click(function(){
  $(this).parent().parent().remove();
});

如您所見，我們可以使用數據屬性而不是 CSS 類來獲得相同的結果。 jQuery 提供高級屬性選擇器來支持自定義數據屬性。因此，讓我們考慮一下自定義屬性的一些高級選擇器選項。假設我們將用戶電子郵件存儲為自定義屬性，並且我們希望根據電子郵件中的某些條件選擇用戶。考慮以下使用數據屬性的代碼片段：

$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});

選擇電子郵件中包含“gmail”的元素

<ul>
  <li class='role-developer role-designer'>Mark</li>
  <li class='role-developer'>Simon</li>
  <li class='role-developer role-manager'>Kevin</li>
</ul>

選擇具有“uk”電子郵件地址的元素

var selected_users = $('.role-developer.role-designer');

選擇沒有“@”符號的無效電子郵件的元素

var selected_users = $('.role-developer .role-designer');

如您所見，數據屬性在處理與 HTML 元素相關的數據方面功能強大，並且 jQuery 通過其內置函數提供了全面的支持。您可以在 https://www.php.cn/link/2705e8fde87cd2883e9fc1f00335685f 找到完整的屬性選擇器參考。

場景 5 – 使用多個數據屬性選擇元素

這類似於我們在場景 3 中討論的內容，並具有一些擴展功能。在高級場景中，使用 CSS 類來處理多個數據值可能會很複雜。因此，讓我們看看如何使用多個數據屬性進行選擇。

$("#elementID").val();

在這裡，我們可以檢查多個數據屬性的存在以及通過部分搜索值進行選擇。現在您應該能夠理解 CSS 類和數據屬性在元素選擇方面的區別。數據屬性提供了一種組織處理元素數據的方法。此處討論的技術可以與其他 jQuery 過濾器結合使用，以滿足任何類型的高級情況，並且明智地使用它們非常重要。

總結

本文旨在幫助初學者了解元素 ID、類和自定義數據屬性的基礎知識。我們藉助 jQuery 內置函數，通過實際場景討論了它們中的每一個。在此過程中，我們還確定了一些新手開發人員的錯誤。讓我們回顧一下本文中討論的要點，以建立一個有用的 DOM 選擇指南：

• 盡可能使用 ID 進行元素選擇，因為它提供了文檔中的唯一標識符。
• 在多個元素場景中使用類或數據屬性，而不是依賴元素 ID。
• 確保區分樣式類和用於選擇和功能目的的類。
• 在復雜場景中使用數據屬性，因為類並非旨在提供有關元素的數據。

希望本文能為您提供良好的元素選擇入門。如果您有更好的指南和元素選擇技術，請隨時在評論部分分享。

關於 jQuery DOM 選擇的常見問題解答 (FAQ)

什麼是 jQuery 中的文檔對像模型 (DOM)？

jQuery 中的文檔對像模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它表示文檔的結構，並提供了一種操作內容和結構的方法。使用 DOM，程序員可以創建、導航和修改 HTML 和 XML 文檔中的元素和內容。

jQuery 如何簡化 DOM 操作？

jQuery 通過提供易於使用的 API 來處理事件、創建動畫和開發 Ajax 應用程序來簡化 DOM 操作。 jQuery 還提供了一個簡單的語法來導航和操作 DOM。它抽象了處理原始 JavaScript 和 DOM API 的許多複雜性，使開發人員更容易使用 HTML 文檔。

jQuery 中有哪些不同類型的 DOM 選擇器？

jQuery 中有幾種類型的 DOM 選擇器，包括元素選擇器、ID 選擇器、類選擇器、屬性選擇器和偽類選擇器。元素選擇器根據其元素名稱選擇元素。 ID 選擇器根據其 ID 屬性選擇元素。類選擇器根據其類屬性選擇元素。屬性選擇器根據屬性或屬性值選擇元素。偽類選擇器根據特定狀態選擇元素。

如何在 jQuery 中按其 ID 選擇元素？

要在 jQuery 中按其 ID 選擇元素，請使用井號 (#) 後跟元素的 ID。例如，要選擇 ID 為“myElement”的元素，您將使用 $(“#myElement”)。

如何在 jQuery 中按其類選擇元素？

要在 jQuery 中按其類選擇元素，請使用點符號 (.) 後跟類名。例如，要選擇具有類“myClass”的元素，您將使用 $(“.myClass”)。

什麼是 jQuery 中的屬性選擇器以及它們是如何工作的？

jQuery 中的屬性選擇器根據其屬性或屬性值選擇元素。它們使用方括號 ([]) 編寫。例如，要選擇所有具有“data-example”屬性的元素，您將使用 $(“[data-example]”)。

如何在 jQuery 中選擇多個元素？

您可以通過用逗號分隔每個選擇器來在 jQuery 中選擇多個元素。例如，要選擇所有具有類“myClass”的元素和所有具有 ID“myID”的元素，您將使用 $(“.myClass, #myID”)。

什麼是 jQuery 中的偽類選擇器？

jQuery 中的偽類選擇器根據特定狀態選擇元素。例如，“:checked”偽類選擇器將選擇所有選中的複選框或單選按鈕。

如何使用 jQuery 操作 DOM？

jQuery 提供了幾種操作 DOM 的方法，例如 .append()、.prepend()、.after()、.before()、.remove() 和 .empty()。這些方法允許您在 DOM 中插入、替換和刪除元素。

jQuery 如何處理 DOM 中的事件？

jQuery 提供了處理DOM 中事件的方法，例如.click()、.dblclick()、.hover()、.mousedown()、.mouseup()、.mousemove()、.mouseout()、. mouseover()、.mouseenter()、.mouseleave()、.change()、.focus()、.blur()、.keydown()、.keypress()、.keyup()、.submit()、. load()、.resize()、.scroll() 和.unload()。這些方法允許您定義在 DOM 中元素上發生這些事件時會發生什麼。

以上是與JQuery選擇DOM選擇的初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！