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

In the above demo, only odd div<code class="inline"> elements are animated before executing $(":animated").css("background","#6F9"); .So, only those div elements will change to green. After that, we call the animate function on the rest of the div element. If you click the button now, all div elements should turn green.

Attribute is not equal to selector ([attr!="value"])

Universal attribute selectors typically detect whether an attribute with a given name or value exists. On the other hand, the [attr!="value"] selector will select all elements that do not have the specified attribute or that attribute exists but is not equal to a specific value. It is equivalent to :not([attr="value"]). Unlike [attr="value"], [attr!="value"] is not part of the CSS specification. Therefore, using $("css-selector").not("[attr='value']") can improve performance in modern browsers.

The following code snippet adds the mismatch class to all li elements whose data-category attribute is not equal to css. This Helpful when debugging or setting correct property values ??using 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
});

In the demo, I checked both lists and corrected the value of the element's category attribute.

Contains selector (:contains(text))

This selector is used to select all elements containing the specified string. The match string can be located directly inside the relevant element or within any of its descendants.

The example below should help you understand this selector better. We will add a yellow background to all occurrences of the phrase Lorem Ipsum.

Let’s start with the tags:

<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>

Observe that the phrase Lorem Ipsum appears in seven different places. I intentionally use small caps in one instance to indicate that the match is case-sensitive.

Here is the JavaScript code that highlights all matches:

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

Quotes around strings are optional. This means that $("section:contains('Lorem Ipsum')") and $("section:contains(Lorem Ipsum)") are both valid in the above snippet . I'm only targeting some elements, so the Lorem Ipsum text within the list elements should remain unchanged. Additionally, the text within the second section element should not be highlighted due to a case mismatch. As you can see in this demo, that's exactly what happens.

有選擇器 (:has(selector))

此選擇器將選擇至少包含一個(gè)與給定選擇器匹配的元素的所有元素。需要匹配的選擇器不必是直接子級(jí)。 :has() 不是 CSS 規(guī)范的一部分。在現(xiàn)代瀏覽器中，您應(yīng)該使用 $("pure-css-selector").has(selector) 而不是 $("pure-css-selector:has(選擇器)") 以提高性能。

此選擇器的一個(gè)可能的應(yīng)用是操作其中包含特定元素的元素。在我們的示例中，我將更改內(nèi)部包含鏈接的所有列表元素的顏色。

這是演示的標(biāo)記：

<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");
});

這段代碼背后的邏輯非常簡(jiǎn)單。我循環(huán)遍歷所有包含鏈接的列表元素并將其顏色設(shè)置為深紅色。您還可以操作列表元素內(nèi)的文本或?qū)⑺鼈儚?DOM 中刪除。我確信這個(gè)選擇器可以用在很多其他情況下。在 CodePen 上查看此代碼的實(shí)時(shí)版本。

基于索引的選擇器

除了像 :nth-child() 這樣的 CSS 選擇器之外，jQuery 也有自己的一組基于索引的選擇器。這些選擇器是 :eq(index)、:lt(index) 和 :gt(index)。與基于 CSS 的選擇器不同，這些選擇器使用從零開始的索引。這意味著 :nth-child(1) 將選擇第一個(gè)子級(jí)，而 :eq(1) 將選擇第二個(gè)子級(jí)。要選擇第一個(gè)孩子，您必須使用 :eq(0)。

這些選擇器也可以接受負(fù)值。當(dāng)指定負(fù)值時(shí)，將從最后一個(gè)元素開始向后計(jì)數(shù)。

:lt(index) 選擇索引小于指定值的所有元素。要選擇前三個(gè)元素，您將使用 :lt(3)。這是因?yàn)榍叭齻€(gè)元素的索引值分別為 0、1 和 2。使用負(fù)索引將選擇向后計(jì)數(shù)后到達(dá)的元素之前的所有值。同樣，: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

嘗試單擊演示中的各個(gè)按鈕以更好地了解索引選擇器。

表單選擇器

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>

我在這里創(chuàng)建了兩個(gè)文本元素和四個(gè)復(fù)選框。該表單非?；?，但它應(yīng)該讓您了解表單選擇器的工作原理。我們將使用 :text 選擇器計(jì)算文本元素的數(shù)量，并更新第一個(gè)文本輸入中的文本。

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

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

我使用 :text 選擇所有文本輸入，然后使用 length 方法來計(jì)算它們的數(shù)量。在第三條語句中，我使用前面討論的 :eq() 選擇器來訪問第一個(gè)元素，然后設(shè)置其值。

請(qǐng)記住，從 jQuery 1.5.2 開始，對(duì)于未指定任何 type 屬性的元素，:text 返回 true。

看看演示。

標(biāo)頭選擇器 (:header)

如果您想選擇網(wǎng)頁上的所有標(biāo)題元素，可以使用簡(jiǎn)短的 $(":header") 版本，而不是詳細(xì)的 $ ("h1 h2 h3 h4 h5 h6") 選擇器。此選擇器不是 CSS 規(guī)范的一部分。因此，首先使用純 CSS 選擇器，然后使用 .filter(":header") 可以獲得更好的性能。

例如，假設(shè)網(wǎng)頁上有一個(gè) article 元素，并且它具有三個(gè)不同的標(biāo)題。現(xiàn)在，為了簡(jiǎn)潔起見，您可以使用 $("article :header") 而不是 $("article h1,article h2,article h3")。為了使其更快，您可以使用 $("article").filter(":header")。這樣您就可以兩全其美。

要對(duì)所有標(biāo)題元素進(jìn)行編號(hào)，您可以使用以下代碼。

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

嘗試一下隨附的演示。

最終想法

在本教程中，我討論了使用 jQuery 時(shí)可能遇到的不常見選擇器。雖然大多數(shù)選擇器都有可供您使用的替代方案，但了解這些選擇器的存在仍然是件好事。

我希望您在本教程中學(xué)到了一些新東西。如果您有任何問題或建議，請(qǐng)?jiān)u論。

The above is the detailed content of Rarely Used jQuery Selectors. For more information, please follow other related articles on the PHP Chinese website!