Introduction aux sélecteurs JQuery et à leurs t
Lorsque vous travaillez avec JavaScript, vous vous trouverez souvent dans une situation où vous devez rechercher et modifier du contenu sur la page. Dans ces cas, vous devrez utiliser la prise en charge du sélecteur dans JQuery. JQuery permet de trouver assez facilement des éléments de la page en fonction de leurs types, valeurs, attributs, etc. Ces éléments sont basés sur des sélecteurs CSS et une fois que vous vous êtes exercé, vous verrez que la recherche d'éléments dans les pages est un jeu d'enfant. Selon leur utilisation, nous pouvons classer différents types de sélecteurs JQuery en différents types. Jetons un coup d'œil à certains des sélecteurs les plus utilisés.
Utilisation d'un sélecteur
Voici une syntaxe d'un sélecteur JQuery:
- $ (Sélecteur) .methodname ():
Si vous en avez besoin, vous pouvez chaîner plusieurs sélecteurs en ajoutant un «.» Entre les méthodes.
- $ (sélecteur) .method1 (). method2 (). method3 ();
Types de sélecteur dans JQuery
Voici les différents types de sélecteurs dans JQuery
1) Sélecteurs JQuery de base
Nous pouvons sélectionner des éléments de page en utilisant leur ID, classe ou leur nom de balise. Si nécessaire, une combinaison de ceux-ci peut également être utilisée. Voici quelques sélecteurs de base:
- : sélecteur d'en-tête - Il s'agit d'un type de sélecteur de base qui nous permet de trouver des éléments avec leurs en-têtes HTML. Pour ce faire, nous utilisons le sélecteur $ verbose («section h1, section h2, section h3») ou nous pouvons également utiliser le sélecteur $ («section: header») beaucoup plus court.
- : Sélecteur de cible - Ce sélecteur recherche les cibles de la page ou du hachage de l'URI du document. Par exemple, si l'URI de la page est «https://example.com/#test». Ensuite, le sélecteur $ ("h2: cible") sélectionnera l'élément
.
- : Sélecteur animé - Ce sélecteur est utilisé pour rechercher tous les éléments qui ont une animation. Gardez à l'esprit que pour que l'animation soit sélectionnée, elle doit être exécutée lors de l'exécution du sélecteur.
2) Sélecteurs basés sur l'indice
JQuery possède son propre ensemble de sélecteurs basés sur l'index qui utilisent une indexation basée sur zéro. Voici quelques exemples:
- : eq (k) Selector - Ce sélecteur renvoie l'élément à l'index k. Il prend également en charge les valeurs d'index négatives.
- : Sélecteur lt (k) - Ce sélecteur renvoie tous les éléments dont l'indice est inférieur à k. Tout comme ci-dessus, les valeurs négatives sont également acceptées
- : gt (n) Selector - Ce sélecteur est similaire: lt (k) Selector sauf qu'il fonctionne pour une valeur d'index supérieure ou égale à k.
3) Sélecteurs d'enfants
Vous pouvez utiliser JQuery pour sélectionner des enfants de n'importe quel élément en fonction de leur type ou de leur index.
- : premier enfant - Ce sélecteur retournera tous les éléments qui sont le premier enfant de leurs parents.
- : first-of-type - Ce sélecteur JQuery est utilisé pour sélectionner tous les éléments qui sont le premier frère
- : dernier enfant - Comme son nom l'indique, ce sélecteur sélectionnera le dernier enfant du parent.
- : last-of-type - Ceci sélectionnera tous les enfants qui sont les derniers de leur type dans un parent. S'il y a plus d'un parent, il sélectionnera plusieurs éléments.
- : only-of-type - Nous pouvons utiliser le sélecteur de type unique pour trouver tous les éléments qui ont des frères et sœurs du même type dans la page.
- : only-child - Dans les situations où vous devez rechercher et sélectionner des éléments qui sont le seul enfant de leur parent, vous pouvez utiliser ce sélecteur. Si un parent sur la page a plus d'un enfant, il sera ignoré.
4) Sélecteurs d'attributs
Les éléments peuvent être sélectionnés en fonction de leurs attributs, voici quelques sélecteurs d'attributs courants:
- $ ("(Attribute | = 'valuehere')") - "L'attribut contient le sélecteur de préfixe" sélectionne tous les éléments avec des attributs où la valeur est égale ou commence par la chaîne donnée suivie d'un trait d'union.
- $ (“(Attribute ~ = 'valuehere')”) - Cela renvoie tous les éléments avec des attributs où la valeur contient un mot donné délimité par des espaces.
- $ (“(Attribute * = 'valuehere')”) - Il sélectionnera les éléments dont la valeur contient la sous-chaîne donnée. Tant que la valeur correspond, l'emplacement n'a pas d'importance
5) Sélecteurs de contenu
Comme son nom l'indique, ces sélecteurs JQuery sont utilisés pour rechercher et sélectionner du contenu à l'intérieur des éléments.
- : contains (text) - Ceci est utilisé pour sélectionner les éléments qui ont un contenu texte spécifié à l'intérieur. Une chose à garder à l'esprit lorsque vous utilisez ce sélecteur est que le test ici est sensible à la casse.
- : has (selector) - Il retournera avec des éléments qui ont au moins un élément à l'intérieur qui correspond au sélecteur spécifié. Par exemple, $ («section: has (h1)») retournera avec toutes les sections qui ont un élément h1.
- : vide - Ce sélecteur renverra les éléments de la page qui n'ont pas d'enfants, y compris les nœuds de texte.
- : parent - Ce sélecteur est utilisé pour sélectionner tous les éléments de la page Web qui ont au moins un nœud enfant. Vous pouvez le considérer comme un inverse du: JQuery Selector vide.
6) Sélecteurs de hiérarchie
- $ («Ancêtre descendant») - Il est utilisé pour sélectionner tous les éléments descendants d'un parent. Dans notre cas, le descendant pourrait être un enfant, un petit-enfant, etc.
- $ («Parent> enfant») - Ceci est utilisé dans les cas où nous avons seulement besoin de sélectionner l'enfant direct d'un parent spécifique.
- $ ("Précédent + suivant") - Dans le cas où nous devons sélectionner tous les éléments qui correspondent au sélecteur "suivant" et qui ont le parent "précédent". Les éléments sélectionnés seront également immédiatement précédés par «précédent» qui est le frère.
7) Sélecteurs de visibilité
Deux sélecteurs: visible et: caché sont également disponibles dans JQuery. Ceux-ci peuvent être utilisés pour trouver respectivement des éléments visibles ou cachés dans la page Web. Tout élément de la page Web est considéré comme masqué si:
- Son affichage est correctement réglé sur aucun.
- Sa largeur et sa hauteur sont définies à zéro.
- Il a le type = caché mentionné dans l'élément de formulaire.
- Tous les ancêtres de l'élément sont déjà masqués.
Gardez à l'esprit que même si un élément a une opacité définie sur zéro, il sera toujours considéré comme visible car il prendra toujours de la place.
8) Sélecteurs de formulaires
Pour gagner du temps et des tracas, JQuery propose des versions de tri des sélecteurs pour les éléments d'entrée des formulaires Web.
Par exemple, alors que $ ("bouton, entrée (type = 'bouton')") fonctionnera pour sélectionner le bouton dans la page, nous pouvons utiliser $ (": bouton") pour le faire rapidement.
De même, nous pouvons utiliser $ (“: radio”) pour sélectionner le bouton radio.
Conclusion - Types de sélecteur dans JQuery
Les sélecteurs sont l'une des caractéristiques importantes de JQuery, la sélection sur JavaScript n'est pas aussi intuitive et robuste avec l'ajout de sélecteurs via JQuery, la programmation pour le Web est devenue plus facile.
Articles recommandés
Ceci est un guide des types de sélecteur dans JQuery. Ici, nous discutons des différents types de sélecteurs JQuery avec la syntaxe. Vous pouvez également consulter les articles suivants pour en savoir plus-
- Méthodes jQuery
- Alternatives à jQuery
- Utilisations de JQuery
- Que peut faire Javascript?
- jQuery querySelector
- Guide des exemples de barre de progression JQuery