suchen

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:091599Durchsuche

1.Basisselektor

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 -,