Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
jQuery

Les méthodes addClass et removeClass en jQuery

Un cours complet pour maîtriser Les méthodes addClass et removeClass en jQuery.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Présentation de jQuery
Historique du jquery
Installation de jQuery
Le vocabulaire à utiliser dans jQuery
La Syntaxe de base de jQuery
TP1 jQuery
Les sélecteurs en jQuery
Les sélecteurs de base en jQuery
Les bases de jQuery
Les sélecteurs hiérarchiques
Les filtres de base en jQuery (1/3)
Les filtres de base en jQuery (2/3)
Les filtres de base en jQuery (3/3)
Les filtres enfants en jQuery
Les filtres de contenu en jQuery
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Connaitre les méthodes addClass() et removeClass()
    • Etre capable d'animer des modifications apportées aux propriétés CSS

  2. Rappel

    • Toute commande JQuery doit être appelée après que le document soit chargé.
    • On peut y déclarer et utiliser des fonctions.

      • Les méthodes addClass et removeClass en jQuery

    • 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 aussi removeAttr(), … .

  3. 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éthode removeClass().
    • 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.

  4. 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
        $(sélecteur).addClass(class) Cette méthode va prendre en argument la valeur de l'attribut class qu’on souhaite ajouter à l’élément.
    • Exemple
      <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>
    • On peut ajouter l'appel des fonctions de style à l'événement du bouton en écrivant;
    <script >
		  $(function (){
			  $('#att').click(function(){
				$('div:first').addClass('monDiv');
				$('div:last').addClass('dernierDiv');
				$('a').addClass('lien');});
			  });
		</script>
  5. N'oublier pas l'id du bouton qui est "att" dans l'exemple, aussi l'appel de jQuery est obligatoire : 
    6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  6. Application
    • Créer la page HTML suivante et la nommer index.html
      
<!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>
  7. Créer un fichier texte vide style.css dans le répertoire qui contient le fichier index.html crée précédemment.
  8. 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
  9. Créer un fichier texte vide fonction.js dans le répertoire de travail.
  10. Créer une fonction jquery qui vous permet d'appliquer le style crée précédemment

  11. 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
        $(sélecteur).removeClass(class) Cette méthode va prendre en argument la valeur de l'attribut class qu’on souhaite supprimer à l’élément.
    • 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

  12. La méthode toggleClass()

    1. 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.
    2. Syntaxe
        $(sélecteur).toggleClass(class, commutateur)
      • 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).
    3. Application
      • Soit le code Html suivant
      <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>
    4. Au clic du lien, faire apparaître ou disparaître une division de la page.

      5. Les méthodes addClass et removeClass

    5. Créer les fichiers css et js nécessaires pour présenter cette page web
    6. Correction
      <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>
    Sommaire du cours jQuery
    Le dimensionnement d’un élément