Comment implémenter la fonction de filtrage dans jquery

La fonction de filtrage est implémentée dans jquery via des sélecteurs de filtre. Selon différentes règles de filtrage, les sélecteurs de filtres peuvent être divisés en : 1. Sélecteurs de filtres de contenu, qui peuvent obtenir des éléments en fonction du contenu textuel de l'élément ou des caractéristiques des sous-éléments qu'il contient, et son contenu textuel peut être absolument flou. ou absolument adapté au positionnement de l'élément ; 2. Filtre de visibilité, qui peut obtenir des éléments en fonction des caractéristiques de visibilité de l'élément ; 3. Filtre d'attribut, qui peut obtenir des éléments en fonction d'un certain attribut de l'élément ; 4. Attribut d'objet de formulaire ; filtre, qui peut être obtenu grâce aux caractéristiques d'attribut d'un objet sous la forme d'un élément, tel qu'un attribut activé.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.

Jquery implémente des fonctions de filtrage via une variété de sélecteurs de filtres.

Filtre ? Il faut absolument ajouter des conditions de filtre. Ajoutez des conditions de filtre via ":", telles que "$("div:first")" pour renvoyer le premier élément div de la collection d'éléments div, et first est la condition de filtre.
Selon différentes règles de filtrage, les sélecteurs de filtres peuvent être divisés en : sélecteurs de filtres simples, sélecteurs de filtres de contenu, sélecteurs de filtres de visibilité, sélecteurs de filtres d'attributs, sélecteurs de filtres de sous-éléments, sélecteurs de filtres d'attributs d'objet de formulaire, etc.

1) Sélecteur de filtre simple

Le sélecteur de filtre correspond aux éléments selon certaines règles de filtrage. Lorsqu'il est écrit, il commence par deux points (:) ;

sélecteur	Description de la fonction
first() ou : first	Obtenez le premier élément
last() ou :last	Obtenez le dernier élément
: non (sélecteur)	Obtenir tous les éléments sauf le sélecteur donné
:pair	Obtenir tous les éléments avec une valeur d'index paire, le numéro d'index commence à 0
:impair	Obtenir tous les éléments avec une valeur impaire valeur d'index, le numéro d'index commence à partir de 0
:eq(index)	Obtenir les éléments avec la valeur d'index spécifiée, le numéro d'index commence à partir de 0
:gt(index)	Obtenir tout pour les éléments supérieur à la valeur d'index donnée, le numéro d'index commence à 0
:lt(index)	Obtient tous les éléments inférieurs à la valeur d'index donnée, le numéro d'index commence à 0
:header	Obtient tout en-têtes Tapez des éléments, tels que h1, h2... Collection d'éléments
:animated	Obtenez l'élément qui exécute l'effet d'animation

2) Sélecteur de filtre de contenu

Sélecteur de filtre de contenu basé sur le texte dans l'élément Le contenu ou les caractéristiques des sous-éléments contenus obtiennent l'élément, et son contenu textuel peut être absolument flou ou correspondre absolument au positionnement de l'élément

sélecteur	Description de la fonction
:contient(text)	Obtenir les éléments contenant du texte fixe
:vide	Obtenir tous les éléments vides qui ne contiennent pas d'éléments enfants ou de texte
:has(selector)	Obtenir les éléments correspondant au sélecteur
:parent	Obtenir des éléments contenant des éléments enfants ou du texte

3) Filtre de visibilité

Sélecteur de filtre de visibilité Obtenez des éléments selon que l'élément est visible ou non

SelectorDescription de la fonction

Sélecteur	Description de la fonction
:hidden	Obtenir tous les éléments invisibles ou les éléments de type masqué Récupérer l'élément à partir d'un certain attribut de l'élément, tel que le numéro d'identification ou le contenu correspondant à la valeur de l'attribut, en commençant par un "[" et se terminant par un "]"

[attribut]

Obtenir l'élément qui contient l'attribut donné

[attribute=value]Obtenir l'élément qui contient l'attribut donné est égal à l'attribut donné qui est une valeur spécifique[attribut!=valeur]Obtenir l'élément qui n'est pas égal à L'attribut donné est un élément avec une certaine valeur[attribut^=valeur ]Obtenir l'élément par lequel l'attribut donné commence par une certaine valeur[attribute$=value]Obtenir donné Un attribut donné est un élément qui se termine par une certaine valeur[attribut*=value ]Obtenir un attribut donné est un élément qui se termine par une certaine valeur[selector1][selector2][selectorN]Obtenir des éléments qui répondent à des attributs qui remplissent plusieurs conditions

5) Filtre de sous-éléments

Pendant le processus de développement de la page, vous pouvez rencontrer le besoin de mettre en évidence une ligne spécifique. Bien que le sélecteur de filtre de base « :eq(index) » puisse être utilisé pour afficher une seule table, il ne peut pas répondre aux besoins de sélection de grandes quantités de données et de plusieurs tables. Afin de réaliser une telle fonction, jQuery peut facilement obtenir un élément dans tous les éléments parents via le sélecteur de filtre d'élément enfant.

Selector	Description de la fonction
:ntième enfant (eq/pair/impair/index)	Obtenez l'élément de position spécifique sous chaque élément parent, le numéro d'index commence à partir de 1
:first-child	Obtenez le premier élément enfant sous chaque élément parent
:last-child	Obtenez le dernier élément enfant sous chaque élément parent
:only-child	Obtenez un seul élément enfant sous chaque élément parent

6) Filtre d'attribut d'objet de formulaire

Le sélecteur de filtre d'attribut d'objet de formulaire obtient l'élément via les caractéristiques d'attribut d'un objet dans le formulaire, telles que les attributs activés, désactivés, cochés et sélectionnés.

Selector	Description de la fonction
:activé	Obtenir tous les éléments du formulaire dont les attributs sont disponibles
:désactivé	Obtenir les éléments du formulaire qui ont un attribut indisponible s
:checked	Obtenir tous les éléments sélectionnés dans le formulaire
:selected	Obtenir tous les éléments d'option sélectionnés dans le formulaire

7) Filtre de formulaire

dans le sélecteur jQuery Le sélecteur de formulaire est introduit dans , spécialement conçu pour les formulaires, il peut être utilisé pour localiser rapidement un objet de formulaire sur la page.

Selector	Description de la fonction
:input	Obtenir toutes les entrées, zone de texte, sélectionner
:text	Obtenir toutes les zones de texte sur une seule ligne
: mot de passe	obtenir toutes les cases de mot de passe
:radio	obtenir tous les boutons radio
:case à cocher	obtenir les cases à cocher
:soumettre	obtenir tous les boutons de soumission
:image	Obtenez-les tous Image domain
:reset	Obtenir tous les boutons de réinitialisation
:button	Obtenir tous les boutons
:file	Obtenir tous les domaines de fichiers

[Apprentissage recommandé : Tutoriel vidéo jQuery , vidéo frontale 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!