Aan de slag met JQuery - Beginnershandleiding deel 1

Onder webontwikkelaars is de Javscript-toolkit JQuery razendpopulair. Je kunt er ook ontzettend veel mee: effecten toevoegen aan je pagina's, je website gebruiksvriendelijker maken en aan php gekoppelde acties uitvoeren zonder de pagina te herladen.

In deze beginnershandleiding laat ik je zien hoe je simpel leuke dingen kunt bereiken met JQuery. Voorkennis van JQuery is absoluut niet nodig. Je moet wel overweg kunnen met HTML, en in latere delen misschien ook met PHP.

In dit eerste deel gaan we JQuery inladen in een webpagina, en maken we een knop. Wanneer je daarop klikt moet er een andere tekst zichtbaar worden op de pagina, uiteraard zonder de pagina te herladen.

Op de website van JQuery kun je overigens ook een boel informatie vinden, zowel handleidingen als documentatie. De website is www.jquery.com.

Je kunt vanaf daar ook JQuery downloaden. Dat kan je doen als je graag de javascript-bestanden van JQuery op je eigen server wilt hebben. In dit voorbeeld doen we dat niet. Google heeft biedt de benodigde bestanden namelijk ook gratis aan. Dat is iets makkelijker, en in veel gevallen werkt het nog sneller ook.

Open je favoriete web-editor, en maak een nieuw HTML-bestand aan. Zorg dat de inhoud er als volgt uitziet:

We gaan nu het JQuery-javascript-bestand tussen de head-tags plaatsen. Daarna kunnen we écht beginnen. Zet de volgende code tussen de head-tags:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>

De HTML-code

Nu we een opzetje hebben voor het HTML-bestand, en we klaar zijn om aan de slag te gaan met JQuery gaan we een stukje HTML-code schrijven. Die code bestaat uit een hyperlink, en een stuk tekst dat in eerste instantie verborgen is. Als je op de hyperlink klikt moet de tekst zichtbaar worden.

Zet tussen de body-tags de volgende HTML-code:

<h1 style="display:none;" class="verborgen">De verborgen tekst</h1><br /><a class="link">Klik hier om de tekst zichtbaar te maken</a>

Tot zover de html code. Die spreekt voor zich, naar mijn idee.

De JQuery-code plaatsen we tussen de head-tags. Deze code komt tussen javascript-tags. Het gaat om de volgende code:

<script type="text/javascript">

$(document).ready(function(){
$("a.link").click(function () {
$("h1.verborgen").slideToggle("slow");
});});
</script>

De eerste regel binnen de script-tags geeft aan dat de code tussen de {-tekens moet worden uitgevoerd zodra het 'document ready' is. D.w.z.: de pagina is geladen.

Met de regel daaronder koppelen we een click-functie aan de hyperlink met de class 'link'.

Zodra er op wordt geklikt moet er een slide-toggle-effect worden uitgevoerd op een h1-titel met de class 'verborgen'. Het slide-toggle-effect is een simpel fade-effect.

In de documentatie van JQuery kun je meer effecten vinden. Kijk daarvoor op de pagina over effects.

Tot zover dit eerste deel. De volgende keer zullen we ingaan op het werken met HTML-formulieren gecombineerd met JQuery. We kijken dan wat dit voor mogelijkheden bied.

Mocht je nog vragen hebben, dan kun je ze hieronder in de reacties stellen. Veel succes!