jQuery - Korte introductie


jQuery is een populair framework en kan bijzonder handig zijn bij het ontwikkelen van een website. Zodra je de bibliotheek aanroept krijg je de beschikking over een groot aantal functies om allerlei zaken op een pagina te regelen zoals CSS manipulatie, effecten, animaties en veel meer. De geestelijk vader van jQuery is John Resig, de Amerikaan die overigens ook ooit in dienst van Mozilla kwam op 26 augustus 2006 met de eerste versie van de bibliotheek. Hoewel er vergelijkbare andere frameworks beschikbaar zijn zoals bijvoorbeeld Mootools en Prototype is jQuery momenteel wereldwijd het meest populair.

jQuery snippets

Aanroepen

Voordat je aan de slag kunt gaan met jQuery moet het framework in de HTML worden aangeroepen anders zal je gemaakte code standaard niet gaan werken. Wat handig is om te weten is dat jQuery in alle browsers zal werken op dezelfde manier. Dit kan met de onderstaande code waarin de bibliotheek van de servers Google wordt gehaald.

In dat geval zal het bestand doorgaans sneller worden geladen. Het sneller laden komt omdat veel websites wereldwijd op deze manier het framework aanroepen en zodoende is de kans groot dat een bezoeker van je site het bestand al in het geheugen heeft zitten.

Google

De onderstaande twee regels moeten tussen de <head> tags geplaatst worden. Op het moment van schrijven is versie 2.1.1 de meest recente versie, bezoek deze pagina van Google of de website jQuery.com om te checken wat de meest recente versie is.

In de eerste regel hieronder wordt het bestand bij Google opgevraagd, de tweede regel dient als fallback. In het geval dat het bestand bij Google niet beschikbaar is wordt er zodoende teruggeschakeld naar het bestand op je eigen server. Plaats dus een kopie van het bestand op je eigen server en zorg dat het pad naar het bestand in de code correct is.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery.min.js"><\/script>')</script>


Begin

Zodra je dan wilt gaan beginnen met het maken en toepassen van jQuery dan zijn er twee regels nodig om dit te laten functioneren. Zodoende wordt de code pas uitgevoerd als de HTML is geladen, op alle afbeeldingen na om foutmeldingen te voorkomen. De code kun je het beste in een extern bestand plaatsen en vervolgens aanroepen op de pagina. De code kan eventueel wel direct in de HTML geplaatst worden als dit de voorkeur heeft.

$(document).ready(function(){
        // De code
});


Aanvullend is er (window).load. Hiermee wordt de code pas uitgevoerd zodra echt alles op de pagina is geladen inclusief afbeeldingen, let er dan wel op dat de code daarom dus vertraagd uitgevoerd kan worden omdat nog niet alles volledig is geladen. (window).load kan zodoende van pas komen als je iets wilt doen met afbeeldingen maar hier de afmetingen eerst van moet weten, met (document).ready kan het zijn dat de afmetingen van een afbeelding nog niet bekend zijn omdat de afbeelding nog niet is volledig geladen.

$(window).load(function(){
        // De code
});