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 enligt mallen jQuery.<metodnamn>. Det blir dock 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.

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.

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å):

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 mot den sträng man skickade med som parameter.

I de flesta fall som man ska göra något som väljer ut delar av DOM:en, så skriver man; $(selektor). Där selektor anger vad man vill söka fram i DOM:en. Hur man anger sökkriterier och vad som väljs ut fungerar på samma sätt som med CSS-selektorer. I exemplet ovan så väljer vi alltså ut root-elementet genom att ange taggen för detta, dvs html.

När vi nu valt ut det element vi vill komma åt, är det dags att göra något med det. I exemplet så anropar vi jQuery-metoden som används för att ange CSS-egenskaper. Detta görs med .css()-delen. Den första inparametern anger vilken egenskap vi vill ändra, medan den andra anger vilket värde vi vill tilldela egenskapen. Detta är bara en av många metoder som finns tillgängliga i jQuery.

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 ".<"metod">" 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 "." följt av metodnamn. 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.

Vi har två .css()-metoder som körs. Den första sätter bakgrundsfärgen till blå och den andra sätter förgrundsfärgen till grön.

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

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

Här har vi expanderat det första exemplet med lite extra HTML och vi har lagt till en 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.

Nästa aktivitet

jQuery - DOM och element