很少使用的 jQuery 選擇器

選擇器至關重要。大多數 jQuery 方法都需要某種元素選擇才能發揮作用。例如，將 click 事件附加到按鈕需要您先選擇該按鈕。

由於常見的 jQuery 選擇器是基於現有的 CSS 選擇器，因此您可能非常熟悉它們。然而，也有一些選擇器沒有被廣泛使用。在本教程中，我將重點放在這些鮮為人知但重要的選擇器。

所有選擇器 (*)

這個選擇器被正確地稱為通用選擇器，因為它選擇文件中的所有元素，包括 93f0f5c25f18dab9d176bd4f6de5d30e, 6c04bd5ca3fcae76e30b72ad730ca86d, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 或 2cdf5bf648cf2f33323966d7f58a7f3f 標籤。這個演示應該可以說明我的觀點。

$("section *")         // Selects all descendants
$("section > *")       // Selects all direct descendants
$("section > * > *")   // Selects all second level descendants
$("section > * > * a") // Selects 3rd level links

如果與其他元素結合使用，此選擇器會非常慢。但是，這完全取決於選擇器的使用方式以及在哪個瀏覽器中執行。在Firefox 中，$("#selector > *").find("li") 比$("#selector > ul").find("li").有趣的是，Chrome 執行$("#selector > *").find("li") 的速度稍快。所有瀏覽器執行$("#selector *").find("li") 的速度都比$("#selector ul").find("li" 慢)。我建議您在使用此選擇器之前比較性能。

#這裡是一個比較 all 選擇器執行速度的示範。

動畫選擇器 (:animated)

您可以使用 :animated 選擇器來選擇在此選擇器運行時動畫仍在進行中的所有元素。唯一的問題是它只會選擇使用 jQuery 進行動畫處理的元素。此選擇器是 jQuery 擴展，不會受益於本機 querySelectorAll() 方法帶來的效能提升。

此外，您無法使用 jQuery 偵測 CSS 動畫。不過，您可以使用 animationend 事件來偵測動畫何時結束。

觀看以下示範。

在上面的示範中，在執行$(":animated").css("background","#6F9") 之前，只對奇數<code class="inline">div 元素進行動畫處理; .因此，只有那些div 元素會改為綠色。之後，我們對 div 元素的其餘部分呼叫 animate 函數。如果您現在點擊 按鈕，所有 div 元素都應該變成綠色。

屬性不等於選擇器（[attr!="value"]）

通用屬性選擇器通常會偵測具有給定名稱或值的屬性是否存在。另一方面，[attr!="value"] 選擇器將選擇所有不具有指定屬性或該屬性存在但不等於特定值的元素。它相當於 :not([attr="value"])。與 [attr="value"] 不同，[attr!="value"] 不是 CSS 規範的一部分。因此，使用 $("css-selector").not("[attr='value']") 可以提高現代瀏覽器的效能。

下面的程式碼片段將mismatch 類別加入所有li 元素，其data-category 屬性不等於css.這在偵錯或使用JavaScript 設定正確的屬性值時很有幫助。

$("li[data-category!='css']").each(function() {
  $(this).addClass("mismatch");
  // Adds a mismatch class to filtered out selectors.
  
  $(".mismatch").attr("data-category", attributeValue);
  // Set correct attribute value
});

在示範中，我檢查了兩個清單並修正了元素的類別屬性的值。

包含選擇器（:contains(text)）

此選擇器用於選擇包含指定字串的所有元素。匹配字串可以直接位於相關元素內部或其任何後代內部。

下面的範例應該可以幫助您更好地理解這個選擇器。我們將為所有出現的短語 Lorem Ipsum 添加黃色背景。

讓我們從標記開始：

<section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <b>Lorem Ipsum</b>.</p>
  <a href="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem Ipsum Wikipedia Link</a>
</section>
<section>
  <p>This <span class="small-u">lorem ipsum</span> should not be highlighted.</p>
</section>
<ul>
  <li>A Lorem Ipsum List</li>
  <li>More Elements Here</li>
</ul>

觀察短語 Lorem Ipsum 出現在七個不同的位置。我特意在其中一個實例中使用小型大寫字母，以表明匹配區分大小寫。

以下是突出顯示所有符合項目的 JavaScript 程式碼：

$("section:contains('Lorem Ipsum')").each(function() {
  $(this).html(
      $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>")
    );
});

字串周圍的引號是可選的。這表示$("section:contains('Lorem Ipsum')") 和$("section:contains(Lorem Ipsum)") 都有效在上面的程式碼片段中。我僅針對部分元素，因此清單元素內的 Lorem Ipsum 文字應保持不變。此外，由於大小寫不匹配，第二個 section 元素內的文字也不應突出顯示。正如您在此演示中所看到的，這正是所發生的情況。

有选择器 (:has(selector))

此选择器将选择至少包含一个与给定选择器匹配的元素的所有元素。需要匹配的选择器不必是直接子级。 :has() 不是 CSS 规范的一部分。在现代浏览器中，您应该使用 $("pure-css-selector").has(selector) 而不是 $("pure-css-selector:has(选择器)") 以提高性能。

此选择器的一个可能的应用是操作其中包含特定元素的元素。在我们的示例中，我将更改内部包含链接的所有列表元素的颜色。

这是演示的标记：

<ul>
  <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li>
  <li>Pellentesque habitant morbi tristique senectus.</li>
  (... more list elements here ...)
  <li>Pellentesque habitant morbi tristique senectus.</li>
  <li>Pellentesque <a href="dummy.html">habitant morbi</a> tristique senectus.</li>
</ul>

以下是更改列表元素颜色的 JavaScript 代码：

$("li:has(a)").each(function(index) {
  $(this).css("color", "crimson");
});

这段代码背后的逻辑非常简单。我循环遍历所有包含链接的列表元素并将其颜色设置为深红色。您还可以操作列表元素内的文本或将它们从 DOM 中删除。我确信这个选择器可以用在很多其他情况下。在 CodePen 上查看此代码的实时版本。

基于索引的选择器

除了像 :nth-child() 这样的 CSS 选择器之外，jQuery 也有自己的一组基于索引的选择器。这些选择器是 :eq(index)、:lt(index) 和 :gt(index)。与基于 CSS 的选择器不同，这些选择器使用从零开始的索引。这意味着 :nth-child(1) 将选择第一个子级，而 :eq(1) 将选择第二个子级。要选择第一个孩子，您必须使用 :eq(0)。

这些选择器也可以接受负值。当指定负值时，将从最后一个元素开始向后计数。

:lt(index) 选择索引小于指定值的所有元素。要选择前三个元素，您将使用 :lt(3)。这是因为前三个元素的索引值分别为 0、1 和 2。使用负索引将选择向后计数后到达的元素之前的所有值。同样，:gt(index) 选择索引大于指定值的所有元素。

:lt(4)  // Selects first four elements
:lt(-4) // Selects all elements besides last 4
:gt(4)  // Selects all elements besides first 5
:gt(-4) // Selects last three elements
:gt(-1) // Selects Nothing
:eq(4)  // Selects fifth element
:eq(-4) // Selects fourth element from last

尝试单击演示中的各个按钮以更好地了解索引选择器。

表单选择器

jQuery 定义了许多选择器，以便轻松选择表单元素。例如， :button 选择器将选择所有按钮元素以及按钮类型的元素。同样， :checkbox 将选择所有类型为 checkbox 的输入元素。几乎所有输入元素都定义了选择器。考虑下面的表格：

<form action="#" method="post">
  <div>
    <label for="name">Text Input</label>
    <br>
    <input type="text" name="name" />
    <input type="text" name="name" />
  </div>
  <hr>
  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
    <input type="checkbox" name="checkbox" />
  </div>
</form>

我在这里创建了两个文本元素和四个复选框。该表单非常基本，但它应该让您了解表单选择器的工作原理。我们将使用 :text 选择器计算文本元素的数量，并更新第一个文本输入中的文本。

var textCount = $(":text").length;
$(".text-elements").text('Text Inputs : ' + textCount);

$(":text").eq(0).val('Added programatically!');

我使用 :text 选择所有文本输入，然后使用 length 方法来计算它们的数量。在第三条语句中，我使用前面讨论的 :eq() 选择器来访问第一个元素，然后设置其值。

请记住，从 jQuery 1.5.2 开始，对于未指定任何 type 属性的元素，:text 返回 true。

看看演示。

标头选择器 (:header)

如果您想选择网页上的所有标题元素，可以使用简短的 $(":header") 版本，而不是详细的 $ ("h1 h2 h3 h4 h5 h6") 选择器。此选择器不是 CSS 规范的一部分。因此，首先使用纯 CSS 选择器，然后使用 .filter(":header") 可以获得更好的性能。

例如，假设网页上有一个 article 元素，并且它具有三个不同的标题。现在，为了简洁起见，您可以使用 $("article :header") 而不是 $("article h1,article h2,article h3")。为了使其更快，您可以使用 $("article").filter(":header")。这样您就可以两全其美。

要对所有标题元素进行编号，您可以使用以下代码。

$("article :header").each(function(index) {
  $(this).text((index + 1) + ": " + $(this).text());
  // Adds numbers to Headings
});

尝试一下随附的演示。

最终想法

在本教程中，我讨论了使用 jQuery 时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。

我希望您在本教程中学到了一些新东西。如果您有任何问题或建议，请评论。

以上是很少使用的 jQuery 選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！