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:
Valeur de retour: Objet
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>
Permet d'assigner un ensemble de paires clé/valeur aux élements trouvés.
Version: disponible depuis la version 1.0 de JQuery
Paramétres:
Valeur de retour: objet jQuery
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>
assigne une paire attribut/valeur a tous les élements concernés.
Version: disponible depuis la version 1.0 de JQuery
Paramétres:
Valeur de retour: objet jQuery
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>
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:
Valeur de retour: objet jQuery
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>