jQuery
Selektoren

Einführung

Syntax

• Tag: Keine Markierung, verwenden Sie das Tag direkt
• Id: #id
• Klasse: .className
• Attribut: [attributeName]
• Attribut mit Wert: [attributeName ='value']
• Attribut beginnt mit Wert ^= : [attributeName ^= 'value']
• Attribut endet mit dem Wert $= : [attributeName $='value']
• Attribut enthält Wert *= : [attributeName *= 'value']
• Pseudo-Selektor:: :pseudo-selector
• Beliebiger Nachkomme: Leerzeichen zwischen Selektoren
• Direkte Kinder: > zwischen Selektoren
• Benachbarte Geschwister nach dem ersten: +
• Nicht benachbarter Bruder folgt dem ersten: ~
• Oder: , (Komma) zwischen Selektor

Bemerkungen

<span id="temp.foobar"><span>

$('#temp\\.foobar')

Arten von Selektoren

In jQuery können Sie Elemente auf einer Seite mit vielen verschiedenen Eigenschaften des Elements auswählen, darunter:

• Art
• Klasse
• ICH WÜRDE
• Besitz des Attributs
• Attributwert
• Indexierte Auswahl
• Pseudo-Zustand

Wenn Sie CSS-Selektoren kennen, werden Sie feststellen, dass die Selektoren in jQuery identisch sind (mit geringfügigen Ausnahmen).

Nehmen Sie zum Beispiel den folgenden HTML-Code:

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

Auswahl nach Typ:

Der folgende jQuery-Selektor wählt alle <a> -Elemente aus, einschließlich 1, 2, 3 und 4.

$("a")

Auswahl nach Klasse

Die folgende jQuery Selektor werden alle Elemente der Klasse ausgewählt example (einschließlich Nicht-A - Elemente), die 3, 4 und 5.

$(".example")

Auswahl über ID

Der folgende jQuery-Selektor wählt das Element mit der angegebenen ID (2) aus.

$("#second-link")

Auswahl durch Attributbesitz

Der folgende jQuery-Selektor wählt alle Elemente mit einem definierten href Attribut aus, einschließlich 1 und 4.

$("[href]")

Auswahl nach Attributwert

Der folgende jQuery-Selektor wählt alle Elemente aus, in denen das href Attribut vorhanden ist, mit dem Wert index.html , der nur 1 ist.

$("[href='index.html']")

Auswahl über indizierte Position ( indizierte Auswahl)

Der folgende jQuery-Selektor wählt nur 1 aus, der zweite <a> dh. die second-link , weil Index geliefert wird 1 wie eq(1) (Beachten Sie, dass der Index beginnt um 0 daher die zweiten hier wurde ausgewählt!).

$("a:eq(1)")

Auswahl mit indiziertem Ausschluss

So schließen Sie ein Element mithilfe seines Index aus :not(:eq())

Die folgenden wählt <a> Elemente, mit der Ausnahme , dass mit der Klasse example , die 1

$("a").not(":eq(0)")

Auswahl mit Ausschluss

Um ein Element von einer Auswahl auszuschließen, verwenden Sie :not()

Die folgende wählt <a> Elemente, mit Ausnahme derjenigen mit der Klasse example , sind die 1 und 2.

$("a:not(.example)")

Auswahl nach Pseudo-Status

Sie können in jQuery auch Pseudo-Status auswählen, darunter :first-child :last-child :first-of-type :last-of-type usw.

Der folgende jQuery-Selektor wählt nur das erste <a> -Element aus: number 1.

$("a:first-of-type")

JQuery-Selektoren kombinieren

Sie können Ihre Spezifität auch erhöhen, indem Sie mehrere jQuery-Selektoren kombinieren. Sie können beliebig viele oder alle kombinieren. Sie können auch mehrere Klassen, Attribute und Status gleichzeitig auswählen.

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

Dies würde ein <a> -Element auswählen, das:

• Verfügt über die folgenden Klassen: class1, class2, and class3
• Hat die folgende ID: someID
• Hat das folgende Attribut: attr1
• Hat die folgenden Attribute und Werte: attr2 mit Wert something , attr3 mit Wert something
• Hat die folgenden Zustände: first-child und first-of-type

Sie können auch verschiedene Selektoren mit einem Komma trennen:

$("a, .class1, #someID")  

Dies würde auswählen:

• Alle <a> Elemente
• Alle Elemente, die die Klasse class1
• Ein Element mit der ID #someID

Auswahl von Kindern und Geschwistern

jQuery-Selektoren entsprechen im Allgemeinen den gleichen Konventionen wie CSS, sodass Sie Kinder und Geschwister auf dieselbe Weise auswählen können.

• Verwenden Sie ein Leerzeichen, um ein nicht direktes untergeordnetes Element auszuwählen
• Um ein direktes Kind auszuwählen, verwenden Sie ein >
• Um ein benachbartes Geschwister nach dem ersten auszuwählen, verwenden Sie ein +
• Um ein nicht benachbartes Geschwister nach dem ersten auszuwählen, verwenden Sie ein ~

Platzhalterauswahl

Es kann Fälle geben, in denen wir alle Elemente auswählen möchten, es gibt jedoch keine gemeinsame Eigenschaft (Klasse, Attribut usw.) zur Auswahl. In diesem Fall können wir den * Selektor verwenden, der einfach alle Elemente auswählt:

$('#wrapper *')    // Select all elements inside #wrapper element

Selektoren kombinieren

Betrachten Sie die folgende DOM-Struktur

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

Nachkommen- und Kindselektoren

Wenn ein übergeordneter <ul> - parentUl seine Nachkommen findet ( <li> ),

1. Einfach $('parent child')

   >> $('ul.parentUl li')

   Dadurch werden alle passenden Nachkommen des angegebenen Vorfahren auf allen Ebenen heruntergefahren .

2. > - $('parent > child')

   >> $('ul.parentUl > li')

   Damit werden alle passenden Kinder gefunden ( nur 1. Ebene nach unten ).

3. Kontextbasierter Selektor - $('child','parent')

   >> $('li','ul.parentUl')

   Dies funktioniert genauso wie oben.

4. find() - $('parent').find('child')

   >> $('ul.parentUl').find('li')

   Dies funktioniert genauso wie oben.

5. children() - $('parent').find('child')

   >> $('ul.parentUl').children('li')

   Dies funktioniert genauso wie oben.

Andere Kombinatoren

Gruppenauswahl: ","

Wählen Sie alle <ul> Elemente UND alle <li> Elemente UND alle <span> Elemente aus:

$('ul, li, span')

Mehrfachauswahl: "" (kein Zeichen)

Wählen Sie alle <ul> -Elemente mit der Klasse parentUl :

$('ul.parentUl')

Benachbarte Geschwisterauswahl: "+"

Wählen Sie alle <li> -Elemente aus, die unmittelbar nach einem anderen <li> -Element platziert werden:

$('li + li')

Allgemeine Geschwisterauswahl: "~"

Wählen Sie alle <li> Elemente aus, die Geschwister anderer <li> Elemente sind:

$('li ~ li')

Überblick

Elemente können von jQuery mit jQuery Selectors ausgewählt werden . Die Funktion gibt entweder ein Element oder eine Liste von Elementen zurück.

Grundlegende Selektoren

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

Beziehungsoperatoren

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

Caching-Selektoren

Bei jeder Verwendung eines Selektors in jQuery wird im DOM nach Elementen gesucht, die Ihrer Abfrage entsprechen. Wenn Sie dies zu oft oder wiederholt ausführen, wird die Leistung beeinträchtigt. Wenn Sie mehr als einmal auf einen bestimmten Selektor verweisen, sollten Sie ihn zum Cache hinzufügen, indem Sie ihn einer Variablen zuweisen:

var nav = $('#navigation');
nav.show();

Dies würde ersetzen:

$('#navigation').show();

Das Zwischenspeichern dieser Auswahl kann hilfreich sein, wenn Ihre Website dieses Element häufig ein- und ausblenden muss. Wenn mehrere Elemente mit demselben Selektor vorhanden sind, wird die Variable zu einem Array dieser Elemente:

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

HINWEIS: Das Element muss zum Zeitpunkt seiner Zuweisung zu einer Variablen im DOM vorhanden sein. Wenn sich im DOM kein Element mit einer Klasse mit dem Namen child , wird ein leeres Array in dieser Variablen gespeichert.

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

Denken Sie daran, den Selektor erneut der Variablen zuzuweisen, nachdem Sie Elemente im DOM mit diesem Selektor hinzugefügt oder entfernt haben.

Hinweis : Beim Zwischenspeichern von Selektoren beginnen viele Entwickler den Variablennamen mit einem $ um anzuzeigen, dass die Variable ein jQuery-Objekt ist.

var $nav = $('#navigation');
$nav.show();

DOM-Elemente als Selektoren

jQuery akzeptiert eine Vielzahl von Parametern. Einer davon ist ein tatsächliches DOM-Element. Das Übergeben eines DOM-Elements an jQuery bewirkt, dass die zugrunde liegende arrayähnliche Struktur des jQuery-Objekts dieses Element enthält.

jQuery erkennt, dass das Argument ein DOM-Element ist, indem es seinen nodeType untersucht.

Ein DOM-Element wird am häufigsten in Callbacks verwendet, wobei das aktuelle Element an den jQuery-Konstruktor übergeben wird, um Zugriff auf die jQuery-API zu erhalten.

Wie in each Callback (Anmerkung: Jede ist eine Iteratorfunktion).

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

HTML-Strings als Selektoren

jQuery akzeptiert eine Vielzahl von Parametern als "Selektoren". Einer davon ist ein HTML-String. Die Übergabe einer HTML-Zeichenfolge an jQuery bewirkt, dass die zugrunde liegende arrayähnliche Struktur des jQuery-Objekts den erstellten HTML-Code enthält.

jQuery verwendet regex, um zu bestimmen, ob die an den Konstruktor übergebene Zeichenfolge eine HTML-Zeichenfolge ist und außerdem mit < beginnen muss . Dieser Regex ist definiert als rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( Erklärung bei regex101.com ).

Eine HTML-Zeichenfolge als Selektor wird am häufigsten verwendet, wenn nur DOM-Elemente im Code erstellt werden müssen. Dies wird häufig von Bibliotheken für Modal-Popouts verwendet.

Zum Beispiel eine Funktion, die ein in ein div eingeschlossenes Ankertag als Vorlage zurückgegeben hat

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

Würde ein jQuery-Objekt zurückgeben, das hält

<div>
    <a href="google.com">Google</a>
</div>

wenn als template("google.com","Google") aufgerufen template("google.com","Google") .