NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

Nous vous proposons de voir ce que sont les attributs, et comment les influencer avec jQuery.
C'est une partie assez importante également, donc soyez attentif et n'hésitez pas à vous arrêter pour faire quelques essais.

En HTML, les attributs sont contenus dans des balises. Ils définissent en quelque sorte comment le navigateur doit interpréter un élément d'une page web.
Pour être bref et concis :

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires.

Sachez qu'il est possible d'influencer ces attributs avec jQuery, et donc de réaliser une foule de choses rien qu'avec une seule méthode, au moins aussi utilisée que css() et animate() : attr() !

La fonction première de attr() est de pouvoir récupérer la ou les valeur(s) d'un attribut d'une balise.

Il suffit de passer le nom de l'attribut souhaité en tant qu'argument :

var cheminImage = $('img').attr('src'); // rentre le contenu de l'attribut src dans une variable

La seconde utilisation possible de cette méthode est de définir, ou redéfinir un attribut en passant par un deuxième argument.
Comprenez par là que même si l'attribut donné n'existe pas dans la balise, il sera créé automatiquement. De même, la nouvelle valeur donnée écrasera celle en place si elle est déjà définie.

$('img').attr('src', 'nouveauChemin/photo.png'); 
// change l'attribut src en écrasant l'ancienne valeur
 
$('img').attr('title', 'Nouvelle photo'); 
// créé l'attribut title dans l'élément s'il n'existe pas

Par souci de performance, on préféra passer par un objet si l'on a plusieurs attributs à influencer en même temps.
Les multiples appels d'un même objet jQuery sont à éviter, car ils sont gourmands et vos visiteurs risquent de ne pas apprécier si l'attente se révèle trop longue.
Il est alors possible de chaîner les méthodes pour ne pas récupérer plusieurs fois de suite le même objet jQuery, mais là encore, vous devrez taper plusieurs fois la même fonction, ce qui au final se révélera aussi lent.

Il existe alors une solution, qui est à utiliser si vous êtes dans ce cas-là.
Il est possible de donner un objet en tant que paramètre à la méthode attr(), qui contiendra chaque attribut à modifier et leurs nouvelles valeurs respectives.

$('img').attr('src', 'nouveauChemin/photo.png');
$('img').attr('alt', 'Nouvelle photo');
$('img').attr('title', 'Nouvelle photo');
// mauvaise méthode
 
$('img').attr({
    src : 'nouveauChemin/photo.png',
    alt : 'Nouvelle photo',
    title : 'Nouvelle photo'
});
// bonne méthode

Une fonction anonyme peut être déclarée en tant que valeur de l'attribut, c'est-à-dire en second argument. L'utilité est assez contextuelle, mais sachez que cette méthode permet de récupérer deux données et d'en faire usage :

• l'index de l'élément traité (commence par 0), représenté par un premier argument dans la fonction de retour ;
• la valeur actuelle de l'attribut traité, représenté par un second argument.

$('img').attr('alt', function(index, valeur){
    return index + 'ème élément - ' + valeur;
});

Jusque là, il est possible d'écraser un attribut en lui affectant une valeur nulle.
Ce n'est pas très propre, mais ça fonctionne.
Pourtant, une méthode a été conçue spécialement pour réaliser cela : removeAttr().
Il suffit de lui passer le nom de l'attribut en argument, et elle se charge de le supprimer définitivement du DOM.

$('img').removeAttr('title'); // supprime l'attribut title des images

La méthode addClass() permet d'ajouter une classe à l'élément spécifié.
Veillez à bien faire la différence avec la sous-partie précédente : nous avions défini des attributs, mais pas ajouté.
L'ajout de classe signifie que la fonction prend en compte la ou les classe(s) déjà en place.
Ainsi, vous pouvez donner plusieurs classes dynamiquement à un élément, ce qui était impossible avec attr() !
De même, il est possible d'ajouter plusieurs classes en même temps en les séparant par des espaces.

$('.vert').attr('class', 'rouge'); // cet élément aura la classe .rouge
$('.vert').addClass('rouge'); // cet élément aura les classes .vert et .rouge
$('.vert').addClass('rouge bleu jaune'); // cet élément aura les classes .vert, .rouge, .bleu et .jaune

La suppression de classe se fait également avec une méthode adaptée, qui ressemble fortement à celle permettant de supprimer un attribut. removeClass() prend le nom d'une ou de plusieurs classe(s) en paramètre, et les supprime de l'élément sans influencer les autres.

$('p').removeClass('vert'); // supprime la classe .vert de l'élément
$('p').removeClass('vert rouge bleu'); // supprimer les classes .vert, .rouge et .bleu

Pour vérifier qu'un élément possède bien une classe, il existe la fonction hasClass().
ELle ne peut prendre qu'un seul argument, et malheureusement qu'une seule classe à la fois.
Elle est beaucoup utilisée dans les conditions, car elle retourne un booléen (soit true, soit false).

if( $('p').hasClass('vert') ){ // si l'élément possède la classe .vert
    alert('Ce paragraphe est vert !'); // on affiche une alerte
}

Vous connaissez déjà les méthodes telles que toggle(), qui permettent de basculer d'un état à l'autre.
Lorsqu'on travaille avec les classes, il est parfois judicieux d'utiliser ce concept.
Ainsi, la fonction toggleClass() permet d'ajouter ou de supprimer une classe donnée !

$('p').toggleClass('vert'); 
// ajoute la classe .vert si elle n'existe pas, sinon, la supprime

Vous pouvez contrôler l'action de cette méthode grâce à un second argument, sous la forme de booléen :
true permettra d'ajouter la classe, alors que false la supprimera.

// ces deux codes sont équivalents :
$('p').addClass('vert');
$('p').toggleClass('vert', true);
 
// ces deux codes sont équivalents :
$('p').removeClass('vert');
$('p').toggleClass('vert', false);

Les attributs sont un passage obligatoire sur le chemin de la maîtrise du framework jQuery.
Vous avez vu qu'ils sont extrêmement utiles, et croyez-nous : vous n'avez pas fini de les utiliser.

Retour d'un niveau
Retour à l'accueil