Hva er jQuery?

Åpen kildekode

jQuery er et JavaScript-bibliotek med åpen kildekode som forenkler en del avansert funksjonalitet med JavaScript.

jQuery er det mest brukte biblioteket av sitt slag, og i følge nettstedet BuiltWith benyttes jQuery per desember 2013 av 66 % av de 10 000 største nettstedene.

jQuery

Det er relativt enkelt å komme i gang med jQuery, alt man trenger er å inkludere en js-fil i <head>, og så kan moroa begynne.

De offisielle nettsidene til jQuery har god dokumentasjon på alt du kan tenkes å løse med biblioteket: http://api.jquery.com/

JavaScript uten jQuery

Alt kan også gjøres rett i vanlig JavaScript uten bruk av jQuery, men koden blir ofte mye mer kompleks og omfattende. Der man uten jQuery ville skrevet 10-15 linjer kode for oppnå noe, kan man med jQuery oppnå det samme med bare én enkelt kodelinje.

Det er også mulighet for mange stilige CSS-animasjoner ved hjelp av jQuery, for eksempel ved at noe innhold «sklir» inn fra siden, «fader» ut og spretter av gårde.

Hvis man med vanlig JavaScript skal skjule et element med id «eksempelboks» kan dette gjøres slik:

document.getElementById("eksempelboks").style.display="none";

JavaScript med jQuery

Man kan oppnå det samme med jQuery slik:

$("#eksempelboks").hide();

I tillegg har man innebygde funksjoner i jQuery som gjør at elementet for eksempel kan fade ut:

$("#eksempelboks").fadeOut();

Videre kan man legge til et parameter i samme kode som angir hvor raskt det skal fade ut:

$("#eksempelboks").fadeOut("slow");

Jeg har for eksempel brukt jQuery i noe animert grafikken på disse nettsidene, noe jeg omtalte i et blogginnlegg for få dager siden.

Der brukte jeg jQuery til å trigge funksjonene mine så fort dokumentet var ferdig lastet med ready(). Jeg la til ekstra innhold i et element med append() og jeg endret CSS for et annet element med css().

Navigasjon i DOM

En annen stor fordel med jQuery er at man enkelt kan navigere seg frem til riktige elementer i DOM (Document Object Model) i HTML-strukturen. Eksempler på dette er å finne parent, sibling, first child, previous og så videre. Og alle disse kan kombineres, så man nær sagt kan finne frem til hvilket som helst element.

Dette kan for eksempel være nyttig når man ønsker å gjøre ett-eller-annet med siste celle i nest siste rad i en tabell.

Plugins

I tillegg til selve jQuery-biblioteket kan man legge til egne plugins som bygger videre på jQuery og gir mer nisjefunksjonalitet. For eksempel en datovelger for bruk i skjemaer, verktøy for å vise grafer, avanserte pivottabeller og bildegallerier.

Svend Asbjørn Sylling, 7. desember 2013

Bloggen fra Sylling Hardcode