Manipularea CSS cu jQuery

Cu jQuery Putem realiza o mulțime de lucruri la nivel de interacțiune cu utilizatorul, inclusiv manipularea fișierului Copac DOMCu toate acestea, unul dintre lucrurile care nu îți vin în minte este Manipularea CSS.
Prin manipularea CSS putem realiza modificări ale elementelor pe care le vedem pe ecran într-un mod foarte natural și fluid, fără a recurge la funcții complexe din Javascript pur cum a trebuit să facem acum câțiva ani.
SOARE este modul în care este organizat documentul nostru HTML, ne permite să oferim o structură previzibilă și ierarhică a ceea ce vrem să arătăm pe ecran. Acest lucru este foarte important, deoarece este modul în care browserul interpretează documentele, totuși există un alt aspect pe care îl putem folosi în avantajul nostru; aceasta este pentru a putea localiza elementele pentru a lua măsuri asupra lor.
Deci, atunci când trebuie să modificăm un anumit element, datorită SOARE Putem folosi diferite moduri de localizare și astfel putem manipula conținutul, stilul sau chiar să îl eliminăm din document în timp real.
Acest lucru este foarte practic în momentele în care trebuie să evidențiem un element atunci când facem o acțiune în document sau când primim un răspuns și, prin urmare, nu trebuie să schimbăm pagina sau să o actualizăm complet.
Una dintre cele mai bune practici la crearea stilurilor CSS este de a utiliza clase, cu aceasta putem crea aspecte pe care le putem aplica apoi independent diferitelor elemente fără a fi nevoie să recurgem la rescrierea codului de mai multe ori.
Atribut de clasăPentru ca un element să ia aceste stiluri, trebuie pur și simplu să le plasăm în atributul său class = "" numele clasei corespunzătoare și dacă stilul pe care îl scriem în el este potrivit pentru element, acesta îl va reflecta.
PrescripţieTotul sună grozav, dar există o limitare, stilul este încărcat la ridicarea paginii și dacă trebuie să includem un stil nou, în mod normal, pagina ar trebui să fie reîncărcată, provocând astfel o întrerupere a navigării utilizatorului.
jQuery ne permite să depășim aceste limite oferindu-ne posibilitatea de a încorpora respectivele clase în timp real în document fără a fi nevoie să reîncărcăm întreaga pagină, pentru aceasta trebuie pur și simplu să folosim metoda addClass () și dă-i numele clasei CSS pe care vrem să o adăugăm momentului.
Să vedem un mic exemplu practic pas cu pas și apoi vom vedea codul complet al celor descrise:
1- Mai întâi creăm fișierul nostru numit add-classes.html și vom include biblioteca din jQuery, în scopuri practice, facem apel direct de la CDN adecvat, acest lucru necesită conexiune la internet, cu toate acestea putem salva fișierul și îl putem distribui local.
2- Atunci vom crea clasele noastre CSSPentru a putea vedea schimbarea într-un mod mai bun, am creat două clase, fiecare schimbă culoarea fundalului elementului la care este aplicată și fiecare clasă va avea o culoare diferită.
3- În corpul documentului nostru creăm două și fiecăruia îi atribuim un ID cu care îi putem identifica în cadrul SOARE ușor cu selectoarele jQuery.
4- Apoi creăm un element căruia i se întâmplă onclick îi spunem să apeleze o funcție Javascript.
5- În cele din urmă ne construim funcția Javascript, aceasta va apela pur și simplu fiecare element prin selectorul său și cu metoda addClass () Va adăuga o clasă a celor pe care le-am creat inițial, când vom face acest lucru, vom vedea imediat schimbarea.
Deoarece am descris ce ar trebui să facem, vom vedea codul așa cum a fost:

 Adăugați cursuriPrimul nostru bloc jQuery CSS
Al doilea bloc jQuery CSS
Faceți clic pentru a schimba clasele

După cum vedem, este destul de simplu și atunci când executăm acest lucru în browserul nostru vom vedea cum înainte de a face clic pe buton elementele sunt normale și după ce fac clic pe acestea își schimbă culoarea și se adaugă clasele corespunzătoare. Să vedem în următoarea imagine la ce ne referim:

MARI

După ce facem clic pe buton, putem vizualiza tranziția pe pagina noastră:

Dacă putem adăuga o clasă, trebuie să fim capabili să facem opusul, adică să o eliminăm, pentru aceasta jQuery ne oferă metoda removeClass (), și acest lucru funcționează cu un principiu foarte similar cu exemplul anterior, pur și simplu plasăm un element și îi spunem prin metoda că trebuie să elimine clasa indicată, dacă o are, va fi eliminată, altfel nu se întâmplă nimic.
Pentru a face lucrurile puțin mai interesante, vom adăuga utilizarea unei alte metode și este metoda de verificare a clasei, aceasta este hasClass () care ne permite să verificăm dacă un element are o anumită clasă, cu aceasta putem folosi condiționali și să facem diferite experimente pe care le dictează logica noastră.
Pentru aceasta vom face o mică pagină în care vom avea mai multe funcții, o funcție va verifica dacă elementul are o anumită clasă, dacă da, va fi eliminat, dar dacă răspunsul este negativ, îl vom adăuga .
Acest lucru ne oferă posibilitatea de a juca puțin cu stilurile dinamic, deoarece putem vedea în timp real dacă adăugăm sau eliminăm anumite valori.
1- Pe baza exemplului anterior ne vom concentra doar pe partea în care am scris funcția Javascript.
2- În interiorul funcției vom crea două condiționale, în primul vom lucra cu primul element, mai întâi vom întreba cu un bloc condițional dacă () dacă ai clasa numită clasa întâiDacă răspunsul este pozitiv, vom aplica metoda de eliminare a clasei, cu toate acestea, dacă nu avem clasa, o vom adăuga, acest lucru ne va da un efect de intrerupator.
3- Repetăm ​​pasul anterior pentru al doilea element și astfel realizăm că acesta se comportă în același mod.
Să vedem noul cod pe care l-am creat mai jos:

 Adăugați cursuriPrimul nostru bloc jQuery CSS
Al doilea bloc jQuery CSS
Faceți clic pentru a schimba clasele

Acum să vedem cum este execuția programului nostru, în această primă imagine vom vedea cum arată documentul nostru HTML În starea sa inițială, am inclus consola Crom astfel încât să observăm cum se schimbă elementele:

MARI

Acum să vedem ce se întâmplă când facem clic pe buton și se face tranziția:

MARI

La prima vedere ar putea părea că acest document funcționează exact la fel ca primul pe care l-am făcut în acest tutorial, totuși, dacă facem clic din nou, vom vedea cum va funcționa metoda. removeClass ().
De asemenea, am verificat modul în care metoda hasClass () a funcționat, poate că nu face nimic pe care utilizatorul îl vede, dar ne oferă posibilitatea de a rula condiționate pe HTML.
Există ceva care ne permite jQuery și aceasta este pentru a comuta între clase, pentru aceasta folosim metoda toggleClass (), cu el, putem specifica elementului nostru că, atunci când declanșăm un eveniment, va lua o clasă dacă îl are pe celălalt din listă deja aplicat.
UtilitateAcest lucru este foarte util atunci când vrem să lucrăm la modificări de stare, este un fel de scurtătură pentru a evita să scriem o structură condițională cu metoda hasClass (). Aplicarea sa este foarte asemănătoare cu metodele pe care le-am văzut până acum, singura diferență este că în loc de o clasă vom trece două separate printr-un spațiu.
Să vedem cum vom schimba doar funcția Javascript din documentul nostru de testare pentru a încorpora această nouă metodă:
1- Vom adăuga o clasă inițială elementelor noastre, astfel vom avea un punct de plecare pentru modificări.
2- Atunci în funcția noastră Javascript vom aplica pur și simplu metoda toggleClass () la fiecare dintre elemente prin selectorul său.
Să vedem cum arată codul nostru cu modificările aplicate:

 Adăugați cursuriPrimul nostru bloc jQuery CSS
Al doilea bloc jQuery CSS
Faceți clic pentru a schimba clasele

Acum să vedem ce se întâmplă când încărcăm documentul pentru prima dată:

Acum să vedem ce se întâmplă când facem din nou clic pe buton:

MARI

Dacă continuăm să facem clic pe buton, cursurile vor continua să alterneze fără limită.
Cu aceasta terminăm acest tutorial, am învățat cum putem manipula CSS direct cu jQueryCu aceasta, putem începe să avem idei mai bune pentru a face ca interfețele noastre de utilizator să fie mai bogate în funcționalități.