10. jQuery

jQuery is een populaire JavaScriptbibliotheek (library). De bedoeling ervan is om de JavaScriptcode op je webpagina's te vereenvoudigen, o.a. door vele regels JavaScript voor bv. een animatie samen te vatten tot één regel.

jQuery wordt voornamelijk gebruikt om

10.1. jQuery op je website

Om te beginnen download je de development version van jquery.com/download.
Zet ze in een handige (sub)map, pas de naam aan tot jquery.js en dan kan je ernaar refereren vanuit de head:
<script src="[submap]/jquery.js"></script>

Is je website klaar, dan heb je twee mogelijkheden:

En dan kan je een eerste script uitproberen; bekijk de broncode van dit voorbeeld.

In plaats van een anomieme functie kan je ook een benoemde gebruiken:
$(document).ready(toonHelloWorld);
function toonHelloWorld(){
  $('#output').html("<h1>Hello world</h1>");
}

Zet best altjd de code binnen of na een $(document).ready(), dan ben je zeker dat de pagina volledig geladen is vooraleer de JavaScript-code geladen en uitgevoerd wordt.

10.2. Selectors

In plaats van document.getElementById("ID") biedt jQuery je verscheidene handige methoden om gegevens te selecteren.

De basis syntax is: $(selector).action();
waarbij selector kan zijn:

SelectorVoorbeeldBetekenis
HTML-element$("a")alle links, d.w.z. elementen <a>
#ID$("#test")het element met ID "test"
.class$(".donker")alle elementen met class "donker"
*$("*")alle HTML-elementen
this$(this)het geselecteerde HTML-element
combinatie$("section.links")alle <section>-elementen met class "links"
 $("tr:odd")alle oneven rijen in een tabel (even = tr:even)
afstammeling$("div a")alle links (elementen <a>) die in een <div> staan
 $("ul li:first")het eerste <li>-element van de eerste <ul>
attribuut$("[href]")alle elementen met een attribuut href=
 $("input[name]")alle input-elementen met attribuut name=
 $("input[name='post']")het input-element met name="post"

Komt het je bekend voor? Dit is inderdaad grotendeels dezelfde manier als de CSS-selectors.

10.3. Event handling

Hieronder een overzicht van veelgebruikte events:

$(document).ready()als de pagina geladen is
$(window).resize()als het browservenster van formaat veranderd wordt
$(window).scroll() of $(element).scroll()de gebruiker scrollt in het venster of in een HTML-element
$(element).click()klik op het HTML-element
$(element).dblclick()dubbelklik op het HTML-element
$(element).focusin()de gebruiker klikt in/op het element of activeert het met Tab
$(element).focusout()het element verliest de focus
$(element).hover()de muiscursor beweegt over het element; combinatie van mouseenter() en mouseleave()
$(element).mousedown()een muisknop wordt ingedrukt op een element
$(element).mouseup()een muisknop wordt losgelaten boven een element
$(element).mouseenter()de muiscursor komt op het element, begint erover te bewegen
$(element).mouseleave()de muiscursor verlaat het element
$(element).mouseover()de muiscursor komt op het element of een kindelement
$(element).mouseout()de muiscursor verlaat het element of een kindelement
$(element).mousemove()de muiscursor beweegt boven het element

Specifiek voor formulierelementen:

$(input).focus()een inputveld krijgt de focus
$(input).blur()het inputveld verliest de focus
$(select).change()de waarde van het element werd aangepast; werkt met <input>, <select> en <textarea>
$(input).keydown()een toets wordt ingedrukt in een inputveld
$(input).keypress()gebeurt net na keydown()
$(input).keyup()een toets wordt losgelaten in een inputveld
$(input).select()de gebruiker selecteert tekst in een tekstveld of een textarea
$("form").submit()het formulier wordt verstuurd, er wordt op de submit-knop geklikt

Tussen de haakjes komt dan ofwel een functienaam ofwel een anonieme functie:
$(selector).action( function() {
  //actie(s);
});

Bovendien kan je met on() één of meer acties aan een element binden.
a) één actie, bv. verberg het <p>-element als erop geklikt wordt:
$("p").on("click", function(){
  $(this).hide();
});

b) Meer acties, bv. verschillende opmaak:
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

10.4. Interactie met DOM

jQuery bevat verscheidene methoden om elementen uit de HTML-DOM aan te spreken en aan te passen. We bekijken weer de meest gebruikte.

Allereerst gegevens opvragen of aanpassen:

$(element).text()geef de waarde van een HTML-element
$(element).text("waarde")geef het HTML-element een nieuwe waarde
$(element).html()geef de waarde van een HTML-element, inclusief kindelementen
$(element).html("tekst")geef het HTML-element een nieuwe waarde, inclusief HTML-tags
$(formelement).val()geef de waarde uit een formulierelement
$(formelement).val("waarde")geef het formulierelement een nieuwe waarde
$(element).attr("attrNaam")geef de waarde uit het gevraagde attribuut
$(element).attr("attrNaam","waarde")geef het attribuut de opgegeven waarde

Ook is het mogelijk om HTML-elementen toe te voegen:

$(element).append("tekst")voegt tekst toe aan het element of (met tags erbij) voegt een element toe achter het bestaande
$(element).prepend("tekst")voegt tekst toe vóór het element of (met tags erbij) voegt een element toe vóór het bestaande

In plaats van append() kan je ook after() gebruiken en before() in plaats van prepend().

Of wil je elementen verwijderen?

$(element).remove()verwijdert het element en alle kindelementen
$(element).remove(".test, .demo")verwijder het element als het behoort tot class test of demo
$(element).empty()maak het element leeg, d.w.z. verwijder alle kindelementen

Uiteraard kan je ook de stijl aanpassen:

$(element).css("eigenschap")geef de waarde van "eigenschap"
$(element).css("eigenschap","waarde")geef eigenschap de nieuwe waarde
$(element).addClass("classNaam")geef het element de (bestaande) class classNaam
$(element).removeClass("classNaam")verwijder class classNaam van het element
$(element).toggleClass("classNaam")voeg ofwel class classNaam toe aan element of verwijder ze

Je kan ook meer CSS-eigenschappen tegelijk instellen, bv. voor alle elementen <p>:
$("p").css({"background-color": "yellow", "font-size": "200%"});

Verder is het belangrijk om de instellingen voor hoogte en breedte goed te begrijpen:

10.5. jQuery-effecten

Met jQuery is het erg eenvoudig om verscheidene animaties op elementen toe te passen.
Elementen laten verdwijnen en verschijnen bijvoorbeeld: klik hier.

In plaats van hide() en show() kan je ook functie toggle() gebruiken, om te wisselen tussen verdwijnen en verschijnen.
Bovendien kan je een vertraging toevoegen: "slow", "fast" of aantal milliseconden.

Een variant op verschijnen of verdwijnen met vertraging is het effect fade in/out..
Klik hier voor een voorbeeld van langzaam laten verschijnen.

De mogelijkheden zijn:

fadeIn()langzaam laten verschijnen
fadeOut()langzaam laten verdwijnen
fadeToggle()wissel tussen fadeIn en fadeOut
fadeTo(snelheid, doorzichtigheid)vervaag tot een opgegeven doorzichtigheid tussen 0 en 1

Je kan telkens een snelheid toevoegen, nl. "slow", "fast" of een waarde in milliseconden.

Nog een manier van verschijnen is het element naar beneden laten openvallen – en dan weer naar boven toe dichtvouwen: slideDown() en slideUp().

slideDown()laat openvallen
slideUp()vouw naar boven toe
slideToggle()wissel tussen openvallen en toevouwen

Ook hier kan je telkens een snelheid toevoegen: "slow", "fast" of een waarde in milliseconden.

En dan is er nog method animate() om CSS-eigenschappen te animeren:
$(element).animate({CSSeigenschap: "waarde"}, snelheid);
De snelheid is optioneel.

Je kan zowat alle CSS-eigenschappen animeren, behalve color.
Bij eigenschappen die uit twee woorden bestaan, gebruik je camelCase, bv: paddingLeft

Je bent ook niet beperkt tot één effect, je kan er verscheidene na elkaar laten uitvoeren

Een voorbeeld van chaining: maak de paragraaf eerst rood, vouw hem dan toe en vervolgens open.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Nuttige links: