Traduction
Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js
Tutoriel JavaScript - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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
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.
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.
Le rendu du code dans un Iframe :
Nous voulons créer un script qui modifie le chemin et le texte alternatif des éléments IMG.
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 dans un cadre :
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 ...
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 si elle existe.
Pas de bordure pour le conteneur "section".
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.
Le rendu dans un cadre :
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.
Aucun changement par rapport à la solution 1.
Le rendu dans un cadre :
On arrive à une situation de blocage : trop de classes attribuées.
Pour débloquer il faut actualiser la page.
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.
Dans chacune des trois fonctions anonymes une instruction unique basée sur la méthode toggleClass.
Le rendu dans un Iframe :
Il y a aussi des situations de blocage. Il faut parfois recliquer sur un bouton pour débloquer.
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.
Le rendu dans un cadre :