Heim > Artikel > Web-Frontend > Grundlegendes Tutorial zum JQuery-Selektor: Basisselektor, hierarchischer Selektor, Filterselektor
Grundlegendes Tutorial zum JQuery-Selektor: Basisselektor, hierarchischer Selektor, Filterselektor
- 伊谢尔伦Original
- 2017-06-17 15:45:091532Durchsuche
Der Basisselektor ist der am häufigsten verwendete Selektor in JQuery und der einfachste Selektor. Er sucht nach Element-ID, Klasse und Tag-Namen des DOM-Elements. Dies ist sehr wichtig, und die folgenden Inhalte basieren darauf und werden Schritt für Schritt verbessert.
1). „$(“#id“)“, ruft das durch id angegebene Element ab. Die ID ist global eindeutig und hat daher nur ein Mitglied.
2) „$(“.class“), ruft das durch die Klasse angegebene Element ab. Verschiedene Elemente können das gleiche Klassenattribut haben, daher kann es mehrere Mitglieder haben.
3) „$(“element“)“, ruft das durch das Element angegebene Element (Elementname, z. B. div, table usw.) ab, das mehrere Mitglieder haben kann.
4). „$(“*“)“, alle Elemente abrufen, die dem Dokument entsprechen.
5). „$(“selector1,selector2,...,selectorN“)“, führt die von jedem Selektor übereinstimmenden Elemente zusammen und gibt sie zusammen zurück. Gibt die Menge zurück, die mit Selektor1 übereinstimmt + die Menge, mit der Selektor2 übereinstimmt + ... + die Menge, mit der SelektorN übereinstimmt.
2. Level-Auswahl
Was ist Level? Ebene ist der Knotenpunkt der Vater-Sohn-Beziehung und der Bruder-Beziehung. Daher wird der hierarchische Selektor verwendet, um die übergeordneten, untergeordneten und Geschwisterknoten eines angegebenen Elements abzurufen.
1) „$(„Vorfahren Nachkomme“)“ ruft alle Elemente unterhalb des Vorfahrenelements ab.
2). „$(“parent > child“)“, ruft alle untergeordneten Elemente unter dem übergeordneten Element ab (nur die erste Ebene der untergeordneten Elemente ist enthalten).
3) „$(“pre + next“)“, ruft das nächste Geschwisterelement ab, das unmittelbar auf das pre-Element folgt.
4). „$(“pre ~ siblings“)“, alle Geschwisterelemente nach dem pre-Element abrufen.
3. Filterauswahl
Filter? Es müssen unbedingt Filterbedingungen hinzugefügt werden. Fügen Sie Filterbedingungen über „:“ hinzu, z. B. „$(“div:first“)“, um das erste div-Element in der div-Elementsammlung zurückzugeben, und zuerst ist die Filterbedingung.
Gemäß verschiedenen Filterregeln können Filterselektoren in Basisfilter, Inhaltsfilterung, Sichtbarkeitsfilterung, Attributfilterung, Unterelementfilterung und Filterselektoren für Formularobjektattribute unterteilt werden.
1). Grundlegende Filterauswahl
a) „:first“, wählen Sie das erste Element aus, vergessen Sie nicht, dass es auch in einer Sammlung platziert ist! Denn JQuery ist eine Sammlung von DOM-Objekten. Beispielsweise gibt „$(“tr:first“)“ das erste tr-Element aller tr-Elemente zurück, das noch in der Sammlung gespeichert ist.
b) „:last“, wählen Sie das letzte Element aus. Beispielsweise gibt „$(“tr:last“)“ das letzte tr-Element aller tr-Elemente zurück, das noch in der Sammlung gespeichert ist.
c) „:not(selector)“, entfernt alle Elemente, die dem angegebenen Selektor entsprechen. Beispielsweise gibt „$(“input:not(:checked)“)“ alle Eingabeelemente zurück, entfernt aber die ausgewählten Elemente (Optionsfeld, Mehrfachauswahlfeld).
d) „:even“ wählt unter allen Elementen gerade nummerierte Elemente aus. Da es sich bei dem JQuery-Objekt um eine Sammlung handelt, bezieht sich die gerade Zahl hier auf den Index der Sammlung, und der Index beginnt bei 0.
e) „:odd“ wählt ungeradzahlige Elemente unter allen Elementen aus und der Index beginnt bei 0.
f) „:eq(index)“ wählt das Element am angegebenen Index aus und der Index beginnt bei 0.
g) „:gt(index)“ wählt Elemente aus, deren Index größer als der angegebene Index ist, und der Index beginnt bei 0.
h) „:lt(index)“ wählt Elemente aus, deren Index kleiner als der angegebene Index ist, und der Index beginnt bei 0.
i) „:header“, alle Titelelemente auswählen, wie z. B. hq, h2 usw.
j) „:animated“ wählt alle animierten Elemente aus, die gerade ausgeführt werden.
2). Inhaltsfilterauswahl
Es handelt sich um eine Operation für Elemente und Textinhalte.
a) „:contains(text)“ wählt Elemente aus, die Textinhalt enthalten.
b) „:empty“ wählt leere Elemente aus, die keine untergeordneten Elemente oder Textknoten enthalten.
c) „:has(selector)“ wählt das Element aus, das das vom Selektor übereinstimmende Element enthält.
d) „:parent“, Elemente auswählen, die untergeordnete Elemente oder Textknoten enthalten. (Es ist ein übergeordneter Knoten)
3). Sichtbarkeitsfilterauswahl
Wählen Sie Elemente basierend auf ihrem sichtbaren oder unsichtbaren Status aus.
„:hidden“ wählt alle unsichtbaren Elemente aus.
„:visible“ wählt alle sichtbaren Elemente aus.
Sichtbarer Selektor: Ausgeblendet umfasst nicht nur Elemente, deren Stilattributanzeige „Keine“ ist, sondern auch Elemente wie ausgeblendete Textfelder () und sichtbar:ausgeblendet.
4). Attributfilterselektor
Wählt das entsprechende Element über das Attribut des Elements aus.
a) „[Attribut]“, Elemente mit diesem Attribut auswählen.
b) „[attribute=value]“ wählt alle Elemente aus, deren angegebener Attributwert value ist.
c) „[Attribut !=Wert]“, wählt alle Elemente aus, deren Attributwert kein Wert ist.
d) „[Attribut ^= Wert]“, alle Elemente auswählen, deren Attributwert mit Wert beginnt.
e) „[attribute $= value]“, alle Elemente auswählen, deren Attributwert mit value endet.
f) „[Attribut *= Wert]“, alle Elemente auswählen, deren Attributwert Wert enthält.
g) „[selector1] [selector2]...[selectorN]“, ein zusammengesetzter Selektor, wählt zuerst [selector1] aus und gibt Set A zurück, set A, wählt dann [selector2] aus und gibt Set B zurück, set B Wählen Sie dann die Ergebnismenge aus und geben Sie sie über [selectorN] zurück.
5). Filterauswahl für untergeordnete Elemente
Wie Sie am Namen erkennen können, werden die untergeordneten Elemente eines bestimmten Elements ausgewählt.
a) „:nth-child(index/even/odd)“ wählt das Element mit Index, das Element mit geradem Index und das Element mit ungeradem Index aus.
l n-tes Kind (gerade/ungerade): Kann Elemente auswählen, deren Indexwert unter jedem übergeordneten Element eine gerade (ungerade) Zahl ist.
l nth-child(2): Kann das Element mit dem Indexwert 2 unter jedem übergeordneten Element auswählen.
l nth-child(3n): Kann Elemente auswählen, deren Indexwert unter jedem übergeordneten Element ein Vielfaches von 3 ist.
l nth-child(3n + 1): Kann unter jedem übergeordneten Element das Element auswählen, dessen Indexwert 3n + 1 ist.
b) „:first-child“, wählen Sie das erste untergeordnete Element aus.
c) „:last-child“, wählt das letzte untergeordnete Element aus.
d) „:only-child“ wählt das einzige untergeordnete Element aus, dessen übergeordnetes Element nur dieses untergeordnete Element hat.
6). Formularfilterselektor
Filterselektor, der Formularelemente auswählt.
a) „:input“ wählt alle -,