Les méthodes addClass et removeClass en jQuery
Sommaire
- 1- Objectifs
- 2- Rappel
- 3- Présentation
- 4- La méthode addClass()
- 4.1- Utilisation et usage
- 4.2- Syntaxe
- 4.3- Exemple
- 4.4- Application
- 5- La méthode removeClass()
- 5.1- Utilisation et usage
- 5.2- Syntaxe
- 5.3- Application
- 6- La méthode toggleClass()
- 6.1- Utilisation et usage
- 6.2- Syntaxe
- 6.3- Application
- 6.4- Correction
- 6.4.1- Sommaire du cours jQuery
Les méthodes addClass et removeClass en jQuery
-
Objectifs
- Connaitre les méthodes
addClass()etremoveClass() - Etre capable d’animer des modifications apportées aux propriétés CSS
-
Rappel
- Toute commande JQuery doit être appelée après que le document soit chargé.
- On peut y déclarer et utiliser des fonctions.
- Dans JavaSCript, on peut trouver un élément avec son identificateur grâce à la méthode
getElementById() - Dans JQuery, on peut tout simplement utiliser un sélecteur pour retrouver l’élément
- Pour le CSS, on dispose de méthodes pour la manipulation des classes CSS:
addclass(),removeClass(), Il existe aussiremoveAttr(),… . -
Présentation
- Parmi les attributs HTML, l’attribut class est certainement le plus important lorsqu’on travaille avec le jQuery.
- Le jQuery va cibler des éléments HTML en s’appuyant sur des sélecteur CSS, et donc notamment sur des attributs class.
- Le jQuery dispose d’une méthode pour ajouter un attribut class à un ou plusieurs éléments : la méthode
addClass()ainsi elle dispose d’une autre méthode pour supprimer ou enlever une méthode c’est la méthoderemoveClass(). - Ces deux méthodes ne peuvent prendre qu’un seul argument.
- Pour les utiliser avec plusieurs classes différentes, il suffit de les séparer par des espaces.
-
La méthode addClass()
-
Utilisation et usage
- La méthode
addClass()permet d’animer les modifications apportées aux propriétés CSS. - La méthode
addClass()ajoute une ou plusieurs classes aux éléments html sélectionnés. - Cette méthode ne supprime pas les attributs de classe existants, il ne fait qu’ajoute une ou plusieurs valeurs pour l’attribut class.
- Cette méthode ajoute la classe spécifiée à tous les éléments sélectionnés.
- Exemple:
$("p:last").addClass("selected"): ajoute la classe selected au dernier paragraphe. -
Syntaxe
-
Exemple
- On peut ajouter l’appel des fonctions de style à l’événement du bouton en écrivant;
- N’oublier pas l’id du bouton qui est « att » dans l’exemple, aussi l’appel de jQuery est obligatoire :
-
Application
- Créer la page HTML suivante et la nommer index.html
- Créer un fichier texte vide style.css dans le répertoire qui contient le fichier index.html crée précédemment.
- Créer les règles css suivantes:
- Le div doit avoir une bordure de 1px,type solide et de couleur rouge
- Une classe orange pour la couleur d’arrière plan (couleur orange)
- Une classe jaune pour la couleur d’arrière plan du deuxième div(couleur jaune)
- Une classe gras pour afficher le texte en gras
- Une classe italique pour afficher le texte en italique
- Une classe centrerGauche pour aligner le texte à gauche
- Créer un fichier texte vide fonction.js dans le répertoire de travail.
- Créer une fonction jquery qui vous permet d’appliquer le style crée précédemment
-
La méthode removeClass()
-
Utilisation et usage
- Cette méthode permet de retirer un ou plusieurs attributs class appliqués à des éléments HTML en jQuery
- Elle supprime une seule classe, plusieurs classes ou toutes les classes de chaque élément de l’ensemble des éléments correspondants.
- Cette méthode s’utilise de façon analogue à la méthode
addClass(). -
Syntaxe
-
Application
- Ajouter le script jQuery dans l’exemple précédent pour supprimer toutes les classes.
- Un clic sur le bouton déclenche ce script
-
La méthode toggleClass()
-
Utilisation et usage
- La méthode toggleClass() bascule entre l’ajout et la suppression d’une ou plusieurs classes pour les éléments sélectionnés.
-
Syntaxe
- class:Obligatoire. Spécifie un ou plusieurs noms de classe à ajouter ou supprimer.Pour spécifier plusieurs classes, séparer les noms de classe avec un espace.
- commutateur:Facultatif. Une valeur booléenne spécifiant si la classe doit être ajoutée (vrai) ou supprimée (faux).
-
Application
- Soit le code Html suivant
- Au clic du lien, faire apparaître ou disparaître une division de la page.
- Créer les fichiers css et js nécessaires pour présenter cette page web
-
Correction
$(sélecteur).addClass(class)Cette méthode va prendre en argument la valeur de l’attribut
class qu’on souhaite ajouter à l’élément.
<style type="text/css">
.monDiv { color: red; }
.dernierDiv {background-color: greenyellow; }
.lien:hover { color: blue; }
</style>
<script >
$(function (){
$('div:first').addClass('monDiv');
$('div:last').addClass('dernierDiv');
$('a').addClass('lien');
});
</script>
</head>
<body>
<div> Premier div</div>
<div>Deuxième div</div>
<div>Troisième div</div>
<a href="#"> C'est un lien </a>
<br/><button> Ajouter une classe </button><script >
$(function (){
$('#att').click(function(){
$('div:first').addClass('monDiv');
$('div:last').addClass('dernierDiv');
$('a').addClass('lien');});
});
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Application addClass</title>
</head>
<body>
<div>
<p>Parmi les attributs HTML, l’attribut class est certainement le plus important lorsqu’on travaille avec le jQuery.</p>
<p>Le jQuery va cibler des éléments HTML en s’appuyant sur des sélecteur CSS, et donc notamment sur des attributs class.</p>
<p>Le jQuery dispose d’une méthode pour ajouter un attribut class à un ou plusieurs éléments : la méthode addClass() ainsi elle dispose d’une autre méthode pour supprimer ou enlever une méthode c’est la méthode removeClass().</p>
</div></br>
<div>
<p>Les deux méthodes ne peuvent prendre qu’un seul argument.</p>
<p>Pour les utiliser avec plusieurs classes différentes, il suffit de les séparer par des espaces.</p>
</div></br>
<button id="btnAddClass">Ajouter des attributs class au Div précédent</button>
</body>
</html>
$(sélecteur).removeClass(class)Cette méthode va prendre en argument la valeur de l’attribut
class qu’on souhaite supprimer à l’élément.
$(sélecteur).toggleClass(class, commutateur)
<body>
<div class="centerdiv">
<p><a href="#">Apparaître / Disparaître</a></p>
<div class="div">La méthode <strong>toggleClass()</strong> bascule entre l'ajout et la suppression d'une ou plusieurs classes pour les éléments sélectionnés.</div>
<p><strong>Syntaxe</strong> Suite de la page...</p>
</div>
</body>
<style type="text/css">
.centerdiv{
margin: auto;
width: 270px;
}
a{color: black;text-decoration: none;}
.div { width: 255px;
padding: 3px;
border: 1px dotted black;
cursor: pointer;
}
.cacher { display: none;}
</style>
<script type="text/javascript">
$(function(){
$("a").click(function(){
$(".div").toggleClass("cacher");
});
});
</script>
