Wat is jQuery? – REGNERY

jQuery is een populaire JavaScript-bibliotheek die het makkelijker maakt om dingen te doen zoals:

HTML-elementen aanpassen
Events (zoals klikken) afhandelen
Animaties maken
Communiceren met een server (AJAX)

➡️ Met jQuery hoef je minder code te schrijven dan met gewone JavaScript.

Stap 1: jQuery toevoegen aan je website

Je kunt jQuery op twee manieren toevoegen:

De makkelijkste manier: via een CDN (aanbevolen voor beginners)

Voeg dit toe in de <head> van je HTML-bestand:

<!DOCTYPE html>
<html>
<head>
    <title>Mijn eerste jQuery pagina</title>
    <!-- jQuery toevoegen via CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- Jouw HTML komt hier -->
</body>
</html>

Stap 2: Testen of jQuery werkt

Voeg dit toe in je <body>, vlak vóór de sluitende </body>-tag:

<script>
  $(document).ready(function() {
    alert("jQuery werkt!");
  });
</script>

Uitleg:

$(document).ready(...): Wacht tot de pagina geladen is
alert(...): Laat een pop-up zien

🔍 Als je een pop-up ziet bij het openen van de pagina, dan werkt jQuery!

Stap 3: Interactie toevoegen met jQuery

Laten we een knop maken die een tekst laat zien als je erop klikt.

HTML:

<button id="toonTekst">Klik hier</button>
<p id="bericht" style="display:none;">Hallo, dit is jQuery!</p>

jQuery-code:

<script>
  $(document).ready(function() {
    $('#toonTekst').click(function() {
      $('#bericht').show();
    });
  });
</script>

🧠 Wat gebeurt er?

#toonTekst is de ID van de knop
.click(function() { ... }) voert iets uit als je klikt
#bericht is de ID van de verborgen tekst
.show() maakt de tekst zichtbaar

✨ Extra voorbeeld: Tekst veranderen

HTML:

<p id="welkom">Welkom!</p>
<button id="veranderTekst">Verander tekst</button>

jQuery:

<script>
  $(document).ready(function() {
    $('#veranderTekst').click(function() {
      $('#welkom').text('Tekst is veranderd!');
    });
  });
</script>

✅ Samenvatting

Wat je wil doen	Hoe met jQuery
Wachten tot de pagina klaar is	`$(document).ready(...)`
Een element selecteren	`$('#id')` of `$('.class')`
Klik afhandelen	`.click(function() {...})`
Tekst aanpassen	`.text('Nieuwe tekst')`
Element laten zien	`.show()`
Element verbergen	`.hide()`