jQuery addClass()

jQuery addClass() method – Questo metodo aggiunge una classe (add class), o anche più di una, ad uno o più elementi di una pagina web.

Quindi, ad esempio, se ho un paragrafo e voglio aggiungere una formattazione diversa, dopo un determinato evento, lo posso fare utilizzando il metodo addClass().

La sintassi è dunque questa: addClass(nome_classe, funzione (index, classe_corrente) ).

Dove il nome_classe specifica una o più classi da attribuire ad un elemento, mentre la funzione riceve quindi, come argomenti, la posizione dell’indice e il nome della classe corrente (ovvero quella esistente) che può essere opzionale.

Ma facciamo subito degli esempi per capire il funzionamento del metodo addClass().

Esempio 1 di utilizzo di jQuery addClass() method

Modifichiamo del testo al click del pulsante, aggiungendo una classe ad un elemento.

Cliccate quindi sul pulsante sotto. Noterete che solo il testo del primo paragrafo si modificherà.

Clicca sul pulsante

Procedimento esempio con il metodo addClass()

Sviluppiamo adesso il codice necessario per realizzare questo esempio.

Innanzitutto inseriamo due livelli con il tag div che contengono del testo a piacere e sotto aggiungiamo un pulsante. Al livello (div) a cui vogliamo dare una formattazione diversa diamo poi un id, ad esempio io ho impostato id=”formattazione”.

<div id="formattazione">
   Coding Creativo. Questo paragrafo cambierà.
</div>
<div>
   Blog dove trovare articoli sulla programmazione. Questo   paragrafo non cambierà.
</div>
<button id="pulsante">Clicca sul pulsante</button>

Inseriamo, in un foglio di stile esterno alla pagina web, le regole per la formattazione del testo, in cui specifichiamo la dimensione del testo, il colore e anche il padding.

.formatta {
  font-size: 22px;
  color: #cccccc;
  padding: 10px;
}

Dopo inseriamo il collegamento al foglio di stile appena creato e alla libreria jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Infine creiamo in un file a parte con estensione .js una semplicissima funzione che attiva il cambio del testo al clic del pulsante. Basterà aggiungere al livello con id=”formattazione” la classe formatta, che ho creato prima nel foglio di stile, (potevo scegliere qualsiasi altro nome) utilizzando il metodo addClass().

$(document).ready(function(){
  $("button").click(function(){
    $("#formattazione").addClass("formatta");
  });
});

Quindi colleghiamo questo file alla pagina html, prima della chiusura del tag body.

Esempio 2

In questo secondo esempio utilizzeremo il metodo addClass() con una funzione.

Aggiungi uno stile ad uno o più paragrafi.

Inizialmente inseriamo i due paragrafi ed il pulsante su cui attivare l’evento.

<p>Coding Creativo. Primo paragrafo</p>
<p>Coding Creativo. Secondo paragrafo</p>
<button>Aggiungi uno stile ad uno o più paragrafi.</button>

Dopo inseriamo la formattazione che vogliamo generare utilizzando un foglio di stile esterno che poi collegheremo alla pagina.

.paragrafo_0 {
  color: #cccccc;
  padding:20px;
}
.paragrafo_1 {
  color: #ff0000;
  font-size: 20px;
}

Poi creiamo il nostro semplicissimo script, utilizzando la funzione.

$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass(function(n){
      return "paragrafo_" + n;
    });
  });
});

Chiaramente questi sono solo dei semplicissimi esempi realizzati con il jQuery addClass() method, più avanti vedremo altri esempi d’uso.

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript