jQuery.attr()
Liste des paramètres acceptés :
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
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"/>
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"/>
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" />
Les 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