Umfassende Erklärung der jQuery-Filter: Entdecken Sie, welche Elemente gefiltert werden

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Webentwicklung verwendet wird. In jQuery ist Filter eine sehr häufig verwendete Funktion, die Entwicklern dabei helfen kann, die Elemente herauszufiltern, die über Selektoren bedient werden müssen, und so eine effektive Kontrolle über Seitenelemente zu erreichen. In diesem Artikel wird die Filterfunktion von jQuery ausführlich erläutert, hauptsächlich die Verwendung von Filtern vorgestellt, um herauszufinden, welche Elemente gefiltert werden, und spezifische Codebeispiele gegeben.

1. Basisfilter

1. :erster Filter

Führen Sie zunächst einen häufig verwendeten Filter ein: :zuerst. Dieser Filter wählt das erste passende Element aus. Die spezifische Verwendung ist wie folgt:

$("p:first").css("background-color", "yellow");

Der obige Code wählt alle Absatzelemente (

) auf der Seite aus und setzt die Hintergrundfarbe des ersten Absatzelements auf Gelb.

2. :last-Filter

Im Gegensatz zu :first wird der :last-Filter verwendet, um das letzte Element unter den übereinstimmenden Elementen auszuwählen. Der Beispielcode lautet wie folgt:

$("p:last").css("color", "red");

Dieser Code wählt alle Absatzelemente auf der Seite aus und setzt die Textfarbe des letzten Absatzelements auf Rot.

3. :even- und :odd-Filter

:even- und :odd-Filter werden verwendet, um Elemente an geraden bzw. ungeraden Positionen in übereinstimmenden Elementen auszuwählen. Zum Beispiel:

$("tr:even").css("background-color", "#f2f2f2");
$("tr:odd").css("background-color", "#e6e6e6");

Der obige Code legt unterschiedliche Hintergrundfarben für gerade und ungerade Zeilen in der Tabelle fest.

2. Inhaltsfilter

4. :enthält Filter

:enthält Filter kann Elemente basierend auf dem im Element enthaltenen Textinhalt filtern. Zum Beispiel:

$("p:contains('jQuery')").css("font-weight", "bold");

Dieser Code wählt Absatzelemente aus, die „jQuery“-Text enthalten, und macht ihren Text fett.

5. :empty- und :not-Filter

: Der leere Filter wird verwendet, um Elemente auszuwählen, die keine untergeordneten Elemente haben, während der :not-Filter verwendet wird, um Elemente auszuschließen, die mit dem angegebenen Selektor übereinstimmen. Beispiel:

$("div:empty").text("这个元素没有内容");
$("p:not(.intro)").css("color", "blue");

Der erste Codeabschnitt wählt alle

$("div:parent").css("border", "1px solid black");
$("ul:has(li.active)").css("background-color", "lightgrey");