jQuery- kiezers
jQuery-selectors zijn een van de belangrijkste onderdelen van de jQuery-bibliotheek.
jQuery-kiezers
Met jQuery-selectors kunt u HTML-element(en) selecteren en manipuleren.
jQuery-selectors worden gebruikt om HTML-elementen te "vinden" (of te selecteren) op basis van hun naam, id, klassen, typen, attributen, waarden van attributen en nog veel meer. Het is gebaseerd op de bestaande CSS -kiezers en heeft daarnaast enkele eigen aangepaste selectors.
Alle selectors in jQuery beginnen met het dollarteken en haakjes: $().
Het element Selector
De jQuery-elementselector selecteert elementen op basis van de elementnaam.
U kunt alle <p>elementen op een pagina als volgt selecteren:
$("p")
Voorbeeld
Wanneer een gebruiker op een knop klikt, <p>worden alle elementen verborgen:
Voorbeeld
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
De #id-kiezer
De jQuery -selector gebruikt het id-attribuut van een HTML-tag om het specifieke element te vinden.#id
Een id moet uniek zijn binnen een pagina, dus je moet de #id selector gebruiken als je een enkel, uniek element wilt vinden.
Om een element met een specifieke id te vinden, schrijft u een hash-teken, gevolgd door de id van het HTML-element:
$("#test")
Voorbeeld
Wanneer een gebruiker op een knop klikt, wordt het element met id="test" verborgen:
Voorbeeld
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
De .klasse-kiezer
De jQuery .class-selector vindt elementen met een specifieke klasse.
Om elementen met een specifieke klasse te vinden, schrijf je een punt, gevolgd door de naam van de klasse:
$(".test")
Voorbeeld
Wanneer een gebruiker op een knop klikt, worden de elementen met class="test" verborgen:
Voorbeeld
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Meer voorbeelden van jQuery-kiezers
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Gebruik onze jQuery Selector Tester om de verschillende selectors te demonstreren.
Voor een volledige referentie van alle jQuery selectors, ga naar onze jQuery Selectors Reference .
Functies in een apart bestand
Als uw website veel pagina's bevat en u wilt dat uw jQuery-functies gemakkelijk te onderhouden zijn, kunt u uw jQuery-functies in een apart .js-bestand plaatsen.
Wanneer we jQuery demonstreren in deze tutorial, worden de functies direct toegevoegd aan de <head>
sectie. Soms is het echter beter om ze in een apart bestand te plaatsen, zoals dit (gebruik het src-attribuut om naar het .js-bestand te verwijzen):
Voorbeeld
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>