jQuery

Innehåll

På denna underwebb beskrivs hur man kan utöka webbsidors funktionalitet med jQuery - ett JavaScript-ramverk.

Exempelsidor i denna underwebb använder HTML version 5, men JavaScript bör även fungera med HTML 4 och XHTML 1. Därför skrivs "(X)HTML" istället för "HTML och/eller XHTML" för att spara plats och tid. :-)
Observera att denna underwebb använder JavaScript! :-) För att kunna använda underwebbens funktion (främst öppna nya fönster med exempel) krävs att din webbläsare stödjer JavaScript samt att JavaScript inte har inaktiverat! Din webbläsare bör även stödja CSS version 3.

Även denna underwebb (liksom CSS2 och JavaScript) är designad enbart med stilmallar, d.v.s. inga (X)HTML-tabeller används för design. Denna webbplats är även designad med HTML 5.

Om jQuery generellt

JavaScript har genom åren fått ett dåligt rykte, bl.a. då folk inte litar på teknologin (p.g.a. säkerhetrisker och olika funktion hos olika webbläsare) samt att många designers har "överanvänt" teknologin i tron om att deras webbplatser blir "hippare". Stödet för JavaScript har fungerat olika i olika webbläsare, bl.a. gick Microsoft sin egen väg vilket ledde till att designers var tvungna att skriva JavaScript-kod för två olika "modeller". I.o.m. introduktionen av DOM (Document Object Model; och lite tankearbete från intelligentare än mig :-)) så finns det nu ett angreppssätt som gör att vi kan skriva kod för endast en "modell".

Detta är sanning med modifikation, d.v.s. det finns fortfarande en del olikheter mellan webbläsare. För att komma runt detta har ett antal JavaScript-ramverk skapats, bl.a. jQuery, Prototype och MoJo. Ämnet för denna underwebb är ramverket jQuery.

JavaScript-ramverk kan ses som ett enhetligt programmeringsgränssnitt (eng. Application Programming Interface, API) i webbläsare. I ramverket finns ett antal färdiga funktioner, d.v.s. saker som vi inte behöver skriva funktioner för.

jQuery är utvecklat för att kunna utökas med moduler (plugins). Idag finns en uppsjö av färdigutvecklade moduler och det är relativt lätt att skriva egna moduler - antingen för att dela med andra eller för att återanvända i andra utvecklingsprojekt.

Om JavaScript generellt

Ett viktigt begrepp i samband med JavaScript är "elegant nedgradering" (eng. graceful degradation), vilket innebär att en webbplats alltid ska fungera oavsett vilka teknologier besökares webbläsare stödjer (CSS, JavaScript, m.m.). JavaScript bör alltså användas för att utöka upplevelsen av ett besök och inte hindra besökare från att komma åt delar av webbplatsen. Ytterligare ett intressant begrepp är "diskret JavaScript" (eng. unobtrusive JavaScript), d.v.s. JavaScript ska inte vara ett krav för att besöka webbplats samt ska inte vara "påträngande" (reta upp besökare). För att detta ska fungera så måste vi först designa webbplats utan andra teknologier (så som CSS och JavaScript). Först när design (eller snarare struktur) är klar så ändrar vi presentationen med CSS och funktionaliteten med JavaScript (se sidan DOM).

Ett exempel på detta är (om de blir klara) de större exemplen som finns sist i sida. De är en del av sida som döljs med jQuery när sida laddas och visas i ett "pop-up"-fönster när besökare klickar på en knapp.

Till början på sida

Om denna underwebb

Denna underwebb har delats upp i följande sidor:

• Grundläggande - kort introduktion till syntax, var man skriver koden samt funktionen $() och händelsen ready.
• Selektorer - hur man väljer ut element att manipulera.
• Filtrering - hur man filtrerar ett existerande jQuery-objekt ytterligare.
• Utsökning - hur man söker fram t.ex. barn-, syskon- och föräldraelement.
• Manipulation - hur man manipulerar DOM-struktur, t.ex. lägger till element och ändrar stilar (CSS).
• Effekter - hur man anmierar, döljer och visar element.
• Händelser - hur man kopplar funktioner för att hantera händelser i element.

Vad som inte behandlas

• AJAX - jag har inte kommit så långt i jQuery ännu. :-) Men mitt mål är att även behandla detta ämne. (... och jag har sökte en Web 2.0-kurs våren 2012.)
• Skapande av tillägg (plugins) - jag har inte kommit så här långt heller. :-)
• Mer avancerade saker - just nu favoriserar jag serverteknologier över JavaScript. :-) (Av även denna orsak är inte beskrivningar kompletta, d.v.s. det är bara fantasin som sätter gränser för vad man kan göra med jQuery.)

Version av jQuery i denna underwebb

När denna beskrivning började skrivas så gällde version 1.6.x av jQuery, d.v.s. det finns en stor risk att ny version släppts och att det finns fler (men kanske även mindre) antal metoder. Några metoder kan rent av ha ändrats en del, så se dessa beskrivningar som en introduktion och verifiera eventuella felaktigheter på den officiella webbplatsens dokumentation.

Exempel i denna underwebb

Många exempel ändrar bakgrundsfärg m.h.a. CSS-stilar då detta är mest tydligt. Men jQuery kan användas till så mycket mer än att ändra CSS-stilar för element, så använd inte (vissa) exempel som en måttstock på vad som är möjligt. :-)

Några exempel är beskrivningar av faktisk funktionalitet i denna underwebb (eller webbplats) - kan det bli mer praktiskt än så? :-)