CSS -manipulation med jQuery

Med jQuery Vi kan uppnå många saker på användarinteraktionsnivå, inklusive manipulation av DOM -trädEn av de saker som kanske inte kommer att tänka på är CSS -manipulation.
Genom att manipulera CSS vi kan uppnå förändringar i de element som vi ser på skärmen på ett mycket naturligt och flytande sätt utan att tillgripa komplexa funktioner i Javascript ren som vi var tvungna att göra för några år sedan.
De SOL är hur vårt dokument är organiserat HTML, låter oss ge en förutsägbar och hierarkisk struktur till det vi vill visa på skärmen. Detta är mycket viktigt eftersom det är det sätt på vilket webbläsaren tolkar dokumenten, men det finns en annan aspekt som vi kan använda till vår fördel; detta är för att kunna lokalisera elementen för att vidta åtgärder mot dem.
Så när vi behöver göra en ändring av ett visst element, tack vare SOL Vi kan använda olika sätt att lokalisera det och på så sätt manipulera innehållet, dess stil eller till och med ta bort det från dokumentet i realtid.
Detta är mycket praktiskt i stunder där vi måste markera ett element när vi vidtar en handling i dokumentet eller när vi får ett svar och därmed inte behöver ändra sidan eller göra en fullständig uppdatering av den.
En av de bästa metoderna när du skapar stilar CSS är att använda klasser, med detta kan vi skapa aspekter som vi sedan kan använda oberoende av olika element utan att behöva tillgripa koden om och om igen.
KlassattributFör att ett element ska ta dessa stilar måste vi helt enkelt placera i dess attribut klass = "" namnet på motsvarande klass och om stilen vi skriver i den är lämplig för elementet kommer det att återspegla det.
BegränsningAllt låter bra men det finns en begränsning, stilen laddas när du lyfter sidan och om vi behöver inkludera en ny stil måste sidan normalt laddas om, vilket orsakar avbrott i navigeringen för användaren.
jQuery tillåter oss att kringgå dessa gränser genom att ge oss möjligheten att införliva nämnda klasser i realtid i dokumentet utan att behöva ladda om hela sidan, för detta måste vi helt enkelt använda metoden addClass () och skicka namnet på klassen CSS som vi vill lägga till för tillfället.
Låt oss se ett litet praktiskt exempel steg för steg och sedan kommer vi att se hela koden för det som beskrivs:
1- Först skapar vi vår fil som heter add-classes.html och vi kommer att inkludera biblioteket i jQuery, för praktiska ändamål ringer vi direkt från CDN tillräckligt, detta kräver internetanslutning, men vi kan spara filen och servera den lokalt.
2- Då ska vi skapa våra klasser CSSFör att vi ska kunna se förändringen på ett bättre sätt har vi skapat två klasser, var och en ändrar färgen på bakgrunden för elementet som den tillämpas på, och varje klass kommer att ha en annan färg.
3- I själva dokumentet skapar vi två och till var och en tilldelar vi ett ID som vi kan identifiera dem inom SOL enkelt med väljarna jQuery.
4- Då skapar vi ett element till vilket i händelsen onclick vi säger åt den att kalla en funktion Javascript.
5- Slutligen bygger vi vår funktion Javascript, detta kommer helt enkelt att kalla varje element med sin väljare och med metoden addClass () Det kommer att lägga till en klass av de vi skapade inledningsvis, när vi gör detta kommer vi omedelbart att se förändringen.
Eftersom vi har beskrivit vad vi ska göra kommer vi att se koden som den har varit:

 Lägg till klasserVårt första jQuery CSS -block
Vårt andra jQuery CSS -block
Klicka för att ändra klasser

Som vi ser är det ganska enkelt och när vi kör detta i vår webbläsare kommer vi att se hur elementen är normala innan du klickar på knappen och efter att de klickat ändrar de färg och motsvarande klasser läggs till. Låt oss se i följande bild vad vi hänvisar till:

FÖRSTORA

När vi har klickat på knappen kan vi visualisera övergången på vår sida:

Om vi ​​kan lägga till en klass måste vi också kunna göra det motsatta, det vill säga att ta bort den, för detta jQuery ger oss metoden removeClass (), och detta fungerar med en princip som liknar det föregående exemplet, vi placerar helt enkelt ett element och säger till det genom metoden att det måste ta bort den angivna klassen, om den har den kommer den att tas bort, annars händer ingenting.
För att göra saker lite mer intressanta kommer vi att lägga till användningen av en annan metod och det är klasskontrollmetoden, detta är hasClass () som gör att vi kan verifiera om ett element har en viss klass, med detta kan vi använda villkor och göra olika experiment som vår logik dikterar.
För detta kommer vi att göra en liten sida där vi kommer att ha flera funktioner, en funktion kommer att verifiera om elementet har en viss klass, i så fall kommer det att tas bort, men om svaret är negativt kommer vi att lägga till det .
Detta ger oss möjlighet att leka lite med stilarna dynamiskt, eftersom vi kan se i realtid om vi lägger till eller tar bort vissa värden.
1- Baserat på föregående exempel kommer vi bara att koncentrera oss på den del där vi har skrivit funktionen Javascript.
2- Inuti funktionen ska vi skapa två villkor, i det första kommer vi att arbeta med det första elementet, först kommer vi att fråga med ett villkorligt block om () om du har klassen kallad första klassOm svaret är positivt kommer vi att tillämpa metoden ta bort klass, men om vi inte har klassen kommer vi att lägga till det, vilket ger oss en effekt av växla.
3- Vi upprepar föregående steg för det andra elementet och därmed uppnår vi att det beter sig på samma sätt.
Låt oss se den nya koden som vi har skapat nedan:

 Lägg till klasserVårt första jQuery CSS -block
Vårt andra jQuery CSS -block
Klicka för att ändra klasser

Låt oss nu se hur genomförandet av vårt program är, i den här första bilden kommer vi att se hur vårt dokument ser ut HTML I sitt ursprungliga tillstånd har vi inkluderat konsolen Krom så att vi märker hur elementen förändras:

FÖRSTORA

Låt oss nu se vad som händer när vi klickar på knappen och övergången görs:

FÖRSTORA

Vid första anblicken kan det tyckas att detta dokument fungerar exakt samma som det första vi gjorde i den här självstudien, men om vi klickar igen får vi se hur metoden fungerar. removeClass ().
Vi har också kontrollerat hur metoden hasClass () har fungerat, kanske det inte gör något som användaren ser, men det ger oss möjlighet att köra villkor på våra HTML.
Det är något som tillåter oss jQuery och detta är att växla mellan klasser, för detta använder vi metoden toggleClass (), med det kan vi ange för vårt element att när vi utlöser en händelse kommer det att ta en klass om den har den andra i listan som redan tillämpats.
VerktygDetta är verkligen användbart när vi vill arbeta med statliga förändringar, det är en slags genväg för att undvika att behöva skriva en villkorlig struktur med metoden hasClass (). Dess tillämpning är mycket lik de metoder vi har sett hittills, den enda skillnaden är att vi istället för en klass kommer att passera två åtskilda av ett mellanslag.
Låt oss se hur vi bara kommer att ändra funktionen Javascript i vårt testdokument för att införliva denna nya metod:
1- Vi ska lägga till en första klass till våra element, på så sätt kommer vi att ha en utgångspunkt för förändringarna.
2- Då inom vår funktion Javascript vi kommer helt enkelt att tillämpa metoden toggleClass () till vart och ett av elementen genom dess väljare.
Låt oss se hur vår kod ser ut med de ändringar som tillämpas:

 Lägg till klasserVårt första jQuery CSS -block
Vårt andra jQuery CSS -block
Klicka för att ändra klasser

Låt oss nu se vad som händer när vi laddar dokumentet för första gången:

Låt oss nu se vad som händer när vi klickar på knappen igen:

FÖRSTORA

Om vi ​​fortsätter att klicka på knappen fortsätter klasserna att växla utan begränsning.
Med detta avslutar vi denna handledning, vi har lärt oss hur vi kan manipulera CSS direkt med jQueryMed detta kan vi börja få bättre idéer för att göra våra användargränssnitt rikare på funktioner.