Explication complète des filtres jQuery : découvrez quels éléments sont filtrés

jQuery est une bibliothèque JavaScript populaire largement utilisée dans le développement Web. Dans jQuery, le filtre est une fonction très couramment utilisée. Elle peut aider les développeurs à filtrer les éléments qui doivent être exploités via des sélecteurs, obtenant ainsi un contrôle efficace des éléments de la page. Cet article expliquera en détail la fonction de filtre de jQuery, présentera principalement comment utiliser les filtres pour découvrir quels éléments sont filtrés et donnera des exemples de code spécifiques.

1. Filtre de base

1.  :premier filtre

Introduisez d'abord un filtre couramment utilisé : premier. Ce filtre sélectionne le premier élément qui correspond. L'utilisation spécifique est la suivante :

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

Le code ci-dessus sélectionnera tous les éléments de paragraphe (

) sur la page et définira la couleur d'arrière-plan du premier élément de paragraphe sur jaune.

2. :last filter

A l'opposé de :first, le filtre :last permet de sélectionner le dernier élément parmi les éléments correspondants. L'exemple de code est le suivant :

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

Ce code sélectionnera tous les éléments de paragraphe de la page et définira la couleur du texte du dernier élément de paragraphe sur rouge.

3.  : filtres pairs et : impairs

 : les filtres pairs et : impairs sont utilisés pour sélectionner des éléments aux positions paires et impaires dans les éléments correspondants respectivement. Par exemple :

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

Le code ci-dessus définira différentes couleurs d'arrière-plan pour les lignes paires et impaires du tableau.

2. Filtre de contenu

4.  : contient un filtre

 : contient un filtre qui peut filtrer des éléments en fonction du contenu du texte contenu dans l'élément. Par exemple :

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

Ce code sélectionnera les éléments de paragraphe contenant du texte "jQuery" et mettra leur texte en gras.

5. :filtres vides et :not

 : Le filtre vide est utilisé pour sélectionner les éléments qui n'ont pas d'éléments enfants, tandis que le filtre :not est utilisé pour exclure les éléments qui correspondent au sélecteur spécifié. Par exemple :

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

Le premier morceau de code sélectionnera tous les éléments

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