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.
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 aus2. 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 Element3. Element (Tag)-Selektorelement
Beschreibung: Elemente entsprechend dem angegebenen Elementnamen abgleichen und die Elementsammlung zurückgeben
Beispiel: $("p") wählt alle4, *
Beschreibung: Alle Elemente abgleichen und den Elementsatz zurückgeben
Beispiel: $("*") Alle Elemente auswählen5, 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 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 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 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 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 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> -Element eines Textelements (Der hierarchische Selektor erhält bestimmte Elemente basierend auf hierarchischen Beziehungen.
Beispiel: $("p:last") wählt das letzte
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
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. :textBeispiel: $(":text") Alle einzeiligen Textfelder auswählen
2, :PasswortBeschreibung: 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!