Home About blog
Search


jQuery.attr()

Liste des paramètres acceptés :

attr(nom)

Cette méthode permet facilement de retrouver la valeur d'une propriété du premier élement trouvé. Si l'élement ne dispose pas de l'attribut recherché, "undefined" est renvoyé.
Concernant l'accès aux propriétés de formulaire "checked","disabled" et "readonly", la méthode retourne true s'ils sont présents.

Paramètres:

  • nom (String): nom de la propriété

Cette methode renvoie: Objet

Prenons l'exemple suivant:

retourne la valeur de l'attribut src de la première image trouvée.

$("img").attr("alt");

Testons sur le script suivant:

<img src="teste.png" alt="image de teste"/>

On obtiendra :

image de teste

attr(proprietes)

Permet d'assigner un ensemble de paires clé/valeur aux élements trouvés.

Paramètres:

  • proprietes (Map): ensemble de paires de la forme clé/valeur à envoyer a l'objet.

Cette methode renvoie: objet jQuery

Prenons l'exemple suivant:

Assigne les attributs src et alt à toutes les images.

$("img").attr({ src: "teste.jpg", alt: "image de teste" });

Testons sur le script suivant:

<img/>

On obtiendra :

<img src="teste.jpg" alt="image de teste"/>

attr(clé,valeur)

assigne une paire attribut/valeur a tous les élements concernés.

Paramètres:

  • clé (String): nom de l'attribut
  • valeur (Objet): valeur de l'attribut

Cette methode renvoie: objet jQuery

Prenons l'exemple suivant:

Assign l'attribut src à toutes les images.

$("img").attr("src","teste.jpg");

Testons sur le script suivant:

<img/>

On obtiendra :

<img src="teste.jpg"/>

attr(clé,fonction)

Assigne une valeur a un attribut donné, pour tous les élements concernés. Mais une fonction est passée en paramètre au lieu d'une chaine de caractères, et son éxécution retournera la valeur que prendra l'attribut.

Paramètres:

  • clé (String): nom de l'attribut
  • fonction (Function): fonction qui retournera la valeur de l'attribut. A noter que la fonction peut prendre en argument l'index de l'élément courant.

Cette methode renvoie: objet jQuery

Prenons l'exemple suivant:

Assigne un titre a toutes les images, prenant la valeur de l'attribut src.

$("img").attr("title", function() { return this.src });

Testons sur le script suivant:

<img src="teste.jpg" />

On obtiendra :

<img src="teste.jpg" title="teste.jpg" />

Prenons l'exemple suivant:

Modifie le titre des images en y ajoutant leur index.

$("img").attr("title", function(index) { return this.title ( index); });

Testons sur le script suivant:

<img title="pic" /><img title="pic" /><img title="pic" />

On obtiendra :

<img title="pic1" /><img title="pic2" /><img title="pic3" />

astuceLes Astuces du développeur ...

Pour les moins connaisseurs, il ne faut pas confondre la fonction attr() et la fonction jQuery , attr permet en effet de selection un "attribut" et non la  balise en elle même ...

Prenons l'exemple suivant:



<img src="root.jpg" title="root" alt="root" width="10" />
Les seul appels qui fonctionneront seront :

alert( $("img").attr("title") );
alert( $("img").attr("src") );
alert( $("img").attr("width") );

Testons sur le script suivant:


alert( $("img").attr("height") );

On obtiendra :

Undefined

Envie de vous exprimer ?

Nom / Pseudo (*)
Email (*)
Site Web
Commentaire (*)
 

Il ont osé le dire ...

 
Gravatar de forresst  
jarodxx

# 51 - Le vendredi 22 mai à 12h 59min 01s par forresst

Il y a une erreur dans la méthode attr(nom), dans l'exemple nous avons la description : "retourne la valeur de l'attribut src de la première image trouvée.". Si on regarde le code, la phrase devrait être plutôt "retourne la valeur de l'attribut alt de la première image trouvée.". C'est l'attribut alt et non src. Sinon, c'est parfait, enfin une doc en français. Juste une petite remarque, serait-il possible de générer le fichier index.xml pour pouvoir l'utiliser avec visual jquery ? A+ Forresst

Ajoutez le moteur de recherche jquery a Firefox

2009-02-25 11:48:44

Nouvelles fonctions dans le manuel
Et paf ca tombe comme s'il en pleuvait , les nouvelles fonctions jquert  apport ...

2009-02-05 17:03:07

Insertion des commentaires
Et voila , comme promis les commentaires sont ouverts a tous (et a toutes ;) P ...

Bookmark This Page Envie de nous soutenir ?
jquery documentation francaise