Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Filterselektoren hat jQuery?

青灯夜游
Freigeben: 2020-11-13 13:52:39
Original
3157 Leute haben es durchsucht

jQuery-Filterselektoren umfassen: „:first“, „:last“, „:not()“, „:even“, „:odd“, „:eq()“, „:gt()“, „ : lt()“, „:header“, „:empty“, „:has()“, „:hidden“ usw.

Welche Filterselektoren hat jQuery?

【Verwandte Empfehlung: jQuery-Video-Tutorial

jQuery-Filterselektor

Filtern? 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 Basisfilterung, 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! Weil JQuery eine Sammlung von DOM-Objekten ist. 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 unter allen Elementen ungerade Elemente 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“, wählen Sie alle Header-Elemente aus, z. B. hq, h2 usw.

j) „:animated“, wählt alle animierten Elemente aus, die gerade ausgeführt werden.

2. Auswahl des Inhaltsfilters

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 Elemente aus, die Elemente enthalten, die mit dem Selektor übereinstimmen.

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", alle unsichtbaren Elemente auswählen.

  • „:visible“ wählt alle sichtbaren Elemente aus.

Visible-Selektor: Ausgeblendet umfasst nicht nur Elemente, deren Stilattributanzeige „Keine“ ist, sondern auch Elemente wie ausgeblendete Textfelder () und sichtbar: ausgeblendet.

4. Attributfilterauswahl

Wählen Sie das entsprechende Element über das Attribut des Elements aus.

a) „[Attribut]“, Elemente mit diesem Attribut auswählen.

b) „[attribute=value]“, alle Elemente mit dem angegebenen Attributwert als Wert auswählen.

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) „[Selektor1] [Selektor2]...[SelektorN]“, ein zusammengesetzter Selektor, wählt zuerst [Selektor1] aus und kehrt zu Satz A zurück, Satz A wählt dann [Selektor2] aus und kehrt zu Satz B zurück, dann Satz B wählt [selectorN] ] Wählen Sie diese Option aus, um die Ergebnismenge zurückzugeben.

5. Filterauswahl für untergeordnete Elemente

Wie Sie am Namen erkennen können, wählt er die untergeordneten Elemente eines bestimmten Elements aus.

a) „:nth-child(index/even/odd)“, wählen Sie das Element mit Index, das Element mit geradem Index und das Element mit ungeradem Index aus.

  • n-tes Kind (gerade/ungerade): Kann Elemente auswählen, deren Indexwert unter jedem übergeordneten Element eine gerade (ungerade) Zahl ist.

  • nth-child(2): Kann das Element mit dem Indexwert 2 unter jedem übergeordneten Element auswählen.

  • nth-child(3n): Kann Elemente auswählen, deren Indexwert unter jedem übergeordneten Element ein Vielfaches von 3 ist.

  • 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ählen Sie das letzte untergeordnete Element aus.

d) „:only-child“ wählt das einzige untergeordnete Element aus, dessen übergeordnetes Element nur dieses untergeordnete Element hat.

6. Formularfilterauswahl

Wählen Sie die Filterauswahl des Formularelements aus.

a) „:input“ wählt alle -,