Mis à jour le 14/03/2018
  • 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les sélecteurs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

jQuery a une syntaxe qui permet de sélectionner très facilement des éléments sur la page, c'est un de ses plus grands points forts. Mais, au-delà des apparences, la sélection de ceux-ci est plus complexe qu'il n'y paraît. Les sélecteurs en jQuery sont toute une science que nous allons apprendre pas à pas au cours de ce chapitre ! :)

Les sélecteurs de CSS

Avant de se lancer dans une foule de sélecteurs propres à jQuery tous plus compliqués les uns que les autres (non, on plaisante :p ), il est nécessaire de débuter par des sélecteurs plus basiques. En effet, le framework que nous étudions fonctionne tout d'abord avec les sélecteurs de CSS. Vous les connaissez surement, ou tout du moins la plupart, car vous êtes censé connaître un minimum la syntaxe du CSS pour suivre ce tutoriel.

Cela ne vous dit vraiment rien ? :euh:

Les sélecteurs les plus utilisés

Peut-être est-ce le mot sélecteur qui vous fait peur. Dans ce cas-là, je pense que votre mémoire va se rafraîchir si je vous parle d'identifiant et de classe. Pour rappel, il est possible d'attribuer une classe ou un identifiant à un élément HTML ; on s'en servira par la suite pour le sélectionner avec CSS, ce qui nous permettra de styliser l'élément.

Avec jQuery, vous pouvez très bien utiliser ces sélecteurs ! Ce sont même ceux-ci qui reviendront le plus souvent dans vos codes. Pour cela, il suffit de suivre simplement la syntaxe suivante, comme en CSS :

$('p'); // je sélectionne tous les paragraphes

$('.maClasse'); // je sélectionne les éléments ayant .maClasse pour classe

$('#monId'); // je sélectionne l'élément qui possède l'identifiant #monId

Frères et parents

Parmi les sélecteurs un peu plus complexes que les classes et les identifiants se trouvent les sélecteurs de descendance. Ce mot bizarrement employé dans un contexte tel que le nôtre cache en fait un concept très puissant de parcours. Vous n'êtes surement pas sans savoir qu'il est possible, en HTML, d'imbriquer des balises les unes dans les autres. Eh bien, ce système fait usage de la descendance !

Prenons un exemple concret. Je possède un paragraphe, dans lequel j'ai un lien absolu. Ma balise <a href="lien"></a> est alors imbriquée dans les balises <p></p> propres au paragraphe.

On dit que le paragraphe est un élément parent, et le lien un élément enfant.
Comprenez-vous le principe ? La balise parente à mon lien est la balise qui contient celui-ci. Ainsi, de cette façon-là, la balise <body> est parente de toute notre structure HTML !

CSS, et par extension, jQuery, permet de manipuler ce concept de descendance grâce à des sélecteurs spéciaux. Le plus connu est sans doute le sélecteur qui fait suivre deux éléments au minimum :

$('p .lien');
/* ici, nous sélectionnons tous les éléments ayant la classe .lien, 
et contenus dans un paragraphe qui joue le rôle de parent */

Le problème de cette méthode-ci est qu'elle prend en compte tous les éléments possédant la bonne classe et contenus dans un parent. Imaginez que vous ne vouliez sélectionner que les éléments qui descendent directement du bloc parent, c'est-à-dire qui ne sont pas contenus une seconde fois dans un autre bloc. Dans ce cas-là, il vous faudra utiliser un sélecteur un peu moins connu, qui n'est autre que >.

$('p > .lien');
/* ici, nous sélectionnons seulement les éléments ayant la classe .lien,
et descendants directement du paragraphe ! */

Il est ensuite possible de pousser le système encore plus loin, par exemple en utilisant les sélecteurs + et ~ qui se chargent de représenter les frères de l'élément. Ce qu'on appelle couramment les frères, dans ce contexte de jQuery, ce sont simplement les éléments qui se suivent directement, comme par exemple deux liens.

$('.lien + .visite');
/* la sélection s'effectue sur les éléments ayant pour classe .visite,
et qui sont immédiatement précédés d'un élément ayant pour classe .lien */

$('.lien ~ .visite');
/* dans ce cas-là, ce sont tous les éléments .visite,
précédés immédiatement ou non par un élément .lien */

Alors, pas trop compliqué ? :p

Jusque là, vous devriez avoir suivi assez facilement. Les sélecteurs CSS sont une chose assez peu difficile à assimiler, et si vous avez du mal, pas de soucis à avoir, cela viendra avec l'expérience. En attendant ce jour heureux, je vous invite à passer aux sélecteurs propres à jQuery !

Une sélection plus poussée

Les sélecteurs de CSS, c'est bien, mais des sélecteurs plus sophistiqués ne seraient pas de refus ! En effet, pour les besoins des développeurs, jQuery met en place une sélection d'éléments beaucoup plus poussée que CSS. Comprenez bien que ce n'est pas seulement avec des identifiants et des classes que nous pourrons établir un véritable système, ce serait le chaos total et franchement peu pratique. C'est pourquoi jQuery a mis en place ce que l'on appelle des filtres, qui ont une syntaxe particulière : deux points suivis du nom du sélecteur. Vous en saurez plus en lisant la suite. ;)

La place d'un élément

Parmis les très nombreux sélecteurs proposés par le framework figurent ceux qui permettent de sélectionner un élément suivant sa place sur la page. C'est quelque chose de vraiment pratique qui était assez compliqué à réaliser avec du simple JavaScript. Les plus utilisés et connus sont :

  • :first, qui sélectionnera le tout premier élément donné ;

  • :eq(index), qui se chargera de retourner l'élément possédant l'index spécifié ;

  • :last, je pense que vous l'aurez vite compris, permettra de sélectionner le dernier élément.

Ainsi, de cette façon, il vous suffira de taper ceci pour faire une sélection sur le premier et/ou le dernier élément :

$('p:first'); // sélection du premier paragraphe trouvé

$('a:last'); // ici, on sélectionne le dernier lien de la page
L'index d'un élément

Cela peut vous paraître flou au premier abord, contrairement aux deux autres sélecteurs. En effet, qu'est-ce que l'index d'un élément ?

Eh bien, pour faire le plus simple possible, c'est le numéro qui représente sa place dans la page. Ainsi, si vous possédez cinq paragraphes, vous pourrez par exemple sélectionner le troisième sans problème. Mais attention il y a un piège : il faut commencer à compter à partir de 0. C'est très important de retenir cela, le système est similaire sur les tableaux, par exemple. Alors quel chiffre taperez-vous pour retourner le troisième paragraphe ? :)

$('p:eq(2)'); // c'était 2 !

Sélection par attributs

Un autre type de sélecteurs sont les sélecteurs fonctionnant grâce aux attributs des éléments du DOM. Il est ainsi possible de réaliser de multiples actions sur les balises qui contiennent un attribut donné, tel qu'un identifiant ou une valeur :

$('p[id]'); // retourne seulement les paragraphes ayant un identifiant
Cibler d'autres façons

Heureusement, il est possible de préciser la requête. Imaginons que vous vouliez récupérer les éléments ayant une valeur (value) ou un nom (name) bien précis. Dans ce cas-là, il est possible de le dire à jQuery grâce à la syntaxe suivante :

$('input[name=pseudo]'); // cible seulement l'élément de formulaire ayant « pseudo » pour nom

Si au contraire vous voulez cibler tous les autres éléments, ceux qui n'ont pas la bonne valeur dans leur attribut, il suffit de rajouter un point d'exclamation (!) devant le signe "égal" (=) :

$('input[name!=pseudo]'); // retourne les éléments n'ayant pas « pseudo » pour nom

Le sélecteur :not()

Un peu à part, ce sélecteur particulier permet de cibler les éléments qui sont tout sauf ce qui a été indiqué à l'intérieur. Il permet donc une sélection puissante, et, depuis jQuery 1.3, permet même de spécifier plusieurs types de balises en même temps ! Il s'utilise très facilement :

$('p:not(.rouge)'); // sélection de tous les paragraphes, sauf ceux ayant .rouge comme classe

$('input:not(.bleu, .vert)'); // on sélectionne tous les éléments de formulaire sauf ceux ayant .bleu et/ou .vert comme classe

Autant dire qu'en terme de praticité, ce sélecteur vaut pas mal de points ! :D

Sauver la sélection

Il peut parfois se révéler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une sélection dans une variable, cette dernière pouvant être utilisée à la place de la fonction principale.

var $element = $('monElement');

Le cas des formulaires

Pour exploiter la pleine puissance des très nombreux sélecteurs de jQuery, il faut se pencher sur les formulaires en HTML. En effet, l'interaction étant beaucoup plus présente à ces endroits, il est logique que le framework soit plus enclin à les dynamiser. Ainsi, la sélection des éléments de formulaire se fera d'une façon un peu différente, que nous allons commencer à traiter tout de suite. :)

Le type des éléments

Comme vous le savez surement, les éléments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise ne change pas et reste la même, on utilisera dans 90% des cas <input />. En changeant l'attribut type de la balise, il est possible de spécifier que l'on veut une case à cocher, un champ de texte, un bouton...

Suivant ce principe, on pourrait penser qu'il faut faire ceci en jQuery :

$('input[type=button]'); // on sélectionne un input de type button

Ce code fonctionne parfaitement, mais ce n'est pas la meilleure façon de procéder ! Il y a plus simple, plus rapide et surtout plus propre. Pour respecter cela, il faut indiquer le type, précédé de deux points :

$('input:button'); // on sélectionne un input de type button

Et vous pouvez ensuite faire ceci pour chaque type d'input !

Type

Code

text (Texte)

input:text

password (Mot de passe)

input:password

file (Fichier)

input:file

checkbox (Case à cocher)

input:checkbox

radio (Bouton radio)

input:radio

button (Bouton normal)

input:button

submit (Bouton d'envoi)

input:submit

État des éléments

Dernière petite astuce avant de conclure ce chapitre, vous pouvez établir une sélection suivant l'état des éléments d'un formulaire. Vous allez nous répondre qu'il n'y a pas trente-six états, justement, et vous avez effectivement raison. Neanmoins, ce sont des sélecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intéressant de les connaître.

Ainsi, vous pouvez vérifier qu'une case est cochée, ou qu'un élément est activé/désactivé, grâce aux sélecteurs suivants :

  • :checked vérifie qu'une case est cochée ;

  • :disabled cible les éléments désactivés ;

  • :enabled fait le contraire, il sélectionne les éléments activés.

Le sélecteur $(this)

Le sélecteur le plus spécial est sans aucun doute $(this). Dans la plupart des langages orientés objet, le mot-clé this représente l'objet courant, celui qui est actuellement traité par une fonction, par exemple. jQuery permet la sélection de cet objet.

Exemple avec ce code qui traite chaque élément trouvé :

$('p').each(function(){
    
    $(this).html('Hello World !'); // $(this) représente le paragraphe courant

});

Performance des sélecteurs

Outre le fait de sélectionner des éléments avec jQuery, il ne faut pas négliger le reste. Ainsi, tout bon développeur sait que la performance est un point primordial dans un code, de quelque langage soit-il issu. La librairie jQuery n'est pas exempt : il faudra vous assurer que votre code est le plus rapide, le plus optimisé et le plus ergonomique possible. Cela passe par une foule de choses, mais nous allons en voir une seule ici : la performance des sélecteurs.

Car oui, les sélecteurs ne ciblent pas tous les éléments à la même vitesse. Ainsi, cibler un élément par un identifiant, par exemple, sera toujours plus rapide que cibler un élément par sa classe.

Les sélecteurs les plus rapides

On note une certaine différence de rapidité lorsqu'il s'agit de cibler des éléments de différentes façons. Le pourquoi est très simple : certains sélecteurs profitent de fonctions natives implémentées par JavaScript, car ils en descendent directement. On pensera donc notamment au sélecteur par identifiant, qui est le plus rapide des sélecteurs : c'est normal, il utilise directement la fonction getElementById() !

Ainsi, on note une rapidité 5 fois supérieure au deuxième sélecteur le plus rapide, qui est le sélecteur par balise. Vient ensuite le sélecteur par classe, les autres enregistrant une forte baisse de performance à l'utilisation.

Ces différences proviennent en fait du parcours du DOM : alors que l'identifiant, étant normalement unique, est ciblé directement par jQuery à cause de sa singularité, les classes vont être traitées une à une, en parcourant tout le document HTML pour les trouver. Pour optimiser au maximum une requête par classe, il suffit de cibler tout d'abord le parent de l'élément avec un identifiant :

$('#menu .sections');
// sélection plus rapide que :

$('.sections');

Écourter les chaînes

Les sélecteurs peuvent s'enchaîner, afin de cibler plus précisément des éléments. Cette astuce possède un lourd inconvénient : elle ralentit considérablement la vitesse de sélection des éléments du DOM. En effet, jQuery va devoir tout d'abord trouver le premier élément, puis va devoir passer au deuxième, et ainsi de suite... Il est alors possible d'augmenter exponentiellement le temps d'exécution du code. Voyons l'exemple suivant :

$('div p a');

$('#lien');

Ces deux ciblages sont identiques, pourtant, la première sélection est, en théorie, environ 15 fois plus lente que la deuxième ! En effet, dans le premier cas, jQuery va parcourir chaque bloc div du document, pour ne retourner que ceux possédant un paragraphe. Viennent ensuite ceux-ci, qui vont être parcourus jusqu'à trouver celui qui possède un lien. En revanche, dans le second cas, le lien va être ciblé directement de part son identifiant unique !

Rappelez-vous donc d'une règle essentielle lorsque vous utilisez jQuery : plus la chaîne de sélecteurs est courte, plus rapide sera la sélection.

C'est la fin de ce chapitre ! Vous avez vu que les sélecteurs de jQuery offrent de nombreuses possibilités de ciblages des éléments d'une page web, et ce n'est que le début de ce fabuleux framework ! Vous verrez dans le prochain chapitre comment gérer les évènements, où vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bien avoir compris ! :)

Exemple de certificat de réussite
Exemple de certificat de réussite