jQuery : les attributs

Voilà un nouveau chapitre sur jQuery : les attributs.

Cette fois on va voir comment travailler sur les attributs des balises et non sur leur contenu.

On va pouvoir ajouter, modifier ou supprimer la classe d'une DIV, cocher ou pas une checkbox ...

PS : Je tiens à rappeler que j'étudie jQuery au fur et à mesure des tutos, ce qui peut provoquer des délais plus ou moins importants entre chaque tuto. D'autre part étant moi-même en phase d'apprentissage, je vous demanderais d'être indulgent sur mes éventuelles fautes : un commentaire formulé peut être accepté comme une critique constructive alors qu'un : "pff, tu connais rien, arrête de rédiger des conneries...", passera en indésirable .

addClass

Ajoute une classe pour chaque élément sélectionné.

Exemple :
Le code suivant :
$("a").addClass("test");
Va transformer :
<a href="http://www.jarodxxx.com/index.php?post/2009/01/13/#">ikule</>
en
<a href="http://www.jarodxxx.com/index.php?post/2009/01/13/#" class="test">ikule</a>

attr()

Cette méthode permet facilement de retrouver la valeur d'une propriété du premier élément trouvé. Si l'élément 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.

Exemple :
$("img").attr("src");Cette fonction va transformer :
<img src="http://www.jarodxxx.com/index.php?post/2009/01/13/test.jpg"/>
en
test.jpg

html

Récupère le contenu du premier élément trouvé. Ne fonctionne pas sur les documents XML (à l'exception des documents XHTML).

Exemple :
$("div").html();
Cette fonction va transformer :
<div><input/></div>
en
<input/>

removeAttr

Supprime un attribut des éléments concernés.

Exemple :
$("input").removeAttr("disabled")
Cette fonction va transformer :
<input disabled="disabled"/>
En:
<input/>

removeClass

Permet de supprimer la ou les classes spécifiées des éléments concernés.

Exemple
$("p").removeClass("selected highlight")Cette fonction va transformer:
<p class="highlight selected first">Hello</p>En:
<p class="first">Hello</p>

text

Retourne le contenu texte de tous les éléments concernés par la recherche. Le résultat est une chaine de caractères contenant la concaténation de tous les contenus texte des éléments. Cette méthode marche avec les documents HTML et XML.

Exemple :
$("p").text();
Cette fonction va transformer :
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
En:
TestParagraph.Paraparagraph

toggleClass

Ajoute une classe aux éléments spécifiés, la supprime si elle est déjà présente.

Exemple :
$("p").toggleClass("selected")
Cette fonction va transformer :
<p>Hello</p><p class="selected">Hello Again</p>
En:<p class="selected">Hello</p><p>Hello Again</p>

val

Récupère le contenu de l'attribut "value" du premier élément de la sélection.
Faites attention quand vous utilisez cette fonction pour récupérer la valeur d'éléments de formulaire de type select multiple parce qu'ils peuvent recevoir un tableau de valeurs.

Exemple :
$("input").val();
Cette fonction va transformer :
<input type="text" value="some text"/>
En:
"some text"

hasClass

Retourne "vrai" si la classe spécifiée est présente pour au moins un des éléments ciblés.

Exemple :
$("div#result1").append($("p:first").hasClass("selected").toString()); $("div#result2").append($("p:last").hasClass("selected").toString()); $("div#result3").append($("p").hasClass("selected").toString());Cette fonction va transformer :
<p>Hello</p> <p class="selected">Goodbye</p> <div id="result1">First paragraph has selected class: false</div> <div id="result2">Last paragraph has selected class: true</div> <div id="result3">Some paragraph has selected class: true</div>
En :
First paragraph has selected class: false Last paragraph has selected class: true Some paragraph has selected class: tr>ue