Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

JQuery tutorial

JQuery is een Javascript library waarmee je snel mooie effecten kunt maken voor je site. JQuery is makkelijk, snel te leren en praktisch goed toepasbaar. Als je kennis hebt van HTML, CSS en Javascript is het niet ingewikkeld. Ken je geen Javascript? Geen nood. Ook dan is JQuery niet ingewikkeld om te leren, deze JQuery tutorial houdt daar rekening mee.

JQuery het begin

Wil je gebruik maken van de library, dan zul je deze eerst moeten toevoegen aan je site. Dit kun je als volgt doen:

<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
</head>

Dit zorgt ervoor dat je altijd toegang hebt tot een goed bestand van JQuery. Je hoeft dan niet zelf de bestanden op je server te zetten.

Syntax

JQuery gebruikt een basis syntax waar je steeds mee werkt:

$(selector).action()

  1. $ of dollarteken: geeft aan dat het om JQuery gaat.
  2. (selector): geeft aan welk bestanddeel van de site JQuery moet aanpassen, bewerken.
  3. Action(): geeft de uit te voeren actie aan.

Voorbeeld script

Je hebt de volgende code op je site staan <p>Dummy tekst voor de site</p>. Je wilt dat de site op commando deze tekst verbergt. Hoe doe je dit?

  1. $(“p”).hide(); dit commando verbergt alle <p> tags.
  2. $(“.test”).hide(); dit commando verbergt alle tags met de class=”test” erin.
  3. $(“#test”).hide(); dit commando verbergt alle tags met de id=”test” erin.

Uit het voorbeeld blijkt dat JQuery dezelfde techniek gebruikt als CSS. Ook CSS selecteert de tags op dezelfde wijze.

Standaard code

Voordat je JQuery iets wilt laten uitvoeren op je site, moet je zeker weten dat de site volledig is geladen. Dit doe je door te controleren of de site inderdaad volledig geladen is. De volgende code doet het werk voor je:

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

Op deze manier kun je de scripts ook gewoon in de <head>…</head> van de pagina zetten. Doe je dit niet, dan kun je allerlei vervelende problemen krijgen bij het inladen van je pagina. De meeste bezoekers zullen dan direct afhaken. En dat is net niet de opzet.

Volledig voorbeeld code

<!DOCTYPE html>
<html>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
<script>
$(document).ready(function(){
// code
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head>
<body>
<p>Lorem ipsum …</p>
<button>Verberg paragraaf</button>
</body>
</html>

Dit voorbeeld plaatst een knop op je pagina. Als een bezoeker op de knop drukt, verdwijnt de tekst tussen de <p>…</p> tags.