Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Des méthodes 'setter' et 'getter'

Vous savez qu'avec JavaScript traditionnel il est parfois délicat de récupérer / modifier la valeur d'un attribut / d'une propriété de style.
Pour ne prendre qu'un seul exemple la syntaxe simplifiée élément.style.propriété est efficace pour modifier la valeur mais déconseillée pour récupérer la valeur (utiliser plutôt la méthode getComputedStyle).

Vous allez voir ci-dessous qu'avec jQuery c'est beaucoup plus simple. Une même méthode permet de récupérer OU de modifier un attribut/propriété/contenu

Récupérer/modifier des attributs/propriétés/contenus

Exemple

Le code HTML

Le script

Pour récupérer la valeur d'une propriété de style il faut utiliser la méthode css() avec un paramètre unique : le 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) :


* {font-size : 14px ; }
h1 {font-size :150%)

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 JavaScript 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: modifier les valeurs des attributs

Nous voulons créer un script qui modifie le chemin et le texte alternatif des éléments IMG.

Code de la page

On modifie des valeurs d'attributs donc on utilise la méthode attr() mais cette fois avec deux paramètres : nom de l'attribut et nouvelle valeur de celui-ci.

Le rendu !

Supprimer des attributs

La méthode removeAttr("attribut") permet de supprimer l'attribut spécifié.

Exemple

La balise IMG perd ses trois attributs et en particulier le chemin donc plus d'image.

Le rendu !

Manipuler les classes affectées à une collection d'éléments

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

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".
Lorsque vous cliquez sur le deuxième bouton vous devez affecter aux trois noeuds (section, h1, P) la classe "barbie".

Le script :

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.

Le code CSS & HTML

Aucun changement par rapport à la solution 1.

Le script

Testez cette deuxième solution

On arrive à une situation de blocage : trop de classes attribuées.
Pour débloquer il faut actualiser la page.

Troisième solution

On faut mieux 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 script

Dans chacune des trois fonctions anonymes une instruction unique basée sur la méthode toggleClass.

Testez la troisième solution !

Il y a aussi des situations de blocage. Il faut parfois recliquer sur un bouton pour débloquer.

Version définitive du script

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

Le script amélioré :

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 !