Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

Events JQuery

JQuery stelt je als bouwer in staat om op bepaalde handelingen een reactie te geven. Jij kunt bepalen dat als een bezoeker met de muis ergens op klikt, de site vervolgens een actie uitvoert. Dit noem je een event.

Events JQuery

Er zijn verschillende soorten events waarop je een actie kunt uitvoeren. Een mogelijk event is het moment dat een bezoeker met de muis klikt op een knop. Maar het kan ook zijn dat een bezoeker klikt op een stuk tekst. Verder kan je een event laten plaatsvinden als een bezoeker een checkbox of radio button selecteert.

Mouse Event Form event
click submit
mouseenter change
mouseleave focus

Deze events stellen je in staat om op dat moment een actie uit te voeren. Het meest simpel voorbeeld heb je in de eerste tutorial (JQuery tutorial) al in werking gezien. Namelijk op het moment dat de bezoeker klikt op de button (dit is het event) verdwijnt de tekst in de paragraaf tag (gevolg event).

Verder uitwerken voorbeeld click()

Je wilt bewerkstelligen dat als een bezoeker klikt op een paragraaf, deze paragraaf verdwijnt. De overige paragrafen moeten dan blijven staan. De volgende code helpt je daarmee.

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

<p>Paragraaf 01 – klik op mij</p>
<p>Paragraaf 02 – klik op mij</p>
<p>Paragraaf 03 – klik op mij</p>

</body>
</html>

In dit voorbeeld script vindt de volgende event plaats. Op het moment dat een bezoeker klikt op de tekst van de paragraaf, zal deze verdwijnen. De overige paragrafen blijven nog staan.

De tekst $(“p”).click(function() en de tekst $(this).hide(); geven je dit effect. Allereerst definieer je namelijk dat er iets moet gebeuren op het moment dat een bezoeker op de tekst van de paragraaf klikt. Vervolgens geef je het gevolg voor die specifieke paragraaf aan via $(this) namelijk dat deze moet verdwijnen via de functie hide().