Magazine Internet

jQuery : les attributs

Publié le 13 janvier 2009 par Avi Teboul

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


jQuery : les attributs


Les dernieres videos de buzz

Voir les dernieres videos

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

LES COMMENTAIRES (1)

Par Amandine
posté le 01 décembre à 17:04
Signaler un abus

Un grand merci à toi pour cette page très claire ! Je suis moi aussi en train d'apprendre et cette page m'a beaucoup aidé ! Bonne chance pour la suite et n'hésite pas à en écrire davantage !!

A propos de l’auteur


Avi Teboul 600 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte