Manipolazione CSS con jQuery

Insieme a jQuery Possiamo ottenere molte cose a livello di interazione con l'utente, inclusa la manipolazione del albero DOMTuttavia, una delle cose che potrebbe non venire in mente è il Manipolazione CSS.
Manipolando il CSS possiamo ottenere cambiamenti negli elementi che vediamo sullo schermo in modo molto naturale e fluido senza ricorrere a funzioni complesse in Javascript puro come dovevamo fare qualche anno fa.
Il SOLE è il modo in cui è organizzato il nostro documento HTML, ci permette di dare una struttura prevedibile e gerarchica a ciò che vogliamo mostrare sullo schermo. Questo è molto importante poiché è il modo in cui il browser interpreta i documenti, tuttavia c'è un altro aspetto che possiamo sfruttare a nostro vantaggio; questo per poter individuare gli elementi per agire su di essi.
Quindi quando dobbiamo apportare una modifica su un particolare elemento, grazie al SOLE Possiamo utilizzare diversi modi per individuarlo e quindi manipolarne il contenuto, lo stile o persino rimuoverlo dal documento in tempo reale.
Questo è molto pratico nei momenti in cui è necessario evidenziare un elemento quando si esegue un'azione nel documento o quando si riceve una risposta e quindi non è necessario modificare la pagina o eseguirne un aggiornamento completo.
Una delle migliori pratiche durante la creazione di stili CSS è usare le classi, con questo possiamo creare aspetti che possiamo poi applicare indipendentemente a diversi elementi senza dover ricorrere alla riscrittura del codice più e più volte.
Attributo di classeAffinché un elemento assuma questi stili dobbiamo semplicemente inserire nel suo attributo classe = "" il nome della classe corrispondente e se lo stile in cui scriviamo è adatto all'elemento, lo rifletterà.
LimitazioneTutto suona alla grande ma c'è una limitazione, lo stile viene caricato quando si solleva la pagina e se abbiamo bisogno di includere un nuovo stile, normalmente la pagina dovrebbe essere ricaricata, causando così un'interruzione della navigazione per l'utente.
jQuery ci permette di aggirare questi limiti dandoci la possibilità di incorporare dette classi in tempo reale nel documento senza dover ricaricare l'intera pagina, per questo dobbiamo semplicemente usare il metodo addClass () e passagli il nome della classe CSS che vogliamo aggiungere al momento.
Vediamo passo passo un piccolo esempio pratico e poi vedremo il codice completo di quanto descritto:
1- Per prima cosa creiamo il nostro file chiamato add-classes.html e includeremo la biblioteca di jQuery, per motivi pratici effettuiamo la chiamata diretta dal CDN adeguata, ciò richiede una connessione a Internet, tuttavia possiamo salvare il file e servirlo localmente.
2- Poi creeremo le nostre classi CSSPer poter vedere meglio il cambiamento, abbiamo creato due classi, ognuna cambia il colore dello sfondo dell'elemento a cui è applicata, e ogni classe avrà un colore diverso.
3- Nel corpo del nostro documento ne creiamo due e ad ognuno assegniamo un ID con il quale possiamo identificarlo all'interno del SOLE facilmente con i selettori jQuery.
4- Quindi creiamo un elemento a cui nell'evento al clic gli diciamo di chiamare una funzione Javascript.
5- Finalmente costruiamo la nostra funzione Javascript, questo chiamerà semplicemente ogni elemento tramite il suo selettore e con il metodo addClass () Aggiungerà una classe di quelle che abbiamo creato inizialmente, quando lo faremo vedremo immediatamente il cambiamento.
Poiché abbiamo descritto cosa dovremmo fare, vedremo il codice così com'è:

 Aggiungi classiIl nostro primo blocco CSS jQuery
Il nostro secondo blocco CSS jQuery
Clicca per cambiare classe

Come vediamo è abbastanza semplice e quando lo eseguiremo nel nostro browser vedremo come prima di fare clic sul pulsante gli elementi sono normali e dopo aver fatto clic cambiano colore e vengono aggiunte le classi corrispondenti. Vediamo nell'immagine seguente a cosa ci riferiamo:

INGRANDIRE

Dopo aver cliccato sul pulsante possiamo visualizzare la transizione sulla nostra pagina:

Se possiamo aggiungere una classe, dobbiamo anche essere in grado di fare il contrario, ovvero rimuoverla, per questo jQuery ci fornisce il metodo removeClass (), e questo funziona con un principio molto simile all'esempio precedente, semplicemente posizioniamo un elemento e gli diciamo tramite il metodo che deve rimuovere la classe indicata, se ce l'ha, verrà rimossa, altrimenti non succede nulla.
Per rendere le cose un po' più interessanti aggiungeremo l'uso di un altro metodo ed è il metodo di controllo della classe, questo è il hasClass () che ci permette di verificare se un elemento ha una classe particolare, con questo possiamo usare i condizionali e fare diversi esperimenti che la nostra logica detta.
Per questo creeremo una piccola pagina in cui avremo diverse funzioni, una funzione verificherà se l'elemento ha una classe particolare, in tal caso verrà rimosso, ma se la risposta è negativa, lo aggiungeremo .
Questo ci dà la possibilità di giocare un po' con gli stili in modo dinamico, poiché possiamo vedere in tempo reale se aggiungiamo o togliamo determinati valori.
1- Sulla base dell'esempio precedente ci concentreremo solo sulla parte in cui abbiamo scritto la funzione Javascript.
2- All'interno della funzione creeremo due condizionali, nel primo lavoreremo con il primo elemento, prima chiederemo con un blocco condizionale Se () se hai chiamato la classe prima classeSe la risposta è positiva applicheremo il metodo remove class, se invece non abbiamo la classe la aggiungeremo, questo ci darà un effetto di interruttore.
3- Ripetiamo il passaggio precedente per il secondo elemento e così otteniamo che si comporti allo stesso modo.
Vediamo il nuovo codice che abbiamo creato di seguito:

 Aggiungi classiIl nostro primo blocco CSS jQuery
Il nostro secondo blocco CSS jQuery
Clicca per cambiare classe

Ora vediamo come è l'esecuzione del nostro programma, in questa prima immagine vedremo come si presenta il nostro documento HTML Nel suo stato iniziale, abbiamo incluso la console Cromo in modo da notare come cambiano gli elementi:

INGRANDIRE

Ora vediamo cosa succede quando clicchiamo sul pulsante e la transizione è effettuata:

INGRANDIRE

A prima vista potrebbe sembrare che questo documento funzioni esattamente come il primo che abbiamo realizzato in questo tutorial, tuttavia se clicchiamo nuovamente vedremo come funzionerà il metodo. rimuoviClasse ().
Abbiamo anche verificato come il metodo hasClass () ha funzionato, forse non fa nulla che l'utente vede, ma ci dà la possibilità di eseguire condizionali sul nostro HTML.
C'è qualcosa che ci permette jQuery e questo è per passare da una classe all'altra, per questo usiamo il metodo toggleClass (), con esso possiamo specificare al nostro elemento che quando attiviamo un evento prenderà una classe se ha già applicato l'altro nell'elenco.
UtilitàQuesto è davvero utile quando vogliamo lavorare sui cambi di stato, è una sorta di scorciatoia per evitare di dover scrivere una struttura condizionale con il metodo hasClass (). La sua applicazione è molto simile ai metodi che abbiamo visto finora, l'unica differenza è che invece di una classe ne passeremo due separate da uno spazio.
Vediamo come cambieremo solo la funzione Javascript del nostro documento di prova per incorporare questo nuovo metodo:
1- Aggiungeremo una classe iniziale ai nostri elementi, in questo modo avremo un punto di partenza per le modifiche.
2- Allora all'interno della nostra funzione Javascript applicheremo semplicemente il metodo toggleClass () a ciascuno degli elementi tramite il relativo selettore.
Vediamo come appare il nostro codice con le modifiche applicate:

 Aggiungi classiIl nostro primo blocco CSS jQuery
Il nostro secondo blocco CSS jQuery
Clicca per cambiare classe

Ora vediamo cosa succede quando carichiamo il documento per la prima volta:

Ora vediamo cosa succede quando clicchiamo nuovamente sul pulsante:

INGRANDIRE

Se continuiamo a cliccare sul pulsante, le classi continueranno ad alternarsi senza limiti.
Con questo finiamo questo tutorial, abbiamo imparato come possiamo manipolare il CSS direttamente con jQueryCon questo, possiamo iniziare ad avere idee migliori per rendere le nostre interfacce utente più ricche di funzionalità.