24/06/11

jQuery voor beginners

jQuery is een snelle JavaScript library waarmee je met minder code eenvoudige tot geavanceerde JavaScript applicaties kan programmeren. jQuery is een zegen voor de JavaScript programmeur. Om het met de woorden van John Resig (oprichter van jQuery) te zeggen, “jQuery makes your life a lot saner”, ofwel “jQuery maakt je leven veel gezonder”. Hiermee bedoelt hij dat JavaScript code geschreven met hulp van jQuery veel eenvoudiger te lezen en aan te passen is dan klassieke vaak onoverzichtelijke JavaScript code waardoor het plezier van het ontwikkelen bevordert wordt. jQuery code is zelfs haast leesbaar voor een niet-programmeur.

De jQuery library is een bibliotheek met handige functies waarmee je elementen kan selecteren in het DOM (Document Object Model) om ze dan te manipuleren. Een groot voordeel van jQuery is dat het cross-browser compatibel is. Dit wil zeggen, dat als we in jQuery programmeren onze (foutloze) code zal werken in alle moderne webbrowsers.

Voordelen van jQuery:

  • Eenvoudig door de DOM navigeren
  • Cross-browser compatibel event handling
  • Animatie
  • AJAX interactie met de server
  • Het is snel!

jQuery downloaden

Eerst moeten we de laatste versie van jQuery downloaden op jQuery.com of gebruik maken van de AJAX API van Google. Als je de jQuery library download dien je deze opnieuw te uploaden naar je webserver (bv.via ftp) en vervolgens te laden op elke webpagina waar je jQuery wenst te gebruiken. Doorgaans wordt jQuery ingevoegd in de header van je webpagina.

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

Je kan ook jQuery laden van de servers van Google door de onderstaande code in te voegen op je webpagina:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Let erop dat jQuery geladen wordt VOOR andere JavaScript code waar je de functies van jQuery aanroept. Anders krijg je de foutmelding dat het jQuery object niet bestaat, vermits het nog niet geladen is door de JavaScript engine.

Op het moment van schrijven was jQuery 1.6.1 de laatste versie. Kijk op de website van jQuery, of op Google voor de laatste versie: http://code.google.com/apis/libraries/devguide.html#jquery

Wachten tot de DOM geladen is

Net als in klassiek JavaScript moeten we eerst wachten tot het DOM (de HTML met de verschillende elementen) is geladen voor we kunnen beginnen met de elementen te bewerken. Als we echter elementen in JavaScript aanroepen die nog niet geladen zijn, krijgen we foutmeldingen. Deze functie wordt voorzien door jQuery door middel van de volgende code:

<script type="text/javascript">
$(document).ready(function() {
 
     // Code comes here
 
});
</script>

Als je werkt met verschillende JavaScript (.js) documenten moet je deze code in elk document opnieuw aanroepen om foutmeldingen te voorkomen.

Elementen selecteren

jQuery maakt het de JavaScript ontwikkelaar heel makkelijk om HTML elementen te selecteren om ze nadien te manipuleren. jQuery maakt hierbij gebruik van CSS selectors. Je kan dus op dezelfde manier HTML elementen aanroepen met jQuery net zoals je dit in CSS doet. Geweldig, niet?

Voorbeeld:

$(‘#registration-form’)

Met het dollarteken ‘$’ laat je de JavaScript engine van de webbrowser weten dat we de jQuery library aanroepen. Met de CSS selector tussen (‘ ’) roepen we met jQuery een element uit het DOM aan. Omdat het hier om een ID gaat weten we dat we slechts één element aanroepen. Indien we met CSS classes werken of bv. afbeeldingen op de webpagina selecteren kan het goed zijn dat we een hele partij elementen aanroepen.

Voorbeeld:

$(‘#image-gallery img’)

Met deze code hebben we net alle afbeeldingen (img) in een #image-gallery aangeroepen. Deze wordt terug gegeven in een object. Als we vervolgens deze elementen gaan manipuleren zal de functie (die nog volgt) worden toegepast op alle afbeeldingen in onze gallerij.

We kunnen met jQuery echter ook één specifieke afbeelding selecteren op twee verschillende manieren:

$(‘#image-gallery img:eq(2))

OF

$(‘#image-gallery img’).eq(2)

Bij het eerste voorbeeld maken we nog steeds gebruik van onze selector. Bij het tweede voorbeeld maken we reeds gebruik van een jQuery functie. Eerst selecteren we alle afbeeldingen uit onze #image-gallery met onze selector en nadien roepen we de derde foto aan. Dit is de derde foto omdat jQuery (en JavaScript) zero-based is. Met andere woorden 0, 1, 2, … De integer zelf noemen we de index.

jQuery functies aanroepen

Met louter elementen te selecteren zijn we niet veel natuurlijk. We willen immers onze elementen manipuleren om zo onze webpagina dynamisch te maken voor onze gebruikers. Zoals we in ons laatste voorbeeld reeds konden zien wordt de selector en de functie gescheiden met een punt. Laten we als voorbeeld een HTML element met een hoogte en breedte van 250px, een rode achtergrondkleur en een border van 2px meteen na het laden van de pagina verdwijnen in een tijdspanne van 3 seconden. De eerste stap is om dit element te selecteren.

$(‘#red-box’)

Vervolgens plakken we de functie fadeOut() eraan.

$(‘#red-box’).fadeOut();

Standaard verdwijnt de box in een tijdspanne van 400 milliseconden. Als we dit effect in een tijdspanne van 3 seconden willen laten gebeuren, dienen we 3000 (milliseconden) als eerste parameter mee te geven met onze fadeOut() functie.

$(‘#red-box’).fadeOut(3000);

De tweede parameter die we kunnen meegeven aan deze functie is een callback functie. Dit wil zeggen, een functie die pas zal worden uitgevoerd nadat onze fadeOut() functie volledig is uitgevoerd.

$(‘#red-box’).fadeOut(3000, function() {
 
     alert(‘The box is gone’);
 
});

Live demo van deze oefening

Je kan met jQuery echter veel meer doen dan elementen te laten verdwijnen en verschijnen. Je kan bv. CSS waarden manipuleren door middel van de css() functie. Of met AJAX gegevens naar de server sturen om vervolgens via een callback feedback te geven aan onze bezoekers.

Een volledige lijst van functies vind je op de website van jQuery: jQuery reference

Events

Events zorgen voor de interactie tussen de gebruiker en je website. Events kunnen in de vorm zijn van muisklik, toetsenbordklik, muisscroll, browserscherm vergroten/verkleinen, … jQuery maakt het ons ook makkelijk om met deze events te werken. Als we bv. elke klik willen opvangen op een cel van een HTML tabel kunnen we dit doen met de volgende eenvoudige code:

$(‘table td’).click(function() {
 
     alert(‘you clicked a cell’);
 
});

Live demo van deze oefening

Om het verschil te zien met klassiek JavaScript, geef ik de code om hetzelfde doel te bereiken ook even mee:

window.onload = function () {
 
     var td = document.getElementsByTagName('td');
 
     for ( var i = 0; i < td.length; i++ ) {
 
          // Internet Explorer
 
          if ( BrowserDetect.browser === 'Explorer' ) {
 
               td[i].attachEvent('onclick', function() {
 
                    alert('you clicked a cell in Internet Explorer');
 
               });
 
          } else {
 
               // Non Internet Explorer browsers
 
               td[i].addEventListener('click', function() {
 
                    alert('you clicked a cell in a non IE browser');
 
               }, false);
 
          }
 
     }
 
}

Live demo van deze oefening

Zelfs deze code is nog niet voldoende. Zoals je merkt maakt IE gebruik van de functie attachEvent() om een event aan een functie te binden. De W3C standaard is echter addEventListener. Je merkt dat we eerst het type webbrowser van de gebruiker moeten bepalen voor we de juiste event hander kunnen binden aan het ‘click’ event. Ik maak hierbij doorgaans gebruik van de BrowserDetect functie van Peter Paul Koch: http://www.quirksmode.org/js/detect.html

jQuery doet dit dus allemaal voor ons. Je begrijpt nu waarschijnlijk waarom jQuery de ontwikkelingstijd van een JavaScript applicatie drastisch vermindert. Ik gebruik het vrijwel altijd, zelfs bij kleine projecten.

Je kan jQuery tutorials aanvragen via onze contactpagina.

Links:

copyright 2011 agmino web solutions