jQuery Introduction

De jQuery-bibliotheek kan met een eenvoudige markering aan een webpagina worden toegevoegd.

Kenmerken van de jQuery-bibliotheek

jQuery is een JavaScript-functiebibliotheek.

De jQuery-bibliotheek bevat de volgende kenmerken:

  • Selectie van HTML-elementen
  • Bewerking van HTML-elementen
  • CSS-bewerking
  • HTML-evenfuncties
  • JavaScript-effecten en animaties
  • Bovenlopen en wijzigen van HTML DOM
  • AJAX
  • Utils

Voeg de jQuery-bibliotheek toe aan uw pagina

De jQuery-bibliotheek bevindt zich in een JavaScript-bestand en bevat alle jQuery-functies.

Je kunt jQuery toevoegen aan je webpagina met de volgende markering:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Let op, de <script> tag moet zich bevinden in het <head> gedeelte van de pagina.

Basisondersteuning jQuery voorbeeld

Het volgende voorbeeld demonstreert de jQuery hide() functie, die alle <p> elementen in het HTML-document verbergt.

Voorbeeld

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Dit is een kop</h2>
<p>Dit is een paragraaf.</p>
<p>Dit is een ander paragraaf.</p>
<button type="button">Klik me</button>
</body>
</html>

Probeer het zelf

Download jQuery

Er zijn twee versies van jQuery beschikbaar voor download: een gereduceerde versie en een ongecomprimeerde versie (voor debuggen of lezen).

Beide versies zijn beschikbaar jQuery.com Downloaden.

Bibliotheek vervanging

Google en Microsoft bieden beide goede ondersteuning voor jQuery.

Als je niet wilt dat je jQuery-bibliotheek op je computer wordt opgeslagen, kun je de CDN jQuery-kernbestanden van Google of Microsoft laden.

Gebruik Google's CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Gebruik Microsoft's CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>