Welche JQuery-Selektortypen 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.

Das Betriebssystem dieses Tutorials: Windows 10-System, jQuery Version 3.6.0, Dell G3-Computer.

Es gibt vier Selektoren in jQuery:

1. Basisselektor

Der Basisselektor ist der am häufigsten verwendete und einfachste Selektor in jQuery. Er durchsucht das DOM anhand der ID, der Klasse und des Tag-Namens des Elements .

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 ID-Elemente aus, die test sind

2. Class selector.class

Beschreibung: Ordnen Sie Elemente entsprechend dem angegebenen Klassennamen zu und geben Sie eine Sammlung von Elementen zurück

Beispiel: $(".test") wählt alle Elemente mit der Klasse test aus

3, Element (Label)-Selektorelement

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

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

-Elemente aus. : Alle div-Tags auswählen

4, *

Beschreibung: Alle Elemente abgleichen und einen Satz von Elementen zurückgeben

Beispiel: $("*") wählt alle Elemente aus

5, selector1, selector2,...,selectorN ( Union Selector)

Beschreibung: Kombinieren Sie die von jedem Selektor übereinstimmenden Elemente, geben Sie sie zusammen zurück und geben Sie den zusammengeführten Elementsatz zurück

Beispiel: $("p,span,p.myClass") wählt alle

, eine Sammlung aus von Elementen mit - und

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

2. Untergeordneter Selektor $("parent>child")

Beispiel: $("p>span") wählt alle -Elemente aus (Hinweis: Untergeordneter Selektor). Wählt nur untergeordnete Elemente aus, die direkt zum übergeordneten Element gehören. .one+p") Wählt den nächsten

-Geschwisterelementsatz mit Klasse eins aus

4. Geschwisterselektor $("prev~siblings")

Beschreibung: Wählt alle Geschwister nach dem vorherigen Elementelement aus und gibt den Satz von zurück Elemente

Beispiel: $("#two~p") wählt die Menge aller

Geschwisterelemente nach dem Element mit der ID zwei

3 aus. First

Description: Wählen Sie das erste Element aus und geben Sie ein einzelnes Element zurück. Beispiel: $("p:first") wählt das erste

-Element unter allen

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

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

-Element aus

3 :not(selector : even

Beschreibung: Wählen Sie alle Elemente aus, deren Index eine gerade Zahl ist, der Index beginnt bei 0, und geben Sie die Elementmenge zurück

5, :odd

Beschreibung: Wählen Sie alle Elemente aus, deren Index eine ungerade Zahl ist, der Index beginnt bei 0, und geben Sie die zurück Elementsatz

6 , :eq(index)

Beschreibung: Elemente auswählen, deren Index gleich dem Index ist, Index beginnt bei 0, ein einzelnes Element zurückgeben

7, :gt(index)

Beschreibung: Elemente auswählen, deren Index größer ist als Index, Index beginnt bei 0, Gibt die Elementsammlung zurück

8, :lt(index)

Beschreibung: Wählen Sie das Element aus, dessen Index kleiner als Index ist, der Index beginnt bei 0, geben Sie die Elementsammlung zurück

9, : Fokus

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

2>Inhaltsfilterauswahl

1, :contains(text)

Beschreibung: Wählen Sie Elemente aus, die Text enthalten, und geben Sie eine Sammlung von Elementen zurück

Beispiel: $("p: enthält('I')") Wählen Sie enthält Element des Textes "I"

2, :empty

Beschreibung: Wählen Sie ein leeres Element aus, das keine untergeordneten Elemente oder Textelemente enthält, und geben Sie eine Sammlung von Elementen zurück

Beispiel : $("p:empty") Wählt aus, das keine untergeordneten Elemente oder Text enthält. Das leere

)

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 (

). ;

)

4 :parent

Beschreibung: Elemente auswählen, die Unterelemente oder Text enthalten, und eine Sammlung von Elementen zurückgeben

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

-Elemente aus, die untergeordnete Elemente oder Textelemente enthalten (

oder

text

3> Sichtbarkeitsfilterauswahl

1, :hidden

Beschreibung: Alle unsichtbaren Elemente auswählen und die Elementsammlung zurückgeben

2, :visible

Beschreibung: Alle sichtbaren Elemente auswählen und die Elementsammlung zurückgeben

4>Attribut Filterselektor (gibt eine Sammlung von Elementen zurück)

1. [Attribut]

Beispiel: $("p[id]") wählt das p-Element mit dem ID-Attribut aus

2.[Attribut=Wert]

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

3 aus mit Namensattributen ungleich text

4, [attribute^=value]

Beispiel: $("input[name^=text]") Wählen Sie Eingabeelemente mit Namensattributen aus, die mit text beginnen

5, [ attribute$= value]

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

6, [attribute*=value]

Beispiel: $("input[ name*= text]") Wählen Sie Eingabeelemente mit Namensattributen aus, die Text enthalten

7, [attribute~=value]

Beispiel: $("input[class~=text]") Wählen Sie Eingabeelemente mit durch Leerzeichen getrennten Klassenattributen aus. Eingabeelemente mit Text im Wert

8, [attribute1][attribute2][attributeN]

Beschreibung: Mehrere Attributfilterselektoren zusammenführen

5> Formularobjektattributfilterselektor (gibt Elementsammlung zurück)

1, :enabled

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: $("input:checked" ) Alle ausgewählten -Elemente auswählen

4, :selected

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

Beispiel: $(" select option:selected") Alle ausgewählten Optionselemente auswählen

4. Formularauswahl (Elementsammlung zurückgeben, ähnliches verwenden)

1. :text

Beschreibung: Alle einzeiligen Textfelder auswählen

Beispiel: $(":text") wählt alle einzeiligen Textfelder aus

2, :password

Beschreibung: wählt alle Passwortfelder aus

3, :button

Beschreibung: wählt alle Schaltflächen aus

4, :checkbox

Beschreibung: Wählt alle Kontrollkästchen aus

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