Il metodo addClass() in JQuery
JQuery mi permette di associare una classe a un elemento html durante l'esecuzione dello script tramite il metodo addClass().
$(elemento).addClass(classe)
Ad esempio, posso associare o meno una classe css a un elemento <div> a seconda che si presenti un evento.
Un esempio pratico
Creo due semplici classi css nella <head> di un documento html.
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
La classe selected colora il testo di rosso.
La classe highlight colora lo sfondo del testo in giallo.
Nella sezione <head> aggiungo anche il richiamo alla libreria jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
A questo punto aggiungo nel corpo <body> del documento html due paragrafi chiamandoli #par1 e #par2
<p id="par1">Il primo paragrafo</p>
<p id="par2">Il secondo paragrafo</p>
Infine, uso uno script jQuery per assegnare le classi agli elementi.
<script>
$(document).ready(function() {
$("#par1").addClass("highlight");
$("#par2").addClass("selected");
});</script>
Al paragrafo #par1 assegno la classe highlight, mentre al paragrafo #par2 la classe selected.
Il risultato finale è il seguente:
Il primo paragrafo
Il secondo paragrafo
Grazie a questa tecnica posso aggiungere una classe agli elementi.
Nota. Se al posto degli id dei paragrafi #par1 e #par2 avessi messo un elemento html, ad esempio gli elementi ul tramite $("ul").addClass("highlight"), lo script avrebbe aggiunto la classe a tutti gli elementi <ul> del documento html.
E così via.
