Un regard complet sur les sélecteurs jQuery

Cet article a bénéficié de la revue par les pairs de Matt Smith et Tim Severien. Merci aux évaluateurs de pairs de SitePoint pour améliorer la qualité du contenu!

La sélection des éléments est fondamentale pour manipuler les pages Web avec jQuery. Que vous modifiiez du contenu, que vous joignez des événements ou que vous effectuiez d'autres actions, vous devrez d'abord cibler les bons éléments. Ce tutoriel explore les sélecteurs jQuery, un composant clé de la bibliothèque.

Concepts clés

• Les sélecteurs jQuery sont essentiels pour cibler des éléments de page Web pour la manipulation du contenu, la pièce jointe des événements, etc. Ces sélecteurs utilisent des critères tels que des ID, des classes, des attributs ou des combinaisons.
• jQuery fournit un large éventail de sélecteurs, y compris de base, basé sur l'index, l'enfant, l'attribut, le contenu, la hiérarchie, la forme et les sélecteurs de visibilité. Chaque type offre des capacités de sélection uniques basées sur des conditions et des paramètres spécifiques.
• Les améliorations de JQuery 3 ont considérablement amélioré la vitesse des sélecteurs personnalisés comme :visible et :hidden (jusqu'à 17x plus rapidement dans certains cas). La visibilité est désormais déterminée par la présence d'une boîte de disposition de getClientRects.
• La mise en cache des éléments sélectionnés augmente les performances, en particulier avec de nombreux sélecteurs. Le stockage des sélections en variables réduit les scans DOM redondants.
• Alors que de nombreux sélecteurs jQuery reflètent des sélecteurs CSS, jQuery comprend également ses propres sélecteurs personnalisés pour une sélection d'éléments plus concise et plus efficace.

SELECTORS JQUERY en détail

Les sélecteurs jQuery identifient principalement les éléments en fonction de critères comme l'ID, la classe, les attributs ou les combinaisons. Beaucoup sont basés sur des sélecteurs CSS, mais jQuery étend les fonctionnalités avec des sélecteurs personnalisés.

sélecteurs de base

Sélectionner des éléments par id ($("#id")), class ($(".class")), ou nom de balise ($("li")). Combinez-les (par exemple, $(".class tag")) ou utilisez plusieurs sélecteurs séparés par des virgules (par exemple, $("selectorA, selectorB, selectorC")).

Sélecteurs de base supplémentaires:

• :header: sélectionne tous les en-têtes (<h1></h1> à <h6></h6>). Plus concis que de répertorier individuellement chaque balise de cap.
• :target: Sélectionne l'élément dont l'ID correspond à l'identifiant de fragment URL (par exemple, https://example.com/#myElement).
• :animated: Sélectionne les éléments en cours d'animation (nécessite le module d'effets jQuery).

Les sélecteurs basés sur l'index

jQuery propose des sélecteurs d'index basés sur zéro:

• :eq(n): sélectionne l'élément à l'index n (prend en charge les indices positifs et négatifs).
• :lt(n): sélectionne des éléments avec un index inférieur à n.
• :gt(n): sélectionne des éléments avec un index supérieur ou égal à n.
• :first: sélectionne le premier élément correspondant.
• :last: sélectionne le dernier élément correspondant.
• :even: sélectionne des éléments avec des indices uniformes (0, 2, 4 ...).
• :odd: sélectionne des éléments avec des indices impairs (1, 3, 5 ...).

Demo interactif Présentation des sélecteurs basés sur l'index

Sélectionneurs d'enfants

Ces sélecteurs ciblent les enfants en fonction de l'index ou du type:

• :first-child: sélectionne le premier enfant de chaque parent.
• :first-of-type: sélectionne le premier frère de son type.
• :last-child: sélectionne le dernier enfant de chaque parent.
• :last-of-type: Sélectionne le dernier frère de son type.
• :nth-child(n): Sélectionne le Nth Child (prend en charge diverses expressions comme les nombres, even, odd, les formules).
• :nth-last-child(n): similaire à :nth-child, mais compte du dernier enfant.
• :nth-of-type(n): Sélectionne le nième frère de ce type.
• :nth-last-of-type(n): similaire à :nth-of-type, mais compte du dernier frère.
• :only-child: sélectionne des éléments qui sont le seul enfant de leur parent.
• :only-of-type: sélectionne des éléments sans frères et sœurs du même type.

Demo interactif présentant des sélecteurs d'enfants

sélecteurs d'attribut

sélectionner des éléments basés sur les valeurs d'attribut:

• [attribute="value"]: sélectionne des éléments avec la valeur d'attribut exacte.
• [attribute^="value"]: sélectionne des éléments dont la valeur d'attribut commence par "valeur".
• [attribute$="value"]: sélectionne des éléments dont la valeur d'attribut se termine par "valeur".
• [attribute*="value"]: sélectionne des éléments dont la valeur d'attribut contient "valeur".
• [attribute|="value"]: sélectionne des éléments dont la valeur d'attribut est égale ou commence par la "valeur" suivie d'un trait d'union.
• [attribute~="value"]: sélectionne des éléments dont la valeur d'attribut contient "valeur" comme un mot séparé de l'espace.
• [attribute!="value"]: sélectionne des éléments sans l'attribut ou avec une valeur différente.
• [attribute]: sélectionne des éléments avec l'attribut spécifié, quelle que soit la valeur.

sélecteurs de contenu

Ces sélecteurs ciblent les éléments en fonction de leur contenu:

• :contains(text): Sélectionne les éléments contenant le texte spécifié (sensible à la casse).
• :has(selector): sélectionne des éléments contenant au moins un élément correspondant au sélecteur fourni.
• :empty: sélectionne des éléments sans enfants.
• :parent: sélectionne des éléments avec au moins un enfant.

sélecteurs de hiérarchie

Ces sélecteurs utilisent la hiérarchie DOM:

• ancestor descendant: sélectionne tous les descendants de l'élément ancêtre.
• parent > child: Sélectionne les enfants directs de l'élément parent.
• prev next: sélectionne le prochain frère de l'élément prev.
• prev ~ siblings: sélectionne tous les frères et sœurs suivants de l'élément prev.

Sélections de formulaires

Sélecteurs simplifiés pour les éléments de formulaire:

• :button: Sélectionne les éléments du bouton.
• :checkbox: Sélectionne les éléments de case à cocher.
• :radio: Sélectionne les éléments des bouton radio.
• :text: Sélectionne les éléments d'entrée du texte.
• :password: Sélectionne les éléments d'entrée de mot de passe.
• :submit: Sélectionne les éléments de bouton Soumettre.
• :reset: Sélectionne les éléments de bouton de réinitialisation.
• :image: Sélectionne les éléments du bouton d'image.
• :file: Sélectionne les éléments d'entrée de fichier.
• :hidden: Sélectionne les éléments de forme cachés.
• :enabled: Sélectionne les éléments de formulaire activés.
• :disabled: Sélectionne les éléments de formulaire désactivés.
• :checked: Sélectionne les cases cochées cochées et les boutons radio et les options sélectionnées.
• :selected: Sélectionne les options sélectionnées dans les éléments <select></select>.

sélecteurs de visibilité

• :visible: sélectionne des éléments visibles.
• :hidden: sélectionne des éléments cachés.

jQuery 3 Modifications

jQuery 3 a introduit des améliorations de performances pour :visible et :hidden, et a affiné la définition de la visibilité. La gestion des erreurs pour les sélecteurs non valides a également été améliorée.

Cache pour les performances

La mise en cache des éléments sélectionnés améliore les performances en évitant les analyses DOM répétées. Stocker les sélections en variables pour la réutilisation.

Conclusion

Ce tutoriel couvre de manière approfondie les sélecteurs jQuery. N'oubliez pas d'utiliser la mise en cache pour des performances optimales. La compréhension de ces sélecteurs est cruciale pour un développement efficace de jQuery.

Questions fréquemment posées (FAQ)

La section FAQ de l'entrée d'origine est déjà bien structurée et complète. Je suggère de le garder tel quel, peut-être avec des ajustements de libellés mineurs pour améliorer le débit et la clarté.

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!