CSS -manipulasjon med jQuery

Med jQuery Vi kan oppnå mange ting på brukerinteraksjonsnivå, inkludert manipulering av DOM -treImidlertid er en av tingene du kanskje ikke tenker på er CSS -manipulasjon.
Ved å manipulere CSS vi kan oppnå endringer i elementene vi ser på skjermen på en veldig naturlig og flytende måte uten å ty til komplekse funksjoner i Javascript ren som vi måtte gjøre for noen år siden.
De SOL er måten vårt dokument er organisert på HTML, lar oss gi en forutsigbar og hierarkisk struktur til det vi vil vise på skjermen. Dette er veldig viktig siden det er måten nettleseren tolker dokumentene på, men det er et annet aspekt som vi kan bruke til vår fordel; dette er for å kunne finne elementene for å iverksette tiltak mot dem.
Så når vi trenger å gjøre en endring på et bestemt element, takket være SOL Vi kan bruke forskjellige måter til å finne det og dermed manipulere innholdet, stilen eller til og med fjerne det fra dokumentet i sanntid.
Dette er veldig praktisk i øyeblikk der vi må markere et element når vi utfører en handling i dokumentet eller når vi mottar et svar og dermed ikke trenger å endre siden eller gjøre en fullstendig oppdatering av den.
En av de beste fremgangsmåtene når du lager stiler CSS er å bruke klasser, med dette kan vi lage aspekter som vi deretter kan anvende uavhengig av forskjellige elementer uten å måtte ty til å omskrive koden igjen og igjen.
Klasse attributtFor at et element skal ta disse stilene, må vi ganske enkelt plassere det i attributtet klasse = "" navnet på den tilsvarende klassen, og hvis stilen vi skriver i den er egnet for elementet, vil det gjenspeile det.
BegrensningAlt høres bra ut, men det er en begrensning, stilen lastes når du løfter siden, og hvis vi trenger å inkludere en ny stil, må siden vanligvis lastes inn på nytt, og dermed forårsake avbrudd i navigasjonen for brukeren.
jQuery lar oss omgå disse grensene ved å gi oss muligheten til å inkorporere nevnte klasser i sanntid i dokumentet uten å måtte laste inn hele siden på nytt, for dette må vi ganske enkelt bruke metoden addClass () og gi den navnet på klassen CSS som vi ønsker å legge til i øyeblikket.
La oss se et lite praktisk eksempel trinn for trinn, og så vil vi se den komplette koden for det som er beskrevet:
1- Først lager vi filen vår add-classes.html og vi skal inkludere biblioteket til jQuery, for praktiske formål ringer vi direkte fra CDN tilstrekkelig, dette krever internettforbindelse, men vi kan lagre filen og servere den lokalt.
2- Da skal vi lage timene våre CSSFor at vi skal kunne se endringen på en bedre måte, har vi opprettet to klasser, hver forandrer fargen på bakgrunnen til elementet den brukes på, og hver klasse vil ha en annen farge.
3- I hoveddelen av dokumentet vårt lager vi to og til hver enkelt tildeler vi en ID som vi kan identifisere dem med i SOL enkelt med velgerne jQuery.
4- Så lager vi et element som i hendelsen ved trykk vi forteller det å kalle en funksjon Javascript.
5- Til slutt bygger vi vår funksjon Javascript, vil dette ganske enkelt kalle hvert element med sin velger og med metoden addClass () Det kommer til å legge til en klasse av de vi opprettet i utgangspunktet, når vi gjør dette vil vi umiddelbart se endringen.
Siden vi har beskrevet hva vi bør gjøre, kommer vi til å se koden slik den har vært:

 Legg til klasserVår første jQuery CSS -blokk
Vår andre jQuery CSS -blokk
Klikk for å endre klasser

Som vi ser er det ganske enkelt, og når vi kjører dette i nettleseren vår, vil vi se hvordan elementene er normale før du klikker på knappen, og etter å ha klikket endrer de farge og de tilsvarende klassene legges til. La oss se på det følgende bildet det vi refererer til:

FORSTØRRE

Etter at vi har klikket på knappen kan vi visualisere overgangen på siden vår:

Hvis vi kan legge til en klasse, må vi også kunne gjøre det motsatte, det vil si å fjerne den, for dette jQuery gir oss metoden removeClass (), og dette fungerer med et prinsipp som er veldig likt det forrige eksemplet, vi plasserer ganske enkelt et element og forteller det gjennom metoden at den må fjerne den angitte klassen, hvis den har den, vil den bli fjernet, ellers skjer ingenting.
For å gjøre ting litt mer interessant kommer vi til å legge til bruk av en annen metode, og det er klassekontrollmetoden, dette er hasClass () som lar oss kontrollere om et element har en bestemt klasse, med dette kan vi bruke betingelser og gjøre forskjellige eksperimenter som vår logikk tilsier.
For dette skal vi lage en liten side der vi skal ha flere funksjoner, en funksjon vil verifisere om elementet har en bestemt klasse, i så fall vil det bli fjernet, men hvis svaret er negativt, vil vi legge det til .
Dette gir oss muligheten til å leke litt med stilene dynamisk, siden vi kan se i sanntid om vi legger til eller fjerner bestemte verdier.
1- Basert på det forrige eksemplet skal vi bare konsentrere oss om delen der vi har skrevet funksjonen Javascript.
2- Inne i funksjonen skal vi lage to betingelser, i det første skal vi jobbe med det første elementet, først spør vi med en betinget blokk hvis () hvis du har ringt klassen førsteklassesHvis svaret er positivt, bruker vi fjernklassemetoden, men hvis vi ikke har klassen, vil vi legge den til, dette vil gi oss en effekt av bytte om.
3- Vi gjentar det forrige trinnet for det andre elementet og dermed oppnår vi at det oppfører seg på samme måte.
La oss se den nye koden som vi har opprettet nedenfor:

 Legg til klasserVår første jQuery CSS -blokk
Vår andre jQuery CSS -blokk
Klikk for å endre klasser

La oss nå se hvordan utførelsen av programmet vårt er, i dette første bildet vil vi se hvordan dokumentet vårt ser ut HTML I sin opprinnelige tilstand har vi inkludert konsollen Chrome slik at vi merker hvordan elementene endres:

FORSTØRRE

La oss nå se hva som skjer når vi klikker på knappen og overgangen er gjort:

FORSTØRRE

Ved første øyekast kan det virke som om dette dokumentet fungerer nøyaktig det samme som det første vi laget i denne opplæringen, men hvis vi klikker igjen vil vi se hvordan metoden vil fungere. removeClass ().
Vi har også sjekket hvordan metoden hasClass () har jobbet, kanskje det ikke gjør noe brukeren ser, men det gir oss muligheten til å kjøre betingelser på vår HTML.
Det er noe som tillater oss jQuery og dette er å bytte mellom klasser, for dette bruker vi metoden toggleClass (), med det kan vi spesifisere for elementet vårt at når vi utløser en hendelse, vil det ta en klasse hvis den har den andre i listen som allerede er brukt.
NytteDette er veldig nyttig når vi vil jobbe med endringer i staten, det er en slags snarvei for å unngå å måtte skrive en betinget struktur med metoden hasClass (). Anvendelsen er veldig lik metodene vi har sett så langt, den eneste forskjellen er at i stedet for en klasse vil vi passere to atskilt med et mellomrom.
La oss se hvordan vi bare vil endre funksjonen Javascript av vårt testdokument for å innlemme denne nye metoden:
1- Vi skal legge til en startklasse på elementene våre, på denne måten vil vi ha et utgangspunkt for endringene.
2- Da innenfor vår funksjon Javascript vi vil ganske enkelt bruke metoden toggleClass () til hvert av elementene gjennom sin velger.
La oss se hvordan koden vår ser ut med endringene som er brukt:

 Legg til klasserVår første jQuery CSS -blokk
Vår andre jQuery CSS -blokk
Klikk for å endre klasser

La oss nå se hva som skjer når vi laster dokumentet for første gang:

La oss nå se hva som skjer når vi klikker på knappen igjen:

FORSTØRRE

Hvis vi fortsetter å klikke på knappen, vil timene fortsette å veksle uten grenser.
Med dette fullfører vi denne opplæringen, vi har lært hvordan vi kan manipulere CSS direkte med jQueryMed dette kan vi begynne å ha bedre ideer for å gjøre brukergrensesnittene våre rikere på funksjoner.