Maison >interface Web >js tutoriel >Explication détaillée du filtre jQuery selector_jquery
Sélecteur de filtre
Le sélecteur de filtre filtre principalement les éléments DOM requis via des règles de filtrage spécifiques. Les sélecteurs commencent tous par ":"
.Selon différentes règles de filtrage, les sélecteurs de filtres peuvent être divisés en filtrage de base, filtrage de contenu, filtrage de visibilité, filtrage d'attributs, filtrage de sous-éléments et sélecteurs de filtrage d'attributs d'objet de formulaire.
Sélecteur de filtre de base
Exemple de sélecteur de filtre de base
Changez la couleur d'arrière-plan du premier élément div en #bbffaa
Changez la couleur d'arrière-plan du dernier élément div en #bbffaa
Changez la couleur d'arrière-plan de tous les éléments div dont la classe n'en est pas une en #bbffaa
Changez la couleur d'arrière-plan de l'élément div avec une valeur d'index paire en #bbffaa
Changez la couleur d'arrière-plan des éléments div avec des valeurs d'index impaires en #bbffaa
Changez la couleur d'arrière-plan des éléments div avec des valeurs d'index supérieures à 3 en #bbffaa
Changez la couleur d'arrière-plan de l'élément div avec une valeur d'index égale à 3 en #bbffaa
Changez la couleur d'arrière-plan des éléments div avec des valeurs d'index inférieures à 3 en #bbffaa
Changez la couleur d'arrière-plan de tous les éléments du titre en #bbffaa
Changez la couleur d'arrière-plan de tous les éléments actuellement animés en #bbffaa
Sélecteur de filtre de contenu
Les règles de filtrage du sélecteur de filtrage de contenu se reflètent principalement dans les sous-éléments et le contenu textuel qu'il contient
Exemple de sélecteur de filtrage de contenu
Changez la couleur d'arrière-plan de l'élément div contenant le texte 'di' en #bbffaa
Changez la couleur d'arrière-plan des éléments div vides qui ne contiennent pas d'éléments enfants (ou d'éléments de texte) en # bbffaa
Changez la couleur d'arrière-plan de l'élément div contenant l'élément class mini en #bbffaa
Changez la couleur d'arrière-plan de l'élément div contenant des éléments enfants (ou des éléments de texte) en #bbffaa
Sélecteur de filtre de visibilité
Le sélecteur de filtre de visibilité sélectionne les éléments correspondants en fonction de leur statut visible et invisible
Sélecteur visible : masqué inclut non seulement les éléments dont l'attribut de style n'est pas affiché, mais inclut également des éléments tels que les champs de texte masqués () et visible : masqué
Exemple de sélecteur de filtre de visibilité
Changez la couleur d'arrière-plan de tous les éléments div visibles en #bbffaa
Sélectionnez tous les éléments invisibles, utilisez la méthode show() dans jQuery pour les afficher et définissez leur couleur d'arrière-plan sur # bbffaa
Sélectionnez tous les champs de texte masqués et imprimez leurs valeurs
Sélecteur de filtre d'attribut
La règle de filtrage du sélecteur de filtre d'attribut est d'obtenir l'élément correspondant via l'attribut de l'élément
Exemple de sélecteur de filtre d'attribut
Sélectionnez les éléments suivants et changez leur couleur d'arrière-plan en #bbffaa
Un élément div contenant le titre de l'attribut.
Un élément div dont la valeur du titre de l'attribut est égale à "test".
Divisez les éléments dont la valeur du titre d'attribut n'est pas égale à "test" (ceux sans titre d'attribut seront également sélectionnés).
Un élément div dont la valeur du titre de l'attribut commence par "te".
Un élément div dont la valeur du titre de l'attribut se termine par "est".
Un élément div dont la valeur du titre de l'attribut contient "es".
Sélectionnez l'élément div avec l'identifiant d'attribut, puis sélectionnez l'élément div avec la valeur de titre d'attribut contenant « es » dans les résultats.
Sélecteur de filtre d'élément enfant
Le sélecteur
nth-child() est expliqué en détail comme suit :
(1) :nth-child(pair/impair) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un nombre pair (impair)
(2):nth-child(2) : peut sélectionner l'élément avec la valeur d'index 2 sous chaque élément parent
(3):nth-child(3n) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un multiple de 3
(3):nth-child(3n 1) : peut sélectionner l'élément dont la valeur d'index est 3n 1 sous chaque élément parent
Exemple de sélecteur de filtre d'élément enfant
Sélectionnez les éléments suivants et changez leur couleur d'arrière-plan en #bbffaa
Le deuxième élément enfant sous l'élément parent de chaque div avec la classe un.
Le premier élément enfant sous l'élément parent de chaque div avec la classe un
Le dernier élément enfant sous l'élément parent de chaque div avec la classe un
S'il n'y a qu'un seul élément enfant sous l'élément parent div avec la classe un, sélectionnez cet élément enfant
Sélecteur de filtre d'attribut d'objet de formulaire
Ce sélecteur filtre principalement les éléments de formulaire sélectionnés
Exemple de sélecteur de filtre d'attribut d'objet de formulaire
Utilisez la méthode val() de l'objet jQuery pour modifier la valeur des éléments disponibles dans le formulaire Utilisez la méthode val() de l'objet jQuery pour modifier la valeur des éléments sous la forme
Utilisez la propriété length de l'objet jQuery pour obtenir le nombre de cases à sélection multiple sélectionnées
Utilisez la méthode text() de l'objet jQuery pour obtenir le contenu sélectionné dans la liste déroulante
Sélecteur de formulaire
Ce qui précède concerne le sélecteur de filtre jQuery. Il est très détaillé. J'espère que cela sera utile à mes amis.