✅ CSS manipulacija s jQueryjem

Sadržaj

S jQuery Na razini korisničke interakcije možemo postići mnogo toga, uključujući manipulaciju DOM stabloMeđutim, jedna od stvari koja vam možda ne pada na pamet je CSS manipulacija.
Manipuliranjem CSS možemo postići promjene u elementima koje vidimo na ekranu na vrlo prirodan i fluidan način bez pribjegavanja složenim funkcijama u Javascript čisto kao što smo morali učiniti prije nekoliko godina.
The SUNCE je način na koji je naš dokument organiziran HTML, omogućuje nam da damo predvidljivu i hijerarhijsku strukturu onome što želimo prikazati na ekranu. To je vrlo važno jer je to način na koji preglednik tumači dokumente, međutim postoji još jedan aspekt koji možemo koristiti u svoju korist; ovo je za mogućnost lociranja elemenata za poduzimanje radnji na njima.
Dakle, kada trebamo promijeniti određeni element, zahvaljujući SUNCE Možemo koristiti različite načine za njegovo lociranje i na taj način manipulirati njegovim sadržajem, stilom ili čak ukloniti iz dokumenta u stvarnom vremenu.
To je vrlo praktično u trenucima u kojima moramo istaknuti element prilikom poduzimanja radnje u dokumentu ili kad primamo odgovor, pa ne moramo mijenjati stranicu ili je potpuno osvježavati.
Jedna od najboljih praksi pri stvaranju stilova CSS je koristiti klase, s tim možemo stvoriti aspekte koje zatim možemo neovisno primijeniti na različite elemente bez potrebe za ponovnim pisanjem koda uvijek iznova.
Atribut klaseDa bi element poprimio ove stilove, jednostavno ga moramo postaviti u svoj atribut klasa = "" naziv odgovarajuće klase i ako je stil koji u njoj upisujemo prikladan za element, on će ga odražavati.
OgraničenjeSve zvuči sjajno, ali postoji ograničenje, stil se učitava prilikom podizanja stranice, a ako moramo uključiti novi stil, obično bi se stranica morala ponovno učitati, što bi uzrokovalo prekid navigacije za korisnika.
jQuery dopušta nam da zaobiđemo ta ograničenja dajući nam mogućnost da navedene klase u stvarnom vremenu uključimo u dokument bez ponovnog učitavanja cijele stranice, za to jednostavno moramo koristiti metodu addClass () i proslijedi mu naziv klase CSS koje želimo dodati trenutku.
Pogledajmo mali praktični primjer korak po korak, a zatim ćemo vidjeti potpuni kod opisanog:
1- Prvo stvaramo datoteku pod nazivom add-classes.html i mi ćemo uključiti knjižnicu jQuery, iz praktičnih razloga izravno pozivamo iz CDN odgovarajući, to zahtijeva internetsku vezu, no datoteku možemo spremiti i poslužiti lokalno.
2- Onda ćemo stvoriti svoje razrede CSSKako bismo mogli vidjeti promjenu na bolji način, stvorili smo dvije klase, svaka mijenja boju pozadine elementa na koji se primjenjuje, a svaka klasa će imati drugu boju.
3- U tijelu našeg dokumenta stvaramo dva i svakom od njih dodjeljujemo ID s kojim ih možemo identificirati unutar SUNCE lako s biračima jQuery.
4- Zatim stvaramo element kojem u eventu na klik kažemo mu da pozove funkciju Javascript.
5- Konačno gradimo svoju funkciju Javascript, ovo će jednostavno pozvati svaki element svojim biračem i metodom addClass () Dodati će klasu onih koje smo na početku stvorili, kada to učinimo, odmah ćemo vidjeti promjenu.
Budući da smo opisali što bismo trebali učiniti, kôd ćemo vidjeti kakav je bio:

Dodaj klaseNaš prvi jQuery CSS blok
Naš drugi jQuery CSS blok

Kliknite za promjenu razreda

Kao što vidimo, to je vrlo jednostavno, a kada ovo izvršimo u svom pregledniku, vidjet ćemo kako su elementi prije klika na gumb normalni, a nakon klika mijenjaju boju i dodaju se odgovarajuće klase. Pogledajmo na sljedećoj slici na što mislimo:

POVEĆAJTE

Nakon što pritisnemo gumb, možemo vizualizirati prijelaz na našoj stranici:

Ako možemo dodati klasu, moramo za to učiniti i suprotno, odnosno ukloniti je jQuery daje nam metodu removeClass (), i to radi s principom vrlo sličnim prethodnom primjeru, jednostavno postavimo element i kažemo mu kroz metodu da mora ukloniti naznačenu klasu, ako ga ima, bit će uklonjen, u protivnom se ništa neće dogoditi.
Kako bismo stvari učinili još zanimljivijima, dodat ćemo korištenje druge metode, a to je metoda provjere klasa, ovo je hasClass () to nam omogućuje da provjerimo ima li element određenu klasu, s tim možemo koristiti uvjete i izvesti različite eksperimente koje naša logika nalaže.
Za to ćemo napraviti malu stranicu na kojoj ćemo imati nekoliko funkcija, funkcija će provjeriti ima li element određenu klasu, ako je tako, bit će uklonjena, ali ako je odgovor negativan, dodat ćemo je .
To nam daje mogućnost da se malo poigramo sa stilovima dinamički, jer možemo vidjeti u stvarnom vremenu dodamo li ili uklanjamo određene vrijednosti.
1- Na temelju prethodnog primjera koncentrirat ćemo se samo na dio gdje smo napisali funkciju Javascript.
2- Unutar funkcije ćemo stvoriti dva uvjeta, u prvom ćemo raditi s prvim elementom, prvo ćemo pitati uvjetnim blokom ako () ako imate pozvani razred prvi razredAko je odgovor pozitivan, primijenit ćemo metodu uklanjanja klase, no ako nemamo klasu, dodat ćemo je, to će nam dati učinak sklopka.
3- Ponavljamo prethodni korak za drugi element i tako postižemo da se ponaša na isti način.
Pogledajmo u nastavku novi kôd koji smo stvorili:

Dodaj klaseNaš prvi jQuery CSS blok
Naš drugi jQuery CSS blok

Kliknite za promjenu razreda

Pogledajmo sada kako je izvršavanje našeg programa, na ovoj prvoj slici vidjet ćemo kako izgleda naš dokument HTML U početno stanje uključili smo konzolu Krom tako da primijetimo kako se elementi mijenjaju:

POVEĆAJTE

Pogledajmo sada što se događa kada pritisnemo gumb i prijelaz se izvrši:

POVEĆAJTE

Na prvi pogled moglo bi se činiti da ovaj dokument radi potpuno isto kao i prvi koji smo napravili u ovom vodiču, no ako ponovno kliknemo vidjet ćemo kako će metoda funkcionirati. removeClass ().
Također smo provjerili kako metoda hasClass () je radio, možda ne radi ništa što korisnik vidi, ali nam daje mogućnost izvođenja uvjeta na našem HTML.
Postoji nešto što nam dopušta jQuery a ovo je za prebacivanje između klasa, za to koristimo metodu toggleClass (), s njim možemo odrediti našem elementu da će, kada pokrenemo događaj, uzeti klasu ako ima drugu na popisu već primijenjenu.
KorisnostOvo je zaista korisno kada želimo raditi na promjenama stanja, to je svojevrsni prečac kako bismo izbjegli da moramo pisati uvjetnu strukturu s metodom hasClass (). Njegova je primjena vrlo slična metodama koje smo dosad vidjeli, jedina je razlika u tome što ćemo umjesto klase proći dvije odvojene razmakom.
Pogledajmo kako ćemo promijeniti samo funkciju Javascript našeg testnog dokumenta koji uključuje ovu novu metodu:
1- Našim elementima ćemo dodati početnu klasu, na ovaj način imat ćemo polazište za promjene.
2- Onda unutar naše funkcije Javascript jednostavno ćemo primijeniti metodu toggleClass () na svaki od elemenata putem svog selektora.
Pogledajmo kako naš kôd izgleda s primijenjenim izmjenama:

Dodaj klaseNaš prvi jQuery CSS blok
Naš drugi jQuery CSS blok

Kliknite za promjenu razreda

Pogledajmo sada što će se dogoditi kada prvi put učitamo dokument:

Sada da vidimo što se događa kada ponovno pritisnemo gumb:

POVEĆAJTE

Nastavimo li s klikom na gumb, nastava će se nastaviti izmjenjivati bez ograničenja.
Ovim smo završili ovaj vodič, naučili smo kako možemo manipulirati CSS izravno s jQueryTime možemo početi imati bolje ideje kako bismo poboljšali funkcionalnost naših korisničkih sučelja.