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å):
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 försöka leta i DOM:en och försöka matcha 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 anrop
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 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. 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.:
eJBOGm
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, jQuery gör 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.
Om vi 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:
yeVBzm
Nu ändras såväl bakgrunds- som förgrundsfärg på html-elementet.