CSS -manipulation med jQuery

Med jQuery Vi kan opnå mange ting på brugerinteraktionsniveau, herunder manipulation af DOM træEn af de ting, der måske ikke kommer til at tænke på, er CSS manipulation.
Ved at manipulere CSS vi kan opnå ændringer i de elementer, vi ser på skærmen på en meget naturlig og flydende måde uden at ty til komplekse funktioner i Javascript ren, som vi skulle gøre for et par år siden.
Det SOL er den måde, vores dokument er organiseret på HTML, giver os mulighed for at give en forudsigelig og hierarkisk struktur til det, vi vil vise på skærmen. Dette er meget vigtigt, da det er måden, browseren fortolker dokumenterne på, men der er et andet aspekt, som vi kan bruge til vores fordel; dette er for at være i stand til at lokalisere elementerne til at tage handling på dem.
Så når vi skal foretage en ændring på et bestemt element, takket være SOL Vi kan bruge forskellige måder til at lokalisere det og dermed manipulere dets indhold, dets stil eller endda fjerne det fra dokumentet i realtid.
Dette er meget praktisk i øjeblikke, hvor vi skal fremhæve et element, når vi foretager en handling i dokumentet eller når vi modtager et svar og dermed ikke behøver at ændre siden eller foretage en fuldstændig opdatering af den.
En af de bedste fremgangsmåder, når du opretter stilarter CSS er at bruge klasser, med dette kan vi skabe aspekter, som vi derefter kan anvende uafhængigt af forskellige elementer uden at skulle ty til at omskrive koden igen og igen.
Klasse attributFor at et element kan tage disse stilarter, skal vi simpelthen placere det i dets attribut klasse = "" navnet på den tilsvarende klasse, og hvis den stil, vi skriver i, er egnet til elementet, vil det afspejle det.
BegrænsningAlt lyder godt, men der er en begrænsning, stilen indlæses, når siden løftes, og hvis vi har brug for at inkludere en ny typografi, skal siden normalt indlæses igen, hvilket forårsager en afbrydelse af navigationen for brugeren.
jQuery giver os mulighed for at omgå disse grænser ved at give os mulighed for at inkorporere de nævnte klasser i realtid i dokumentet uden at skulle genindlæse hele siden, for dette skal vi simpelthen bruge metoden addClass () og give det navnet på klassen CSS som vi ønsker at tilføje til øjeblikket.
Lad os se et lille praktisk eksempel trin for trin, og så vil vi se den komplette kode for det, der er beskrevet:
1- Først opretter vi vores fil kaldet tilføj klasser.html og vi kommer til at inkludere biblioteket af jQuery, af praktiske formål foretager vi det direkte opkald fra CDN tilstrækkelig, dette kræver internetforbindelse, men vi kan gemme filen og servere den lokalt.
2- Så skal vi oprette vores klasser CSSFor at vi kan se ændringen på en bedre måde, har vi oprettet to klasser, hver ændrer farven på baggrunden for det element, den anvendes på, og hver klasse vil have en anden farve.
3- I hoveddelen af ​​vores dokument skaber vi to og til hver enkelt tildeler vi et ID, som vi kan identificere dem inden for SOL let med vælgerne jQuery.
4- Så opretter vi et element, hvortil i tilfælde onclick vi fortæller det at kalde en funktion Javascript.
5- Endelig bygger vi vores funktion Javascript, vil dette ganske enkelt kalde hvert element ved dets vælger og med metoden addClass () Det kommer til at tilføje en klasse af dem, vi oprindeligt skabte, når vi gør dette, vil vi straks se ændringen.
Da vi har beskrevet, hvad vi skal gøre, vil vi se koden, som den har været:

 Tilføj klasserVores første jQuery CSS -blok
Vores anden jQuery CSS -blok
Klik for at ændre klasser

Som vi ser, er det ganske enkelt, og når vi udfører dette i vores browser, vil vi se, hvordan elementerne er normale, før de klikker på knappen, og efter klik ændrer de farve, og de tilsvarende klasser tilføjes. Lad os se i det følgende billede, hvad vi refererer til:

FORSTØRRE

Efter at vi har klikket på knappen, kan vi visualisere overgangen på vores side:

Hvis vi kan tilføje en klasse, skal vi også være i stand til at gøre det modsatte, det vil sige at fjerne den, for dette jQuery giver os metoden removeClass (), og dette fungerer med et princip, der meget ligner det foregående eksempel, placerer vi ganske enkelt et element og fortæller det via metoden, at det skal fjerne den angivne klasse, hvis det har det, vil det blive fjernet, ellers sker der ikke noget.
For at gøre tingene lidt mere interessante vil vi tilføje brugen af ​​en anden metode, og det er klassekontrolmetoden, dette er hasClass () der giver os mulighed for at kontrollere, om et element har en bestemt klasse, med dette kan vi bruge betingelser og lave forskellige eksperimenter, som vores logik dikterer.
Til dette skal vi lave en lille side, hvor vi skal have flere funktioner, en funktion vil verificere, om elementet har en bestemt klasse, i så fald vil det blive fjernet, men hvis svaret er negativt, tilføjer vi det .
Dette giver os mulighed for at lege lidt med stilarterne dynamisk, da vi i realtid kan se, om vi tilføjer eller fjerner bestemte værdier.
1- Baseret på det foregående eksempel vil vi kun koncentrere os om den del, hvor vi har skrevet funktionen Javascript.
2- Inde i funktionen skal vi oprette to betingelser, i det første vil vi arbejde med det første element, først vil vi spørge med en betinget blok hvis () hvis du har kaldt klassen første klasseHvis svaret er positivt, anvender vi fjernklassemetoden, men hvis vi ikke har klassen, tilføjer vi det, dette vil give os en effekt af kontakt.
3- Vi gentager det foregående trin for det andet element og dermed opnår vi, at det opfører sig på samme måde.
Lad os se den nye kode, som vi har oprettet herunder:

 Tilføj klasserVores første jQuery CSS -blok
Vores anden jQuery CSS -blok
Klik for at ændre klasser

Lad os nu se, hvordan udførelsen af ​​vores program er, i dette første billede vil vi se, hvordan vores dokument ser ud HTML I sin oprindelige tilstand har vi inkluderet konsollen Chrome så vi bemærker, hvordan elementerne ændrer sig:

FORSTØRRE

Lad os nu se, hvad der sker, når vi klikker på knappen, og overgangen foretages:

FORSTØRRE

Ved første øjekast kan det se ud til, at dette dokument fungerer nøjagtig det samme som det første, vi lavede i denne vejledning, men hvis vi klikker igen, vil vi se, hvordan metoden fungerer. removeClass ().
Vi har også kontrolleret, hvordan metoden hasClass () har fungeret, måske gør det ikke noget, brugeren ser, men det giver os mulighed for at køre betingelser på vores HTML.
Der er noget, der tillader os jQuery og dette er for at skifte mellem klasser, til dette bruger vi metoden toggleClass (), med det kan vi angive for vores element, at når vi udløser en begivenhed, vil det tage en klasse, hvis den har den anden på listen, der allerede er anvendt.
VærktøjDette er virkelig nyttigt, når vi vil arbejde med statslige ændringer, det er en slags genvej for at undgå at skulle skrive en betinget struktur med metoden hasClass (). Dens anvendelse ligner meget de metoder, vi har set hidtil, den eneste forskel er, at vi i stedet for en klasse vil passere to adskilt af et mellemrum.
Lad os se, hvordan vi kun ændrer funktionen Javascript af vores testdokument for at inkorporere denne nye metode:
1- Vi kommer til at tilføje en indledende klasse til vores elementer, på denne måde vil vi have et udgangspunkt for ændringerne.
2- Så inden for vores funktion Javascript vi vil simpelthen anvende metoden toggleClass () til hvert af elementerne gennem dets vælger.
Lad os se, hvordan vores kode ser ud med de anvendte ændringer:

 Tilføj klasserVores første jQuery CSS -blok
Vores anden jQuery CSS -blok
Klik for at ændre klasser

Lad os nu se, hvad der sker, når vi indlæser dokumentet for første gang:

Lad os nu se, hvad der sker, når vi klikker på knappen igen:

FORSTØRRE

Hvis vi fortsætter med at klikke på knappen, vil klasserne fortsætte med at skifte uden grænser.
Med dette afslutter vi denne vejledning, vi har lært, hvordan vi kan manipulere CSS direkte med jQueryMed dette kan vi begynde at få bedre ideer til at gøre vores brugergrænseflader rigere på funktionaliteter.