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

Laienhaft ausgedrückt ist ein Selektor „eine Zeichenfolge, die eine spezielle Semantik darstellt“. Solange die Selektorzeichenfolge an die obige Methode übergeben wird, können verschiedene Dom-Objekte ausgewählt und in Form eines jQuery-Wrapper-Sets zurückgegeben werden.

Aber es fiel mir schwer, jQuery-Selektoren zu klassifizieren, da sich die Klassifizierung im Buch völlig von der offiziellen Klassifizierung von jQuery unterscheidet. Letztendlich habe ich mich entschieden, mich auf die Praktikabilität zu konzentrieren und den CSS3-Selektorstandard zu dieser Zeit nicht zu verstehen Befolgen Sie jedoch die offizielle jQuery-Klassifizierung.

Der Selektor von jQuery unterstützt den neuesten CSS3-Selektorstandard von W3C:

http://www .w3.org/TR/css3 -selectors/

Alle Selektoren im Standard können in jQuery verwendet werden

jQuery-Selektoren sind entsprechend ihrer Bedeutung hauptsächlich in „Auswahl“ und „Filterung“ unterteilt Und sie können gleichzeitig verwendet werden, um eine Selektorzeichenfolge zu bilden. Der Hauptunterschied besteht darin, dass der „Filter“-Selektor Bedingungen zum Filtern aus dem zuvor übereinstimmenden Inhalt angibt allein, was bedeutet, aus allen „*“ zu filtern. Zum Beispiel:

$(“:[title]”)

ist äquivalent zu:

$(“*. :[Titel]“)

Der Selektor der Funktion „Auswählen“ hat keinen Standardbereich, da die Funktion „Auswählen“ und nicht „Filtern“ ist.

Im folgenden Selektor Kategorien, die Kategorie mit „Filter“ bedeutet „Filter“-Selektor, andernfalls ist es der Selektor der Funktion „Auswählen“

jQuery-Selektoren sind in die folgenden Kategorien unterteilt:

[Erklärung]
1. Klicken Sie auf „Name“, um zur offiziellen jQuery-Dokumentation für diese Methode zu springen.
2. Im nächsten Abschnitt können Sie verschiedene Selektoren testen.

Name

Erklärung

Beispiel

#id

Auswahl basierend auf Element-ID

$("divId ") Wählen Sie das Element mit der ID divId aus.

element

wird basierend auf dem Namen des Elements ausgewählt.

$("a") wählt alle -Elemente aus

.class

Wählen Sie entsprechend der CSS-Klasse des Elements aus

$(".bgRed") Wählen Sie das Element aus, dessen CSS-Klasse bgRed ist

Alle Elemente auswählen

$("*") wählt alle Elemente auf der Seite aus

Selektor1,
Selektor2,
SelektorN

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

$(„#divId, a, .bgRed“ )

[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.

2. Hierarchieselektor Hierarchie

Name

Beschreibung

Beispiel

Vorfahre Nachkomme

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

$(.bgRed div“) wählt alle

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”)