8.1 Koble til jQuery
Til slutt kom vi til jQuery-biblioteket. Da denne artikkelen ble skrevet, er den allerede foreldet og brukes nesten aldri i nye prosjekter . Men på en gang var det veldig populært, veldig godt dokumentert, og det er mange eksempler på Internett med bruken av det .
Derfor, hvis du skriver et lite nettprosjekt og ikke ønsker å bruke måneder på å lære moderne rammeverk, anbefaler jeg at du bruker jQuery-biblioteket.
For å bruke de tusenvis av jQuery-funksjonene trenger du bare å inkludere den på siden din. Du kan gjøre det slik:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
Arbeid med jQuery kan deles inn i to typer.
Først kan du få et jQuery-biblioteksobjekt, som er et vanlig HTML-element pakket inn i et tilpasset jQuery-objekt.
For det andre har jQuery flere globale objekter som ikke er bundet til HTML-elementer. De må også brukes.
La oss starte med det første.
8.2 Arbeide med velgere
jQuery bruker velgere til å jobbe med objekter (husker du CSS og dens klasser?). Så, i jQuery, hvis du vil velge et objekt eller en gruppe med objekter, må du angi velgeren deres.
Eksempler:
Kode | Beskrivelse | Merk | |
---|---|---|---|
1 | $("div") | Velger alle objekter med en DIV-tag | mange gjenstander |
2 | $("img.#image123") | Velger alle objekter med IMG-tag og ID == image123 | ett objekt |
3 | $("#bilde123") | Velger alle objekter med ID == image123 | ett objekt |
4 | $("div.article") | Velger alle objekter med en DIV-tag som har klasseartikkel | mange gjenstander |
La oss si at vi ønsker å legge til hendelseshåndtering på alle lenker onclick
, slik kan vi gjøre det med jQuery:
$("a").click(function() {
alert("Click");
});
Tre trinn er tatt her:
- Henter objektet(e) som samsvarer med velgeren
"a"
. - Vi oppretter en anonym funksjon som kaller
alert()
. - Vi setter denne funksjonen som en hendelsesbehandler
click
for alle objekter fra punkt 1.
En annen god ting med jQuery er at koden er lett å lese. Det skal ikke mye til for å finne ut hvordan alt fungerer. Hvis det er fungerende kode, er det lett nok å forstå hva det gjør.
8.3 Arbeide med dokumentelementer
La oss se på noen få scenarier for å jobbe med et dokument ved å bruke jQuery.
Få verdien av et element (for elementer som har verdier):
var result = $ ("selector").value();
Angi elementverdi (for elementer som har verdier):
$ ("selector").value(newValue);
Hvordan legge til HTML i et element?
$ ("selector").html(newHTML);
Og hvordan får man HTML-en som er inne i elementet?
var html = $ ("selector").html();
Hva om jeg ikke ønsker å få/legge til HTML, men ren tekst? Ingen overraskelser her heller.
var html = $ ("selector").text();
Hva om jeg ønsker å få/endre fargen på et element?
$ ("selector").color("red");
Hvis du trenger å jobbe med stiler, er dette også enkelt å gjøre:
$ ("selector").css("color", "red");
Hvordan legge til et nytt element?
$ (".container").append($("h3"));