jQuery- syntaxis
Met jQuery selecteer je (query) HTML-elementen en voer je daarop "acties" uit.
jQuery-syntaxis
De jQuery-syntaxis is op maat gemaakt voor het selecteren van HTML-elementen en het uitvoeren van enige actie op het/de element(en).
De basissyntaxis is: $( selector ). actie ()
- Een $-teken om jQuery te definiëren/te openen
- A ( selector ) om HTML-elementen te "zoeken (of vinden)"
- Een jQuery -actie () die moet worden uitgevoerd op het/de element(en)
Voorbeelden:
$(this).hide()- verbergt het huidige element.
$("p").hide()- verbergt alle <p> elementen.
$(".test").hide()- verbergt alle elementen met class="test".
$("#test").hide()- verbergt het element met id="test".
Ben je bekend met CSS-selectors?
jQuery gebruikt CSS-syntaxis om elementen te selecteren. In het volgende hoofdstuk van deze zelfstudie leert u meer over de syntaxis van de selector.
Tip: Als je geen kennis hebt van CSS, kun je onze CSS Tutorial lezen .
De Document Ready-gebeurtenis
Het is je misschien opgevallen dat alle jQuery-methoden in onze voorbeelden zich in een document gereed evenement bevinden:
$(document).ready(function(){
// jQuery methods go here...
});
Dit is om te voorkomen dat jQuery-code wordt uitgevoerd voordat het document klaar is met laden (gereed is).
Het is een goede gewoonte om te wachten tot het document volledig is geladen en gereed is voordat u ermee gaat werken. Dit stelt u ook in staat om uw JavaScript-code vóór de hoofdtekst van uw document te plaatsen, in de kopsectie.
Hier zijn enkele voorbeelden van acties die kunnen mislukken als methoden worden uitgevoerd voordat het document volledig is geladen:
- Een element proberen te verbergen dat nog niet is gemaakt
- Proberen de grootte te krijgen van een afbeelding die nog niet is geladen
Tip: Het jQuery-team heeft ook een nog kortere methode gemaakt voor de gebeurtenis document gereed:
$(function(){
// jQuery methods go here...
});
Gebruik de syntaxis die u verkiest. We denken dat de gebeurtenis document gereed gemakkelijker te begrijpen is bij het lezen van de code.