JQuery - att använda biblioteket

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 mappat om jQuery till $ och alla metoder kan 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 (ja, en något onödigt krånglig metod att göra det på):

See the Pen vLyBme by Patrik Grip-Jansson (@PGJ) on CodePen.

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. I vårt fall väljer vi alltså ut rootelementet genom att ange taggen för detta, dvs html.

Chaining eller länkade funktionsanrop

jQuery stödjer vad man brukar kalla för chaining eller länkade funktionsanrop. I de flesta fall kan vi hänga på ytterligare en funktion efter en tidigare. Detta görs genom att lägga på en . direkt efter ett funktionsanrop. 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 elementet ifråga.

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 hittats, t.ex.:

See the Pen eJBOGm by Patrik Grip-Jansson (@PGJ) on CodePen.

Här har vi expanderat det första exemplet med liter 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. Allt som matchar ens sökning kommer att påverkas av efterföljande metodanrop. Detta gör att vi kan skriva relativt kompakt kod som ändock åstadkommer mycket.

Flera länkade anrop

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:

See the Pen yeVBzm by Patrik Grip-Jansson (@PGJ) on CodePen.

Nu ändras såväl bakgrunds- som förgrundsfärg på html-elementet.

Nästa aktivitet

jQuery och DOM