Récupérer la valeur d’un attribut ou définir un attribut
On va pouvoir utiliser la méthode attr() pour récupérer la valeur d’un attribut, ajouter un attribut ou modifier la valeur d’un attribut déjà existant.
Pour récupérer la valeur d’un attribut, nous allons utiliser attr() en lui passant le nom de l’attribut dont on souhaite récupérer la valeur en argument. Cette méthode va alors agir comme un getter et retourner la valeur de l’attribut du premier élément de la notre sélection uniquement.
Pour mettre à jour la valeur d’un attribut ou pour définir un nouvel attribut, nous allons passer l’attribut en question en premier argument de attr() et sa (nouvelle) valeur associée en second argument. Si l’attribut existait déjà, sa valeur sera mise à jour. Si il n’existait pas, il sera ajouté à chaque élément de notre sélection.
See the Pen
Cours jQuery 2.6.1 by Pierre (@pierregiraud)
on CodePen.
La méthode prop() et les propriétés du DOM
La méthode prop() va nous permettre de récupérer de valeur d’une propriété du premier élément de notre sélection ou d’ajouter une propriété ou de modifier la valeur d’une propriété déjà existante pour chaque élément d’une sélection.
Pour que vous compreniez l’intérêt de cette méthode, il convient de bien définir la différence entre un attribut et une propriété en HTML.
Un attribut sert à fournir des informations supplémentaires par rapport à un élément et à son comportement. Un attribut est toujours défini dans notre fichier HTML de départ.
Une fois qu’un fichier HTML est chargé dans un navigateur, ce dernier va créer un DOM qui est une représentation de notre fichier de départ. A ce stade, en Javascript, notre fichier HTML va être vu sous la forme de noeuds ou “node” qui sont des objets. Les attributs sont alors représentés sous forme de propriétés de nos noeuds éléments.
On a donc ici deux représentations qui coexistent : notre fichier HTML avec ses éléments et ses attributs d’un côté, et le DOM avec ses noeuds et ses propriétés. Ces deux représentations existent en même temps.
L’idée ici est qu’on va ensuite pouvoir modifier le DOM, et donc modifier les différents objets et les valeurs des propriétés de celui-ci sans forcément modifier la valeur des attributs de notre fichier HTML.
Prenons l’exemple de deux cases à cocher pour bien comprendre :
See the Pen
Cours jQuery 2.6.2 by Pierre (@pierregiraud)
on CodePen.
Selon la définition du W3C, l’attribut checked est un attribut booléen, ce qui signifie qu’il n’a que deux états associés possibles : true (case cochée) et false (case décochée).
Dès qu’on mentionne cet attribut dans notre fichier HTML, et cela quelque soit la valeur qu’on lui donne (et même si on ne lui donne pas de valeur), sa valeur de résolution dans le DOM sera définie à true. Cela signifie que la valeur de la propriété associée va être true.
On a donc deux valeurs différentes pour nos attribut checked définis dans notre fichier HTML et les propriétés checked associées.
Imaginons maintenant qu’un visiteur décoche les cases à cocher.
La valeur des attributs checked n’est pas modifiée. En revanche, la valeur des propriétés checked associée va être modifiée : celle-ci va devenir false.
Cela est dû au fait qu’une case à cocher est un élément “dynamique” c’est-à-dire un élément avec lequel l’utilisateur va pouvoir interagir.
Pour tous ces éléments dynamiques, vous pouvez donc considérer que la valeur de l’attribut HTML va être celle définie initialement dans le fichier HTML tandis que la valeur de la propriété associée va pouvoir être modifiée dynamiquement. La propriété prop() va donc aller récupérer dans le DOM la dernière valeur connue de cette propriété.
Bien souvent, en jQuery, nous voudrons récupérer la dernière valeur connue d’une propriété plutôt que la valeur de l’attribut HTML car cela a beaucoup plus d’intérêt au sens où ça nous permet de réagir dynamiquement par rapport au contenu courant de la page.
Notez bien une nouvelle fois qu’il ne va y avoir de différence entre la valeur de l’attribut et celle de la propriété que pour certains éléments HTML. En effet, dans la plupart des cas, les valeurs des propriétés vont être toujours égales aux valeurs des attributs . De plus, dans certains cas, les valeurs des attributs vont être liées ou “mapped” aux valeurs des propriétés, ce qui signifie que si on change la valeur d’une propriété, la valeur de l’attribut sera également mise à jour.
Supprimer un attribut ou une propriété
Pour supprimer un attribut, on va pouvoir utiliser la méthode removeAttr() en lui passant en argument le nom de l’attribut qu’on souhaite supprimer.
De la même façon, on utilisera removeProp() pour supprimer une propriété d’une sélection d’éléments.
See the Pen
Cours jQuery 2.6.3 by Pierre (@pierregiraud)
on CodePen.
Récupérer ou mettre à jour la valeur courante d’éléments
La méthode val() va nous permettre de récupérer ou mettre à jour la valeur courante d’éléments. Cette méthode est principalement utilisée avec des éléments de formulaire.
On va notamment pouvoir l’utiliser pour récupérer la valeur (le “contenu”) d’un champ de texte input ou textarea ou encore la valeur liée à une case cochée ou à une option d’une liste select choisie.
Notez que dans le cas où plusieurs options ont été choisies (ce qui est possible si on passe un attribut multiple à un élément select par exemple), val() renverra un tableau avec les différentes valeurs.
Depuis la version 3 de jQuery, si aucune option n’est sélectionnée, val()null était retournée).
Il va être particulièrement intéressant d’utiliser la méthode val() dans le cadre de la gestion d’événements. Nous étudierons la gestion d’événements en jQuery dans la prochaine partie, mais en voici déjà un aperçu :
See the Pen
Cours jQuery 2.6.4 by Pierre (@pierregiraud)
on CodePen.
Ici, concrètement, les méthodes jQuery keyup() et change() nous permettent de gérer les événements de même nom.
Dès qu’un utilisateur relâche une touche (“keyup”), la valeur du champ #prenom va être récupérée et affichée.
De même, dès qu’un changement de valeur est détectée pour notre élément select, on récupère le tableau renvoyé par val() et on utilise la fonction JavaScript join() pour afficher les différents éléments du tableau.
Les méthodes permettant de manipuler spécifiquement les attributs class
Finalement, jQuery met à notre disposition une série de méthodes qui vont nous permettre de manipuler spécifiquement les attributs class.
La méthode hasClass() va nous permettre de déterminer si au moins l’un des éléments d’une sélection possède un certain attribut class ou pas. On va devoir passer le nom de la classe qu’on recherche en argument de cette méthode. Elle renverra true si la classe est trouvée false dans le cas contraire.
La méthode addClass() nous permet d’ajouter une ou plusieurs classes à une sélection d’éléments. On va passer les classes à ajouter en argument.
La méthode removeClass(), au contraire, va nous permettre de supprimer une, plusieurs ou toutes les classes de chaque élément d’une sélection. Si on utilise cette méthode sans argument, toutes les classes des éléments de la sélection seront supprimées. Si on précise une ou plusieurs classes en argument, alors seules ces classes seront supprimées.
Finalement, la méthode toggleClass() va nous permettre d’ajouter une ou plusieurs classes à chaque élément d’une sélection si ces éléments ne possèdent pas ces classes ou au contraire de supprimer ces classes si les éléments les possèdent. “Toggle” signifie “basculer” ou “alterner” en français.
See the Pen
Cours jQuery 2.6.5 by Pierre (@pierregiraud)
on CodePen.
Dans l’exemple ci-dessus, on utilise la méthode jQuery click() qui nous permet de gérer l’événement de même nom.
Lors du clic sur le premier bouton, si notre troisième paragraphe ne possède pas de classe bleu, on en ajoute une et on change la couleur des textes des éléments possédant cette classe.
Lors du clic sur le deuxième bouton, on ajoute les classes cacher et afficher au div si il n’en possède pas ou on les supprime si il les possède. Les deux classes agissent indépendamment ici : si le div n’en possède qu’une, elle sera supprimée et la deuxième sera ajoutée. On applique ensuite la méthode hide() aux éléments possédant une classe cacher et show() à ceux possédant une classe afficher.
