CONTATTACI

Guide per aspiranti programmatori

Sviluppatore dall'aria dubbiosa che si interroga su che cos'è jquery
Lezione 13 / 36

Gestire le classi CSS con jQuery

La gestione delle classi CSS è un aspetto fondamentale dello sviluppo front end. jQuery, con i suoi metodi intuitivi, rende questa attività semplice ed efficace. In questa sezione vedremo propprio come jQuery può essere utilizzato per aggiungere, rimuovere, e verificare la presenza di classi CSS sugli elementi del DOM, offrendo una maggiore flessibilità nella manipolazione dell’aspetto e del comportamento degli elementi di una pagina web.

 

Introduzione alle classi CSS

Le classi CSS sono utilizzate per definire stili per elementi HTML. La capacità di modificare dinamicamente queste classi tramite linguaggio JavaScript permette di alterare l’aspetto e il layout della pagina in risposta a interazioni dell’utente o altri eventi.

 

Metodi jQuery per la gestione delle classi CSS

 

1. Aggiungere classi: jQuery `.addClass()`

Il metodo .addClass in jQuery aggiunge una o più classi a un elemento selezionato.

$("#myElement").addClass("new-class"); // Aggiunge "new-class" all'elemento

Puoi anche aggiungere più classi contemporaneamente:

$("#myElement").addClass("class1 class2");

2. Rimuovere classi: jQuery `.removeClass()`

Il metodo .removeClass in jQuery  rimuove una o più classi dall’elemento selezionato.

$("#myElement").removeClass("existing-class"); // Rimuove "existing-class"

Anche qui, è possibile rimuovere più classi contemporaneamente:

$("#myElement").removeClass("class1 class2");

3. Alternare classi: jQuery `.toggleClass()`

Il metodo .toggleClass in jQuery alterna la presenza di una o più classi su un elemento. Se la classe è presente, la rimuove; se non è presente, la aggiunge.

$("#myElement").toggleClass("toggle-class"); // Alterna "toggle-class"

Puoi anche gestire più classi:

$("#myElement").toggleClass("class1 class2");

4. Verificare la presenza di una classe: jQuery `.hasClass()`

Il metodo .hasClass in jQuery verifica se un elemento possiede una specifica classe, restituendo `true` o `false`.

if ($("#myElement").hasClass("some-class")) {
    console.log("L'elemento ha la classe 'some-class'");
}

Come manipolare le classi css con jQuery: esempi pratici

Supponiamo di avere un documento HTML con un elemento `<div>` e un pulsante:

<div id="myDiv" class="box"></div>
<button id="myButton">Toggle Class</button>

Ecco come possiamo usare jQuery per manipolare le classi di `#myDiv`:

$(document).ready(function() {
    // Aggiungere una classe al div
    $("#myDiv").addClass("new-class");

    // Rimuovere la classe 'box'
    $("#myDiv").removeClass("box");

    // Alternare una classe al clic del pulsante
    $("#myButton").click(function() {
        $("#myDiv").toggleClass("active");
    });
});

Nei capitoli a seguire approfondiremo la modifica del CSS con jQuery presentando esempi più avanzati.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.