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

要點(diǎn)

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

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

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

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

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

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

場(chǎng)景 1 – 選擇文檔中的唯一元素

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

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

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

場(chǎng)景 2 – 使用類選擇多個(gè)元素

通常，當(dāng)我們想要過(guò)濾文檔中的多個(gè)元素時(shí)，我們會(huì)使用類屬性。與 ID 不同，我們可以使用多個(gè)具有相同 CSS 類的元素。通常，這些類型的相似元素是通過(guò)循環(huán)生成的。假設(shè)我們有一個(gè)包含用戶數(shù)據(jù)的記錄列表，如下面的 HTML 代碼所示。我們有一個(gè)“刪除”按鈕，用戶可以通過(guò)單擊該按鈕來(lái)刪除記錄。

<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)在，我們有多個(gè)類似元素的實(shí)例，因此我們不能使用 ID 來(lái)過(guò)濾確切的記錄。讓我們看看如何使用給定的 CSS 類來(lái)過(guò)濾行。

var rows = $(".user_data");

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

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

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

• 使用 ID 而不是類

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

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

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

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

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

場(chǎng)景 3 – 使用多個(gè)類選擇元素

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

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

假設(shè)我們想要獲取同時(shí)具有開(kāi)發(fā)人員和設(shè)計(jì)師角色的用戶。在這種情況下，我們可以使用多個(gè) 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ù)量的類，一個(gè)接一個(gè)地匹配同一元素上的多個(gè)類。確保類之間不要使用空格，因?yàn)樗鼤?huì)改變選擇的意思和結(jié)果?？紤]具有空格的同一代碼行：

var rows = $(".user_data");

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

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

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

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

如您所見(jiàn)，我們可以使用數(shù)據(jù)屬性而不是 CSS 類來(lái)獲得相同的結(jié)果。 jQuery 提供高級(jí)屬性選擇器來(lái)支持自定義數(shù)據(jù)屬性。因此，讓我們考慮一下自定義屬性的一些高級(jí)選擇器選項(xiàng)。假設(shè)我們將用戶電子郵件存儲(chǔ)為自定義屬性，並且我們希望根據(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');

選擇沒(méi)有“@”符號(hào)的無(wú)效電子郵件的元素

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

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

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

這類似於我們?cè)趫?chǎng)景 3 中討論的內(nèi)容，並具有一些擴(kuò)展功能。在高級(jí)場(chǎng)景中，使用 CSS 類來(lái)處理多個(gè)數(shù)據(jù)值可能會(huì)很複雜。因此，讓我們看看如何使用多個(gè)數(shù)據(jù)屬性進(jìn)行選擇。

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

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

總結(jié)

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

• 盡可能使用 ID 進(jìn)行元素選擇，因?yàn)樗峁┝宋臋n中的唯一標(biāo)識(shí)符。
• 在多個(gè)元素場(chǎng)景中使用類或數(shù)據(jù)屬性，而不是依賴元素 ID。
• 確保區(qū)分樣式類和用於選擇和功能目的的類。
• 在復(fù)雜場(chǎng)景中使用數(shù)據(jù)屬性，因?yàn)轭悂K非旨在提供有關(guān)元素的數(shù)據(jù)。

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

關(guān)於 jQuery DOM 選擇的常見(jiàn)問(wèn)題解答 (FAQ)

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

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

jQuery 如何簡(jiǎn)化 DOM 操作？

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

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

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

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

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

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

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

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

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

如何在 jQuery 中選擇多個(gè)元素？

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

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

jQuery 中的偽類選擇器根據(jù)特定狀態(tài)選擇元素。例如，“: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 中元素上發(fā)生這些事件時(shí)會(huì)發(fā)生什麼。

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