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

要點(diǎn)

• jQuery 是一個常用的 JavaScript 庫，它提供高級的 DOM 選擇和過濾功能。對于前端開發(fā)人員來說，深入了解 DOM 元素以避免沖突并優(yōu)化性能至關(guān)重要。
• HTML 元素標(biāo)簽、ID、類和數(shù)據(jù)屬性用于在 DOM 樹中選擇元素。ID 是唯一標(biāo)識符，類用于設(shè)置元素樣式以及用于過濾和選擇元素，數(shù)據(jù)屬性為元素定義私有數(shù)據(jù)。
• jQuery 允許選擇唯一元素、使用類選擇多個元素、使用多個類選擇元素、使用數(shù)據(jù)屬性選擇元素以及使用多個數(shù)據(jù)屬性選擇元素。防止具有相同 ID 的元素重復(fù)以及區(qū)分用于選擇和功能目的的樣式類至關(guān)重要。

ID、類和數(shù)據(jù)屬性簡介

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

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

使用 ID、類和數(shù)據(jù)屬性的實(shí)際場景

在本節(jié)中，我們將介紹使用這些過濾和選擇選項(xiàng)的一些常見用例，以及每個選項(xiàng)如何適應(yīng)不同的場景。實(shí)際上，在不同場景中使用這些選項(xiàng)的可能性是無限的。因此，我們將考慮本文的范圍，關(guān)注最重要的內(nèi)容。

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

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

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

使用此方法時，重要的是要防止具有相同 ID 的元素重復(fù)。

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

通常，當(dāng)我們想要過濾文檔中的多個元素時，我們會使用類屬性。與 ID 不同，我們可以使用多個具有相同 CSS 類的元素。通常，這些類型的相似元素是通過循環(huán)生成的。假設(shè)我們有一個包含用戶數(shù)據(jù)的記錄列表，如下面的 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>

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

var rows = $(".user_data");

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

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

在此技術(shù)中，我們遍歷所有匹配的元素，并使用指向被單擊按鈕的 $(this) 對象在當(dāng)前項(xiàng)目上執(zhí)行函數(shù)。這是處理多個元素最廣泛使用的方法?，F(xiàn)在讓我們看看新手開發(fā)人員在此類場景中的一些常見錯誤。

• 使用 ID 而不是類

有很多情況下，開發(fā)人員在循環(huán)中使用相同的 ID 來生成類似的 HTML 代碼，而不是類。一旦使用了相同的 ID，它只會影響第一個元素。其余元素將無法按預(yù)期工作。因此，請確保在循環(huán)中創(chuàng)建動態(tài) ID，并使用類名進(jìn)行元素選擇。

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

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

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

這是選擇元素的一種廣泛使用的方法，因此了解如何有效地使用此方法非常重要。CSS 類用于樣式目的。但在這里，我們將其用于元素選擇目的。將 CSS 類用于選擇目的并不是最好的方法，有時它可能會導(dǎo)致布局沖突。例如，在與團(tuán)隊合作時，開發(fā)人員可能會僅使用 CSS 類來為 jQuery 提供動態(tài)功能。設(shè)計師可能會注意到這些類不用于樣式目的，因此有可能在不知道其重要性的情況下刪除它們。因此，最好為僅用于各種功能而不是樣式目的的 CSS 類使用一些前綴。

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

有些應(yīng)用程序和網(wǎng)站嚴(yán)重依賴 JavaScript 并提供高度動態(tài)的客戶端功能。在這種情況下，我們可能會使用大量的類和 ID 來進(jìn)行過濾、選擇和應(yīng)用功能。假設(shè)我們有一個用戶記錄列表，需要根據(jù)角色在客戶端進(jìn)行過濾。我們可以將角色定義為 CSS 類以簡化過濾過程?？紤]以下代碼片段：

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

假設(shè)我們想要獲取同時具有開發(fā)人員和設(shè)計師角色的用戶。在這種情況下，我們可以使用多個 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>

我們可以使用任意數(shù)量的類，一個接一個地匹配同一元素上的多個類。確保類之間不要使用空格，因?yàn)樗鼤淖冞x擇的意思和結(jié)果。考慮具有空格的同一代碼行：

var rows = $(".user_data");

現(xiàn)在，代碼將查找具有名為開發(fā)人員的父元素的設(shè)計師。因此，請習(xí)慣這兩種實(shí)現(xiàn)之間的區(qū)別，并明智地使用它。類似地，我們可以在使用此技術(shù)時混合 ID 和類。

場景 4 – 使用數(shù)據(jù)屬性選擇元素

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

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

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

$(".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');

如您所見，數(shù)據(jù)屬性在處理與 HTML 元素相關(guān)的數(shù)據(jù)方面功能強(qiáng)大，并且 jQuery 通過其內(nèi)置函數(shù)提供了全面的支持。您可以在 http://m.miracleart.cn/link/2705e8fde87cd2883e9fc1f00335685f 找到完整的屬性選擇器參考。

場景 5 – 使用多個數(shù)據(jù)屬性選擇元素

這類似于我們在場景 3 中討論的內(nèi)容，并具有一些擴(kuò)展功能。在高級場景中，使用 CSS 類來處理多個數(shù)據(jù)值可能會很復(fù)雜。因此，讓我們看看如何使用多個數(shù)據(jù)屬性進(jìn)行選擇。

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

在這里，我們可以檢查多個數(shù)據(jù)屬性的存在以及通過部分搜索值進(jìn)行選擇?，F(xiàn)在您應(yīng)該能夠理解 CSS 類和數(shù)據(jù)屬性在元素選擇方面的區(qū)別。數(shù)據(jù)屬性提供了一種組織處理元素數(shù)據(jù)的方法。此處討論的技術(shù)可以與其他 jQuery 過濾器結(jié)合使用，以滿足任何類型的高級情況，并且明智地使用它們非常重要。

總結(jié)

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

• 盡可能使用 ID 進(jìn)行元素選擇，因?yàn)樗峁┝宋臋n中的唯一標(biāo)識符。
• 在多個元素場景中使用類或數(shù)據(jù)屬性，而不是依賴元素 ID。
• 確保區(qū)分樣式類和用于選擇和功能目的的類。
• 在復(fù)雜場景中使用數(shù)據(jù)屬性，因?yàn)轭惒⒎侵荚谔峁┯嘘P(guān)元素的數(shù)據(jù)。

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

關(guān)于 jQuery DOM 選擇的常見問題解答 (FAQ)

什么是 jQuery 中的文檔對象模型 (DOM)？

jQuery 中的文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它表示文檔的結(jié)構(gòu)，并提供了一種操作內(nèi)容和結(jié)構(gòu)的方法。使用 DOM，程序員可以創(chuàng)建、導(dǎo)航和修改 HTML 和 XML 文檔中的元素和內(nèi)容。

jQuery 如何簡化 DOM 操作？

jQuery 通過提供易于使用的 API 來處理事件、創(chuàng)建動畫和開發(fā) Ajax 應(yīng)用程序來簡化 DOM 操作。jQuery 還提供了一個簡單的語法來導(dǎo)航和操作 DOM。它抽象了處理原始 JavaScript 和 DOM API 的許多復(fù)雜性，使開發(fā)人員更容易使用 HTML 文檔。

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

jQuery 中有幾種類型的 DOM 選擇器，包括元素選擇器、ID 選擇器、類選擇器、屬性選擇器和偽類選擇器。元素選擇器根據(jù)其元素名稱選擇元素。ID 選擇器根據(jù)其 ID 屬性選擇元素。類選擇器根據(jù)其類屬性選擇元素。屬性選擇器根據(jù)屬性或?qū)傩灾颠x擇元素。偽類選擇器根據(jù)特定狀態(tài)選擇元素。

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

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

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

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

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

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

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

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

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

jQuery 中的偽類選擇器根據(jù)特定狀態(tài)選擇元素。例如，“:checked”偽類選擇器將選擇所有選中的復(fù)選框或單選按鈕。

如何使用 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 中元素上發(fā)生這些事件時會發(fā)生什么。

以上是與JQuery選擇DOM選擇的初學(xué)者指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！