Publisert i bloggen, lørdag 7. desember 2013:

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.

Bloggen

Paid and organic last click
Are og Ida på date
Kunstig intelligens
Vekst- prosjektet
Da Outlook stjal ikonet mitt
Sen eller tidlig påske?
Koordinater i SVG
Påstand: Corner er mål
Vestfold-Rogaland kalkulator
Twitter og VM på ski
My New Year's Resolutions
Et bilde sier mer enn tusen ord
Rogaland blir nye Vestfold
På størrelse med Vestfold
Datoformat i Excel og Google Analytics
what3words Hvilke tre ord?
Covfefe will make America great again
Om domenenavn og firmanavn
Fotballfrue: Jeg tar innpå deg
Sakte-TV: Se gresset gro
Sakte-TV: Se maling tørke
Første generasjon iPapp har kommet
Jukselapp fotografering
Det sorte hullet cookies disabled
Høysesong for kjipe annonser
Om analsex og popups
Rotasjon av vindsymboler
Hvor mye er Fotballfrue verdt?
Slik tar du et screenshot
Nyttige husketrekanter
Enklere utregning med kryssmultiplisering
Min egen lille adventskalender
Logge antall likes på Facebook
Hva er sitemap.xml?
Hva er robots.txt?
Responsivt design
Webscraping med PHP
Jeg sammenligner epler og pærer
Scalable Vector Graphics
Google Analytics API: Hente data
Google Analytics API: Muligheter
HTML5: Video
Big Data
Cookies: Hvordan det brukes
Cookies: Hva er det?
Excel i to vinduer
CRM-systemet «Kontor»
Gigantisk timelapse
Hva er jQuery?
Overvåke ReadyNAS DUO med PHP
Favicon - ikonet i adressefeltet
Animert heading på hardcode.no
CSS -sprites
Komprimere PNG-bilder
Redesign av hardcode.no
Klikkbar flash uten clickTAG
Relevans har stor verdi
Alle har wide- screen i 2013
Markedsandeler nettlesere 2010
Internet Explorer-vindu i feil størrelse
Hvor stor er en piksel?
Markedsføring og kundelojalitet
Flash-versjoner
Vestre Sylling og Øverskogen JFF
Sidevisninger, besøk og brukere
Widescreen kommer
Hvor brede bør sidene være?
Fortsatt lese hele saken?
Lese hele saken nå?
Første møte med AdWords
Bort med IE6
Utviklingen på nettleserfronten
Nyttige jukselapper
Nye Sylling.no
Klær med egen logo?
Værdata fra yr.no
Logodesign trender i 2008
Gmail grimaser
Google Analytics
Publiseringssystemet Outpost
Hardcode.no relanseres
Publiserings -systemet