Unübliche jQuery-Selektoren

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

Selektoren sind von entscheidender Bedeutung. Die meisten jQuery-Methoden erfordern eine Art Elementauswahl um von Nutzen zu sein. Wenn Sie z. B. ein click-Event an eine Schaltfläche anfügen, müssen Sie zuerst die Schaltfläche auswählen.

Da gängige jQuery-Selektoren auf vorhandenen CSS-Selektoren basieren, kennen Sie sich wahrscheinlich gut mit ihnen aus. Es gibt jedoch auch einige Selektoren, die nicht so viel verwendet werden. In diesem Tutorial werde ich mich auf diese weniger bekannten, aber wichtigen Selektoren konzentrieren.

Alles Selektor (*)

Dieser Selektor wird zu Recht als Universalselektor bezeichnet, da er alle Elemente im Dokument auswählt, inklusive der <head>, <body>, <script> oder <link> Elemente. Diese Demo sollte meinen Standpunkt veranschaulichen.

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

Dieser Selektor ist extrem langsam, wenn er in Kombination mit anderen Elementen verwendet wird. Es hängt jedoch alles davon ab, wie der Selektor verwendet wird und in welchem Browser er ausgeführt wird. In Firefox $("#selector > *").find("li") ist langsamer als $("#selector > ul").find("li"). Interessanterweise führt Chrome etwas $("#selector > *").find("li") schneller aus. Alle Browser führen $("#selector *").find("li") langsamer aus als $("#selector ul").find("li"). Ich schlage vor, dass Sie die Leistung vergleichen, bevor Sie diesen Selektor verwenden.

Hier ist eine Demo, die die Ausführungsgeschwindigkeit des universellen Selektors vergleicht.

Animierte Auswahl (:animiert)

Sie können den Selector :animated verwenden, um alle Elemente auszuwählen, deren Animation noch ausgeführt wird, während dieser Selektor ausgeführt wird. Das einzige Problem ist, dass nur Elemente ausgewählt werden, die mit jQuery animiert wurden. Dieser Selektor ist eine jQuery-Erweiterung und profitiert nicht von der Leistungssteigerung, die mit der nativen querySelectorAll()-Methode einhergeht.

Außerdem können Sie CSS-Animationen nicht mit jQuery erkennen. Sie können jedoch erkennen, wann die Animation mit dem animationend-Event endet.

Werfen Sie einen Blick auf die folgende Demo.

In der obigen Demo werden nur die ungeraden div-Elemente animiert, bevor sie die Funktion $(":animated").css("background","#6F9"); ausführen. Infolgedessen färben sich nur diese div-Elemente Grün. Direkt danach rufen wir die animate-Funktion für den Rest der div-Elemente auf. Wenn Sie jetzt auf button klicken, sollten alle div-Elemente grün werden.

Attribut Not Equal Selector ([attr!="value"])

Häufige Attributselektoren erkennen in der Regel, ob ein Attribut mit einem bestimmten Namen oder Wert vorhanden ist. Andererseits wählt der Selektor [attr!="value"] alle Elemente aus, die nicht über das angegebene Attribut verfügen oder bei denen das Attribut vorhanden ist, aber nicht gleich einem bestimmten Wert ist. Er entspricht :not([attr="value"]). Im Gegensatz zu [attr="value"] ist [attr!="value"] nicht Teil der CSS-Spezifikation. Daher wird die Option $("css-selector").not("[attr='value']") in modernen Browsern die Leistung verbessern.

Der folgende Ausschnitt fügt allen li-Elementen eine mismatch-Klasse hinzu, deren data-category-Attribut nicht gleich css ist. Dies kann beim Debuggen oder Festlegen des richtigen Attributwerts mit JavaScript hilfreich sein.

$("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 gehe ich durch zwei Listen und berichtige den Wert der Kategorieattribute von Elementen.

Enthält Selector (:contains(text))

Dieser Selektor wird verwendet, um alle Elemente auszuwählen, die die angegebene Zeichenfolge enthalten. Die übereinstimmende Zeichenfolge kann sich direkt innerhalb des betreffenden Elements oder innerhalb eines seiner ungeordneten Elemente befinden.

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

Beginnen wir mit dem Markup:

<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 Orten vorkommt. Ich habe in einem dieser Fälle absichtlich Kleinschreibung verwendet, um zu zeigen, dass die Übereinstimmung abhängig von der Groß-/Kleinschreibung ist.

Hier ist der JavaScript-Code, um alle Übereinstimmungen hervorzuheben:

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

Die Anführungszeichen um die Zeichenfolge sind optional. Dies impliziert, dass sowohl die beiden $("section:contains('Lorem Ipsum')") als auch $("section:contains(Lorem Ipsum)") im obigen Ausschnitt gültig sind. Ich ziele nur auf das section-Eelement ab, sodass der Lorem Ipsum-Text innerhalb der Listenelemente unverändert bleiben sollte. Darüber hinaus sollte der Text innerhalb des zweiten section-Elements aufgrund nicht übereinstimmender Groß-/Kleinschreibung nicht hervorgehoben werden. Wie Sie in dieser Demo sehen können, ist dies genau das, was passiert.

Hat Selector (:has(selector))

Dieser Selektor wählt alle Elemente aus, die mindestens ein Element enthalten, das mit einem bestimmten Selektor übereinstimmt. Der Selektor, der übereinstimmen muss, muss kein direktes Kind sein. :has() ist nicht Teil der CSS-Spezifikation. In modernen Browsern sollten Sie für eine verbesserte Leistung die Option $("pure-css-selector").has(selector) anstelle von $("pure-css-selector:has(selector)") verwenden.

Eine mögliche Anwendung dieses Selektors ist die Manipulation von Elementen, die ein bestimmtes Element darin enthalten. In unserem Beispiel werde ich die Farbe aller Listenelemente ändern, die einen Link darin enthalten.

Dies ist das Markup für die Demo:

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

Hier ist der JavaScript-Code, um die Farbe der Listenelemente zu ändern:

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

Die Logik hinter diesem Code ist ziemlich einfach. Ich schleife alle Listenelemente durch, die einen Link enthalten, und setze ihre Farbe auf purpurrot. Sie können den Text in den Listenelementen auch bearbeiten oder aus dem DOM entfernen. Ich bin sicher, dass dieser Selektor in vielen anderen Situationen verwendet werden kann. Schauen Sie sich eine Live-Version dieses Codes auf CodePen an.

Indexbasierte Selektoren

Neben CSS-Selektoren wie :nth-child() verfügt jQuery auch über einen eigenen Satz indexbasierter Selektoren. Diese Selektoren sind :eq(index), :lt(index) und :gt(index). Im Gegensatz zu CSS-basierten Selektoren verwenden diese Selektoren eine nullbasierte Indizierung. Dies bedeutet, dass :nth-child(1) zwar das erste Kind auswählt, :eq(1) jedoch das zweite Kind auswählt. Um das erste Kind auszuwählen, müssen Sie :eq(0) verwenden.

Diese Selektoren können auch negative Werte akzeptieren. Wenn negative Werte angegeben werden, erfolgt die Zählung rückwärts ab dem letzten Element.

:lt(index) wählt alle Elemente aus, die sich in einem Index befinden, der kleiner als der angegebene Wert ist. Um die ersten drei Elemente auszuwählen, verwenden Sie :lt(3). Dies liegt daran, dass die ersten drei Elemente die Indexwerte 0, 1 und 2 aufweisen. Mit einem negativen Index werden alle Werte vor dem Element ausgewählt, das wir nach dem Rückwärtszählen erreicht haben. In ähnlicher Weise wählt :gt(index) alle Elemente mit einem Index aus, der größer als der angegebene Wert ist.

: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

Versuchen Sie, auf verschiedene Schaltflächen in der Demo zu klicken, um ein besseres Verständnis der Indexauswahl zu erhalten.

Formularselektoren

jQuery definiert viele Selektoren für die einfache Auswahl von Formularelementen. Beispielsweise wählt der :button-Selektor alle Schaltflächenelemente sowie Elemente vom Typ Button aus. In ähnlicher Weise wird :checkbox alle Eingabeelemente vom Typ Kontrollkästchen auswählen. Für fast alle Eingabeelemente sind Selektoren definiert. Betrachten Sie das folgende Formular:

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

Ich habe hier zwei Textelemente und vier Kontrollkästchen erstellt. Das Formular ist ziemlich einfach, aber es sollte Ihnen eine Vorstellung davon geben, wie Formularselektoren funktionieren. Wir zählen die Anzahl der Textelemente mit dem :text-Selektor und aktualisieren auch den Text in der ersten Texteingabe.

1	var textCount = $(":text").length;
2	$(".text-elements").text('Text Inputs : ' + textCount);
3
4	$(":text").eq(0).val('Added programatically!');

Ich verwende :text, um alle Texteingaben und dann die Längenmethode zur Berechnung ihrer Anzahl auszuwählen. In der dritten Anweisung verwende ich den zuvor besprochenen :eq()-Selektor, um auf das erste Element zuzugreifen und später dessen Wert festzulegen.

Beachten Sie, dass ab jQuery 1.5.2 :text true für Elemente zurückgegeben wird, für die kein Typattribut angegeben ist.

Werfen Sie einen Blick auf die Demo.

Kopfzeilenauswahl (:Header)

Wenn Sie jemals alle Überschriftenelemente auf einer Webseite auswählen möchten, können Sie anstelle des ausführlichen Selektors $("h1 h2 h3 h4 h5 h6") die kurze Version $(":header") verwenden. Dieser Selektor ist nicht Teil der CSS-Spezifikation. Eine bessere Leistung könnte damit erreicht werden, zuerst einen reinen CSS-Selektor und dann .filter(":header") zu verwenden.

Angenommen, es gibt ein article-Element auf einer Webseite und es hat drei verschiedene Überschriften. Nun können Sie die Kurzform $("article :header") anstelle von $("article h1, article h2, article h3") verwenden. Um es noch schneller zu machen, können Sie $("article").filter(":header") verwenden. Auf diese Weise haben Sie das Beste aus beiden Welten.

Um alle Überschriftenelemente zu nummerieren, können Sie den folgenden Code verwenden.

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

Probieren Sie diese begleitende Demo aus.

Letzte Gedanken

In diesem Tutorial habe ich unübliche Selektoren besprochen, die bei der Verwendung von jQuery auftreten können. Während die meisten dieser Selektoren Alternativen haben, die Sie verwenden können, ist es immer noch gut zu wissen, dass diese Selektoren vorhanden sind.

Ich hoffe, Sie haben in diesem Tutorial etwas Neues gelernt. Wenn Sie Fragen oder Anregungen haben, kommentieren Sie bitte.