8.1 Ansluta jQuery

Äntligen kom vi till jQuery-biblioteket. När den här artikeln skrevs är den redan föråldrad och används nästan aldrig i nya projekt . Men en gång i tiden var det väldigt populärt, mycket väldokumenterat, och det finns många exempel på Internet med dess användning .

Därför, om du skriver ett litet webbprojekt och inte vill spendera månader på att lära dig moderna ramverk, rekommenderar jag att du använder jQuery-biblioteket.

För att kunna använda de tusentals jQuery-funktionerna behöver du bara inkludera den på din sida. Du kan göra så här:


   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

Att arbeta med jQuery kan delas in i två typer.

Först kan du få ett jQuery-biblioteksobjekt, som är ett vanligt HTML-element insvept i ett anpassat jQuery-objekt.

För det andra har jQuery flera globala objekt som inte är bundna till HTML-element. De behöver också användas.

Låt oss börja med den första.

8.2 Arbeta med väljare

jQuery använder väljare för att arbeta med objekt (kommer du ihåg CSS och dess klasser?). Så, i jQuery, om du vill välja något objekt eller grupp av objekt, måste du ställa in deras väljare.

Exempel:

Koda Beskrivning Notera
1 $("div") Markerar alla objekt med en DIV-tagg många föremål
2 $("img.#image123") Väljer alla objekt med IMG-tagg och ID == image123 ett föremål
3 $("#bild123") Markerar alla objekt med ID == image123 ett föremål
4 $("div.artikel") Väljer alla objekt med en DIV-tagg som har en klassartikel många föremål

Låt oss säga att vi vill lägga till händelsehantering till alla länkar, onclickså här kan vi göra det med jQuery:


  $("a").click(function() {
    alert("Click");
  });

Tre steg tas här:

  1. Hämtar objektet/objekten som matchar väljaren "a".
  2. Vi skapar en anonym funktion som anropar alert().
  3. Vi ställer in den här funktionen som en händelsehanterare clickför alla objekt från punkt 1.

En annan bra sak med jQuery är att dess kod är lätt att läsa. Det krävs inte mycket för att ta reda på hur allt fungerar. Om det finns fungerande kod är det lätt nog att förstå vad den gör.

8.3 Arbeta med dokumentelement

Låt oss titta på några scenarier för att arbeta med ett dokument med jQuery.

Hämta värdet av ett element (för element som har värden):

var result = $ ("selector").value();

Ange elementvärde (för element som har värden):

$ ("selector").value(newValue);

Hur lägger man till HTML i något element?

$ ("selector").html(newHTML);

Och hur får man HTML-koden som finns inuti elementet?

var html = $ ("selector").html();

Vad händer om jag inte vill skaffa/lägga till HTML, utan vanlig text? Inga överraskningar här heller.

var html = $ ("selector").text();

Vad händer om jag vill få/ändra färgen på ett element?

$ ("selector").color("red");

Om du behöver arbeta med stilar är det här också lätt att göra:

$ ("selector").css("color", "red");

Hur lägger man till ett nytt element?

$ (".container").append($("h3"));
Java university