jQuery.addClass() : manipulation ciblée de classes pour créer des effets sur un site Web

La méthode jQuery.addClass() constitue une solution précise et simple d’utilisation si vous souhaitez ajouter des classes à des éléments, de manière à contrôler l’apparence et le comportement de votre site Web. Découvrez avec nous la structure et le fonctionnement de la méthode .addClass().

Méthode jQuery.addClass() : de quoi s’agit-il ?

L’utilisation de la méthode .addClass() vous permet de modifier de façon dynamique l’apparence de votre site Web. Vous pouvez par exemple choisir les styles, concevoir des animations ou réagir à toute interaction des utilisateurs en ajoutant les classes nécessaires aux éléments HTML concernés. Cette méthode ne sert néanmoins pas à supprimer les classes existantes. Pour utiliser cette fonction, il convient de faire appel à la méthode jQuery.removeClass(). Une fois l’ajout effectué, les règles de style CSS prévues pour la classe sont appliquées aux éléments sélectionnés, de manière à parvenir au comportement visuel souhaité. N’hésitez pas également à utiliser jQuery pour WordPress pour personnaliser la mise en page et les effets dans votre système de gestion de contenu (ou CMS, pour Content Management System).

Conseil

Avec l’hébergement Web de IONOS, vous profitez notamment d’un certificat SSL Wildcard gratuit et d’une option de sauvegarde automatique. Découvrez nos différentes solutions d’hébergement.

À quoi ressemblent la syntaxe et les paramètres de la méthode jQuery.addClass() ?

La fonction jQuery.addClass() peut accepter deux paramètres. De manière générale, la syntaxe se présente comme suit :

$(selector).addClass(classname,function(index,currentclass))
jQuery
  • classname : nom de la classe ou des classes à ajouter, avec une virgule séparatrice ;
  • function(index,currentclass) : fonction de rappel facultative, appelée pour chaque élément sélectionné ;
  • index : index de l’élément dans la liste de tous éléments sélectionnés ;
  • currentclass : classe de l’élément.

La fonction de rappel vous permet en plus de procéder à des modifications ou d’intégrer une logique au niveau de chaque élément au moment de l’ajout des classes. Par exemple, vous pouvez vérifier la valeur actuelle de la classe et ajouter d’autres classes en fonction de la première.

Vous commencez seulement à travailler avec jQuery ? Nous vous conseillons de consulter notre article faisant office de tutoriel jQuery, dans lequel vous trouverez toutes les informations de base sur la bibliothèque jQuery.

Conseil

L’API IONOS vous permet de configurer avec rapidité et facilité tous vos produits hébergés par IONOS. Avec la clé d’accès aux API IONOS, vous pouvez gérer vous-même vos domaines, vos paramètres DNS et vos certificats SSL. Pour de plus amples informations, n’hésitez pas à consulter la documentation disponible sur la page d’information consacrée à l’API du développeur IONOS.

Exemple d’application de la méthode jQuery.addClass()

Pour vous montrer comment utiliser la fonction .addClass(), dans l’exemple ci-dessous, nous allons ajouter « .green » à l’élément p, pour changer à la fois la couleur et la taille de police du paragraphe. Cette modification est déclenchée à l’aide d’un évènement de clic sur le bouton. Il existe d’autres méthodes, telles que jQuery.find() ou jQuery.ajax(), que vous pouvez facilement utiliser avec la fonction .addClass().

<!DOCTYPE html>
<html>
    
<head>
        <style>
                .blue {
                        color: blue;
                        font-weight: bold;
                }
    
                .green {
                        font-size: 24px;
                        color: green;
                }
        </style>
    
        <!-- Import jQuery CDN library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
                $(document).ready(function () {
                        $("button").click(function () {
                                $("p").addClass("green");
                        });
                });
        </script>
</head>
    
<body style="text-align: center;">
        <h1>
                This is a jQuery.addClass() example.
        </h1>
    
        <p class="blue">
                jQuery add class to element demo
        </p>
    
        <button>Click!</button>
</body>
    
</html>
html

Dans la fenêtre du navigateur, vous pouvez voir que la couleur et la taille de l’élément p ont été modifiées au moment du clic sur le bouton.

Avant :

Affichage avant l’appel de la fonction .addClass()
Apparence avant l’ajout de la classe

Après :

Affichage après l’appel de la fonction .addClass()
Effet de la fonction .addClass dans le navigateur
Conseil

Créez votre propre projet en ligne avec Deploy Now, la solution proposée par IONOS. Avec l’installation rapide et la reconnaissance automatique du framework, quelques étapes suffisent pour mettre sur pied votre site Internet. En plus de votre adhésion (Deploy Now Membership), vous pouvez réserver des ressources supplémentaires, puis résilier celles-ci le mois suivant. Avec Deploy Now, IONOS propose une solution optimisée sur le plan de l’orientation client.

Cet article vous a-t-il été utile ?