Des méthodes 'setter' et 'getter'

Gros avantage de jQuery c'est la même méthode qui permet de récupérer la valeur d'un attribut (ou propriété) et de modifier cette valeur. On dit que la méthode est "setter" et "getter".

Récupérer des infos sur un élément de la page

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 (élément.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 simple. Une même méthode pour récupérer OU modifier un attribut/propriété/contenu

Exemple

Le code HTML

... <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); }

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é CSS.
Il faut naturellement désigner la propriété de style avec la syntaxe JavaScript (on dit aussi "CamelCase" : suppression du tiret et la 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.
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 ...

Pour récupérer la valeur d'un attribut il suffit d'utiliser la méthode attr avec comme valeur 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")

Pour récupérer le contenu d'un élément HTML il faut utiliser la méthode html sans passage de paramètre !
C'est l'équivalent de innerHTML en JS traditionnel. Donc on récupère le texte et le balisage du 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 les valeurs d'attributs

Reprenons une thématique déjà traité en JS traditionnel.
Nous voulons créer un script qui récupère les dimensions (passés en attributs) 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 !

Affichez la console JS !

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"); console.log(X+ " type :" + typeof(X)); console.log(Y+ " type :" + typeof(Y)); 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.
Les valeurs retournées par les instructions basées sur la commande "console" vous rappellent que la méthode attr retourne une chaine 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 en argument l'attribut.
Pour changer la valeur de cet attribut il suffit d'utiliser la même méthode mais avec deux arguments(attribut, valeur).

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).

Ajouter des attributs aux noeuds avec jQuery

Dans la section précédente vous avez vu qu'avec la méthode attr() on peut récupérer et modifier la valeur d'un attribut.
Cette même méthode permet d'ajouter de nouveaux attributs à un élément HTML, par exemple, ajouter l'attribut class ...

Exemple

Le code CSS & HTML de la page

... <style> section {width : 100% ; height : 600px ; border : 2px solid black ; margin : auto ; } .marine {background : aqua ; color : navy ; border-color : navy ; } .barbie {background : pink ; color : purple ; border-color : purple; } .gothique {background : black ; color : red ;border-color : red ; } ... <body> <section> <h1>Changer la mise en forme d'une page avec jQuery</h1> ... <button>style marine </button> <button>style barbie </button> <button>style gothique </button> </section> ...

Dans le cadre du "responsive design" la largeur de SECTION exprimée en %.
Dans la feuille de style interne trois classes sont définies : marine, barbie et gothique.
Chaque classe affecte une couleur au fond de la boîte, une couleur au texte et une couleur à la bordure de boîte.

Objectif du script

Lorsque vous cliquez sur le premier bouton vous devez affecter aux trois noeuds (section, h1, P) la classe "marine" donc en fait ajouter le code HTML : class ="marine" à ces trois balises.
Lorsque vous cliquez sur le deuxième bouton vous devez affecter aux trois noeuds (section, h1, P) la classe "barbie" donc en fait ajouter le code HTML : class ="barbie" à ces trois balises.
etc.

L'attribut class ne peut être présent plusieurs fois dans une balise. Donc le fait d'ajouter, par exemple, à une balise class ="gothique" supprime class ="barbie" ou class ="marine" !

Le script :

var nomclasse =""; // création d'une variable globale $("button:eq(0)").click(function() {nomclasse ="marine"; fclasse(); }); $("button:eq(1)").click(function() {nomclasse ="barbie"; fclasse(); }); $("button:eq(2)").click(function() {nomclasse ="gothique"; fclasse();}); function fclasse() { $("section").attr("class",nomclasse); $("h1").attr("class", nomclasse); $("p").attr("class", nomclasse); }

Examinons attentivement ce script qui contient de nombreuses nouveautés !
On crée une variable globale (en dehors de toutes fonctions) qui va récupérer le nom de la classe à utiliser : nomclasse.

$("button:eq(0)").click(function() {nomclasse ="marine"; fclasse(); });
Traduisons cette instruction : si clic sur le premier bouton appel d'une fonction anonyme qui affecte la valeur "marine" à la variable nomclasse et qui ensuite appelle la fonction fclasse
Pour distinguer les différentes noeuds affectés de la même balise vous pouvez utiliser bien sûr le suffixe :first ou :last mais quand il y en a plus de deux balises de même type il faut utiliser :eq(indice) !
Ainsi"button:eq(0)" signifie "bouton d'indice 0 c'est à dire le premier !

Examinons maintenant la fonction fclasse !
$("section").attr("class",nomclasse) : affecter à la balise section la classe dont le nom est contenu dans la variable globale nomclasse.
Testez l'exemple

Deuxième solution

Plutôt que la méthode attr("class",nomDeClasse) on pourrait utiliser la méthode addClass(nomDeClasse).

Attention cette méthode ajoute une classe à l'élément HTML mais sans supprimer celle qui éventuellement lui était déjà affectée. En effet l'attribut class peut contenir une liste de classes.
Donc il faut souvent combiner la méthode addClass(nomDeClasse) avec la méthode removeClass(nomDeClasse). Faut-il rappeler que remove en anglais veut dire supprimer ?

Le code CSS & HTML

Aucun changement par rapport à la solution 1.

Le script

var nomclasse =""; $("button:eq(0)").click(function() {nomclasse ="marine"; fsupp() ; fajout();}); $("button:eq(1)").click(function() {nomclasse ="barbie"; fsupp(); fajout(); }); p$("button:eq(2)").click(function() {nomclasse ="gothique";fsupp(); fajout();}); function fsupp() { $("section,h1,p").removeClass("marine").removeClass("barbie").removeClass("gothique"); } function fajout() { $("section,h1,p").addClass(nomclasse); }

A l'occasion d'un clic sur l'un des boutons de commande le contenu de la variable globale nomclasse change et ensuite il y a appel des fonctions fsupp et fajout.
La fonction fsupp supprime les trois classes des trois noeuds.
La fonction fajout ajoute une des trois classes aux trois noeuds en fonction de la valeur de la variable nomclasse.
Testez cette deuxième solution

Troisième solution

On peut aussi utiliser la méthode toggleClass(nomClasse).
Cette méthode ajoute la classe précisée si elle n'est pas encore appliquée à l'élément HTML ou la supprime si elle est déjà associée au noeud. Il y a donc un effet bascule.

Le code CSS & HTML

... <h1>Changer la mise en forme d'une page avec jQuery</h1> <p>Au départ aucune classe n'est affectée aux trois noeuds SECTION, H1 et P. <p class ="remarque">Pour éviter tout blocage : retirer une classe(en recliquant sur le bouton) avant d'en appliquer une nouvelle ! <button>Appliquer/retirer la classe "marine"</button> <button>Appliquer/retirer la classe "barbie"</button> <button>Appliquer/retirer la classe "gothique"</button>

Le CSS est inchangé.
Dans le HTML un message d'avertissement pour éviter le blocage.
En effet le nombre de classes que l'on peut appliquer à un noeud n'est pas illimité ...

Le script

$("button:eq(0)").click(function() {$("section, h1, p").toggleClass("marine"); }); $("button:eq(1)").click(function() {$("section, h1, p").toggleClass("barbie"); }); $("button:eq(2)").click(function() {$("section, h1, p").toggleClass("gothique");});

Dans chacune des trois fonctions anonymes une instruction unique basée sur la méthode toggleClass.
Testez la troisième solution !

Vous avez dû connaître des situations de blocage.
Il a fallu que, par exemple, vous retiriez une classe (en recliquant sur le bouton correspondant) pour en ajouter une nouvelle.

Amélioration du script

Il suffit de modifier légèrement le script pour éviter tout risque de blocage.

Le script amélioré :

$("button:eq(0)").click(function() {$("section, h1, p").removeClass("barbie").removeClass("gothique").toggleClass("marine");}); $("button:eq(1)").click(function() {$("section, h1, p").removeClass("marine").removeClass("gothique").toggleClass("barbie");}); $("button:eq(2)").click(function() {$("section, h1, p").removeClass("marine").removeClass("barbie").toggleClass("gothique");});

Avant d'appliquer une classe aux trois noeuds on supprime éventuellement les deux autres classes.
Essayez la solution toogleClass débuggée !

Il ne devrait plus y avoir de cas de blocage !
Retour menu