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

qui n'ont pas d'éléments enfants sur la page et définira leur contenu textuel sur "Cet élément n'a pas de contenu". Le deuxième morceau de code sélectionnera tous les éléments de paragraphe dont la classe n'est pas .intro et définira la couleur de leur texte sur bleu.

3. Filtre de relation

6. :filtre parent et :has

 : Le filtre parent est utilisé pour sélectionner les éléments qui contiennent des éléments enfants, tandis que le filtre :has est utilisé pour sélectionner les éléments qui contiennent des éléments qui correspondent au sélecteur spécifié. . L'exemple de code est le suivant :

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

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

qui contiennent des éléments enfants et leur ajoutera des bordures noires en même temps, il sélectionnera tous les éléments

; éléments avec des éléments de classe actifs, définissant leur couleur d'arrière-plan sur gris clair.

À travers les exemples ci-dessus, nous pouvons voir la fonction puissante des filtres jQuery dans le développement Web. En utilisant raisonnablement divers filtres, les développeurs peuvent facilement trouver les éléments qui doivent être exploités et les traiter en conséquence. J'espère que l'introduction de cet article pourra aider les lecteurs à mieux comprendre et appliquer la fonction de filtre de jQuery et à améliorer l'efficacité du développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn