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:

  1. Henter objektet(e) som samsvarer med velgeren "a".
  2. Vi oppretter en anonym funksjon som kaller alert().
  3. Vi setter denne funksjonen som en hendelsesbehandler clickfor 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"));
Java webinar