Voorkennis

Voor je begint met het aanleren van jQuery, heb je een basiskennis van de volgende onderdelen nodig:

  • HTML
  • CSS
  • JavaScript

Wat is jQuery?

jQuery is een lichtgewicht, “write less, do more”, JavaScript bibliotheek. Het doel van jQuery is om het gebruik van JavaScript op uw webpagina's te vereenvoudigen. Zo pakt jQuery veel voorkomende taken, waarvoor meerdere regels JavaScript code nodig is, samen tot methoden in één enkele regel JavaScript code. jQuery vereenvoudigt het gebruik van complexe JavaScript taken, zoals AJAX en DOM manipulaties.

De HTML-DOM (Document Object Model)

Wanneer een webpagina wordt geladen, de browser creëert een D ocument O bject M odel van de pagina.

De HTML DOM model is opgebouwd als een boom van objecten :

De HTML DOM is een API (Programming Interface) voor JavaScript :

  • JavaScript kan / wijzigen / verwijderen HTML-elementen toe te voegen
  • JavaScript kan / wijzigen / verwijderen HTML attributen toe te voegen
  • JavaScript kan / wijzigen / verwijderen van CSS-stijlen toe te voegen
  • JavaScript kan reageren op HTML events
  • JavaScript kan toevoegen / wijzigen / verwijderen HTML events

De jQuery bibliotheek heeft de volgende mogelijkheden:

  • HTML/DOM manipulaties
  • CSS manipulaties
  • HTML events verwerking

Waarom jQuery gebruiken?

Er bestaan naast jQuery verschillende alternatieve JavaScript bibliotheken, jQuery blijkt voor het ogenblik de meest populaire en meest uitbreidbare bibliotheek (grootste aantal plug-ins). Grote bedrijven zoals Google, Microsoft, IBM en Netflix gebruiken jQuery op hun sites.

Daar elke browser (en versie) in bepaalde gevallen verschillend reageert, probeert het jQuery team deze browser specifieke gedragingen op te vangen, waardoor met jQuery geschreven JavaScript code op alle browsers op een gelijkaardige manier werkt.

jQuery downloaden

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).

jQuery invoegen

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.

CDN alternatief

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.

Voorbeeld

Het volgende voorbeeld demonstreert de jQuery hide() methode. Bij het klikken op een knop, worden alle alinea's ( 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>

De jQuery syntaxis is ontwikkeld om HTML tags te selecteren en er acties op uit te voeren.

Syntaxis

jQueryObject = $(kiezer).actie()

Het dollarteken is het sein dat je jQuery wilt gebruiken.

De kiezer zoekt naar een HTML tags.

De actie wordt op de gevonden HTML tags uitgevoerd.

De variabele jQueryObject bevat na het uitvoeren van de jQuery actie het object waarop de actie werd uitgevoerd (gebruikte methode), handig om later nog jQuery acties op dezelfde HTML tag uit te voeren:

jQueryObject.actie()

Voorbeelden

$(this).hide() - verbergt de huidige tag.	

$("p").hide() - verbergt alle <p> tags.	

$(".test").hide() - verbergt alle tags met class="test".	

tweedeActie = $("#test").hide() - verbergt de tag met het id="test" en bewaar het jQuery object voor later gebruik.

tweedeActie.show() – toont alle tags opgeslagen in het jQuery object tweedeActie (in ons voorbeeld de tag met het id="test").

Het Document Ready event

Alle jQuery methoden in ons voorbeeld staan in het document ready event:

$(document).ready(function(){
  // hier worden jQuery methoden gebruikt...
});

Dit voorkomt het uitvoeren van jQuery code voordat de webpagina volledig is geladen (klaar is).

Door het wachten op de webpagina tot hij klaar is, kun je de JavaScript code in de head tag van uw webpagina opnemen.

Sommige acties mislukken indien de webpagina nog niet volledig geladen is:

  • het verbergen van een tag dat nog niet bestaat
  • het opvragen van de afmetingen van een afbeelding die nog niet geladen is.
  • jQuery bevat een verkorte syntaxis voor het document ready event:
$(function(){
  // hier worden jQuery methoden gebruikt...
});

jQuery kiezers (selectors) selecteren HTML tags.

De jQuery kiezers kunnen HTML tags selecteren op basis van hun id, klasse, attributen, attribuut waarden , enz. De kiezer is gebaseerd op bestaande CSS kiezers aangevuld met eigen kiezers.

Alle kiezers in jQuery beginnen met een dollarteken en staat tussen haken: $().

De tag kiezer

De jQuery tag kiezer selecteert HTML tags op basis van hun tagnaam.

De code om alle <p> tags op een webpagina te selecteren:

$("p")

De #id kiezer

De jQuery #id kiezer gebruikt het id attribuut van HTML tags om tags te selecteren.

Id's zijn uniek op een webpagina. De #id kiezer wordt dus gebruikt om één unieke tag op een webpagina te selecteren.

De code om de tag met het id test te selecteren:

$("#test")

De .klasse kiezer

De jQuery klasse kiezer selecteert HTML tags met een specifieke CSS klasse.

De code om de tags met de klasse test te selecteren:

$(".test")

Nog meer jQuery kiezers

Een volledig overzicht van alle jQuery kiezers vind je op http://www.w3schools.com/jquery/jquery_ref_selectors.asp.

De behandeling van events (gebeurtenissen op de webpagina) behoren tot de basisfuncties van jQuery.

De behandeling van events gebeurt met behulp van event handlers (acties of methoden die uitgevoerd worden na het opmerken van een gebeurtenis op een webpagina).

Meestal worden de event handler methoden in de head tag van de webpagina geplaatst.

<head>
<script src="jquery.js"> </script>
<script>
    $(document).ready(function(){
      $("button").click(function(){
	$("p").hide();
      });
    });
</script>
</head>

Het voorbeeld zorgt dat bij het klikken op een button tag de alinea tags verborgen worden.

Syntaxis

$(kiezer).event(function(){
  // bij het event uit te voeren JavaScript code
});

jQuery events

Een volledig overzicht van jQuery events staat op http://www.w3schools.com/jquery/jquery_ref_events.asp

jQuery hide() en show()

Met de jQuery hide() en show methoden kunnen HTML tags verborgen worden en terug zichtbaar worden.

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});

Syntaxis:

$(kiezer).hide(snelheid, terugroep);
$(kiezer).show(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag verdwijnt of verschijnt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het verbergen of verschijnen wordt uitgevoerd.

Voorbeeld met het argument snelheid:

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()

Om met jQuery te schakelen tussen de hide() en show() methoden gebruik je de toggle() methode.

De zichtbare tags verdwijnen, terwijl de onzichtbare tags verschijnen.

$("button").click(function(){
  $("p").toggle();
});

Syntaxis:

$(kiezer).toggle(snelheid, terugroep);

Fading

jQuery heeft acties om HTML tags geleidelijk te laten verdwijnen of op te laten komen.

jQuery heeft de volgende fade methoden:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() methode

De jQuery fadeIn() methode wordt gebruikt om HTML elementen geleidelijk op te laten komen.

Syntaxis

$(kiezer).fadeIn(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag verschijnt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het verschijnen wordt uitgevoerd.

Voorbeeld met het argument snelheid:

$("#fotopaneel").fadeIn("slow");

jQuery fadeOut() methode

De jQuery fadeOut() methode wordt gebruikt om HTML elementen geleidelijk te laten verdwijnen.

Syntaxis

$(kiezer).fadeOut(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag verdwijnt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het verbergen wordt uitgevoerd.

Voorbeeld met het argument snelheid:

$("#fotopaneel").fadeOut("slow");

jQuery fadeToggle() methode

De jQuery fadeToggle() methode wordt gebruikt om zichtbare HTML elementen geleidelijk te laten verdwijnen en verborgen HTML elementen geleidelijk op te laten komen.

Syntaxis

$(kiezer).fadeToggle(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag verdwijnt of opkomt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het verbergen of opkomen wordt uitgevoerd.

Voorbeeld met het argument snelheid:

$("#fotopaneel").fadeToggle("slow");

jQuery fadeTo() methode

De jQuery fadeTo() methode wordt gebruikt om HTML elementen geleidelijk naar een bepaalde dekkingsgraad te laten evolueren.

Syntaxis

$(kiezer).fadeTo(snelheid, dekking, terugroep);
		
		

Het verplichte argument snelheid bepaald de snelheid waarmee de tag verdwijnt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het verplichte argument dekking (opacity) bepaald de einddekkingsgraad. De dekking heeft een waarde tussen 0 (geen dekking = volledig doorzichtig) en 1 (maximale dekking = volledig ondoorzichtig).

Het facultatieve argument terugroep is de naam van een functie die na het verbergen wordt uitgevoerd.

$("#fotopaneel").fadeTo("slow", 0.4);

HTML eigenschap aanpassen

De jQuery attr() methode wordt gebruikt om HTML eigenschappen (attributen) van tags aan te passen.

Het volgende voorbeeld past de koppeling (href eigenschap) van een a tag met het id #cursus aan:

$("#cursus").attr("href","http://webdesign.pindanet.be");

Sliding

De jQuery slide methoden worden gebruikt om tags uit- en in te vouwen.

jQuery slideDown() methode

De jQuery slideDown() methode wordt gebruikt om tags uit te vouwen.

Syntaxis

$(kiezer).slideDown(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag uitvouwt. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het uitvouwen wordt uitgevoerd.

$("#paneel").slideDown();

jQuery slideUp() methode

De jQuery slideUp() methode wordt gebruikt om tags in te vouwen.

Syntaxis

$(kiezer).slideUp(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag wordt ingevouwen. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het invouwen wordt uitgevoerd.

$("#paneel").slideUp();

jQuery slideToggle() methode

De jQuery slideToggle() methode wordt gebruikt om niet zichtbare tags uit te vouwen en zichtbare tags in te vouwen.

Syntaxis

$(kiezer).slideToggle(snelheid, terugroep);

Het facultatieve argument snelheid bepaald de snelheid waarmee de tag wordt in- of uitgevouwen. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het in- of uitvouwen wordt uitgevoerd.

$("#paneel").slideToggle();

jQuery css() methode

De css() methode vraagt of past een CSS eigenschap van de geselecteerde tags op of aan.

Een CSS eigenschap opvragen

Syntaxis

css("css-eigenschap");

Het volgende voorbeeld vraagt de CSS achtergrondkleur van de alinea-tags op:

$("p").css("background-color");

Een CSS eigenschap aanpassen

Syntaxis

css("css-eigenschap","waarde");

Het volgende voorbeeld geeft alle alinea-tags een gele achtergrondkleur:

$("p").css("background-color","yellow");

Meerdere CSS eigenschappen aanpassen

Syntaxis

css({"css-eigenschap":"waarde","css-eigenschap":"waarde",...});

Het volgende voorbeeld geeft alle alinea-tags een gele achtergrond en een dubbele lettergrootte:

$("p").css({"background-color":"yellow","font-size":"200%"}); 

Opborrelende gebeurtenissen

Bij het klikken op een tag wordt geeft de browser het klikken door aan alle bovenliggende tags. Een voorbeeld: als je klikt op een knop in een formulier klikt, wordt het onclick event niet alleen aan de knop doorgegeven, maar ook aan het formulier (form tag) waarin de knop staat en de pagina (body tag) waarin het formulier staat.

Dit stoort niet zolang er geen onclick functies gestart worden die elkaar kunnen storen.

Het opborrelen van een onclick event op een p tag naar een hogere tag kun je met de volgende JavaScript code blokkeren:

$("p").click(function(event){
  event.stopPropagation();
  ... het vervolg van de onclick functie ...
});

De functie event.stopPropagation() stopt het doorgeven van de gebeurtenis (event). Let op de variabele event die als argument met de functie wordt meegegeven.

De animate() methode

Syntaxis

$(kiezer).animate({CSS_eigenschappen}, snelheid, terugroep);

Het argument CSS_eigenschappen bevat de te animeren CSS eigenschap(pen).

Het facultatieve argument snelheid bepaald de snelheid waarmee animatie wordt uitgevoerd. Je gebruikt als waarden slow, fast of een tijd in milliseconden.

Het facultatieve argument terugroep is de naam van een functie die na het voltooien van de animatie wordt uitgevoerd.

Onderstaande voorbeeld verplaatst een div tag naar rechts tot de CSS eigenschap left 250 px bereikt:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title> Animatie </title>
<script src="jquery.js"> </script>
<script>
    $(document).ready(function(){
      $("button").click(function(){
	$("div").animate({left:'250px'});
      });
    });
</script>
</head>
<body>
<button> Animatie starten</button>
<p>Standaard hebben alle HTML tags een statische positie en kunnen ze niet verplaatst worden.
    Om de positie te manipuleren, moet je de CSS eigenschap position van de tag aanpassen naar relative, fixed of absolute! </p>
<div style="background:#98bf21; height:100px; width:100px; position:absolute;"> </div>
</body>
</html>

Meerdere eigenschappen animeren

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

Opmerkingen

De namen van de CSS eigenschappen gebruiken de camel-case schrijfwijze. M.a.w. in de animate() methode gebruik je paddingLeft voor de CSS eigenschap padding-left, marginRight voor margin-right, enz.

Kleurenanimatie zit niet in de standaard jQuery bibliotheek. Voor kleuranimaties heb je de Color Animation plugin nodig (deze kun je downloaden van jQuery.com).

Relatieve waarden

Het gebruik van relatieve animatiewaarden laat toe animaties de maken die oorspronkelijke CSS eigenschappen aanpassen (laten toenemen += of laten afnemen -=).

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Voorgedefinieerde waarden

De voorgedefinieerde animatie waarden zijn: show, hide en toggle.

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

Wachtrij

Animaties op één en dezelfde tag kunnen in een wachtrij geplaatst worden om na elkaar uitgevoerd te worden.

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

Het volgende voorbeeld verplaatst een div tag naar rechts en vergroot nadien de tekst:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

Tip

Gebruik een tweede gelijkaardige animate() methode om in de animatie een pauze in te lassen:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

Om animaties op verschillende tags na elkaar uit te voeren, maak je gebruik van een terugroepfunctie:

Syntaxis

$(kiezer).animate({CSS_eigenschappen}, snelheid, function(){
  $(kiezer).animate({CSS_eigenschappen}, snelheid);
});

De tweede animate() methode wordt pas uitgevoerd na het voltooien van de eerste animate() methode. Daarbij mag de kiezer van de twee animate() methoden verschillen.