jQuery : les attributs Par JarodxXx
le mardi 13 janvier 2009, 10:05
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="#">ikule</>
en
<a href="#" 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="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());Cette fonction va transformer :
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());<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













Ziki
Dailymotion
Flickr
Technorati
Twitter
1. Le mardi 13 janvier 2009, 14:12 par Ous
Tu refais la doc jquery ?
http://docs.jquery.com
2. Le mardi 13 janvier 2009, 22:01 par Olivier
C'est toi le développeur caché du jQuery? Je le savais
3. Le jeudi 15 janvier 2009, 09:58 par remrem
Hey!
Grâce à toi je me suis enfin mit à Jquery... j'y pensé depuis quelques temps mais j'avais la flemme ... ton 1er post sur ce sujet ma lancé... je commence à maîtriser les animations, selecteurs ... je vais attaquer la partie ajax maintenant ... Thx Jarod !
4. Le jeudi 29 janvier 2009, 08:43 par clem
C'est quoi l'interet de refaire ma documentation de jquery ? C'est pas du tout des tutoriel la, au mieux c'est de la traduction.
Tant qu'à faire, autant lire l'introduction sur le site de developpez.com : http://pckult.developpez.com/tutori...
5. Le mardi 3 mars 2009, 14:27 par vivou
on est bien d'accord $("input").removeAttr("disabled")
permet de virer l'attribut disabled
Mais comment faire pour l'ajouter????
6. Le vendredi 18 juin 2010, 03:25 par shaine
haha comme remrem tu ma motivée par ce post pour attaqué le Jquery :D
Grande fan du "from scratch" je change un peu ma philosophie ..
Merci JarodxXx :D