jQuery
februar 2nd, 2009. Kategori: ProgrammeringjQuery er et lille og hurtigt letvægts JavaScript library, der har vundet stor udbredelse de sidste par år. jQuery giver genveje til f.eks. DOM og CSS manipulation, AjAX, eventhandling, JavaScript Animationer og gør webudvikling både hurtigere og mere dynamisk.
I denne post har samlet nogle af de bedste jQuery ressourcer og nogle exempler på, hvad man kan lave med jQuery biblioteket.
Websites der bruger jQuery
Hvis man installerer Firefox addon/plugin Library Detector og tager en hutig surftur, kan man se at mange sites er gået over til jQuery, som deres foretrukne JavaScript Library. I Danmark er det bla. ekstrabladet, bt og de gule sider.
Hvis man ønsker at se en mere spektakulær brug af jQuery, må man dog vende sig mod udlandet.
45 jQuery eksempler fra Smashing Magazine.
20 websites der bruger jQuery. Oversigt og Inspiration fra nettuts.
På AJAX-Rain kan du finde mange hundrede eksempler på brug af jQuery. Scroll ned under tagclouden, for at finde eksemplerne.
Igang med jQuery
Inden man kaster sig over brugen af JavaScript Libraries, er det en fordel at have en basal forståelse af JavaScript. Ellers kan de manger funktioner og muligheder godt tage pusten fra en.
Her er en række gode ressourcer til at komme igang med jQuery.
Download jQuery. Hent den sidste nye version af jQuery.
Officiel jQuery tutorial. jQuerys egen tutorials og dokumentation. Kan sine steder godt være lidt langhåret.
jQuery for begyndere. Video tutorials. En introduktion til jQuery for de visuelt orienterede.
Grundig jQuery introduktion på video. Super grundig video introduktion til jQuery.
jQuery syntaks begynder tutorial. En lidt teksttung, men grundig introduktion til den mest basale jQuery syntaks.
Working with jQuery. En introduktion til jQueryfra IBM’s developer site. Tak til Tommy Raun for linket.
Flere jQuery tutorials og ressourcer
jQuery programmering, kodning og syntaks. Artikel fra Smashing Magazine, der især omhandler syntaks og bedst practice for jQuery programmering.
25 jQuery navigation tutorials. En række tutorials der er rettet mod brugen af jQuery i menuer og anden navigation.
25 tips til jQuery. Tips til hvordan du forbedrer din jQuery programmering. Optimer hastighed, arbejdsgange, syntaks og mange eksempler på løsning af praktiske opgaver.
25 jQuery tutorials til webdesign. Tutorials til webdesign relevante funktioner, som formular håndtering, validering, ikoner. Også flere grafiske tutorials.
jQuery cheatsheet. Et cheatsheet der indeholder de mest brugte jQuery kommandoer, funktioner og genveje.
jQuery plugins
jQuery har en god plugin dokumentation, og der findes allerede mange plugins til Jquery. Mange af de mere populære plugins er grafik plugins til jQuery.
Her er der masser af jQuery plugins. De fleste plugins er grafiske. Fek.s masser af slideshows, gallerier, tag clouds, og mange andre grafiske effekter. Men der findes også mere praktiske jQuery plugins som f.eks. validerer formularer
37 inspirerende jQuery plug-ins
25 jQuery plug-ins til menu og navigation
14 jQuery plug-ins til billeder
Komplet liste over jQuery plug-ins
Anden jQuery inspiration
Hvis du selv bruger jQuery på dit site eller kender nogle gode ressourcer eller eksempler, så sig endelig til. Så kan du få et link til din side i dette afsnit. 🙂
Jeg ligger i al ubeskenhed selv ud med: Portfolio med Lightbox. Jeg bruger lightbox librariet som er en udvidelse til jQuery på mit portfolio. Lightbox er et billedfremvisnings library.
Læsernes tips og kommentarer til jQuery
Tak til alle der har bidraget. 🙂
Kim Andersen har givet det tip, at man kan lade Google opbevare jQuery scriptet. Måske man så kan være heldig at brugerens browser har cachet scriptet, og siden dermed loader hurtigere.
Det gøres ved at ændre sin source til js-filen fra eks.:
src=”js/jquery-1.3.1.min.js”
til:
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”
Konrad har peget på et rigtig interessant blogindlæg, der diskuterer jQuery og Prototype fordele og ulemper:
Why I still prefer Prototype to jQuery
Tommy Raun skriver at den største fordel ved Jquery er at funktionerne virker på (næsten) alle platforme. Mange problemer med forskelle javascript versioner er løst (for IE/Firefox/Opera).
Se også min ressource post om MooTools frameworket.
7 Responses to “jQuery”
By Kim Andersen on feb 3, 2009
Dejlig samling du har fået lavet her Niels.
Et lille tip, der kan gøre sites med jQuery lidt hurtigere (måske).
I stedet for at bruge en lokal jQuery-fil på serveren som brugeren skal downloade når de kommer ind på dit site, så kan man bruge den version som ligger på Google’s server. Det vil sige at brugeren med stor sandsynlighed allerede har jquery-filen liggende i sin cache, hvis de har været på besøg på andre sites hvor denne fil blev hentet, og derfor ikke skal bruge tid på at hente de 54kb, som jQuery-1.3.1-min fylder.
Det gøres ved at ændre sin source til js-filen fra eks.:
src=”js/jquery-1.3.1.min.js”
til:
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”
By konrad on feb 5, 2009
Man burde måske også overveje, om jQuery virkelig bør være valget, ift prototype. Læs f.eks http://blog.thinkrelevance.com/2009/1/12/why-i-still-prefer-prototype-to-jquery
En redelig gennemgang, der demonstrerer hvordan der er logiske/syntaktiske problemer med jQuery, og at det kan være svært at “vokse” med..
By Niels on feb 5, 2009
@Kim. Tak ska’ du ha’, Kim. Det er et godt tip.
Man skal dog huske på, at jQuery librariet ikke fylder ret meget mere end en halvvissen jpg-fil. Og hvis du buger Google er du blevet afhængig af at 2 servere svarer hurtigt.
Så hvis man er efter perfomance er der måske nogle steder, der er mere oplagte at gå efter i sømmene. Tjek f.eks. http://developer.yahoo.com/performance/rules.html
@Konrad. Interessant artikel.
Det er meget let at finde jQuery tilhængere, så spændende at se en anderledes vinkel på det.
Jeg har smidt begge jeres tips op i selve blogindlægget. Takker igen. 🙂
By Tommy Raun on feb 6, 2009
Du mangler efter min mening den største fordel: Funktionerne virker på (næsten) alle platforme. Mange problemer med forskelle javascript versioner er løst (for IE/Firefox/Opera).
Et godt link er iøvrigt nedenstående:
http://www.ibm.com/developerworks/web/library/wa-jquery1/
By Niels on feb 17, 2009
Opdateret med en par nye jQuery ressourcer.