Hop til indhold
Udvikling og programmering

jQuery

jQuery er et JavaScript-bibliotek, der samler ofte brugte funktioner til at finde, ændre og styre elementer i en hjemmesides HTML-struktur, også kaldet DOM’en (Document Object Model). Biblioteket er selv skrevet i JavaScript, men pakker en række komplicerede og gentagne kodemønstre ind i korte, letlæselige kommandoer, som webudviklere kan genbruge på tværs af forskellige browsere. Formålet er at gøre det hurtigere at bygge interaktive websider uden selv at skulle skrive lange stykker JavaScript-kode fra bunden.

Vil man for eksempel lave et stykke tekst, der forsvinder, når en bruger klikker på det, kræver det i ren JavaScript ofte flere linjer kode og ekstra hensyn til forskelle mellem browsere. Med jQuery kan den samme effekt opnås ved blot at udpege elementet med et CSS-lignende udtryk og derefter kalde en indbygget metode som hide() – biblioteket har allerede løst de tekniske detaljer i baggrunden, så udvikleren kan koncentrere sig om selve funktionaliteten.

Hvad bruges jQuery til?

jQuery bliver typisk brugt til fire hovedopgaver på en hjemmeside: at finde og ændre indhold i DOM’en, at håndtere hændelser som klik og tastetryk, at lave visuelle effekter og animationer, samt at hente eller sende data til en server uden at siden skal genindlæses (Ajax). Den sidste del bruges ofte til at kommunikere med en REST API, hvor jQuery kan sende en forespørgsel til serveren og opdatere en del af siden med det svar, der kommer tilbage.

Hvor og hvem bruger jQuery?

jQuery er blevet brugt af nogle af verdens største websites gennem årene, og biblioteket ligger desuden under mange populære CMS-systemer, herunder WordPress. Fordi mange projekter ikke selv hoster filen lokalt, bliver jQuery ofte indlæst via et CDN (Content Delivery Network), hvor et script-tag i sidens head-sektion peger på en færdig, offentligt tilgængelig version af biblioteket. Det gør det hurtigt at komme i gang, uden at man selv skal downloade og vedligeholde filen.

Sådan er syntaksen bygget op

Al jQuery-kode tager udgangspunkt i samme grundmønster: dollartegnet ($) bruges som en genvej til selve jQuery-funktionen, efterfulgt af en parentes med det element man vil ramme (en såkaldt selector), og til sidst en metode der beskriver, hvad der skal ske. Et typisk udtryk kan se sådan ud: $(“p”).hide(), som finder alle afsnit-elementer på siden og skjuler dem. Koden bliver som regel pakket ind i en kontrol, der sikrer, at hele siden er færdigindlæst, før jQuery-koden begynder at køre.

Fordele og ulemper ved jQuery

Den største styrke ved jQuery er, at det historisk har normaliseret forskelle mellem browseres måde at håndtere JavaScript på, så udviklere har kunnet skrive én kode, der virker flere steder. Biblioteket har desuden en stor mængde plugins, en gennemarbejdet dokumentation og et sprog, der ligger tæt på almindelig JavaScript, hvilket gør det forholdsvis let at lære.

Til gengæld kan et projekt, der læner sig helt op ad jQuery, blive begrænset, hvis man har brug for meget avanceret eller specialiseret funktionalitet, hvor almindelig JavaScript eller et moderne framework kan være mere velegnet. Selve jQuery-filen fylder desuden noget i browserens hukommelse og skal indlæses, før koden kan køre, hvilket kan have en mindre betydning for sidens indlæsningstid.

Eksempel
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); - koden får ethvert afsnit på siden til at forsvinde, når brugeren klikker på det.
Ofte stillede spørgsmål
Er jQuery stadig relevant i moderne webudvikling?
Moderne frameworks som React og Vue har overtaget dele af de opgaver, jQuery historisk løste, men biblioteket findes stadig indlejret i mange ældre websites, WordPress-temaer og plugins som en afhængighed.
Er jQuery gratis at bruge?
Ja, jQuery er open source og kan downloades og bruges gratis i både private og kommercielle projekter under MIT-licensen.
Hvordan tilføjer man jQuery til en hjemmeside?
Man kan enten indsætte et script-tag med et link til biblioteket via et CDN, eller downloade filen jquery.min.js og placere den lokalt i projektets mappestruktur og derefter linke til den.
Hvad er forskellen på jQuery og JavaScript?
JavaScript er selve programmeringssproget, mens jQuery er et bibliotek skrevet i JavaScript, der stiller færdige funktioner til rådighed, så man skal skrive mindre kode for at opnå samme resultat.
Findes der udvidelser til jQuery?
Der findes relaterede projekter som jQuery UI til brugergrænseflade-komponenter, men disse projekter er ifølge jQuerys egen projektside enten i vedligeholdelsestilstand eller udfaset.
Bruger dine jQuery-Ajax-kald allerede en server i baggrunden? Se hvordan strukturerede webservices typisk bygges op
REST API →