
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Utilizzare il metodo removeClass di jQuery (e tutti i suoi “simili”) per gestire l’assegnazione e rimozione delle classi agli elementi di una pagina HTML.
Nonostante le ultime specifiche JavaScript abbiano notevolmente migliorato le performance di questo linguaggio di programmazione, tanto da spingere molti sviluppatori a ridurre la dipendenza da framework in favore di codice puramente nativo, molte delle funzionalità di jQuery rimangono tuttora molto utilizzate.
jQuery è il framework JavaScript di prima generazione più utilizzato al mondo, grazie alla sua semplicità e completezza. Scrivere codice usando jQuery permette di utilizzare controlli di alto livello in modo performante.
In questo approfondimento vedremo come manipolare le classi CSS applicate agli elementi, e come utilizzare il metodo removeClass
per rimuovere tutte le classi, una lista di classi o una particolare classe agli elementi HTML delle nostre pagine.
Le classi sono uno strumento incredibilmente utile nel panorama HTML/CSS, perché permettono di stilizzare e manipolare un insieme di elementi, rendendo il codice molto più modulare.
Una classe si imposta attaverso l’attributo HTML class
applicato all’elemento HTML:
<div class="miaclasse">Contenuto dell'elemento</div>
Il valore dell’attributo class
lo scegliamo noi: la potenza delle classi risiede proprio nel potere selezionare molti elementi HTML tramite nomi auto-descrittivi:
<div class="bgRed">Contenuto dell'elemento</div>
Non siamo limitati ad utilizzare una sola classe per elemento, come nel caso dell’attributo HTML id
. Se quest’ultimo, infatti, identifica univocamente un elemento HTML all’interno della sua struttura di appartenenza, le classi identificano N elementi, quindi possiamo applicare N classi ad un numero variabile di elementi:
<div class="bgRed fgBlue border1">Contenuto dell'elemento</div>
<div class="bgRed fgGreen border10">Contenuto dell'elemento</div>
<div class="bgRed fgPink border0">Contenuto dell'elemento</div>
In questo caso, il primo div
prenderà gli stili impostati dalla classe bgRed
, dalla classe fgBlue
e dalla classe border1
, mentre gli altri due div
prenderanno gli stili impostati da altre classi oltre alla classe bgRed
. Si noti che abbiamo piena libertà di scelta nei nomi delle classi, ma è importante fornire alle classi nomi auto-descrittivi per produrre codice leggibile e di qualità.
All’interno del codice CSS, potremo impostare gli stili delle classi utilizzando il selettore di classe .
:
.bgRed {
background-color: #ff0000;
}
.bgBlue {
background-color: #00ff00;
}
// codice delle altre classi CSS
In questo modo, tutti gli elementi aventi classe bgRed
avranno un colore di sfondo rosso, e tutti gli elementi aventi classe bgBlue
avranno un colore di sfondo blu. Non ci sono limiti alle regole CSS che possiamo impostare in una classe.
Ora che abbiamo una panoramica su come impostare ed utilizzare le classi, possiamo passare ad analizzare come queste possono essere manipolate attraverso il framework jQuery. In jQuery abbiamo fondamentalmente 4 metodi che ci permettono di lavorare con le classi:
addClass
: ci permette di aggiungere una classe o una collezione di classi ad un elemento o ad una collezione di elementi HTMLremoveClass
: ci permette di rimuovere una classe o una collezione di classi ad un elemento o ad una collezione di elementi HTMLhasClass
: ci permette di controllare se una o più classi sono impostate ad un elemento o ad una collezione di elementi HTMLtoggleClass
: ci permette di aggiungere una classe o una collezione di classi ad un elemento o ad una collezione di elementi HTML se queste non sono impostate al momento della chiamata del metodo, oppure di rimuovere una classe o una collezione di classi ad un elemento o ad una collezione di elementi HTML se queste sono impostate al momento della chiamata del metodoGrazie alla funzione dollaro, possiamo selezionare una moltitudine di elementi passando una stringa che funge da selettore CSS. Ad esempio, per impostare le classi bgRed
e fgGreen
a tutti gli elementi p
(paragrafi) che sono discendenti degli elementi div
, scriveremo:
$( "div p" ).addClass( "bgRed fgGreen" );
Se la procedura di aggiunta di una o più classi CSS tramite Javascript permette fondamentalmente di impostare dinamicamente una moltitudine di stili in un colpo solo, la procedura di rimozione delle classi consente l’operazione opposta.
Possiamo ad esempio utilizzare l’aggiunta e la rimozione di una classe nel caso in cui l’utente clicchi sopra un elemento, per "attivare" e "disattivare" un controllo ad intermittenza
Vediamo la API del metodo removeClass
offerta da jQuery. Al metodo in questione possiamo passare:
Vediamo subito come utilizzare il metodo removeClass
:
$( "div p" ).removeClass( "bgRed fgGreen" );
Questa chiamata rimuove le sole classi bgRed
e fgGreen
da tutti gli elementi p
che sono discendenti degli elementi div
all’interno della pagina.
$( "div p" ).removeClass( "bgRed" );
Questa chiamata rimuove solamente la classe bgRed
da tutti gli elementi p
che sono discendenti degli elementi div
all’interno della pagina.
$( "div p" ).removeClass( );
Questa chiamata rimuove tutte le classi da tutti gli elementi p
che sono discendenti degli elementi div
all’interno della pagina.
Come abbiamo visto, è anche possibile produrre dinamicamente i nomi delle classi da rimuovere se al posto di utilizzare direttamente delle stringhe passiamo al metodo removeClass
una funzione.
Questa funzione accetta come parametri opzionali l’indice dell’elemento attuale e il vecchio valore della sua classe, e deve restituire una stringa indicante il nome della classe o i nomi delle classi (separati da uno spazio) da rimuovere. Nel suo utilizzo più semplice, possiamo semplicemente restituire una stringa statica:
$(".box").removeClass(function() {
return "classA";
});
In questo caso a tutti gli elementi HTML aventi classe box
verrà rimossa la classe classA
.
Vediamo una demo in azione:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function() {
$("#box").click(function() {
$(this).removeClass(function() {
return "classA";
});
});
});
</script>
<style>
#box {width: 100px; height: 100px; background: lightgrey;}
.classA {background: red !important; border: 5px solid blue; color: white;}
</style>
</head>
<body>
<div id="box" class="classA"></div>
</body>
</html>
Il div
avente ID box
ha la classe classA
impostata. Grazie a jQuery, possiamo rimuovere dinamicamente questa classe quando l’utente clicca sul suddetto elemento, quindi gli stili verranno modificati in un colpo solo. In questo esempio abbiamo utilizzato la funzione come parametro di removeClass
, che si limita a restituire la classe classA
. Si noti che il valore della proprietà CSS background
è segnato come !important
perché altrimenti la sua modifica non sarebbe efficace, dato che il selettore di ID è più specifico del selettore di classe e "vince" su quest’ultimo nella cascata.
A questo punto possiamo produrre un esempio più complesso, per generare dinamicamente la stringa di classi da rimuovere al nostro elemento:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function() {
var i = 0;
$("#box").click(function() {
$(this).removeClass(function() {
switch(i) {
case 0:
return "classC";
case 1:
return "classB";
case 2:
return "classA bgBlue";
}
});
i++;
});
});
</script>
<style>
#box {width: 100px; height: 100px; background: lightgrey; font-size: 20px; text-align: center; cursor: pointer;}
.classA {background: red !important; border: 5px solid blue; color: white;}
.bgBlue {background: blue !important;}
.classB {background: orange !important; border: 15px solid red; color: white;}
.classC {background: green !important; border: 25px solid red; color: white;}
</style>
</head>
<body>
<div id="box" class="classA classB classC bgBlue">Box</div>
</body>
</html>
In questa demo abbiamo un div
con ID box
che possiede al caricamento della pagina 4 classi differenti: classA
, classB
, classC
e bgBlue
.
Per dimostrare il potere della funzione passata a removeClass
, vogliamo fare in modo che ogni volta che l’utente clicca sul div
una determinata sequenza di classi viene rimossa, per fare in modo che l’elemento in questione diventi sempre più spoglio, fino a non avere alcuna classe impostata.
Abbiamo cosi creato la variabile i
, che è un contatore che è inizialmente settato al valore 0 e che andiamo ad incrementare ad ogni click da parte dell’utente sul div#box
. La prima volta (al primo click) verrà rimossa la classe classC
, la seconda la classe classB
e la terza volta verranno infine rimosse in un colpo solo le classi classA
e bgBlue
. Abbiamo ovviamente agito in ordine inverso rispetto a quello di assegnamento delle classi iniziale.
All’interno della funzione utilizzata nel metodo removeClass
non siamo limitati alla sola restituzione di valori statici. Possiamo calcolare questi valori tramite svariate operazioni, e possiamo inoltre svolgere altre operazioni che sono slegate dalla rimozione delle classi.
Vediamo un’altra demo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function() {
var i = 0;
$("#box").click(function() {
$(this).removeClass(function() {
let classes = "";
switch(i) {
case 0:
classes = "classC";
break;
case 1:
classes = "classB";
break;
case 2:
classes = "classA bgBlue";
break;
}
if(i < 3) $(this).html("Sono state rimosse le classi: " + classes);
return classes;
});
i++;
});
});
</script>
<style>
#box {width: 100px; height: 100px; background: lightgrey; font-size: 20px; text-align: center; cursor: pointer;}
.classA {background: red !important; border: 5px solid blue; color: white;}
.bgBlue {background: blue !important;}
.classB {background: orange !important; border: 15px solid red; color: white;}
.classC {background: green !important; border: 25px solid red; color: white;}
</style>
</head>
<body>
<div id="box" class="classA classB classC bgBlue">Box</div>
</body>
</html>
La struttura HTML e CSS è identica all’esempio precedente, ma in questo caso abbiamo voluto modificare il contenuto dell’elemento in base alle classi rimosse, con degli appositi messaggi. Andiamo quindi a salvare la stringa di classi all’interno di una variabile locale, che viene impostata a seconda del valore del contatore "i", e prima di restituire questa variabile, andiamo a utilizzarla come parametro per il metodo "html" che va ad impostare il contenuto "innerHTML" di un elemento.
Se l’utente clicca più di 3 volte, la nostra funzione non modifica ulteriormente il messaggio.
Infine, un utilizzo molto comune del metodo removeClass
lo troviamo, come abbiamo detto, in combinazione con il metodo addClass
per aggiungere/rimuovere classi in base a una condizione
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
table {border-collapse: collapse; }
table tr {border: 1px solid black; cursor:pointer; } table td {padding:10px;}
table tr:nth-child(even) {background: lightgrey;}
table tr.selected {background:yellow; font-weight: bold;}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function() {
$("table tr").click(function() {
$("table tr").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<table>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
<tr>
<td>testo cella</td><td>testo cella</td><td>testo cella</td><td>testo cella</td>
</tr>
</table>
</body>
</html>
In questa demo abbiamo una tabella, le cui righe sono stilizzate a sfondi alterni. Grazie a jQuery, ogniqualvolta l’utente clicca su una riga della tabella, questa ottiene la classe selected
, mentre a tutte le righe viene rimossa la suddetta classe. Ne consegue che in questo specifico esempio possiamo selezionare solo una riga per volta. Modificando il motore interno allo script sarà possibile anche produrre varianti interessanti, come la multi-selezione, o il click multiplo.
Se vuoi aggiornamenti su JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Al .NET Campus abbiamo incontrato Francesca Carusone, una studentessa che oltre all’opportunità formativa offerta della manifestazione, approfitta dell’evento anche per […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Alcuni esempi pratici e di facile apprendimento per imparare ad utilizzare la funzionalità di autocompletamento supportata da jQuery UI.
Un framework imbattibile per ottimizzare spazio e performance di esecuzione del codice, che batte tutti, anche jQuery
Comandi come jQuery.grep, map o proxy, restano a volte dimenticati, anche quando ci aiuterebbero a risolvere alcuni problemi tra i più comuni. Una volta riscoperti questi metodi, non ne potrete fare più a meno.
jQuery Mobile è la versione ottimizzata per i dispositivi mobili della celebre libreria JavaScript. In questa guida pratica e completa impareremo ad usare tale framework per creare app moderne ed accattivanti per Android e iOS, basate su HTML5 e JavaScript. Per farlo, sfrutteremo una serie di esempi di codice, scaricabili gratuitamente.