Heim > Artikel > Web-Frontend > Analyse der Verwendung des jQuery-Filterselektors_jquery

Analyse der Verwendung des jQuery-Filterselektors_jquery

WBOYOriginal: 2016-05-16 16:14:491257Durchsuche

Das Beispiel in diesem Artikel beschreibt die Verwendung des jQuery-Filterselektors. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

In der Praxis kann dem Basisselektor ein Filterselektor hinzugefügt werden, um die Abfrageaufgabe abzuschließen. Abhängig von der spezifischen Situation können der Indexwert, der Inhalt, die Attribute, die Position des Unterelements und die Form des Elements verwendet werden der Filterselektor

Domänenattribute und Sichtbarkeit als Filterbedingungen

1. :erster Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector: first")

wird verwendet. Filtern Sie die aktuelle jQuery-Sammlung und wählen Sie das erste passende Element aus

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("td:first").css ("Rand", "2px einfarbig");

2. :letzter Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector: last")

wird verwendet. Filtern Sie die aktuelle jQuery-Sammlung und wählen Sie das letzte passende Element
aus Beispiel:

Code kopieren Der Code lautet wie folgt:

$("td:last").css("border "," 2px durchgehend blau");

3. :ungerade Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector: odd")

wird verwendet. Alle Elemente mit ungeradem Index auswählen (ab 0 zählen)

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("td:odd").css ("Hintergrund", "rot");

4. :gerader Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector: even")

wird verwendet. Alle Elemente mit geradem Index auswählen (ab 0 zählen)

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("td:even").css ("Hintergrund", "rot");

5. :eq-Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector:eq(index)" )

Wird verwendet, um das Element auszuwählen, dessen Index dem angegebenen Wert aus der passenden Menge entspricht

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("li:eq(1)" ).css ("Farbe", "Blau");

6. :gt-Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector:gt(index)" )

Wird verwendet, um alle Elemente aus einer übereinstimmenden Menge auszuwählen, deren Index größer als ein bestimmter Wert ist

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("li:gt(0)" ).css ("Farbe", "Grün");

7. :lt Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector:lt(index)" )

Wird verwendet, um alle Elemente aus einer übereinstimmenden Menge auszuwählen, deren Index größer als ein bestimmter Wert ist

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("li:lt(5)" ).css ("Farbe", "Grün");

Um alle Elemente mit einem Index größer als n1 und kleiner als n2 zu finden, können Sie den Array-Selektor
verwenden

Code kopieren Der Code lautet wie folgt:

$("selector:gt(n1), selector:lt(n2 )") ;

8. :kein Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector1:not(selector2)" )

Wird verwendet, um alle Elemente, die mit dem angegebenen Selektor übereinstimmen, aus der übereinstimmenden Menge zu entfernen

Beispiel:

Code kopieren Der Code lautet wie folgt:

$("td:not(:first, :last) ").css("background", "red"); //Mit Ausnahme der ersten und letzten Zellen ist die Hintergrundfarbe aller anderen Zellen rot 

9. :Header-Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$(":header")

zur Auswahl Alle Überschriftenelemente wie h1, h2, h3

10. :animierter Selektor

Format:

Code kopieren Der Code lautet wie folgt:

$("selector:animated")

wird verwendet. Wählen Sie alle Elemente aus, die eine Animation ausführen

Einfaches Beispiel:

Code kopieren Der Code lautet wie folgt:

过滤选择器

简单过滤选择器应用示例

效果图如下所示:

Sie haben die jQuery-Version mit jQuery erstellt.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Node.js node-schedule Methode zur geplanten Aufgabenausführung alle paar Minuten_node.jsNächster Artikel：Node.js node-schedule Methode zur geplanten Aufgabenausführung alle paar Minuten_node.js

In Verbindung stehende Artikel

Mehr sehen