JQuery - att hantera klasser - Versionshistorik

PGJ: /* removeClass */

2019-01-12T21:04:50Z

removeClass

← Äldre version		Versionen från 12 januari 2019 kl. 21.04
Rad 14:		Rad 14:

	Här följer ett exempel där vi "byter" vilken klass som ligger på några element.		Här följer ett exempel där vi "byter" vilken klass som ligger på några element.
	<codepen pen="BjRgNm" tab="js" height="300">		<codepen pen="BjRgNm" tab="js,result" height="300">
	</codepen>		</codepen>

PGJ: /* addClass */

2019-01-12T21:04:35Z

addClass

← Äldre version		Versionen från 12 januari 2019 kl. 21.04
Rad 5:		Rad 5:

	Ett kort exempel:		Ett kort exempel:
	<codepen pen="jWmjOK" tab="js" height="300">		<codepen pen="jWmjOK" tab="js,result" height="300">
	</codepen>		</codepen>

PGJ: /* Nästa aktivitet */

2017-02-08T13:57:18Z

Nästa aktivitet

← Äldre version		Versionen från 8 februari 2017 kl. 13.57
Rad 28:		Rad 28:

	== Nästa aktivitet ==		== 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.

	[[jQuery - att koppla sig till händelser]]		[[jQuery - att koppla sig till händelser]]

	[[Category: jQuery\|JB]]		[[Category: jQuery\|JB]]
	[[Category:JavaScript\|JB]]		[[Category:JavaScript\|JB]]

PGJ: /* removeClass */

2017-01-29T18:09:27Z

removeClass

← Äldre version		Versionen från 29 januari 2017 kl. 18.09
Rad 11:		Rad 11:

	== <code>removeClass</code> ==		== <code>removeClass</code> ==
	I många fall vill vi förstås även kunna ta bort en klass. Det kan antingen vara att 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 <code>removeClass</code>. Ä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.		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 <code>removeClass</code>. Ä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.		Här följer ett exempel där vi "byter" vilken klass som ligger på några element.

PGJ: /* addClass */

2016-02-12T13:47:22Z

addClass

← Äldre version		Versionen från 12 februari 2016 kl. 13.47
Rad 2:		Rad 2:

	== <code>addClass</code> ==		== <code>addClass</code> ==
	Om vi vill lägga till en klass till ett, eller flera element, kan du göra det med metoden <code>addClass</code>. 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 på klasser. Varje klass ska åtskiljas av ett mellanslag.		Om vi vill lägga till en klass till ett, eller flera element, kan du göra det med metoden <code>addClass</code>. 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:		Ett kort exempel:

PGJ: PGJ flyttade sidan JQuery - att hantera stilmallar till JQuery - att hantera klasser utan att lämna en omdirigering

2016-01-10T14:42:10Z

PGJ flyttade sidan JQuery - att hantera stilmallar till JQuery - att hantera klasser utan att lämna en omdirigering

← Äldre version	Versionen från 10 januari 2016 kl. 14.42
(Ingen skillnad)

PGJ: /* hasClass */

2016-01-10T14:01:54Z

hasClass

← Äldre version		Versionen från 10 januari 2016 kl. 14.01
Rad 23:		Rad 23:

	== <code>hasClass</code> ==		== <code>hasClass</code> ==
	Ibland vill man veta om ett element har en klass eller ej. Då kan man använda sig av <code>hasClass</code>. Denna returnerar <code>true</code> eller <code>false</code> beroende på om klassen finns eller ej. Det spelar ingen roll om elementen ifråga även har andra klasser satta, det enda som ~~kollar~~ är om den angivna klassen ingår bland de klasser som finns på elementet.		Ibland vill man veta om ett element har en klass eller ej. Då kan man använda sig av <code>hasClass</code>. Denna returnerar <code>true</code> eller <code>false</code> 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 <code>true</code> om klassen finns på något som helst av elementen i samlingen.		Om metoden utförs på en samling av element, kommer metoden att returnera <code>true</code> om klassen finns på något som helst av elementen i samlingen.

PGJ: Skapade sidan med '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...'

2016-01-10T13:44:13Z

Skapade sidan med '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...'

Ny sida

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.)

== <code>addClass</code> ==
Om vi vill lägga till en klass till ett, eller flera element, kan du göra det med metoden <code>addClass</code>. 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 på klasser. Varje klass ska åtskiljas av ett mellanslag.

Ett kort exempel:
<codepen pen="jWmjOK" tab="js" height="300">
</codepen>

I exemplet lägger vi till klassen <code>a</code> på alla <code>p</code>-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.

== <code>removeClass</code> ==
I många fall vill vi förstås även kunna ta bort en klass. Det kan antingen vara att 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 <code>removeClass</code>. Ä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.
<codepen pen="BjRgNm" tab="js" height="300">
</codepen>

I exemplet har alla våra <code>p</code>-element klassen <code>a</code> ifrån början. I JavaScript-koden väljer vi ut alla <code>p</code>-element, tar bort klassen <code>a</code> och lägger dit klassen <code>b</code>. 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 <code>removeClass</code> 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.

== <code>hasClass</code> ==
Ibland vill man veta om ett element har en klass eller ej. Då kan man använda sig av <code>hasClass</code>. Denna returnerar <code>true</code> eller <code>false</code> beroende på om klassen finns eller ej. Det spelar ingen roll om elementen ifråga även har andra klasser satta, det enda som kollar ä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 <code>true</code> om klassen finns på något som helst av elementen i samlingen.

== Nästa aktivitet ==
[[jQuery - att koppla sig till händelser]]

[[Category: jQuery|JB]]
[[Category:JavaScript|JB]]