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. FirstDescription: 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ück5, :oddBeschreibung: Wählen Sie alle Elemente aus, deren Index eine ungerade Zahl ist, der Index beginnt bei 0, und geben Sie die zurück Elementsatz6 , :eq(index)Beschreibung: Elemente auswählen, deren Index gleich dem Index ist, Index beginnt bei 0, ein einzelnes Element zurückgeben7, :gt(index)Beschreibung: Elemente auswählen, deren Index größer ist als Index, Index beginnt bei 0, Gibt die Elementsammlung zurück8, :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ück9, : FokusBeschreibung: Wählen Sie das Element aus, das derzeit den Fokus erhält 2>Inhaltsfilterauswahl1, :contains(text)Beschreibung: Wählen Sie Elemente aus, die Text enthalten, und geben Sie eine Sammlung von Elementen zurückBeispiel: $("p: enthält('I')") Wählen Sie enthält Element des Textes "I"2, :emptyBeschreibung: Wählen Sie ein leeres Element aus, das keine untergeordneten Elemente oder Textelemente enthält, und geben Sie eine Sammlung von Elementen zurückBeispiel : $("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 :parentBeschreibung: Elemente auswählen, die Unterelemente oder Text enthalten, und eine Sammlung von Elementen zurückgebenBeispiel: $("p:parent") wählt
-Elemente aus, die untergeordnete Elemente oder Textelemente enthalten (
odertext
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
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!