Obtenir des infos sur les noeuds

Si vous avez lu les cours "Javascript pour les débutants" vous savez que dans le cadre du JS traditionnel c'est parfois délicat.
Par exemple pour récupérer la valeur d'une propriété de style il suffit parfois d'utiliser la syntaxe simplifiée (noeud.style.propriété) mais ça ne marche que pour les propriétés en ligne (emploi de l'attribut style dans la balise). Pour les propriétés définies au niveau d'une feuille de style (interne ou externe) il faut utiliser la méthode getComputedStyle.

Pour modifier les valeurs il faut utiliser d'autres techniques. De plus les vieilles versions de IE ont des méthodes spécifiques.
Bref c'est assez complexe ...

Vous allez voir ci-dessous qu'avec jQuery c'est beaucoup plus "carré" !

Exemple

Le code de la page

Pas de feuille de style interne mais lien vers une feuille de style externe qui met en forme en particulier les balises H1.

<button onclick ="frecup()" >Obtenir des infos sur ces noeuds</button> <h1 style ="background-color : yellow ; color : purple;"><u>Jolies filles !</u></h1> <img src ="../images/trikini.jpg" alt ="jolie fille" width ="150" /> <img src ="../images/bikini.jpg" alt ="belle fille" width ="150" />

Le script

function frecup() { var fond = $("h1").css("backgroundColor"); var couleur = $("h1").css("color"); var taille =$("h1").css("fontSize"); alert("infos sur H1"); alert("couleur de fond :" +fond + " couleur de texte :" + couleur + " taille du texte " + taille); var contenu = $("h1").html(); var texte = $("h1").text(); alert("contenu balise:" + contenu + " texte balise :" + texte); alert("infos sur la première image"); var chemin = $("img").attr("src"); var texte = $("img").attr("alt"); alert("chemin :" + chemin + " texte alternatif :" + texte); }

Récupérer la valeur d'une propriété

Pour récupérer la valeur d'une propriété de style il faut utiliser la méthode css() avec un paramètre unique : nom de la propriété.

Il faut naturellement désigner la propriété de style avec la syntaxe Javascript (on dit aussi "CamelCase" : suppression du tiret et lettre qui suit le tiret supprimé est mise en majuscule.

On peut récupérer ainsi non seulement les valeurs des propriétés en ligne mais aussi celles définies dans une feuille de style interne voire dans une feuille de style externe (fichier .css).
Ainsi pour la balise H1 de la page la valeur de la propriété fontSize est définie dans la feuille de style externe et de façon indirecte (dans deux règles) :

Et bien quand vous allez tester l'exemple le script va vous retourner : 21px (150% de 14pt) sans problème ...

Récupérer la valeur d'un attribut

Pour récupérer la valeur d'un attribut il suffit d'utiliser la méthode attr avec comme paramètre le nom de l'attribut.

Attention ici il y a deux images. Donc en écrivant var chemin = $("img").attr("src") je récupère le chemin de la première image !

Si vous voulez récupérer des infos sur la deuxième image le sélecteur doit être :$("img:eq(1)"). La première image à l'indice 0, la deuxième l'indice 1, et ainsi de suite ...
Comme il n'y a que deux images dans la page, la deuxième est aussi la dernière. Donc pour la sélectionner on pourrait aussi écrire : $("img:last")

Il y a dans le tuto jQuery un chapitre entier sur les sélecteurs.

Récupérer le contenu / texte d'un noeud

Pour récupérer le contenu d'un noeud il faut utiliser la méthode html sans passage de paramètre !
C'est l'équivalent de innerHTML en JS traditonnel. Donc on récupère le texte et le balisage dans le noeud !

Si on veut récupérer uniquement le texte (sans le balisage HTML) il faut utiliser la méthode text().
Cette dernière méthode est donc l'équivalent de textContent en JS traditionnel.
Testez l'exemple

Exercice: récupérer et modifier attributs

Reprenons une thématique déjà traité en JS traditionnel.
Nous voulons créer un script qui récupère les dimensions d'une image et qui agrandit ou diminue cette image selon que que l'on clique sur le bouton "agrandir" ou sur le bouton "réduire".
Rendu à obtenir !

Code HTML

<h1>Agrandir/réduire une image avec jQuery</h1> <button onclick ="fagrandir()">Agrandir image</button> <button onclick ="freduire()">Réduire image</button> <img width = "35" height ="50" src ="../images/trikini.jpg" />

L'image fait nativement 700 sur 1000 donc un rapport 35/50.

Extrait du script

var X = $("img").attr("width"); var Y = $("img").attr("height"); alert(X); alert(typeof(X)); X = parseInt(X) ; Y = parseInt(Y) ; function fagrandir() { X +=35 ; Y +=50 ; $("img").attr("width", X); $("img").attr("height",Y); } ...

Les quatre premières instructions sont en dehors de toute fonction donc elles sont exécutées automatiquement.

La troisième instruction est provisoire. Elle a pour objet de vous rappeler que la méthode attr retourne une chaîne numérique (et non pas un nombre).
Il faut donc impérativement convertir le contenu de X et Y en entier avant toute tentative d'incrémentation.
Simplification syntaxique : X+=35 équivaut à X=X+35
Pour récupérer la valeur d'un attribut il suffit d'utiliser la méthode attr avec un paramètre.
Pour changer la valeur de cet attribut il suffit d'utiliser la même méthode mais avec deux paramètres.

A vous de compléter le script (écrire la deuxième fonction pour réduire les dimensions de l'image tout en respectant le rapport 35/50).

Donc une même méthode jQuery (ici attr) permet de récupérer une valeur d'attribut ou de la modifier !
C'est un gros avantage par rapport à JS traditionnel ou il y a souvent une méthode "getter" et une méthode "setter".
Retour menu