Detaillierte Erläuterung der vollständigen Sammlung von jQuery-Selektoren-PHP开发-php.cn

Sie können mehrere Selektoren mit "," trennen und sie dann als Selektorzeichenfolge buchstabieren. Der von diesen Selektoren übereinstimmende Inhalt wird gleichzeitig ausgewählt

[Lernvorschläge]: Merken Sie sich das vorerst. Konzentrieren Sie sich einfach auf die grundlegenden Selektoren. Sie können direkt zum nächsten Abschnitt „jQuery Selector Lab“ springen, um praktische Übungen zu machen Selektoren, oder kehren Sie zur Abfrage zurück, wenn Sie sie verwenden.

Verwenden Sie „Formulareingabe“, um alle Eingabeelemente im Formular auszuwählen. Das heißt, Vorfahre (Vorfahre) ist von, Nachkomme (Nachkomme) ist Eingabe

in den Elementen aus, deren CSS-Klasse bgRed Element ist.

parent >

Wählen Sie den direkten untergeordneten Knoten des übergeordneten Elements aus das übergeordnete Element und die übergeordnete Klasse ist das übergeordnete Element.

$(.myList> ;li") Wählen Sie die CSS-Klasse als direktes untergeordnetes Node

-Objekt im myList-Element aus.

prev + next

prev und next sind zwei Elemente derselben Ebene. Select prev Das nächste Element nach dem Element

$("#hibiscus+img") wird nach dem img-Objekt ausgewählt dessen ID das Hibiskus-Element ist.

prev ~ siblings

wird nach prev Elements gefiltert nach siblings
Hinweis: siblings ist der Filter

$("# someDiv~[title]") wählt alle Elemente mit dem Titelattribut hinter dem Objekt mit der ID someDiv

3 aus. Grundlegende Filter

Name

Beschreibung

Beispiel

:first

entspricht dem ersten gefundenen Element

erste Zeile der Nachschlagetabelle: $("tr:first")

:last

entspricht dem zuletzt gefundenen Element

Nachschlagetabelle Die letzte Zeile von: $("tr:last")

:not(selector)

Alle entfernen Elemente, die mit dem angegebenen Selektor übereinstimmen

Alle nicht ausgewählten Eingabeelemente finden: $(“input:not(:checked)”)

:even

Entspricht allen Elementen mit einem geraden Index Wert, gezählt von 0

Nachschlagetabelle Zeilen 1, 3, 5...: $("tr:even")

:odd

sucht nach allen Elementen mit ungerade Indexwerte, gezählt von 0

Zeilen 2, 4 und 6 der Tabelle finden: $("tr:odd")

:eq(index)

Treffer ein Element mit einem bestimmten Indexwert
Hinweis: Der Index beginnt bei 0 zu zählen

Suchen Sie die zweite Zeile: $("tr:eq(1)")

:gt(index )

Entspricht allen Werten, die größer als das angegebene Indexelement sind
Hinweis: Der Index beginnt mit der Zählung bei 0

Suchen Sie die zweite und dritte Zeile, d. h. die Indexwerte 1 und 2, die größer als 0 ist: $("tr:gt(0)")

:lt(index)

Wählen Sie Elemente mit einem Index kleiner als N im Ergebnissatz aus
Hinweis: Der Index beginnt bei 0 zu zählen

Suchen Sie die erste und zweite Zeile, also den Indexwert. Es sind 0 und 1, was kleiner als 2 ist: $("tr:lt(2) ")

:header

Wählen Sie alle Header-Tags wie h1, h2 und h3 aus.

Fügen Sie allen Titeln auf der Seite eine Hintergrundfarbe hinzu: $(“: header“).css(“background“, „#EEE“);

:animated

stimmt überein. Alle Elemente

, die Animationseffekte ausführen, können nur einen Animationseffekt ausführen für Elemente, die keine Animationseffekte ausführen: $(„#run“).click(function(){
$(“div:not( :animated)").animate({ left: „+=20″ } , 1000);
});

4. InhaltsfilterInhaltsfilter

Name

Erklärung

Beispiel

:contains(text)

Elemente abgleichen, die den angegebenen Text enthalten

Alle div-Elemente finden, die „John“ enthalten :$("div:contains('John')")

:empty

Entspricht allen leeren Elementen, die keine untergeordneten Elemente oder Text enthalten.

Findet alle leeren Elemente die keine untergeordneten Elemente enthalten. Element oder leeres Textelement: $("td:empty")

:has(selector)

Entspricht Elementen, die das vom Selektor gefundene Element

enthalten

für alle Fügen Sie dem div-Element, das das p-Element enthält, eine Textklasse hinzu: $("div:has(p)").addClass("test");

:parent

Treffer, die untergeordnete Elemente oder Textelemente enthalten

alle td-Elemente finden, die untergeordnete Elemente oder Text enthalten: $("td:parent")

5. Sichtbarkeitsfilter Sichtbarkeitsfilter

Name

Erklärung

Beispiel

:hidden

trifft alle unsichtbaren Elemente zu

Hinweis: In Version 1.3.2 stimmt versteckt mit sich selbst überein Oder das Element, dessen übergeordnete Klasse keinen Platz im Dokument einnimmt. Wenn Sie die CSS-Sichtbarkeitseigenschaft verwenden, um nicht anzuzeigen, aber Platz zu belegen, geben Sie nicht „Alle unsichtbaren tr-Elemente suchen“ ein: $("tr: versteckt ")

:visible

Alle sichtbaren Elemente abgleichen

Alle sichtbaren tr-Elemente finden: $("tr:visible")

6. Attribut Filter Attributfilter

Name

Beschreibung

Beispiel

[Attribut]

Entspricht Elementen, die das angegebene Attribut enthalten

Finden Sie alle div-Elemente, die das ID-Attribut enthalten:

$("div[id]")

[attribute=value]

Ordnen Sie das angegebene Attribut einem bestimmten Element mit einem bestimmten zu value

Alle Eingabeelemente finden, deren Namensattribut Newsletter ist:

$("input[name='newsletter']").attr("checked", true);

[ attribute!=value]

Findet Elemente, bei denen das angegebene Attribut keinen bestimmten Wert enthält

Suchen Sie alle Eingabeelemente, deren Namensattribut nicht Newsletter ist:

$(" input[name! ='newsletter']").attr("checked", true);

[attribute^=value]

Entspricht dem angegebenen Attribut, beginnend mit einem Wert. Das Element

$("input[name^='news']")

[attribute$=value]

stimmt mit dem angegebenen Attribut mit einem Wert überein. Endelement

Alle finden Eingabeelemente, deren Name mit „Buchstabe“ endet:

$("input[name$='letter']")

[attribute*=value]

Gibt das angegebene Attribut als ein Element, das einen Wert enthält

Alle Eingabeelemente finden, deren Name „man“ enthält:

$("input[name*='man' ]")

[attributeFilter1][attributeFilter2 ][attributeFilterN]

Zusammengesetzter Attributselektor, der verwendet wird, wenn mehrere Bedingungen gleichzeitig erfüllt werden müssen.

Suchen Sie alle Attribute, die eine ID enthalten und deren Namensattribut mit man endet:

$("input[id][name$='man']")

7 Untergeordnetes Element filter Untergeordnete Filter

Name

Beschreibung

Beispiel

:nth-child(index/even/odd/equation)

Übereinstimmungen Das N-te untergeordnete oder ungerade-gerade-Element unter seinem übergeordneten Element

':eq(index)' stimmt nur mit einem Element überein, und dieses stimmt mit dem untergeordneten Element für jedes übergeordnete Element überein. :nth-child beginnt bei 1 und :eq() beginnt bei 0!

kann verwendet werden:

nth-child(even)

:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

Finden Sie das 2. li in jedem ul:

$(“ul li:nth-child ( 2)")

:first-child

stimmt mit dem ersten untergeordneten Element überein.

':first' stimmt nur mit einem Element überein. Dieser Selektor stimmt mit jedem überein. Das übergeordnete Element stimmt überein ein untergeordnetes Element

Finde das erste li in jedem ul:

$("ul li:first-child")

:last-child

Entspricht dem letzten Untergeordnetes Element

':last' stimmt nur mit einem Element überein, und dieser Selektor stimmt mit einem untergeordneten Element für jedes übergeordnete Element überein.

Findet das letzte Element in jedem ul A li:

$( "ul li:last-child")

:only-child

Wenn ein Element das einzige untergeordnete Element des übergeordneten Elements ist, wird es übereinstimmen

Wenn das Da das übergeordnete Element andere Elemente enthält, wird es nicht abgeglichen.

Finden Sie li, das das einzige untergeordnete Element in ul ist:

$(“ul li:only-child”)

8. Formularauswahlformulare

Name

Erklärung

: Eingabe

Entspricht allen Eingabe-, Textbereichs-, Auswahl- und Schaltflächenelementen

Alle Eingabeelemente finden:

$( „:input“)

:text

Alle Textfelder finden

Alle Textfelder finden:

$(“:text“)

:password

Alle Passwortfelder finden

Alle Passwortfelder finden:

$(“:password“)

:radio

Alle Radios finden Schaltflächen

Alle Optionsfelder finden

:checkbox

Alle Kontrollkästchen finden

Alle Kontrollkästchen finden:

$(“:checkbox”)

:submit

Alle Submit-Schaltflächen finden

Alle Submit-Buttons finden:

$(“:submit”)

:image

entspricht allen Bildfeldern

entspricht allen Bildfeldern:

$(“:image”)

:reset

entspricht allen Reset-Schaltflächen

Alle Reset-Schaltflächen finden:

$(":reset")

:button

Alle Schaltflächen abgleichen Alle Schaltflächen:

$(":button")

:file

Alle Dateifelder abgleichen

Alle Dateifelder finden:

$(":file ”)

9. Formularfilter

Name

Beschreibung

Erklärung

:aktiviert

Alle verfügbaren Elemente abgleichen

Alle verfügbaren Eingabeelemente finden:

$( „Eingabe:aktiviert“)

:deaktiviert

Alle deaktivierten Elemente abgleichen

Alle nicht verfügbaren Eingabeelemente finden:
$("input:disabled")

:checked

Alle markierten Elemente abgleichen Die ausgewählten Elemente (Kontrollkästchen, Optionsfelder usw., ausgenommen Optionen in „Auswählen“)

Alle ausgewählten Kontrollkästchenelemente finden:
$("input:checked")

:selected

Alle ausgewählten Optionselemente abgleichen

Alle ausgewählten Optionselemente finden:
$("select option:selected")

Ausführlichere Erklärungen zu jQuery-Selektoren finden Sie auf der chinesischen PHP-Website!

Detaillierte Erläuterung der vollständigen Sammlung von jQuery-Selektoren

In Verbindung stehende Artikel