Sélecteurs jQuery peu courants

Les sélecteurs sont d'une importance vitale. La plupart des méthodes jQuery nécessitent une sorte de sélection d'élément pour être utile. Par exemple, attacher un Cliquez sur événement à un bouton vous oblige à sélectionner le bouton d'abord. 

Étant donné que les sélecteurs jQuery courants sont basés sur des sélecteurs CSS existants, vous êtes peut-être très au courant de ces problèmes. Cependant, il y a aussi quelques sélecteurs qui ne sont pas utilisés autant. Dans ce tutoriel, je vais me concentrer sur ces sélecteurs moins connus mais importants..

Tout sélecteur (*)

Ce sélecteur s’appelle à juste titre le sélecteur universel car il sélectionne tous les éléments du document, y compris le , , > ou  Mots clés. Cette démo devrait illustrer mon propos.

$ ("section *") // Sélectionne tous les descendants $ ("section> *") // Sélectionne tous les descendants directs $ ("section> *> *") // Sélectionne tous les descendants de second niveau $ ("section> *> * a ") // Sélectionne les liens de 3ème niveau

Ce sélecteur est extrêmement lent s'il est utilisé en combinaison avec d'autres éléments. Cependant, tout dépend de la manière dont le sélecteur est utilisé et du navigateur dans lequel il est exécuté. Dans Firefox, $ ("# sélecteur> *"). find ("li") est plus lent que $ ("# sélecteur> ul"). find ("li"). Fait intéressant, Chrome s'exécute  $ ("# sélecteur> *"). find ("li") un peu plus vite. Tous les navigateurs exécutent $ ("# sélecteur *"). find ("li") plus lentement que $ ("# sélecteur ul"). find ("li"). Je suggère que vous compariez les performances avant d'utiliser ce sélecteur. 


Voici une démo qui compare la vitesse d'exécution du sélecteur tout.

Sélecteur Animé (: animé)

Vous pouvez utiliser le :Animé sélecteur pour sélectionner tous les éléments dont l’animation est toujours en cours lors de l’exécution de ce sélecteur. Le seul problème est que seuls les éléments animés à l'aide de jQuery seront sélectionnés. Ce sélecteur est une extension jQuery et ne tire pas parti de l’amélioration des performances fournie avec le logiciel natif. querySelectorAll () méthode. 

En outre, vous ne pouvez pas détecter les animations CSS à l'aide de jQuery. Vous pouvez toutefois détecter la fin de l'animation à l'aide du bouton animationend un événement.

Regardez la démo suivante.

Dans la démo ci-dessus, seuls les impairs div les éléments sont animés avant l'exécution $ (": animated"). css ("background", "# 6F9");. En conséquence, seuls ceux div les éléments deviennent verts. Juste après cela, nous appelons la fonction animate sur le reste de la div éléments. Si vous cliquez sur le bouton maintenant tout div les éléments doivent virer au vert.

Attribut différent, sélecteur ([attr! = "Valeur"])

Les sélecteurs d'attributs communs détectent généralement si un attribut avec un nom ou une valeur existe. D'autre part, le [attr! = "valeur"]  Le sélecteur sélectionnera tous les éléments qui ne possèdent pas l'attribut spécifié ou dont l'attribut existe mais n'est pas égal à une valeur particulière. C'est équivalent à : pas ([attr = "valeur"]). contrairement à [attr = "valeur"] , [attr! = "valeur"] ne fait pas partie de la spécification CSS. En conséquence, en utilisant $ ("sélecteur css"). not ("[attr = 'valeur']") peut améliorer les performances des navigateurs modernes. 

L'extrait ci-dessous ajoute un décalage classe à tous li éléments dont catégorie de données attribut n'est pas égal à css. Cela peut être utile lors du débogage ou de la définition de la valeur d'attribut correcte à l'aide de JavaScript..

$ ("li [data-category! = 'css']"). each (function () $ (this) .addClass ("mismatch"); // Ajoute une classe de mismatch pour filtrer les sélecteurs. $ (". mismatch "). attr (" data-category ", attributeValue); // Définir la valeur d'attribut correcte);

Dans la démo, je parcours deux listes et corrige la valeur des attributs de catégorie des éléments.

Contient Selector (: contient (texte))

Ce sélecteur est utilisé pour sélectionner tous les éléments contenant la chaîne spécifiée. La chaîne correspondante peut se trouver directement dans l'élément concerné ou dans l'un de ses descendants.. 

L'exemple ci-dessous devrait vous aider à mieux comprendre ce sélecteur. Nous allons ajouter un fond jaune à toutes les occurrences de la phrase Lorem Ipsum.

Commençons par le balisage:

 
Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un spécimen. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique, demeurant essentiellement inchangé.
 
Il a été popularisé dans les années 1960 avec la publication de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec un logiciel de publication assistée par ordinateur comme Aldus PageMaker, comprenant des versions de Lorem Ipsum.
 Lorem Ipsum Lien Wikipedia 
 
 
Ce lorem ipsum ne doit pas être mis en évidence.
 
 
 
Une liste Lorem Ipsum
 
Plus d'éléments ici
 

Observez que la phrase Lorem Ipsum se produit dans sept endroits différents. J'ai délibérément utilisé des petites majuscules dans l'un de ces cas pour montrer que l'appariement était sensible à la casse. 

Voici le code JavaScript pour mettre en évidence tous les résultats: 

$ ("section: contient ('Lorem Ipsum')"). each (fonction () $ (this) .html ($ (this) .html (). replace (/ Lorem Ipsum / g, "Lorem Ipsum")););

Les guillemets autour de la chaîne sont facultatifs. Cela implique que les deux $ ("section: contient ('Lorem Ipsum')") et $ ("section: contient (Lorem Ipsum)") sera valide dans l'extrait ci-dessus. Je ne fais que cibler l'élément section, de sorte que le texte de Lorem Ipsum à l'intérieur des éléments de la liste devrait rester inchangé. De plus, en raison de la non-concordance, le texte à l'intérieur de la deuxième section L'élément ne doit pas non plus être surligné. Comme vous pouvez le voir dans cette démo, c'est exactement ce qui se passe.

A sélecteur (: a (sélecteur))

Ce sélecteur sélectionnera tous les éléments contenant au moins un élément correspondant à un sélecteur donné. Le sélecteur à faire correspondre ne doit pas nécessairement être un enfant direct. :a() ne fait pas partie de la spécification CSS. Dans les navigateurs modernes, vous devriez utiliser $ ("pure-css-selector"). a (sélecteur) au lieu de $ ("pure-css-selector: a (sélecteur)") pour une performance améliorée. 

Une des applications possibles de ce sélecteur est la manipulation d'éléments contenant un élément spécifique. Dans notre exemple, je changerai la couleur de tous les éléments de la liste contenant un lien..

Voici le balisage de la démo:

 
Pellentesque habitant morbi tristique senectus.
 
Pellentesque habitant morbi tristique senectus.
 (… Plus d'éléments de liste ici…) 
Pellentesque habitant morbi tristique senectus.
 
Pellentesque habitant morbi tristique senectus.
 

Voici le code JavaScript pour changer la couleur des éléments de la liste:

$ ("li: a (a)"). chaque (fonction (index) $ (this) .css ("color", "crimson"););

La logique derrière ce code est assez simple. Je passe en revue tous les éléments de la liste contenant un lien et mets leur couleur à cramoisi. Vous pouvez également manipuler le texte à l'intérieur des éléments de la liste ou les supprimer du DOM. Je suis sûr que ce sélecteur peut être utilisé dans beaucoup d'autres situations. Découvrez une version en direct de ce code sur CodePen.

Sélecteurs Indexés

Outre les sélecteurs CSS comme : nième enfant (), jQuery possède également son propre ensemble de sélecteurs basés sur un index. Ces sélecteurs sont : eq (index), : lt (index), et : gt (index). Contrairement aux sélecteurs basés sur CSS, ces sélecteurs utilisent l'indexation basée sur zéro. Cela implique que tout en : nième enfant (1) sélectionnera le premier enfant, : eq (1) sélectionnera le deuxième enfant. Pour sélectionner le premier enfant, vous devrez utiliser : eq (0). 

Ces sélecteurs peuvent également accepter des valeurs négatives. Lorsque des valeurs négatives sont spécifiées, le comptage est effectué en arrière à partir du dernier élément.. 

: lt (index) sélectionne tous les éléments dont l'indice est inférieur à la valeur spécifiée. Pour sélectionner les trois premiers éléments, vous utiliserez : lt (3). En effet, les trois premiers éléments auront les valeurs d’indice 0, 1 et 2 respectivement. L’utilisation d’un index négatif sélectionnera toutes les valeurs avant l’élément atteint après le décompte arrière. De même, : gt (index) sélectionne tous les éléments avec un index supérieur à la valeur spécifiée.

: lt (4) // sélectionne les quatre premiers éléments: lt (-4) // sélectionne tous les éléments sauf les 4 derniers: gt (4) // sélectionne tous les éléments autres que les 5 premiers: gt (-4) // sélectionne les trois derniers éléments : gt (-1) // ne sélectionne rien: eq (4) // sélectionne le cinquième élément: eq (-4) // sélectionne le quatrième élément du dernier

Essayez de cliquer sur différents boutons de la démo pour mieux comprendre les sélecteurs d'index..

Sélecteurs de formulaire

jQuery définit un grand nombre de sélecteurs pour faciliter la sélection des éléments de formulaire. Par exemple, le :bouton le sélecteur sélectionnera tous les éléments de bouton ainsi que les éléments avec le bouton type. De même, : case à cocher sélectionnera tous les éléments d’entrée avec la case à cocher type. Il existe des sélecteurs définis pour presque tous les éléments d'entrée. Considérez le formulaire ci-dessous:

 
 Saisie de texte 
   
 
 
 Case à cocher:     
 

J'ai créé deux éléments de texte ici et quatre cases à cocher. Le formulaire est assez basique, mais il devrait vous donner une idée du fonctionnement des sélecteurs de formulaire. Nous allons compter le nombre d'éléments de texte en utilisant le :texte sélecteur et également mettre à jour le texte dans la première entrée de texte. 

var textCount = $ (": text"). length; $ (". text-elements"). text ('Entrées de texte:' + textCount); $ (": text"). eq (0) .val ('Ajouté par programmation!');

j'utilise :texte pour sélectionner toutes les entrées de texte, puis la méthode de longueur pour calculer leur nombre. Dans la troisième déclaration, j'utilise le : eq () sélecteur pour accéder au premier élément et définir ensuite sa valeur. 

Gardez à l'esprit qu'à partir de jQuery 1.5.2, :texte résultats vrai pour les éléments pour lesquels aucun attribut de type n'est spécifié.

Regardez la démo.

Sélecteur d'en-tête (: header)

Si vous souhaitez sélectionner tous les éléments de titre sur une page Web, vous pouvez utiliser le raccourci $ (": en-tête") version au lieu de la verbeuse $ ("h1 h2 h3 h4 h5 h6") sélecteur. Ce sélecteur ne fait pas partie de la spécification CSS. De ce fait, de meilleures performances pourraient être obtenues en utilisant d'abord un sélecteur CSS pur, puis en utilisant .filtre (": en-tête"). 

Par exemple, supposons qu’il existe un article élément sur une page Web et il a trois en-têtes différents. Maintenant, vous pouvez utiliser $ ("article: en-tête") au lieu de $ ("article h1, article h2, article h3") pour la brièveté. Pour le rendre encore plus rapide, vous pouvez utiliser $ ("article"). filter (": en-tête"). De cette façon, vous avez le meilleur des deux mondes.

Pour numéroter tous les éléments d'en-tête, vous pouvez utiliser le code suivant.

$ ("article: en-tête"). each (fonction (index) $ (this) .text ((index + 1) + +:: + $ (this) .text ()); // Ajoute des numéros aux en-têtes )

Essayez cette démo d'accompagnement.

Dernières pensées

Dans ce tutoriel, j'ai présenté les sélecteurs peu communs que vous pourriez rencontrer lors de l'utilisation de jQuery. Bien que la plupart de ces sélecteurs aient des alternatives que vous pouvez utiliser, il est toujours bon de savoir que ces sélecteurs existent. 

J'espère que vous avez appris quelque chose de nouveau dans ce tutoriel. Si vous avez des questions ou des suggestions, veuillez commenter.