Er zijn twee versies van jQuery:
Production: deze versie is verkleind en gecomprimeerd en dus geschikt voor het gebruik op webpagina's op het internet.
Development: deze versie wordt gebruikt om te testen en verder te ontwikkelen (leesbare JavaScript code).
Beide versies kun je vanaf jquery.com downloaden.
Let op in welke map je de bibliotheek in uw sitestructuur opslaat (in dezelfde map als de HTML pagina waarin je jQuery gebruikt, zorgt voor de minste kopzorgen).
Om jQuery te kunnen gebruiken, moet je de jQuery bibliotheek downloaden en in de webpagina opnemen.
De jQuery bibliotheek bestaat uit één JavaScript bestand en voeg je met de volgende code in de head tag toe aan een webpagina.
<script src="jquery.js"></script>
Het type="text/javascript" attribuut is niet verplicht in HTML5. JavaScript is de standaard script taal in HTML5 en alle moderne browsers.
Als je jQuery niet wilt downloaden en op uw site plaatsen, kan je gebruik maken van een CDN (Content Delivery Network) zoals Google en Microsoft.
De code om jQuery via Google te gebruiken:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Om de meest recente versie van jQuery via Google te gebruiken, verwijder je een gedeelte van de versie aanduiding. Bij het gebruik van versie 1.8 zal Google de meest recente versie uit de 1.8 reeks doorsturen (1.8.0, 1.8.1, 1.8.2, enz.). Bij het gebruik van versie 1 zal Google de meest recente versie in de 1 reeks doorsturen (van 1.1.0 tot 1.9.9).
De code om jQuery via Microsoft te gebruiken:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js"></script>
Het gebruik van een CDN heeft als grote voordeel, dat veel gebruikers reeds jQuery via een andere site hebben gedownload. De jQuery bibliotheek zit daardoor in de cache van uw browser en wordt dus geen tweede keer gedownload. M.a.w. uw webpagina werkt sneller. Daarnaast hebben zowel Google als Microsoft overal op de wereld webservers staan, waardoor de gebruiker de bibliotheek steeds van een server bij hem of haar in de buurt ophaalt.
Het volgende voorbeeld demonstreert de jQuery hide() methode. Bij het klikken op een knop, worden alle alinea's (<p> tags) verborgen.
<!DOCTYPE html> <html> <head> <title>jQuery voorbeeld</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>jQuery voorbeeld</h2> <p>Klik op onderstaande knop.</p> <p>Hou daarbij deze twee alinea's in het oog.</p> <button>Klik hier</button> </body> </html>Weergeven