Eerste stappen met jQuery
Eerste stappen met jQuery
Eerste stappen met jQuery is een gratis jQuery Academy-les op CoddyKit. Dit is les 1 van 1. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject jQuery Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus jQuery Academy bevat in totaal 1 lessen.
Inleiding
Hallo,
Om de JQuery-bibliotheek te gebruiken, moeten we deze eerst aan het HTML-document toevoegen.
In het onderstaande voorbeeld is het adres van de jQuery-bibliotheek toegevoegd als de waarde van het src-attribuut tussen de head-tags.
De jQuery-bibliotheek is nu klaar voor gebruik in ons project.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>jQuery-selectie
Om bewerkingen uit te voeren op HTML-elementen (die we vanaf nu de DOM noemen), moeten we eerst het element selecteren.
In jQuery wordt de methode $() of jQuery() gebruikt om een selectie te maken.
De methode $() wordt vaker gebruikt door softwareontwikkelaars.
Met de parameter die we aan deze methode toewijzen, bepalen we welk element we willen selecteren.
Xpath
De expressie die we aan de methode $ doorgeven, is de XPath-selector, die we ook kennen uit CSS.
Met andere woorden: in JQuery selecteren we HTML-elementen op dezelfde manier als in CSS.
Xpath-voorbeelden
Stel dat onze HTML-code er als volgt uitziet.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Laten we HTML-elementen selecteren met jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')Met jQuery konden we onze code beknopter schrijven
Als we hetzelfde met Vanilla (Plain) JavaScript wilden doen, moesten we meer regels code schrijven.
Met jQuery konden we dankzij de eigen methoden onze code beknopter schrijven.
Waarschuwing
JQuery is slechts een bibliotheek en maakt webontwikkeling eenvoudiger dan Vanilla JavaScript.
Informatie
Een ander voordeel van jQuery is dat alle moderne browsers de code die we schrijven ondersteunen.
Sommige code die we met VanillaJS schrijven kan in bepaalde browsers bijwerkingen veroorzaken. jQuery garandeert dankzij de geboden abstractie dat de code zich in elke browser hetzelfde gedraagt.
JQuery bespaart ons bij het schrijven van code het browsergerichte denkwerk.
$(document).ready
Voordat we ingaan op de basis van jQuery, leren we eerst de methode $(document).ready.
Zoals we ons uit HTML herinneren, kunnen we Javascript tussen de head-tag of tussen de body-tags in HTML plaatsen.
$ (document).ready 2
Laten we aannemen dat we HTML-code hebben zoals hieronder.
Onze browser interpreteert onze code vanaf de tag <!DOCTYPE html> tot en met de afsluitende tag </html>.
De instructie <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> begint de bibliotheek te downloaden via code.jquery.com.
Op de volgende regel selecteert de code de DOM met de $-methode van jQuery. Hier doet zich echter een probleem voor. Als het HTML-document nog niet volledig is geladen wanneer de methode $ ('# test') wordt aangeroepen, mislukt onze JS-code.
In dit geval wordt de methode $(document).ready gebruikt om ervoor te zorgen dat het document volledig is geladen.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$ (document).ready 3
Na de bovenstaande definitie
hoeven we alleen de methode $(document).ready() te gebruiken. Deze methode wacht tot alle inhoud is geladen en wordt daarna uitgevoerd.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Vraag
Kom op, beantwoord de vraag!
Gefeliciteerd
Gefeliciteerd 🎉
In dit gedeelte zijn we begonnen met het leren van de jQuery-bibliotheek en de methode $(document).ready().
In het volgende gedeelte leren we de jQuery-selectors.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 48
Veelgestelde vragen
Is de les “Eerste stappen met jQuery” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad jQuery Academy, waaronder “Eerste stappen met jQuery”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus jQuery Academy bevat in totaal 1 lessen.
Wat leer ik in “Eerste stappen met jQuery”?
Eerste stappen met jQuery Je oefent met jQuery Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met jQuery Academy te beginnen?
Ervaring vooraf is niet nodig. jQuery Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 1.
Hoe lang duurt de les “Eerste stappen met jQuery”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over jQuery Academy?
Ja. Elke les over jQuery Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.