Attributs: fonction attr

  • Variantes:

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.

Version: disponible depuis la version 1.0 de JQuery

Paramétres:

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

Valeur de retour: Objet

Exemple :

Retourne l'attribut title du premier element de type "em" dans la page.

var title=$("em").attr("title");
$("div").text(title);
  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		var title=$("em").attr("title");
$("div").text(title);
  	});
  </script>
  
  <style>
  
  em { color:blue; font-weight;bold; }
  div { color:red; }

  </style>
  </head>
  <body>
  	
<p>
    IL était une fois un <em title="énorme, gigantesque">grand</em> dinosaure...
  </p>
  Le titre de la balise "em" est:<div></div>

  </body>
  </html>

4 Commentaires (afficher/poster)

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

Version: disponible depuis la version 1.0 de JQuery

Paramétres:

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

Valeur de retour: objet jQuery

Exemple :

Assigne les attributs src et alt à toutes les images.

$("img").attr({ src: "http://jquery.com/images/hat.gif", alt: "Logo jQuery!" });
$("div").text($("img").attr("alt"));
  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("img").attr({ src: "http://jquery.com/images/hat.gif", alt: "Logo jQuery!" });
$("div").text($("img").attr("alt"));

  	});
  </script>
  
  <style>
  
  img { padding:10px; }
  div { color:red; font-size:24px; }
  
  </style>
  </head>
  <body>
  	  
<img/><img/><img/>
<div><B>Attribute of Ajax</B></div>

  </body>
  </html>

1 Commentaire (afficher/poster)

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

Version: disponible depuis la version 1.0 de JQuery

Paramétres:

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

Valeur de retour: objet jQuery

Exemple :

Assign la propriété disable a tous les boutons qui se trouve apres le 1er bouton (la position démarre à 0).

$("button:gt(1)").attr("disabled","disabled");
  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("button:gt(1)").attr("disabled","disabled");

  	});
  </script>
  
  <style>
  
  button { margin:10px; }
  
  </style>
  </head>
  <body>
  	
<button>Bouton 0</button>
  <button>1er Bouton</button>
  <button>2eme Bouton</button>
<button>3 eme Bouton</button>

  </body>
  </html>

4 Commentaires (afficher/poster)

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.

Version: disponible depuis la version 1.0 de JQuery

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.

Valeur de retour: objet jQuery

Exemple :

Assigne des IDs aux divs en se basant sur leur position dans la page.

$("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span",this).html("(ID = '<b>"+this.id+"</b>')");
        });
  <html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span",this).html("(ID = '<b>"+this.id+"</b>')");
        });

  	});
  </script>
  
  <style>
  
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
  
  </style>
  </head>
  <body>
  	
 <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>


  </body>
  </html>

0 Commentaire (afficher/poster)