JQuery - att använda biblioteket: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| 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 med <code>jQuery.<''metodnamn''></code>, vilket blir lite långrandigt att skriva hela tiden. Man har därför även | 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 med <code>jQuery.<''metodnamn''></code>, vilket blir 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. | ||
Här är ett minimalt exempel som använder [[jQuery]] för att ange bakgrundsfärg (ja, 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" height="400"> | <codepen pen="vLyBme" tab="html" height="400"> | ||
</codepen> | </codepen> | ||
| Rad 7: | Rad 7: | ||
På rad 12 använder vi [[jQuery]] på ett lite annorlunda sätt än det som beskrevs ovan. Vi kallar på [[jQuery]] direkt såsom en funktion. När man gör så kommer [[jQuery]] att börja att leta i [[DOM]]:en och försöka matcha element i enlighet med det som skickades som parameter. | På rad 12 använder vi [[jQuery]] på ett lite annorlunda sätt än det som beskrevs ovan. Vi kallar på [[jQuery]] direkt såsom en funktion. När man gör så kommer [[jQuery]] att börja att leta i [[DOM]]:en och försöka matcha element i enlighet med det som skickades som parameter. | ||
I de flesta fall när man ska göra något som väljer ut bitar ifrån [[DOM]]:en, så skriver man; <code>$(''namn'')</code>. Där <code>''namn''</code> är det man vill söka ut i [[DOM]]:en. Hur man anger namn och vad som väljs ut fungerar som med CSS. I vårt fall väljer vi alltså ut rootelementet genom att ange taggen för detta, dvs html. | I de flesta fall när man ska göra något som väljer ut bitar ifrån [[DOM]]:en, så skriver man; <code>$(''namn'')</code>. Där <code>''namn''</code> är det man vill söka ut i [[DOM]]:en. Hur man anger namn och vad som väljs ut fungerar som med [[CSS]]-selektorer. I vårt fall väljer vi alltså ut rootelementet genom att ange taggen för detta, dvs [[html-tagg | html]]. | ||
== Chaining eller länkade | == Chaining eller länkade metodanrop == | ||
[[jQuery]] stödjer vad man brukar kalla för chaining eller länkade | [[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. De körs då på rad en efter den andra. Detta gör man genom att lägga på en <code>.</code> direkt efter ett metodsanrop. På rad 12 i ovanstående exempel gör vi först ett urval och sedan utför vi en metod som körs på detta urval. Vi har två metoder som körs. Den första väljer ut rootelementet och den andra ändrar CSS:en för det utvalda elementet. | ||
Vi kan självklart länka samman ännu fler metoder. Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva <code>.</code> och metodnamn direkt efter ett annat metodanrop. Ville vi t.ex. ändra två CSS-egenskaper samtidigt skulle vi kunna göra så här: | Vi kan självklart länka samman ännu fler metoder. Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva <code>.</code> och metodnamn direkt efter ett annat metodanrop. Ville vi t.ex. ändra två CSS-egenskaper samtidigt skulle vi kunna göra så här: | ||
<codepen pen="yeVBzm" tab="html" height="500"> | <codepen pen="yeVBzm" tab="html" height="500"> | ||
| Rad 26: | Rad 17: | ||
Nu ändras såväl bakgrunds- som förgrundsfärg på html-elementet. | Nu ändras såväl bakgrunds- som förgrundsfärg på html-elementet. | ||
== Välja flera DOM-noder samtidigt == | |||
Om vi hade angivit ett sökbegrepp som returnerat flera [[DOM]]-noder, så hade efterföljande funktionsanrop utförts på varje nod som påträffats, t.ex.: | |||
<codepen pen="eJBOGm" tab="html" height="500"> | |||
</codepen> | |||
Här har vi expanderat det första exemplet med lite mer HTML och en extra kodrad, rad nummer 17. I detta fall kommer [[jQuery]] att leta på alla <code>p</code>-element och sätta dessas bakgrundsfärg till gul. Vi behöver alltså inte skriva någon loop för detta, istället så gör [[jQuery]] allt jobbet åt oss. Skönt va! | |||
I stort sett fungerar alltså denna bit av [[jQuery]] såsom vi är vana ifrån CSS-kod. Alla element som matchar en sökning kommer att påverkas av efterföljande metodanrop. Detta gör att vi kan skriva relativt kompakt kod som ändock åstadkommer mycket. | |||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[jQuery och DOM]] | [[jQuery och DOM]] | ||
Versionen från 4 januari 2016 kl. 00.32
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 med jQuery.<metodnamn>, vilket blir lite långrandigt att skriva hela tiden. Man har därför även kopplat jQuery till $ och alla metoder kan därmed anropas via följande syntax $.<metodnamn>. 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.
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å):
På rad 12 använder vi jQuery på ett lite annorlunda sätt än det som beskrevs ovan. Vi kallar på jQuery direkt såsom en funktion. När man gör så kommer jQuery att börja att leta i DOM:en och försöka matcha element i enlighet med det som skickades som parameter.
I de flesta fall när man ska göra något som väljer ut bitar ifrån DOM:en, så skriver man; $(namn). Där namn är det man vill söka ut i DOM:en. Hur man anger namn och vad som väljs ut fungerar som med CSS-selektorer. I vårt fall väljer vi alltså ut rootelementet genom att ange taggen för detta, dvs html.
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. De körs då på rad en efter den andra. Detta gör man genom att lägga på en . direkt efter ett metodsanrop. På rad 12 i ovanstående exempel gör vi först ett urval och sedan utför vi en metod som körs på detta urval. Vi har två metoder som körs. Den första väljer ut rootelementet och den andra ändrar CSS:en för det utvalda elementet.
Vi kan självklart länka samman ännu fler metoder. Om vi t.ex. vill länka till ytterligare metodanrop kan vi enkelt göra det genom att skriva . och metodnamn direkt efter ett annat metodanrop. Ville vi t.ex. ändra två CSS-egenskaper samtidigt skulle vi kunna göra så här:
Nu ändras såväl bakgrunds- som förgrundsfärg på html-elementet.
Välja flera DOM-noder samtidigt
Om vi hade angivit ett sökbegrepp som returnerat flera DOM-noder, så hade efterföljande funktionsanrop utförts på varje nod som påträffats, t.ex.:
Här har vi expanderat det första exemplet med lite mer HTML och en extra kodrad, rad nummer 17. I detta fall kommer jQuery att leta på alla p-element och sätta dessas bakgrundsfärg till gul. Vi behöver alltså inte skriva någon loop för detta, istället så gör jQuery allt jobbet åt oss. Skönt va!
I stort sett fungerar alltså denna bit av jQuery såsom vi är vana ifrån CSS-kod. Alla element som matchar en sökning kommer att påverkas av efterföljande metodanrop. Detta gör att vi kan skriva relativt kompakt kod som ändock åstadkommer mycket.