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 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 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; $(namn). Där namn är det 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 vårt fall väljer vi alltså ut root-elementet 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. Dessa körs sedan på rad, den en efter den andra. Detta gör man genom att lägga på en "." direkt efter ett metodsanrop, på samma sätt som man vanligtvis väljer ut en metod ifrån ett objekt. 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 ytterligare "." följt av metodnamn. 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 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.:
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.