E14 – jQuery

Byggandet av en Javascript-applikation blir väldigt mycket enklare om man använder ett så kallat Toolkit, som abstraherar bort de värsta DOM-problemen och erbjuder förenklande convenience methods. Det finns inget formellt krav på att du skall använda just jQuery i kursen, men det kan vara en rekommendation för er som satsar på de högre betygen.

Materialet på denna sida är sammanställt av David Waller.

Vad gör jQuery?

jQuery, och dess andra Toolkit-kamrater, har ett flertal olika användningsområden:

  • CSS selectors: jQuery populariserade idén att hitta noder med hjälp av CSS-uttryck, vilket är väldigt användbart då DOM-metoderna (getElementsByTagName / Id) inte räcker långt. De moderna webbläsarna har dock alla implementerat metoderna querySelector och querySelectorAll, som gör samma sak.
  • DOM-attribut: Att själv manipulera DOM-noders attribut och klasser är hopplöst knepigt, på grund av ett otal buggar och skillnader mellan webläsare. jQuery gör detta enkelt via ett smidigt API som tar hand om problem och skillnader i bakgrunden.
  • DOM-manipulation: jQuery gör det ruggigt enkelt att skapa nya html-noder och sätta in dem på önskad plats i DOM-trädet.
  • Events: IE och resten av webbläsarvärlden har olika sätt att binda event, och dessutom olika quirks runt sina implementeringar. jQuery gömmer dessa skillnader bakom ett egendesignat interface, som fungerar överallt och garanterar utseendet på ditt event-objekt. jQuery har dessutom en fantastisk smidig metod, live, för event delegation, och stöd för custom events.
  • Ajax: Olika implementationer och felhanteringar gör manuell Ajax knepig, men återigen erbjuder jQuery ett abstraherande lager med enhetlig API.
  • Animationer: RIA i all ära, men behovet av att krydda hemsidor med snygga effekter kvarstår! jQuery har ett väldigt användarvändligt miniframework för animationer.
  • Formulär: jQuery erbjuder ett antal funktioner som gör formulärhantering långt enklare (serialisering mm).
  • Utilities: jQuery innehåller också ett otal andra smidighetsfunktioner.

jQuery UI

jQuery UI är ett systerprojekt till jQuery, som innehåller alla UI-relaterade delar:

  • Widgets såsom Datepicker, Autocomplete och så vidare.
  • Utilities som exempelvis Draggables (förenklar drag&drop väsentligt), Sortables (gör en lista sorterbar), etc.
  • CSS Framework, ett system för klassnamn på sidans och widgetarnas olika delar, som möjliggör…
  • Themeroller, ett system som utnyttjar jQuery UI:s CSS Framework för att snabbt och enkelt installera teman eller skapa egna.

jQuery UI får inte användas inom ramen för projektet.

Plugins

En stor anledning till jQuerys popularitet är förmodligen också den enkelthet med vilken dess funktion kan utökas. Att skriva en egen plugin till jQuery är, tack vare jQuerys smidiga API, väldigt enkelt. Självklart finns det också en enorm mängd färdiga plugins att hitta på nätet. jQueryprojektet håller på att se över hanteringen av plugins för att skapa ett smidigare repositorie än det som finns idag, men det är ännu inte klart.

Det finns också ett system för att skapa egna widgets i jQuery UI, via dess så kallade Widget Factory.

Länkar

Några matnyttiga länkar för jQuery:

  • John Resig har hållt ett antal intressanta anföranden om jQuery under våren, med interaktivt onlinestöd.
  • Johans tutorial längre ned på denna sida!
  • jQuery 1.4 tutorial visar 15 nya features i 1.4
  • Den officiella dokumentationen, nyligen omgjord och väsentligt förbättrad
  • Dokumentationen som app till Iphone. Ruggigt smidig, och samtidigt ett ypperligt exempel på hur webbapps kan konkurrera med native apps (för er som talar mobilnördiska).
  • jQuerys källkod på Github är väldigt lärorik att utforska.
  • Learning jQuery, en site med många bra tutorials.
  • jQuery for designers, fler tutorials, sänds också som podcasts. Trots att målgruppen tydligen är otekniska esteter så finns här ganska mycket matnyttigt.
  • yayQuery, en veckolig podcast som diskuterar det som händer inom jQuery-världen. Mer kul, koncentrerat, tekniskt och avancerat än…
  • jQuery official podcast, en podcast som ger helikopterperspektiv på jQuery-projektet i stort. Inte lika teknisk som yayQuery (och därmed inte lika omedelbart matnyttig)
  • James Padolsey bloggar regelbundet om sina äventyr i jQuerykoden. Hög nivå, ger väldigt bra insikt i hur jQuery fungerar inuti. Rekommenderas varmt!
  • Rebecca Murphey bloggar också en del om jQuery, ofta med fokus på kodorganisering.
  • John Resigs presentationer på slideshare innehåller en hel del kul (de flesta andra JavaScriptgurus har också konton här, som är väl värda att kolla in).
  • jQuerys officiella twitter tweetar regelbundet ut en hel del matnyttigt. För övrigt har twitter blivit för JavaScriptare vad MySpace är för rockband, så det är mödan väl värt att söka upp din favoritJavaScriptgurus konto och följa det.
  • John Resigs interaktiva learn jQuery app är förvisso ganska basic, men ger en snabb överblick över olika funktionalitet.
  • James Padolsey har skapat en jQuery source viewer som är väldigt smidig att använda. Rekommenderas varmt när du vill kolla upp mer exakt hur en funktion fungerar!

Grunderna i jQuery

Detta är en liten snabb introduktionsguide till jQuery som jag kört i en annan kurs. Den är rätt basic men kan vara en start om du inte kikat på jQuery tidigare.

  1. Introduktion
  2. jQuery-objektet
  3. Selektorer
  4. CSS-klasser
  5. Händelsehantering
  6. AJAX
  7. XML

Del 1 – Introduktion

Del 2 – jQueryobjektet

Del 3 – Selektorer

Del 4 – CSS-klasser

Del 5 – Händelsehantering

Del 6 – AJAX

Del 7 – XML

Välkommen till CoursePress

en utav Linnéuniversitets lärplattformar. Som inloggad student kan du kommunicera, hålla koll på dina kurser och mycket mer. Du som är gäst kan nå de flesta kurser och dess innehåll utan att logga in.

Läs mer lärplattformar vid Linnéuniversitetet

Studentkonto

För att logga in behöver du ett studentkonto vid Linnéuniversitet.

Läs mer om att hämta ut studentkonto

Inloggning LNU