Welche Arten von JQuery-Selektoren gibt es?

Es gibt 4 Arten von JQuery-Selektoren: 1. Basis-Selektor, der Elemente anhand ihrer ID, Klasse usw. findet; 2. Hierarchischer Selektor, der bestimmte Elemente basierend auf hierarchischen Beziehungen erhält; Inhaltsfilterung, Sichtbarkeitsfilterung, Attributfilterung und Unterelementfilterung; 4. Formularauswahl, die eine Sammlung von Elementen zurückgeben kann.

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.

Welche verschiedenen Arten von JQuery-Selektoren gibt es? 1. Basis-Selektor

Der Basis-Selektor ist der am häufigsten verwendete und einfachste Selektor in jQuery. Er sucht nach Elementen anhand ihrer ID, Klasse und ihres Tag-Namens .

1. ID-Selektor #id

Beschreibung: Passt ein Element basierend auf der angegebenen ID an und gibt ein einzelnes Element zurück (Hinweis: Auf der Webseite kann der ID-Name nicht wiederholt werden)

Beispiel: $("# test") Wählen Sie das Element mit der ID von test aus

2. Klassenselektor.klasse

Beschreibung: Ordnen Sie Elemente entsprechend dem angegebenen Klassennamen zu und geben Sie die Elementsammlung zurück

Beispiel: $(".test") Auswählen alle mit der Klasse test Element

3. Element (Tag)-Selektorelement

Beschreibung: Elemente entsprechend dem angegebenen Elementnamen abgleichen und die Elementsammlung zurückgeben

Beispiel: $("p") wählt alle

4, *

Beschreibung: Alle Elemente abgleichen und den Elementsatz zurückgeben

Beispiel: $("*") Alle Elemente auswählen

5, selector1, selector2 ,...,selectorN (union selector)

Beschreibung: Füge die von jedem Selektor übereinstimmenden Elemente zusammen, gib sie zusammen zurück und gebe den zusammengeführten Elementsatz zurück

Beispiel: $("p,span,p. myClass ") wählt den Satz von Elementen mit allen

-, - und

-Tags aus, deren Klasse myClass ist

2. Hierarchischer Selektor

Der hierarchische Selektor erhält bestimmte Elemente basierend auf hierarchischen Beziehungen.

1. Nachkommen-Selektor

Beispiel: $("p span") wählt alle -Elemente aus (Hinweis: Der Nachkommen-Selektor wählt alle angegebenen ausgewählten Elemente des übergeordneten Elements aus es handelt sich um eine Sohnebene oder eine Enkelebene ;-Element (Hinweis: Untergeordnete Selektoren wählen nur untergeordnete Elemente aus, die direkt zum übergeordneten Element gehören) Satz von Elementen

Beispiel: $(".one+p") wählt den nächsten

Geschwister-Selektor $("prev~siblings")

Beschreibung: Auswählen alle Geschwisterelemente nach dem vorherigen Element und gibt die Menge der Elemente zurück Beispiel: $("#two~p") wählt die Menge aller Geschwisterelemente nach dem Element mit der ID zwei aus

3. Filterselektor

1>Basisfilterselektor

1, :first

Beschreibung: Wählen Sie das erste Element aus und geben Sie ein einzelnes Element zurückBeispiel: $("p:first") wählt das erste Element unter allen Element

2, :last

Beschreibung: Wählen Sie das letzte Element aus und geben Sie ein einzelnes Element zurück

Beispiel: $("p:last") wählt das letzte

Element3, :not(selector)

Beschreibung: Alle Elemente entfernen, die mit dem angegebenen Selektor übereinstimmen, und den Elementsatz zurückgebenBeispiel: $("input:not(.myClass)") wählt eine Klasse aus, die nicht myClass ist Element

4, :even

Beschreibung: Alle Elemente auswählen, deren Index eine gerade Zahl ist, Index beginnt bei 0, Elementmenge zurückgeben

5, :odd

Beschreibung: Alle Elemente auswählen, deren Index eine ungerade Zahl ist , index Beginnend bei 0, geben Sie die Menge der Elemente zurück

6, :eq(index)

Beschreibung: Wählen Sie das Element aus, dessen Index gleich dem Index ist, der Index beginnt bei 0, geben Sie ein einzelnes Element zurück

7, :gt (Index)

Beschreibung: Wählen Sie den Index aus. Für Elemente, die größer als der Index sind, beginnt der Index bei 0 und gibt die Elementmenge zurück: lt(index)

Beschreibung: Wählt die Elemente aus, deren Index kleiner als der Index ist index beginnt bei 0 und gibt den Elementsatz zurück

9 :focus

Beschreibung: Wählen Sie das Element aus, das derzeit den Fokus erhält

2> Inhaltsfilterauswahl

1, :contains(text)

Beschreibung: Wählen Sie das Element aus Enthält Textinhalt als Text und gibt die Elementsammlung zurück

Beispiel: $(" p:contains('I')") Wählen Sie Elemente aus, die den Text „I“ enthalten

2, :empty

Beschreibung: Wählen Sie leere Elemente aus, die dies tun enthalten keine Unterelemente oder Textelemente und geben eine Sammlung von Elementen zurück

Beispiel: $(" p:empty") wählt ein leeres

aus, das keine untergeordneten Elemente oder Textelemente enthält (

< ;/p>)

3 :has(selector)

Beschreibung: Wählen Sie das Element aus, das das vom Selektor gefundene Element enthält, und geben Sie den Elementsatz zurück.

Beispiel: $("p:has(p)") wählt das

-Element aus (< p>

oder ein

-Element eines Textelements (

)

3> ;Sichtbarkeitsfilterauswahl

1. :hidden

Beschreibung: Alle unsichtbaren Elemente auswählen und den Elementsatz zurückgeben2. :sichtbar

Beschreibung: Alle sichtbaren Elemente auswählen und den Elementsatz zurückgeben

4> Selektor (gibt den Elementsatz zurück)

1. [Attribut]

Beispiel: $("p[id]") Wählen Sie das p-Element mit dem ID-Attribut aus2.[Attribut=Wert]

Beispiel: $( "input[name=text ]") Wählen Sie Eingabeelemente mit dem Namensattribut gleich text

3, [attribute!=value]

Beispiel: $("input[name!=text]") Wählen Sie Eingabeelemente mit dem Namensattribut aus ungleich text

4. [attribute^=value]

Beispiel: $("input[name^=text]") Wählen Sie das Eingabeelement aus, dessen Namensattribut mit text beginnt

5.

Beispiel: $( "input[name$=text]") wählt das Eingabeelement mit dem Namensattribut aus, das auf text endet

6 [attribute*=value]

Beispiel: $("input[name*=text ]") wählt das Eingabeelement mit dem Namensattribut aus. Eingabeelemente mit Text

7, [Attribut~=Wert]

Beispiel: $("input[class~=text]") Wählen Sie Eingabeelemente aus, die Text in Werten enthalten ​durch Leerzeichen mit Klassenattributen getrennt

8, [attribute1][attribute2][attributeN]

Beschreibung: Mehrere Attributfilterselektoren kombinieren

5> Formularobjektattributfilterselektor (Rückgabeelementsammlung)

1, : aktiviert

Beschreibung: Alle verfügbaren Elemente auswählen 2, :deaktiviert

Beschreibung: Alle nicht verfügbaren Elemente auswählen

3, :markiert

Beschreibung: Alle ausgewählten Elemente auswählen (Optionsfelder, Kontrollkästchen)

Beispiel: $( „Eingabe: aktiviert“) Alle ausgewählten -Elemente auswählen

4. :ausgewählte

Beschreibung: Alle ausgewählten Optionselemente auswählen (Dropdown-Liste)

Beispiel: $("select option:selected") Alle auswählen selected Ausgewähltes Optionselement

4. Formularauswahl (gibt Elementsammlung zurück, ähnliche Verwendung)

1. :text

Beschreibung: Alle einzeiligen Textfelder auswählen

Beispiel: $(":text") Alle einzeiligen Textfelder auswählen

2, :Passwort

Beschreibung: Alle Passwortfelder auswählen

3, :Schaltfläche

Beschreibung: Alle Schaltflächen auswählen

4, :Kontrollkästchen

Beschreibung: Wählen Sie alle Mehrfachauswahlfelder aus

Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Arten von JQuery-Selektoren gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!