Selten verwendete jQuery-Selektoren

Selektoren sind entscheidend. Die meisten jQuery-Methoden erfordern eine Art Elementauswahl, damit sie funktionieren. Wenn Sie beispielsweise ein click-Ereignis an eine Schaltfläche anhängen möchten, müssen Sie zuerst die Schaltfläche auswählen.

Da gängige jQuery-Selektoren auf vorhandenen CSS-Selektoren basieren, sind Sie wahrscheinlich sehr vertraut mit ihnen. Allerdings gibt es einige Selektoren, die nicht weit verbreitet sind. In diesem Tutorial werde ich mich auf diese weniger bekannten, aber wichtigen Selektoren konzentrieren.

Alle Selektoren (*)

Dieser Selektor wird zu Recht als universeller Selektor bezeichnet, da er alle Elemente im Dokument auswählt, einschließlich 93f0f5c25f18dab9d176bd4f6de5d30e, 6c04bd5ca3fcae76e30b72ad730ca86d, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 或 2cdf5bf648cf2f33323966d7f58a7f3f Etikett. Diese Demo soll meinen Standpunkt veranschaulichen.

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

Dieser Selektor kann sehr langsam sein, wenn er in Kombination mit anderen Elementen verwendet wird. Es hängt jedoch alles davon ab, wie der Selektor verwendet wird und in welchem ​​Browser er ausgeführt wird. In Firefox, $("#selector > *").find("li") 比 $("#selector > ul").find("li").有趣的是，Chrome 执行 $("#selector > *").find("li") 的速度稍快一些。所有浏览器执行 $("#selector *").find("li") 的速度都比 $("#selector ul").find("li" 慢). Ich empfehle Ihnen, die Leistung zu vergleichen, bevor Sie diesen Selektor verwenden.

Hier ist eine Demo, in der die Ausführungsgeschwindigkeit des All-Selektors verglichen wird.

Animierter Selektor (:animiert)

Sie können die Leistungsverbesserungen nutzen, die die :animated 选择器来选择在此选择器运行时动画仍在进行中的所有元素。唯一的问题是它只会选择使用 jQuery 进行动画处理的元素。此选择器是 jQuery 扩展，不会受益于本机 querySelectorAll()-Methode mit sich bringt.

Außerdem können Sie mit jQuery keine CSS-Animationen erkennen. Sie können jedoch das animationend-Ereignis verwenden, um zu erkennen, wann die Animation endet.

Sehen Sie sich die Demo unten an.

In der obigen Demo sollten bei der Ausführung $(":animated").css("background","#6F9") 之前，仅对奇数 <code class="inline">div 元素进行动画处理;.因此，只有那些 div 元素会更改为绿色。之后，我们对 div 元素的其余部分调用 animate 函数。如果您现在点击 按钮，所有 div alle Elemente grün werden.

Attribut ungleich Selektor ([attr!="value"])

Universelle Attributselektoren erkennen normalerweise, ob ein Attribut mit einem bestimmten Namen oder Wert vorhanden ist. Andererseits kann [attr!="value"] 选择器将选择所有不具有指定属性或该属性存在但不等于特定值的元素。它相当于 :not([attr="value"])。与 [attr="value"] 不同，[attr!="value"] 不是 CSS 规范的一部分。因此，使用 $("css-selector").not("[attr='value']") die Leistung moderner Browser verbessern.

Der folgende Codeausschnitt wird mismatch 类添加到所有 li 元素，其 data-category 属性不等于 css Dies ist hilfreich beim Debuggen oder Festlegen des richtigen Eigenschaftswerts mithilfe von 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 der Demo habe ich beide Listen überprüft und den Wert des Kategorieattributs des Elements korrigiert.

Enthält Selektor (:contains(text))

Dieser Selektor wird verwendet, um alle Elemente auszuwählen, die die angegebene Zeichenfolge enthalten. Die Übereinstimmungszeichenfolge kann sich direkt innerhalb des relevanten Elements oder in einem seiner Nachkommen befinden.

Das folgende Beispiel soll Ihnen helfen, diesen Selektor besser zu verstehen. Wir werden allen Vorkommen der Phrase Lorem Ipsum einen gelben Hintergrund hinzufügen.

Beginnen wir mit den 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>

Beachten Sie, dass der Ausdruck Lorem Ipsum an sieben verschiedenen Stellen vorkommt. In einem Fall verwende ich absichtlich Kapitälchen, um anzuzeigen, dass bei der Übereinstimmung die Groß-/Kleinschreibung beachtet wird.

Hier ist der JavaScript-Code, der alle Übereinstimmungen hervorhebt:

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

Anführungszeichen um Zeichenfolgen sind optional. Das bedeutet, dass Text innerhalb von $("section:contains('Lorem Ipsum')") 和 $("section:contains(Lorem Ipsum)") 均有效在上面的代码片段中。我仅针对部分元素，因此列表元素内的 Lorem Ipsum 文本应保持不变。此外，由于大小写不匹配，第二个 section-Elementen ebenfalls nicht hervorgehoben werden sollte. Wie Sie in dieser Demo sehen können, passiert genau das.

有选择器 (: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 时可能遇到的不常见选择器。虽然大多数选择器都有可供您使用的替代方案，但了解这些选择器的存在仍然是件好事。

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

Das obige ist der detaillierte Inhalt vonSelten verwendete jQuery-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!