Comment ajouter et supprimer des attributs avec le Framework jQuery – partie 2

Et voici la suite de la formation consacrée aux attributs jQuery.

Apprenez à lire, modifier et supprimer les attributs d’un élément HTML avec le Framework jQuery.

Tout est dans le cours ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment ajouter et supprimer des attributs avec le Framework jQuery – partie 2

Bonjour à tous et bienvenu sur Développement Facile.

On continue la suite des cours consacrés au Framework JavaScript jQuery, et celui-là c’est la deuxième partie pour manipuler les attributs directement avec les raccourcis jQuery. Dans le cours précédent, je vous ai montré, vous avez commencé à découvrir la manipulation et la modification via les attributs jQuery, les attributs des balises div, paragraphes, etc.
Là on continu, on va aller encore beaucoup plus loin.

Connaitre la valeur d’un attribut

Il est possible de connaître la valeur d’un attribut, vous faites $a, pour la balise a, et attr(‘title’), vous récupérez la valeur de l’attribut title, du premier lien rencontré, donc attr, nom de l’attribut, ça va accéder à la valeur de l’attribut mentionné, est ensuite, libre à vous de le modifier, de faire ce dont vous avez besoin pour votre application, votre site Internet.
C’est une méthode très utile, justement, pour retrouver la valeur de l’attribut sélectionné, ou du premier élément sélectionné s’il y en a plusieurs, s’il n’y a pas d’élément qui correspond à l’attribut que vous recherchez, la valeur undefined est retournée. Cette méthode retourne également un objet jQuery, on verra à la fin de ce cours, les exemples de code source, comme ça ce sera beaucoup plus simple, je vous explique un peu la théorie en premier, et après on passe rapidement à la pratique.

Ajouter un attribut et sa valeur

Vous pouvez ajouter un attribut avec une valeur, c’est très intéressant, $#logo ça va chercher getElementById Id logo attribut alt, avec la valeur dev facile. Comme je vous l’ai dit, ça recherche dans votre document HTML l’élément identifié par logo, et ça va lui donner l’attribut alt avec la valeur dev facile, donc c’est très utilisé, pour modifier alt dans le cas d’une balise image, img.
Cette méthode retourne également un objet jQuery, très intéressante, pour assigner un attribut avec une valeur à un objet HTML ou une balise div, p, etc.

Vous pouvez ajouter plusieurs attributs et plusieurs valeurs toujours avec attr, $ image ça va rechercher la première balise image trouvée, src, vous aller changer l’image affichée à l’écran, SRC c’est la source, l’URL de l’image, si l’image ne s’affiche pas, vous afficherez le logo dev facile. Très intéressant pour ajouter plusieurs attributs, plusieurs valeurs d’un seul coup à un élément, il suffit de séparer les différentes propriétés par une virgule, cette méthode retourne également un objet jQuery.

Supprimer un attribut

Vous pouvez supprimer un attribut c’est avec remove attr, $#div1 ça va rechercher l’élément avec un Id qui s’appelle div1 et ça va enlever l’attribut disabled. Cette méthode retourne également un objet jQuery.

Connaitre l’attribut value

Ensuite vous pouvez connaître l’attribut value, vous savez, dans les formulaires checkbox, les champs de textes, tout ça, on utilise value pour récupérer la valeur que l’utilisateur a choisi ou qu’il a coché sur une checkbox. $input.val, ça va récupérer le contenu de l’attribut value du premier champ de formulaire de type input, et donc la méthode val ça récupère sous forme de chaîne de caractères le contenu de l’attribut value du premier élément de la sélection. Cette méthode retourne cette fois une chaîne de caractères.

Modifier l’attribut value

Vous pouvez, justement, modifier l’attribut value, tout simplement, $div#input, ça va chercher une balise div avec un Id input.val user, ça va attribuer la valeur user à cette balise div.
Cette méthode retourne un objet jQuery.

Exemple d’application

Là on a vu ensemble la solution pour ajouter des attributs à une balise, modifier les attributs, les supprimer. Je vous montre un exemple de code source comme ça vous verrez exactement ce que ça donne, donc là, tout le code source jQuery est commenté, si vous appuyez sur le bouton search, là on cherche une balise button, il y en a plusieurs, par contre, avec l’Id search, il n’y en a qu’une.
Dès que l’utilisateur appui sur chercher, ça va récupérer le style de la balise spam et l’afficher. Balise spam, il y en a une ici, et son style ici, pareil il y a des boutons grow, le bouton grow c’est agrandir le tableau donc ça va récupérer la balise table et modifier sa largeur, tout simplement.
Picture, le clic sur le lien, qu’est-ce qu’on fait quand on clique sur le lien ?
Image suivante, plusieurs attributs d’un seul coup, la source, donc l’URL de l’image, le alt, le titre de l’image, tout simplement. Ensuite vous avez d’autres options, je vous montre en direct, chercher, agrandir le tableau, image suivante, vous pouvez désactiver le style, donc tout ça en direct grâce à jQuery, sélectionner une valeur, votre choix est JavaScript, autre choix est ActionScript 3 et une commande voilà, vous avez déjà fait une commande, donc tout ça c’est ici avec les clics, vous avez déjà fait une commande, récupérer.val, récupérer la valeur, modifier la valeur, tout ça grâce à jQuery.

Votre plan d’actions !

J’ai été très vite pour vous présenter le code source, parce que pour progresser vous devez l’utiliser, donc téléchargez le code source sous cette vidéo, utilisez-le, mettez-le en pratique dans votre site HTML 5, si vous avez des questions, posez-les directement sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery

Et voici le code source avec la manipulation des attributs HTML via jQuery.

Posez vos questions ici

Si vous avez des questions sur le cours, posez-les directement dans la zone commentaires.