jQuery – syntax

In dit artikel wil ik het hebben over hoe je nu jQuery scripts schrijft, met andere woorden hoe ziet jQuery er uit? Misschien ziet het er op het eerste gezicht wat vreemd uit, maar als je door hebt hoe het werkt zal het opvallen dat het recht toe, recht aan code is. En boven al heel consistent. Wanneer je een paar regels hebt geschreven dan zal dit op worden geslagen in je hoofd en weet je niet meer anders.

jQuery aanroepen

Wanneer je jQuery wilt aanroepen in je webpagina, dan moet je de functie gebruiken die jQuery heet. Je hoeft maar een functie toe te voegen en je hebt daarmee toegang tot honderden gereedschappen.

Functies

Doordat deze ene functie toegang geeft tot allerlei andere functies met verschillende namen is er een kleine kans dat er conflicten ontstaan bij het gebruik van andere libraries. Bijvoorbeeld een functie ‘hide’, kan ook in eigen code ergens voor gebruikt worden. De ene functie overschrijft de andere functie en dan kan het mis gaan.

Een alias voor jQuery

Omdat je wellicht heel veel gebruik wilt gaan maken van jQuery zal het misschien vervelend worden om de functienaam steeds voluit te schrijven. Vandaar dat er een alias is voor de functie jQuery, namelijk het dollarteken: $.

Leesbaar

Misschien komt het wat gemakzuchtig over om dit teken te gebruiken, maar je code wordt er heel wat leesbaarder door als je het gebruikt in plaats van de volledige naam. Je mag zelf je voorkeur bepalen natuurlijk.

Selector, action en parameter

Een jQuery commando begint dus met het oproepen van de functie, kort of volledig. (jQuery of $) Verder bestaat een commando uit een ‘selector’, een ‘action’ en een ‘parameter’.

Een voorbeeld:
jQuery('p') .css ('color', 'red');
$('p') .css ('color', 'red');

Hierboven zie je dat er eerst een selector staat, de ‘p’. Dit betekent dat alle paragrafen van de webpagina worden geselecteerd. Daarna zie je de action, de actie die het betreft. In ons voorbeeld CSS. Dit wordt in jQuery gebruikt om een CSS eigenschap aan te passen.

Vervolgens komen de parameters te staan die aangeven dat de kleur aangepast moet worden en wel naar rood. Dus met dit voorbeelden wordt alle tekst in paragrafen rood.

In andere artikelen komen andere actions en selectors aan de orde.

Het aantal parameters kan overigens variëren van nul naar veel. Maar bovenstaand voorbeeld is de basis van een jQuery commando.

Net als CSS

Je ziet dat het schrijven van een commando niet erg ingewikkeld is en dat het zelfs lijkt op CSS. Dat maakt het ook, dat het relatief eenvoudig is om te leren. Als je bovenstaande kent dan heb je de basis te pakken. Makkelijker kan ik het ook niet maken.

Voorbeeld

Even een voorbeeldje dat bovenstaande concreet kan maken. Dit voorbeeld is ook met gewoon ouderwets JavaScript te maken, maar het gaat even om de praktijk, toch?

Om een actie in te kunnen zetten is het vaak verstandig dat een pagina helemaal geladen is. Om dit te regelen gebruik je de volgende functie:

$(document).ready(function() {
alert('Welkom op mijn website! Nee, niet weggaan, klik op OK!');
});

Hier zie je een eenvoudige functie aan het werk: vetgedrukt staat eerst het dollarteken (om aan te geven dat het om jQuery gaat), vervolgens de uitwerking, waarbij het resultaat zoiets is als ‘wanneer het document geladen is kan de functie uitgevoerd worden’.

Deze functie is echter zo veelvoorkomend dat je het zelfs mag verkorten naar
$(function() { alert('Ga maar aan de slag!'); });

Uittesten of jQuery werkt

Door bovenstaande code toe te passen kun je meteen uittesten of je jQuery goed hebt geinstalleerd of aangeroepen. Een voorbeeldje met de code vind je hier: jquery voorbeeld.

Ik heb in het voorbeeld (en dat doe ik in alle voorbeelden) gebruik gemaakt van inline code. Door de bron te bekijken kun je de juiste code vinden. Succes ermee.