Javascript-biblioteket jQuery har funnits med i Drupal sedan version 5 och har därigenom hittat en plats i hjärtat hos tusentals drupalutvecklare. Dess slogan "Write Less Do More" ("skriv mindre, gör mer") är ovanligt träffsäker. Med jQuery slipper du skriva en massa krånglig och felkänslig kod utan kan koncentrera dig på vad du vill åstadkomma. It's the what, not the how, that counts.
Det finns en mängd kodbibliotek för JavaScript, några av de mer kända är Prototype, MooTools och Dojo. De har alla olika styrkor och svagheter men ämnar generellt till att tillhandahålla funktioner som man ofta använder och därmed slipper skriva om gång på gång. Flera av dessa bibliotek är därför ganska stora och gör lite av varje. jQuerys skapare, John Resig, valde att gå en annan väg och fokusera på en sak: att söka efter element i sidor och göra saker med dem.
Att leta reda på element på sidor och förändra dem eller lägga till kod som ska köras vid vissa händelser har traditionellt varit ett svårt och ganska hårigt problem. Skälen till detta är att olika webbläsare har valt att tolka W3C:s specifikationer på olika sätt. Detta har lett till att Document Object Model (DOM), den datamodell som beskriver en webbsida och dess element, inte är likadan i alla webbläsare. För att skriva JavaScript som till exempel körs när en användare klickar på en länk eller lägger till en bild efter varje stycke måste man arbeta sig igenom DOMen. För att anpassa sig till alla dessa webbläsare måste därför koden vara väldigt flexibel, vilket gör den stor och omfattande och full av villkorssatser. Just detta löser jQuery och låter dig som utvecklare fokusera på din kod snarare än vilken webbläsare användaren kör. Tack vare att jQuery tar hand om det besvärliga kan du med vanlig CSS-syntax hitta de element du vill förändra eller haka på kod på.
Koden man skriver med jQuery blir således betydligt mycket enklare och kompaktare. Risken för buggar är mindre ju kortare och mindre komplex din programkod är. Dessutom är den enklare att förstå. Nedan följer ett exempel för att visa på hur kompakt och lättläst jQuery-kod är. Koden nedan gör att så fort en användare klickar på en länk visas en dialogruta med länkens text.
$('a').click(function() { alert($(this).text()); return false; });Dollartecknet ($) är normalt en referens till jQuery-objektet som innehåller jQuerys metoder. Även andra JavaScript-bibliotek använder $ varför detta kan leda till konflikter om man använder jQuery tillsammans med ett annat bibliotek. Det löser man genom att båda biblioteken inte använder $ som referens utan har olika symboler.
Koden $('a') gör att jQuery söker igenom DOMen, det vill säga webbsidan, efter länkar (<a href="...">...</a>). På dessa hakar den på en händelsehanterare, även kallad event handler. En händelsehanterare är kod som körs när en bestämd händelse inträffar, i detta fall ett musklick. När användaren klickar på länken körs alert() som visar en dialogruta med en OK-knapp. Dialogrutans innehåll får vi med koden $(this).text() som genom självreferensen this går via jQuery's metod text() för att hämta den text som ryms mellan <a href="..."> och </a>. Slutligen säger vi till webbläsaren att den inte ska gå till den sida som länken hänvisar till genom att hoppa över alla nästföljande händelsehanterare. Detta gör vi genom att köra return false; vilket stoppar webbläsaren från att trigga de andra händelsehanterare som finns registrerade för elementet.
Vi kan variera koden i exemplet ovan för att öppna länkar med klassen external i ett nytt fönster (något som är aningen mer användbart!):
$('a.external').click(function(){ window.open(this.href); return false; });JQuery innehåller trots sin litenhet (bara 21 kB) en stor mängd funktioner för att skapa ökad interaktivitet på webbsidor. En bra resurs är www.visualjquery.com där du kan bläddra bland samtliga metoder och läsa om hur de används. Idag hittade jag också en väldigt bra lathund som på två A4-ark listar samtliga metoder i jQuery.
Detta är dock bara kärnan i jQuery. Det finns i dagsläget tusentals tillägg till jQuery, som liksom modulerna i Drupal, utökar funktionaliteten. På jQuerys pluginsidor kan du bläddra bland dem (ja, du såg rätt, jquery.com kör Drupal!).
Mycket spännande händer just nu och vi kommer antagligen ha anledning att återkomma till jQuery och tillägget jQuery UI i framtiden.