Il metodo jQuery.addClass() permette di ag­giun­ge­re classi agli elementi per con­trol­la­re l’aspetto e il com­por­ta­men­to del tuo sito web in modo preciso e facile da usare. In questo articolo ti spie­ghia­mo la struttura e il fun­zio­na­men­to del metodo .addClass().

Che cos’è il metodo jQuery.addClass()?

Con .addClass() puoi mo­di­fi­ca­re in modo dinamico l’aspetto del tuo sito web. Ad esempio, è possibile cambiare gli stili, pro­get­ta­re ani­ma­zio­ni o reagire alle in­te­ra­zio­ni degli utenti ag­giun­gen­do le classi de­si­de­ra­te agli appositi elementi HTML. Il metodo non può essere uti­liz­za­to, invece, per rimuovere le classi già presenti. Per questa funzione è ne­ces­sa­rio uti­liz­za­re jQuery.re­mo­ve­Class(). Dopo l’aggiunta, le regole di stile CSS previste per la classe in questione vengono applicate agli elementi se­le­zio­na­ti per ottenere il com­por­ta­men­to visivo de­si­de­ra­to. Inoltre, puoi lavorare con jQuery in WordPress e creare quindi layout ed effetti definiti dall’utente nel tuo CMS.

Consiglio

Noleggia il tuo spazio web personale con IONOS con piani van­tag­gio­si a partire da 50 GB per il tuo progetto web. In aggiunta, il servizio comprende un cer­ti­fi­ca­to SSL Wildcard e un dominio gratuiti. Cerca il piano adatto alle tue esigenze con funzioni su misura.

Quali sono la sintassi e i parametri del metodo jQuery.addClass()?

La funzione jQuery.addClass() accetta due parametri. La sintassi generale è la seguente:

$(selector).addClass(classname,function(index,currentclass))
jQuery
  • classname: nome della classe o delle classi da ag­giun­ge­re, separate da una virgola
  • function(index,cur­rent­class): una funzione callback opzionale ri­chia­ma­ta per ogni elemento se­le­zio­na­to
  • index: l’indice dell’elemento corrente nell’elenco di elementi se­le­zio­na­to
  • cur­rent­class: la classe corrente dell’elemento

La funzione callback ti permette di apportare ulteriori modifiche o ag­giun­ge­re contenuti logici a livello di ogni elemento quando aggiungi delle classi. Ad esempio, puoi ve­ri­fi­ca­re il valore corrente della classe e integrare ulteriori classi basandoti su di esso.

Se hai appena iniziato a in­te­res­sar­ti a jQuery, ti con­si­glia­mo di seguire il tutorial su jQuery nella nostra guida, dove potrai ap­pren­de­re tutti le nozioni di base della libreria jQuery.

Consiglio

Con l’API di IONOS puoi con­fi­gu­ra­re i tuoi prodotti Hosting di IONOS in modo facile e veloce. Grazie ai dati di accesso per le API di IONOS puoi gestire i tuoi domini, le im­po­sta­zio­ni DNS e i cer­ti­fi­ca­ti SSL. Per ulteriori dettagli consulta la do­cu­men­ta­zio­ne per l’API per svi­lup­pa­to­ri di IONOS.

Esempio di ap­pli­ca­zio­ne del metodo jQuery.addClass()

Per mostrarti come funziona il metodo .addClass(), l’esempio seguente aggiunge la classe “.green” all’elemento p cambiando quindi sia il colore che le di­men­sio­ni del carattere del paragrafo. Il cam­bia­men­to avviene premendo il pulsante dell’evento clic. Con .addClass() è possibile uti­liz­za­re co­mo­da­men­te anche altri metodi, come jQuery.find() o jQuery.ajax().

<!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

Nella finestra del browser notiamo che il colore e le di­men­sio­ni dell’elemento p sono cambiate dopo aver fatto clic sul pulsante.

Prima:

Immagine: Aspetto prima di richiamare .addClass()
Si­tua­zio­ne prima di ag­giun­ge­re la classe

Dopo aver fatto clic sul pulsante:

Immagine: Aspetto dopo aver richiamato .addClass()
Effetto di .addclass nel browser
Consiglio

Metti online il tuo progetto con Deploy Now di IONOS. Crea il tuo sito internet in pochi semplici passaggi grazie alle fun­zio­na­li­tà di im­po­sta­zio­ne rapida e di ri­le­va­men­to au­to­ma­ti­co dei framework. Oltre all’iscri­zio­ne a Deploy Now puoi anche ag­giun­ge­re ulteriori risorse, re­vo­ca­bi­li men­sil­men­te. Con Deploy Now, IONOS è attento alle tue esigenze e a quelle degli altri clienti.

Vai al menu prin­ci­pa­le