JQuery - att använda biblioteket - Versionshistorik

PGJ: /* Kort om exemplen */

2019-02-10T09:31:16Z

Kort om exemplen

← Äldre version		Versionen från 10 februari 2019 kl. 09.31
Rad 1:		Rad 1:
	När du nu har [[jQuery]] tillgängligt i din applikation, så kan du använda dig av det på lite olika vis. Dels kan man komma åt alla dess metoder enligt mallen <code>jQuery.<''metodnamn''></code>. Det blir dock lite långrandigt att skriva hela tiden. Man har därför även kopplat <code>jQuery</code> till <code>$</code> och alla metoder kan därmed anropas via följande syntax <code>$.<''metodnamn''></code>. Detta är det absolut vanligaste sättet att anropa [[jQuery]] med och du kommer sällan att se någon annan metod i exempelkod. Så kommer även att vara fallet här på Webbling.		När du nu har [[jQuery]] tillgängligt i din applikation, så kan du använda dig av det på lite olika vis. Dels kan man komma åt alla dess metoder enligt mallen <code>jQuery.<''metodnamn''></code>. Det blir dock lite långrandigt att skriva hela tiden. Man har därför även kopplat <code>jQuery</code> till <code>$</code> och alla metoder kan därmed anropas via följande syntax <code>$.<''metodnamn''></code>. Detta är det absolut vanligaste sättet att anropa [[jQuery]] med och du kommer sällan att se någon annan metod i exempelkod. Så kommer även att vara fallet här på Webbling.

	~~== Kort om exemplen ==~~
	<div class="well well-meadow">		<div class="well well-meadow">
	I alla efterföljande jQuery-exempel, kommer vi att separera HTML, CSS och JavaScript i varsin Codepen-flik och minimera den kod som skulle behövts för att skapa en komplett sida. Detta främst för att kunna urskilja de olika kodsorterna och för att lättare kunna visa just det som är viktigt för exemplet ifråga.		I alla efterföljande jQuery-exempel, kommer vi att separera HTML, CSS och JavaScript i varsin Codepen-flik och minimera den kod som skulle behövts för att skapa en komplett sida. Detta främst för att kunna urskilja de olika kodsorterna och för att lättare kunna visa just det som är viktigt för exemplet ifråga.

PGJ: /* Kort om exemplen */

2019-02-10T09:31:07Z

Kort om exemplen

← Äldre version		Versionen från 10 februari 2019 kl. 09.31
Rad 2:		Rad 2:

	== Kort om exemplen ==		== Kort om exemplen ==
	I ~~CodePen~~-~~exemplen~~ kommer vi ~~inte~~ att ~~ha med koden~~ för att ~~inkludera jQuery~~. ~~Biblioteket inkluderas automatiskt~~ och för att ~~hålla exemplen så rena~~ som ~~möjligt utelämnas "onödig" kod~~.		<div class="well well-meadow">
			I alla efterföljande jQuery-exempel, kommer vi att separera HTML, CSS och JavaScript i varsin Codepen-flik och minimera den kod som skulle behövts för att skapa en komplett sida. Detta främst för att kunna urskilja de olika kodsorterna och för att lättare kunna visa just det som är viktigt för exemplet ifråga.
			</div>

	== Att välja ut element ==		== Att välja ut element ==

PGJ: /* Att välja ut element */

2019-02-10T09:30:15Z

Att välja ut element

← Äldre version		Versionen från 10 februari 2019 kl. 09.30
Rad 6:		Rad 6:
	== Att välja ut element ==		== Att välja ut element ==
	Här är ett minimalt exempel som använder [[jQuery]] för att ange bakgrundsfärg på ett element (ja, det är en något onödigt krånglig metod att göra det på):		Här är ett minimalt exempel som använder [[jQuery]] för att ange bakgrundsfärg på ett element (ja, det är en något onödigt krånglig metod att göra det på):
	<codepen pen="vLyBme" tab="js,result" height="~~400~~">		<codepen pen="vLyBme" tab="js,result" height="200">
	</codepen>		</codepen>

PGJ: /* Välja flera element samtidigt */

2019-02-10T09:30:07Z

Välja flera element samtidigt

← Äldre version		Versionen från 10 februari 2019 kl. 09.30
Rad 28:		Rad 28:
	== Välja flera element samtidigt ==		== Välja flera element samtidigt ==
	Om vi hade angivit ett sökbegrepp som returnerat flera element ifrån [[DOM]], så hade efterföljande funktionsanrop utförts på varje element som påträffats, t.ex.:		Om vi hade angivit ett sökbegrepp som returnerat flera element ifrån [[DOM]], så hade efterföljande funktionsanrop utförts på varje element som påträffats, t.ex.:
	<codepen pen="eJBOGm" tab="js,result" height="~~500~~">		<codepen pen="eJBOGm" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Chaining eller länkade metodanrop */

2019-02-10T09:29:58Z

Chaining eller länkade metodanrop

← Äldre version		Versionen från 10 februari 2019 kl. 09.29
Rad 21:		Rad 21:

	Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:		Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:
	<codepen pen="yeVBzm" tab="js,result" height="~~300~~">		<codepen pen="yeVBzm" tab="js,result" height="400">
	</codepen>		</codepen>

PGJ: /* Chaining eller länkade metodanrop */

2019-02-10T09:29:49Z

Chaining eller länkade metodanrop

← Äldre version		Versionen från 10 februari 2019 kl. 09.29
Rad 21:		Rad 21:

	Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:		Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:
	<codepen pen="yeVBzm" tab="js,result" height="~~500~~">		<codepen pen="yeVBzm" tab="js,result" height="300">
	</codepen>		</codepen>

PGJ: /* Chaining eller länkade metodanrop */

2019-02-10T09:29:39Z

Chaining eller länkade metodanrop

← Äldre version		Versionen från 10 februari 2019 kl. 09.29
Rad 17:		Rad 17:
	== Chaining eller länkade metodanrop ==		== Chaining eller länkade metodanrop ==
	[[jQuery]] stödjer vad man brukar kalla för chaining eller länkade metodanrop. I de flesta fall kan vi hänga på ytterligare en metod direkt efter en tidigare. Dessa körs sedan på rad, den ena efter den andra. Länkningen sker genom att man lägger på flera "<code>.<"metod"></code>" direkt efter varandra, på samma sätt som man vanligtvis väljer ut en metod ifrån ett objekt.		[[jQuery]] stödjer vad man brukar kalla för chaining eller länkade metodanrop. I de flesta fall kan vi hänga på ytterligare en metod direkt efter en tidigare. Dessa körs sedan på rad, den ena efter den andra. Länkningen sker genom att man lägger på flera "<code>.<"metod"></code>" direkt efter varandra, på samma sätt som man vanligtvis väljer ut en metod ifrån ett objekt.

			För att inte få för mycket kod på varje rad så kan man bryta isär kodraden och lägga varje del på en egen rad. Vanligtvis bryter man då efter punkten. Så gör vi i exemplen här så att koden blir lite mer lättläst.

	Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:		Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:

PGJ: /* Välja flera element samtidigt */

2019-02-10T09:27:40Z

Välja flera element samtidigt

← Äldre version		Versionen från 10 februari 2019 kl. 09.27
Rad 26:		Rad 26:
	== Välja flera element samtidigt ==		== Välja flera element samtidigt ==
	Om vi hade angivit ett sökbegrepp som returnerat flera element ifrån [[DOM]], så hade efterföljande funktionsanrop utförts på varje element som påträffats, t.ex.:		Om vi hade angivit ett sökbegrepp som returnerat flera element ifrån [[DOM]], så hade efterföljande funktionsanrop utförts på varje element som påträffats, t.ex.:
	<codepen pen="eJBOGm" tab="~~html~~,result" height="500">		<codepen pen="eJBOGm" tab="js,result" height="500">
	</codepen>		</codepen>

PGJ: /* Chaining eller länkade metodanrop */

2019-02-10T09:26:09Z

Chaining eller länkade metodanrop

← Äldre version		Versionen från 10 februari 2019 kl. 09.26
Rad 19:		Rad 19:

	Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:		Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva ytterligare "<code>.</code>" följt av metodnamn. Ville vi t.ex. ändra två CSS-egenskaper "samtidigt" skulle vi kunna göra så här:
	<codepen pen="yeVBzm" tab="~~html~~,result" height="500">		<codepen pen="yeVBzm" tab="js,result" height="500">
	</codepen>		</codepen>

PGJ: /* Att välja ut element */

2019-02-10T09:24:39Z

Att välja ut element

← Äldre version		Versionen från 10 februari 2019 kl. 09.24
Rad 6:		Rad 6:
	== Att välja ut element ==		== Att välja ut element ==
	Här är ett minimalt exempel som använder [[jQuery]] för att ange bakgrundsfärg på ett element (ja, det är en något onödigt krånglig metod att göra det på):		Här är ett minimalt exempel som använder [[jQuery]] för att ange bakgrundsfärg på ett element (ja, det är en något onödigt krånglig metod att göra det på):
	<codepen pen="vLyBme" tab="~~html~~,result" height="400">		<codepen pen="vLyBme" tab="js,result" height="400">
	</codepen>		</codepen>