8.1 Tilslutning af jQuery
Endelig kom vi til jQuery-biblioteket. Da denne artikel blev skrevet, er den allerede forældet og bliver næsten aldrig brugt i nye projekter . Men på et tidspunkt var det meget populært, meget veldokumenteret, og der er mange eksempler på internettet med dets brug .
Derfor, hvis du skriver et lille webprojekt og ikke ønsker at bruge måneder på at lære moderne rammer, anbefaler jeg, at du bruger jQuery-biblioteket.
For at bruge de tusindvis af jQuery-funktioner, skal du blot inkludere det på din side. Du kan gøre det sådan her:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Arbejdet med jQuery kan opdeles i to typer.
For det første kan du få et jQuery-biblioteksobjekt, som er et almindeligt HTML-element pakket ind i et tilpasset jQuery-objekt.
For det andet har jQuery flere globale objekter, der ikke er bundet til HTML-elementer. De skal også bruges.
Lad os starte med den første.
8.2 Arbejde med vælgere
jQuery bruger vælgere til at arbejde med objekter (husker du CSS og dens klasser?). Så i jQuery, hvis du vil vælge et objekt eller en gruppe af objekter, skal du indstille deres vælger.
Eksempler:
| Kode | Beskrivelse | Bemærk | |
|---|---|---|---|
| 1 | $("div") | Vælger alle objekter med et DIV-tag | mange genstande |
| 2 | $("img.#image123") | Vælger alle objekter med IMG-tag og ID == image123 | én genstand |
| 3 | $("#billede123") | Vælger alle objekter med ID == image123 | én genstand |
| 4 | $("div.article") | Vælger alle objekter med et DIV-tag, der har klasseartikel | mange genstande |
Lad os sige, at vi ønsker at tilføje hændelseshåndtering til alle links onclick, her er hvordan vi kan gøre det med jQuery:
$("a").click(function() {
alert("Click");
});Her tages tre trin:
- Henter det eller de objekter, der matcher vælgeren
"a". - Vi opretter en anonym funktion, der kalder
alert(). - Vi indstiller denne funktion som hændelseshandler
clickfor alle objekter fra punkt 1.
En anden god ting ved jQuery er, at dens kode er let at læse. Der skal ikke meget til at finde ud af, hvordan alting fungerer. Hvis der er en fungerende kode, så er det nemt nok at forstå, hvad det gør.
8.3 Arbejde med dokumentelementer
Lad os se på et par scenarier for at arbejde med et dokument ved hjælp af jQuery.
Få værdien af et element (for elementer, der har værdier):
var result = $ ("selector").value();Indstil elementværdi (for elementer, der har værdier):
$ ("selector").value(newValue);Hvordan tilføjer man HTML i et element?
$ ("selector").html(newHTML);Og hvordan får man den HTML, der er inde i elementet?
var html = $ ("selector").html();Hvad hvis jeg ikke ønsker at få/tilføje HTML, men almindelig tekst? Heller ingen overraskelser her.
var html = $ ("selector").text();Hvad hvis jeg ønsker at få/ændre farven på et element?
$ ("selector").color("red");Hvis du skal arbejde med styles, så er dette også nemt at gøre:
$ ("selector").css("color", "red");Hvordan tilføjer man et nyt element?
$ (".container").append($("h3"));