8.1 jQuery aansluiten
Eindelijk kwamen we bij de jQuery-bibliotheek. Tegen de tijd dat dit artikel werd geschreven, is het al achterhaald en wordt het bijna nooit gebruikt in nieuwe projecten . Maar ooit was het erg populair, zeer goed gedocumenteerd en er zijn veel voorbeelden op internet met het gebruik ervan .
Daarom, als u een klein webproject schrijft en geen maanden wilt besteden aan het leren van moderne frameworks, raad ik u aan de jQuery-bibliotheek te gebruiken.
Om de duizenden jQuery-functies te gebruiken, hoeft u deze alleen maar op uw pagina op te nemen. Je kunt het zo doen:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Het werken met jQuery kan in twee typen worden verdeeld.
Ten eerste kunt u een jQuery-bibliotheekobject krijgen, een normaal HTML-element verpakt in een aangepast jQuery-object.
Ten tweede heeft jQuery verschillende globale objecten die niet gebonden zijn aan HTML-elementen. Ze moeten ook gebruikt worden.
Laten we beginnen met de eerste.
8.2 Werken met selectoren
jQuery gebruikt selectors om met objecten te werken (herinner je je CSS en zijn klassen?). Dus als u in jQuery een object of een groep objecten wilt selecteren, moet u hun selector instellen.
Voorbeelden:
| Code | Beschrijving | Opmerking | |
|---|---|---|---|
| 1 | $("div") | Selecteert alle objecten met een DIV-tag | veel objecten |
| 2 | $("img.#image123") | Selecteert alle objecten met IMG-tag en ID == image123 | één voorwerp |
| 3 | $("#afbeelding123") | Selecteert alle objecten met ID == image123 | één voorwerp |
| 4 | $("div.artikel") | Selecteert alle objecten met een DIV-tag die een klasseartikel hebben | veel objecten |
Laten we zeggen dat we gebeurtenisafhandeling aan alle links willen toevoegen onclick, hier is hoe we het kunnen doen met jQuery:
$("a").click(function() {
alert("Click");
});Hierbij worden drie stappen doorlopen:
- Haalt de objecten op die overeenkomen met de selector
"a". - We maken een anonieme functie die de
alert(). - We stellen deze functie in als gebeurtenishandler
clickvoor alle objecten vanaf punt 1.
Een ander voordeel van jQuery is dat de code gemakkelijk te lezen is. Er is niet veel voor nodig om erachter te komen hoe alles werkt. Als er werkende code is, is het eenvoudig genoeg om te begrijpen wat het doet.
8.3 Werken met documentelementen
Laten we een paar scenario's bekijken voor het werken met een document met behulp van jQuery.
De waarde van een element ophalen (voor elementen die waarden hebben):
var result = $ ("selector").value();Elementwaarde instellen (voor elementen die waarden hebben):
$ ("selector").value(newValue);Hoe voeg ik HTML toe aan een element?
$ ("selector").html(newHTML);En hoe krijg je de HTML die in het element zit?
var html = $ ("selector").html();Wat als ik geen HTML wil ophalen/toevoegen, maar platte tekst? Ook hier geen verrassingen.
var html = $ ("selector").text();Wat als ik de kleur van een element wil krijgen/wijzigen?
$ ("selector").color("red");Als je met stijlen moet werken, dan is dit ook gemakkelijk te doen:
$ ("selector").css("color", "red");Hoe voeg je een nieuw element toe?
$ (".container").append($("h3"));