JQuery voor beginners - Wat is het en hoe werkt het?

JQuery, elke website lijkt het tegenwoordig te gebruiken. Het is de populairste cross-browser JavaScript bibliotheek ter wereld. In dit artikel bespreken wordt de structuur besproken van jQuery en vind je een inleiding over hoe je jQuery zelf kunt gebruiken in je website. Voor dit artikel is een basiskennis JavaScipt en HTML nodig.

Wat is jQuery?

jQuery is een bibliotheek die geschikt is om AJAX gebaseerde web-applicaties te maken. De structuur van jQuery is zo opgezet dat zeer eenvoudig is om web 2.0 applicaties te maken. De structuur van het framework zorgt ervoor dat de programmeur op een zeer gestructureerde en herbruikbare manier code schrijft.
De jQuery bibliotheek vereenvoudigd het proces om de HTML DOM tree te manipuleren. Dit door gebruik te maken van events, animatie en AJAX calls.

Welke functies voorziete jQuery?

• Functies voor DOM elementen te selecteren
• Functies om DOM elementen te manipuleren
• Functies om CSS manipulaties uit te voeren
• Ondersteuning om events te definieren
• Voorgedefinieerde effecten en animaties
• Ajax ondersteuning
• Uitbreidbaarheid
• De mogelijkheid om herbruikbare plugin's te maken in jQuery

Hoe gebruik je jQuery op je eigen site?

In onderstaande introductie wordt uitgelegd hoe je een webpagina kan maken met jQuery waarin een paragraaf met tekst verdwijnt wanneer je er op klikt.

Stap 1

De eerste stap is om de jQuery bibliotheek te downloaden. Al deze functionaliteit is beschikbaar in één bestand. Je kan het downloaden op http://jquery.com/ Dit bestand plaats je bij in de directory waarin je werkt.

Stap 2

Maak een basis HTML pagina aan en leg een link naar het jQuery bestand.
De link met de jQuery bibliotheek wordt gelegd in onderstaande Tag.

Stap 3

In deze stap wordt de jQuery code toegevoegd aan de pagina.
Deze code wordt in JavaScript geschreven en tussen de <script></script> tag geplaatst in de <header>.

De pagina is klaar en werkt. Wanneer je de pagina in je browser opent zal je zien dat de paragraaf met tekst verdwijnt als je er op klikt. Maar hoe werkt dit nu concreet?
Onderstaande code is de jQuery code:
Deze code bestaat uit drie delen:

1. $(document).ready(function(){ ... }); Deze code zorgt ervoor dat het script pas geactiveerd kan worden nadat de volledige pagina geladen is.
2. $("p").click(function(){ ... }); Deze code zorgt ervoor dat op het DOM element "p" een event handler gemaakt wordt die detecteert wanneer er op geklikt wordt. De code binnen deze handler wordt pas uitgevoerd na de klik.
3. $(this).hide(); Deze code wordt uitgevoerd wanneer er op de paragraaf geklikt wordt. $(this) is een referentie naar "het DOM element" dat het klik event ontvangen heeft. In dit geval de paragraaf. De functie die voor dit element wordt uitgevoerd is hide(). Waardoor de paragraaf dus verborgen wordt.

Conclusie

jQuery is een krachtige bibliotheek om dynamische webpagina's te maken. Op het eerste zicht lijkt alles zeer ingewikkeld; maar op zich is het net een zeer eenvoudig te leren framework! Er is geen enkele bibliotheek die op korte termijn zoveel gebruikt wordt. Zeker een aanrader om te leren! Er zijn tegenwoordig zelfs vacatures voor ontwikkelaars waar jQuery expliciet als vereiste gesteld wordt.