Maison >interface Web >Questions et réponses frontales >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
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 "]" |
Selector | Description de la fonction |
[attribut]
Obtenir l'élément qui contient l'attribut donné
Obtenir l'élément qui contient l'attribut donné est égal à l'attribut donné qui est une valeur spécifique | |||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
[attribut^=valeur ] | |||||||||||||||||||||||||||||||||||||||||||
[attribute$=value] | |||||||||||||||||||||||||||||||||||||||||||
[attribut*=value ] | |||||||||||||||||||||||||||||||||||||||||||
[selector1][selector2][selectorN] | |||||||||||||||||||||||||||||||||||||||||||
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!