Maison  >  Article  >  interface Web  >  Quels sont les trois types de sélecteurs dans jquery ?

Quels sont les trois types de sélecteurs dans jquery ?

青灯夜游
青灯夜游original
2022-05-24 19:25:394777parcourir

Les trois sélecteurs de jquery : 1. Le sélecteur de base, qui comprend l'ID de l'élément, le nom de l'élément, le nom de la classe et plusieurs sélecteurs ; 2. Le sélecteur hiérarchique, qui obtient les éléments via la relation hiérarchique entre les éléments du DOM ; 3. Les sélecteurs de filtrage, selon ; différentes règles de filtrage, peuvent également être divisées en filtrage simple, filtrage de contenu, filtrage visible, filtrage d'attributs, filtrage de formulaire, etc.

Quels sont les trois types de sélecteurs dans jquery ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

1. Sélecteur de base

Il se compose de l'ID de l'élément, du nom de l'élément et de plusieurs sélecteurs. Grâce au sélecteur de base, la plupart des éléments de la page peuvent être recherchés

#id. correspond à un élément en fonction de l'ID donnéelementcorrespond à tous les éléments en fonction du nom d'élément donné.classcorrespond aux éléments en fonction de la classe donnée* Match all elementsselector1, selectorNFaites correspondre chaque sélecteur aux éléments et retournez-les ensembleLe sélecteur hiérarchique obtient des éléments via la relation hiérarchique entre les éléments DOM, ses principales relations hiérarchiques incluent les descendants. , les relations père-fils, adjacents et frères, grâce auxquelles certains types de relations peuvent être utilisés pour localiser des éléments de manière pratique et rapide. SelectorDescription de la fonction
2. Sélecteur hiérarchique

descendant ancêtrecorrespond à tous les éléments descendants basés sur les éléments ancêtresparent>enfantcorrespond à tous les éléments enfants basés sur les éléments parents précédent +nextcorrespond à tous les éléments adjacents immédiatement après l'élément précédentpre~siblingscorrespond à tous les éléments frères après l'élément pré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. Le sélecteur de filtre correspond aux éléments selon certaines règles de filtrage. Lorsqu'il est écrit, il commence par deux points (:) ;
3 Sélecteur de filtre
1) Sélecteur de filtre simple

Selector


ction Description

First () ou: First

get le premier élémentlast () ou: lastget le dernier élément: pas (sélecteur )Obtenir tous les éléments sauf le sélecteur donné :pairObtenir tous les éléments avec une valeur d'index paire, le numéro d'index commence à 0:impairObtenir tous les éléments avec une valeur d'index impaire , le numéro d'index commence à 0:eq(index)Obtenir les éléments avec la valeur d'index spécifiée, le numéro d'index commence à 0:gt(index)Obtenir tout Pour les éléments supérieurs à 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:headerObtient tous les en-têtes Type é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 le contenu de l'élément 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émentsélecteurDescription de la fonction

 : contient (texte)

Obtenez les éléments contenant du texte fixe:emptyObtenez tous les éléments vides qui ne contiennent pas d'éléments enfants ou de texte:has(selector)Obtenez les éléments correspondants par le sélecteur : parent Obtenez des éléments contenant des éléments enfants ou du texte3) Filtre de visibilitéSélecteur de filtre de visibilité Obtenez des éléments selon que l'élément est visible ou nonSélecteurDescription de la fonction

: caché

Obtenir tous les éléments invisibles ou les éléments de type caché:visbleObtenir tous les éléments visibles

4) Filtre d'attribut

Le filtre d'attribut obtient l'élément en fonction d'un certain attribut de l'élément, tel que le numéro d'identification ou le contenu correspondant à la valeur de l'attribut, et commence par un "[" et se termine par un "]"

Selector Description de la fonction
[attribut] Obtenir l'élément contenant l'attribut donné
[attribut=value] Obtenir l'élément qui est égal à l'attribut donné qui est un valeur spécifique
[attribut!=valeur] Obtenir des éléments qui ne sont pas égaux à l'attribut donné qui est une certaine valeur
[attribut^=valeur] Obtenir des éléments qui ne sont pas égaux à la valeur donnée attribut qui commence par une certaine valeur
[attribute$=value] Obtenir l'élément où l'attribut donné se termine par une certaine valeur
[attribute*=value] Obtenir l'élément où se termine l'attribut donné avec 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, essayez de rencontre Soulignez la nécessité d'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!

Déclaration:
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