Apprenez à modifier en direct les attributs d’un élément HTML. Comme par exemple, ajouter ou modifier une classe CSS, basculer entre 2 classes CSS…
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour modifier les attributs avec le Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Toujours un cours dédié à jQuery pour vous permettre petit à petit, à travers cette série de cours, d’apprendre à mieux appréhender ce Framework JavaScript, et à l’utiliser dans votre site HTML 5. Là vous allez apprendre à manipuler les attributs avec jQuery, directement.
Ajouter ou supprimer une classe
Il est possible d’ajouter ou de supprimer une classe, vous faites $p :last.addClass onHover, ça va ajouter une classe sur la balise p mais p :last, juste au dernier paragraphe, ça va ajouter la classe onHover, quand je parle classe, c’est classe CSS, évidemment. Il faut savoir que cette méthode ne remplace pas une classe, elle ajoute simplement une classe dans le dernier paragraphe. Il est bien évidemment possible d’ajouter plusieurs classes à la fois, il suffit de les séparer par un espace, donc vous mettez addClass classe1 classe2 classe3 onHover onOut onOut size, toujours séparé par un espace.
La méthode addClass c’est souvent associé à la méthode removeClasse, donc removeClass ça permet de supprimer la classe spécifiée à tous les éléments sélectionnés, donc un exemple, $p :last removeClasse onHover, ça va supprimer la classe onHover uniquement du dernier paragraphe, il faut savoir que cette méthode retourne un objet jQuery.
Je vous montre un exemple de code source, ici, alors je vais vous montrer l’exemple de code source à la fin, ce sera beaucoup plus simple, comme ça vous aurez la surprise du résultat.
Pour vérifier la présence d’une classe, vous mettez #p1, ça vérifie si l’élément identifiant avec un id=p1, possède la classe over, donc cette méthode renvoie un booléen true ou false. Soit il y a la classe over, soit elle n’y est pas. Je vous montre l’exemple de code source à la fin.
Ensuite pour basculer entre deux classes, vous avez la méthode jQuery toggleClass, là ça va sélectionner les paragraphes et ça va cliquer la classe l1 si elle est présente, si elle n’est pas présente, ça va enlever la classe l1. toggleClass ça ajoute la classe spécifiée si elle n’est pas présente, sinon ça retire la classe spécifiée si elle est présente. Cette méthode retourne un objet jQuery que vous pouvez utiliser.
Là cette fois, je vous montre les exemples de codes source, alors regardez je vous explique d’abord le code source, ça va afficher ou masquer un élément selon sa valeur, donc hidden classe ici, ça va afficher ou masquer un élément donc il n’y en a pas, ensuite ce sera à vous de leur rajouter, évidemment, sur p hidden ici, c’est pour masquer un paragraphe ou l’afficher avec la classe hidden, et toggleClass, soit on fait un display none, le paragraphe ne se voit pas, soit le paragraphe se voit, donc la classe la sera supprimée, donc ici elle n’apparaît pas, comme je vous l’ai dit, la classe hidden n’apparaît pas, donc l’élément est masqué, par défaut avec la classe hidden et donc avec le toggleClass ça va permettre de la faire apparaitre.
Ensuite au survol de la souris sur une div onMouseOver, on fait, est-ce que l’élément à la classe user ?
Si il l’a, oui on ajoute la classe back au survol de la souris, voilà, avec une background color, si il ne l’a pas on ajoute la classe back mini avec une background color différente. Je vais changer le font size comme ça vous verrez une réelle différence, je recharge la page, voilà, ensuite, sur le clic du lien, donc il y a un seul lien qui est ici, pardon il est où le lien…, il est là, afficher masquer, on va faire un toggleClass sur hidden, togleClasse, on affiche, on masque le paragraphe.
Et ensuite là, voyez en fonction du survol de la souris les éléments, on rajoute la classe, soit back mini, soit back normal, c’est ici que tout se passe, est-ce qu’elle a la classe user ?
Module 1 et module 3 ils ont un comportement différent, ils ont une classe différente qui est enlevée, et alors que module 4, module 5 c’est pour ça qu’ils s’affichent différemment, regardez le 1 et le 3, le 2, 4 et 5.
Votre plan d’actions !
Maintenant c’est à vous de jouer ! Comme d’habitude vous pouvez télécharger le code source sous ce cours vidéo, l’utiliser dans vos sites HTML 5, si vous avez des questions, posez-les sous ce cours vidéo, moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Retrouvez un exemple de code avec le Framework jQuery.
Téléchargement du code source Exemple pour modifier les attributs d'un élément HTML.
