Maison > interface Web > js tutoriel > Explication détaillée du filtre jQuery selector_jquery

Explication détaillée du filtre jQuery selector_jquery

WBOY
Libérer: 2016-05-16 16:20:27
original
1155 Les gens l'ont consulté

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.

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal