Manipuler les attributs des éléments

45 min Niveau 5

Introduction

JQuery permet de manipuler les différents attributs des éléments HTML. Il permet ainsi d’en ajouter ou d’en modifier, de telle sorte à modifier le comportement de l'élément cible.

Récupérer la valeur d’un attribut ou définir un attribut

La méthode attr() de jQuery permet de récupérer la valeur d'un attribut, d’en ajouter un ou bien d’en modifier un existant.

Pour récupérer la valeur d'un attribut, il faut passer le nom de l’attribut souhaité en argument de la méthode attr(). Cette méthode agira alors comme un getter et ne retournera que la valeur d'attribut du premier élément sélectionné.

Il est également possible de passer une seconde valeur en argument de cette méthode. De la sorte, le premier argument permettra de cibler l’attribut souhaité, tandis que le second permettra de définir sa valeur. Ainsi si l’attribut existe déjà, alors il sera modifié, tandis que s’il n’existe pas, il sera créé.

<!-- Code HTML avant exécution -->
<body>
    <div class="container">
        <h1>Cours jQuery</h1>
        <span>Un élément span</span>
        <p id="text2">Un deuxième paragraphe</p>
    </div>
    <p>Un paragraphe en dehors du div</p>
    <p>Un <a href="https://www.google.com">lien</a> vers Google</p>
    <span id="valAttr"></span>
</body>

$(document).ready(function(){
    // récupération de l'id des balises "p" et stockage dans la 
    // variable "pid"
    let pid = $("p").attr("id");

    // insertion de la valeur de l'attribut "id" de la balise "p"
    // dans l'élément possédant l'id "valAttr"
    $("#valAttr").textContent = "Premier id de p : " + pid;
    // ajout de l'attribut "target", avec la valeur "_blank" sur
    // toutes les balises <a>
    $("a").attr("target","_blank");
});

Après application du jQuery :

<!-- Code HTML avant exécution -->
<body>
    <div class="container">
        <h1>Cours jQuery</h1>
        <span>Un élément span</span>
        <p id="text2">Un deuxième paragraphe</p>
    </div>
    <p>Un paragraphe en dehors du div</p>
    <p>Un <a href="https://www.google.com" target="_blank">lien</a> vers           Google</p>
    <span id="valAttr">Premier id de p : p1</span>
</body>

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !