JQuery - att hantera klasser
Vi har nu sett hur man kan ändra individuella CSS-egenskaper på element med hjälp av jQuery. Dock så är det oftast bättre att försöka hålla utseende relaterade saker i stylesheets. Det vore alltså bra om vi kunde manipulera vilka klasser som är satta på ett element. Självklart har jQuery bra stöd även för detta. Vilket vi ska titta på i denna aktivitet. (Klasser kan förstås användas till annat än till att styra utseendet. Det kan ju styra hur script hanterar element, osv.)
addClass
Om vi vill lägga till en klass till ett, eller flera element, kan du göra det med metoden addClass. Som hörs på namnet så lägger denna metod till klasser, den tar alltså inte bort eller förändrar dem som redan finns där. Precis som när vi lägger till klasser med HTML-attribut, så kan vi skicka med en lista som innehåller flera klasser. Varje klass ska då åtskiljas av ett mellanslag.
Ett kort exempel:
I exemplet lägger vi till klassen a på alla p-element i dokumentet. Lägg märke till att vi anger klassen utan någon inledande punkt. I det här fallet är det ju det rena klassnamnet vi använder, snarare än en selektor.
removeClass
I många fall vill vi förstås även kunna ta bort en klass. Det kan antingen vara att vi inte länge vill ha med den på elementet, men det kan även vara att vi vill ta bort den för att ersätta den med en annan. För detta använder vi oss av metoden removeClass. Även här kan vi ange att vi vill ta bort flera klasser. Återigen görs detta genom att skicka med en sträng som innehåller alla klasser som ska tas bort. Varje klass åtskiljs av ett mellanslag.
Här följer ett exempel där vi "byter" vilken klass som ligger på några element.
I exemplet har alla våra p-element klassen a ifrån början. I JavaScript-koden väljer vi ut alla p-element, tar bort klassen a och lägger dit klassen b. Här är använder vi oss förstås av metodlänkning, då bägge metoderna ska köras på samma samling element.
Att ta bort alla klasser
Om vi inte skickar med någon inparameter till removeClass så kommer alla klasser som finns på elementen att tas bort. Detta kan vara bra om vi vill nollställa allt som har med elementet att göra.
hasClass
Ibland vill man veta om ett element har en klass eller ej. Då kan man använda sig av hasClass. Denna returnerar true eller false beroende på om klassen finns eller ej. Det spelar ingen roll om elementen ifråga även har andra klasser satta, det enda som kollas är om den angivna klassen ingår bland de klasser som finns på elementet.
Om metoden utförs på en samling av element, kommer metoden att returnera true om klassen finns på något som helst av elementen i samlingen.
Nästa aktivitet
Nu har vi gått igenom den viktigaste grundfunktionaliteten i jQuery. I följande sektioner kommer vi att gå igenom mer avancerade delar av jQuery.