oujood.com

addClass()et removeClass jQuery ajouter ou supprimer une class à un élément HTML

Les méthodes addClass() et removeClass permettent de manipuler les classes d’un élément HTML pour ajouter ou supprimer une classe
Ce chapitre examine la méthode addClass (), qui est l'une des méthodes utilisées pour gérer les effets visuels avec jQuery.
La méthode AddClass() permettent d'animer les modifications apportées aux propriétés CSS.

chercher |

Définition et Usage La méthode addClass()

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.


Tip : Pour ajouter plus d'une classe, séparer les noms de classes avec un espace.


Syntaxe

$(sélecteur).addClass(class)

Description :Ajoute la classe spécifiée à chacun de l'ensemble des éléments sélectionnés.

Pour le version jquery 1.0: addClass (className)

className Un ou plusieurs noms de classe à être ajouté à l'attribut de classe de chaque élément correspondant.

Pour le version jquery 1.4: addClass (fonction (index, currentClass))

fonction (index, currentClass) Une fonction renvoyant un ou plusieurs noms de classes à être ajoutés au noms de classe existante séparés par des espaces. Reçoit la position d'index de l'élément dans le jeu et le nom de classe existant comme arguments. Au sein de la fonction, on utilise this pour désigner l'élément en cours dans le jeu.

NOTE: Il est important de noter que cette méthode ne remplace pas une classe. Il ajoute simplement la classe, il l'ajout à tout ce qui peut être déjà existant dans les éléments.

Plus d'une catégorie peut être ajoutée à une à l'ensemble d'éléments sélectionnés, elles doivent être séparées par un espace, comme suit :

$("p").addClass("maClass votreClass");

Cette méthode est souvent utilisée avec .removeClass() pour basculer les classes des éléments de l'un à l'autre, comme suit :

$("p").removeClass("maClass noClass").addClass("votreClass");

Ici, les classes maClass et noClass sont supprimés de tous les paragraphes, tandis que la classe votreClass est ajouté.
A partir de la version jQuery 1.4, la méthode .addClass() peut recevoir une fonction.

$("ul li:last").addClass(function() {
  return "item-" + $(this).index();
});

Si on a une liste non ordonnée avec cinq éléments <li> , cet exemple ajoute la classe "item-4" au dernièr <li> .

Exemple1: Ajouter une classe à un élément

Exemple :       Copier le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
$(document).ready(function(){
  $("button").click(function(){
   
$("p:last").addClass("selected");
  });
});
</script>
<style>
  p { margin: 8px; font-size:16px; }
  .selected { color:#f00; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p class="highlight">Ceci est un troisième
paragraphe.</p>
<button>Ajouter calasse au dernier
élément p</button>
</body>
</html>


Dans l'exemple ci dessus nous avons ajouter la classe selected qui donne une couleur rouge au dernier paragraphe p qui a déjà une classe qui donne une couleur jaune au background, addclass'() n'a pas supprimé la classe existante.

Exemple 2: L'utilisation d'une fonction pour ajouter des classes d'éléments sélectionnés.

Exemple :       Copier le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script >
$(document).ready(function(){
  $("button").click(function(){
   
$('p').addClass(function(n){
     
return 'Class_' + n;
    });
  });
});
</script>
<style type="text/css">
.Class_0
{
color:blue;
}
.Class_1
{
color:red;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Ajouter calasses à
l'élément p</button>
</body>
</html>

Dans l'exemple ci-dessus: function(n) retourne la valeur class_n n étant l'index de l'élément sélectionné.
La méthode addclass() va ajouter la class_0 à l'élément p avec index = 0 et la class_1 à l'élément p avec index = 1

Exemple 3: Comment ajouter deux noms de classe à un élément sélectionné.

Exemple :       Copier le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
$(document).ready(function(){
  $("button").click(function(){
    
$("p:last").addClass("selected highlight");
  });
});
</script>
<style>
  p { margin: 8px; font-size:16px; }
  .selected { color:#f00; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un  paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Ceci est un troisième
paragraphe.</p>
<button>Ajouter les calasse au dernier
élément p</button>
</body>
</html>

Exemple 4: Comment utiliser addClass () et removeClass () pour supprimer une classe, et ajouter une nouvelle classe.

Exemple :       Copier le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
     
<meta charset="utf-8">
   <title>jQuery demo
</title>   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
$(document).ready(function(){
  $("button").click(function(){
   
$("p:first").removeClass("intro").addClass('main');
  });
});
</script>
<style type="text/css">
.intro
{
color:red;
}
.main
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p class="intro">Ceci est un 
paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<p>Ceci est un troisième
paragraphe.</p>
<button>Ajouter les calasse au dernier
élément p</button>
</body>
</html>


JQuery la méthode HTML  removeClass()

Définition et Usage La méthode removeClass()

La méthode removeClass() supprime une ou plusieurs classes  des éléments sélectionnés.

Syntaxe

$(sélecteur).removeClass(classname)

Paramètre Description
ClassName Facultatif. Spécifie un ou plusieurs noms de classe à supprimer. Pour supprimer plusieurs classes, séparer les noms de classe avec des espaces.

Note : Si ce paramètre est vide, toutes les classes seront supprimées.

Si un nom de classe est inclus comme paramètre, alors seule cette classe sera retirée de l'ensemble des éléments sélectionnés. Si aucun nom de classe n'est spécifié dans le paramètre, toutes les classes seront alors  supprimées.

Plus d'une catégorie peut être retirée à la fois, séparée par un espace, de l'ensemble des éléments désignés, comme suit :

$('p').removeClass('myClass yourClass')

La méthode .removeClass() est souvent utilisée avec .addClass() pour basculer entre les classes des éléments de l'un à l'autre, comme suit :

$('p').removeClass('myClass noClass').addClass('yourClass');

Ici, les classes myClass et noClass sont supprimées de tous les paragraphes, tandis que yourClass est ajoutée dans tous les paragraphes.

Mais  au lieu de cela et pour remplacer toutes les classes existantes par une autre classe, nous pouvons utiliser .attr('class', 'newClass').

Exemple : enlever la classe « blue » des éléments correspondants.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
    <script 
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    p { margin: 4px; font-size:16px; font-weight:bolder; }
    .blue { color:blue; }
    .under { text-decoration:underline; }
    .light { background:yellow; }
    </style>
  </head>
  <body>
    <p class="blue under">Bonjour</p>
    <p class="blue under light">comment ça va?</p>
    <p class="blue under"> alors </p>
    <p class="blue under">à bien tot</p>
  <script>$("p:even").removeClass("blue");</script>
  </body>
  </html>

Dans cet exemple nous enlevons la classe blue de paragraphe dont l’index est paire .

Pour supprimer les classe blue et under de paragraphe dont l’index est impaire, remplacer le code par :

<script>$("p:odd").removeClass("blue under");</script>

Pour supprimer  toutes les classes de l’élément dont l’index est 1 remplacer le code par :

<script>$("p:eq(1)").removeClass();</script>

Supprimez la classe à l'aide d'une fonction

Une fonction peut être utilisée pour de retirer une classe des éléments sélectionnés.

 En jQuery 1.4, la méthode .removeClass() permet d'indiquer la classe à être enlevé en passant une fonction comme paramètre.

Syntaxe

$(sélecteur).removeClass(function(index,oldclass))

Paramètre Description
function(index,oldclass) Une fonction qui retourne un ou plusieurs noms de classe à supprimer.
  • index - facultatif. Reçoit la position d'index du sélecteur
  • oldclass - facultatif. Reçoit l'ancienne valeur du sélecteur de classe

Exemple : supprimer une classe en utilisant une fonction.

Exemple :       Copier le code


  <!DOCTYPE html>
  <html>
  <head>
    <script 
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
  $(document).ready(function(){
    $("button").click(function(){
        $("li").removeClass(function(n) {
        if (n==0||n==1) {return "listitem"}
        else {return ""}
      });
    });
  });
  </script>
  <style type="text/css">
  .listitem
  {
  color:red;
  }
  </style>
  </head>
  <body>
  <h1>Ceci est un titre</h1>
  <ul>
  <li class="listitem">Piere</li>
  <li class="listitem">Luis</li>
  <li class="listitem">Michel</li>
  <li class="listitem">Steve</li>
  </ul>
  <button>Suprimer la class "listitem" des éléments li avec index
  0 et 1</button>
  </body>
  </html>

Changer la classe d'un élément

Exemple :

Comment utiliser addClass() et removeClass() pour supprimer une class et ajoutez une nouvelle classe.

Exemple :       Copier le code

  <!DOCTYPE html>
  <html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script >
  $(document).ready(function(){
    $("button").click(function(){
      $("p:first").removeClass("intro").addClass('main');
    });
  });
  </script>
  <style type="text/css">
  .intro
  {
  color:red;
  }
  .main
  {
  background-color:yellow;
  }
  </style>
  </head>
  <body>
  <h1>Ceci est un titre</h1>
  <p class="intro">Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Change class du 1er élément p</button>
  </body>
  </html>


Par gerywa 25 juillet 2014



Voir aussi nos tutoriel :

fonction lcfirst

Met le premier caractère en minuscule

PHP gestion d'erreur

Gestion d'erreur

Filtre de PHP FILTER_SANITIZE_STRIPPED

Le filtre FILTER_SANITIZE_STRIPPED supprime les balises, et supprime ou encode les caractères spéciaux.