8.1 A jQuery csatlakoztatása

Végül eljutottunk a jQuery könyvtárhoz. A cikk írásakor már elavult, és szinte soha nem használják új projektekben . De egy időben nagyon népszerű volt, nagyon jól dokumentált, és az interneten rengeteg példa van a használatára .

Ezért, ha egy kis webprojektet ír, és nem szeretne hónapokat tölteni a modern keretrendszerek tanulásával, azt javaslom, hogy használja a jQuery könyvtárat.

A jQuery több ezer funkciójának használatához csak fel kell vennie azt az oldalára. Ezt így teheti meg:


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

A jQuery-vel végzett munka két típusra osztható.

Először is beszerezhet egy jQuery könyvtárobjektumot, amely egy szokásos HTML elem, amely egy egyéni jQuery objektumba van csomagolva.

Másodszor, a jQuery számos olyan globális objektummal rendelkezik, amelyek nincsenek HTML-elemekhez kötve. Használni is kell őket.

Kezdjük az elsővel.

8.2 Munka választókkal

A jQuery szelektorokat használ az objektumokkal való munkához (emlékszel a CSS-re és annak osztályaira?). Tehát a jQuery alkalmazásban, ha ki szeretne jelölni egy objektumot vagy objektumcsoportot, be kell állítania a választójukat.

Példák:

Kód Leírás jegyzet
1 $("div") Kijelöli az összes DIV címkével rendelkező objektumot sok tárgy
2 $("img.#image123") Kijelöli az összes objektumot, amelynek IMG címkéje és ID == image123 egy tárgyat
3 $("#image123") Kijelöli az összes objektumot, amelynek ID == image123 egy tárgyat
4 $("div.cikk") Kijelöli az összes olyan DIV címkével rendelkező objektumot, amely rendelkezik osztálycikkel sok tárgy

Tegyük fel, hogy eseménykezelést szeretnénk az összes linkhez hozzáadni onclick, ezt a következőképpen tehetjük meg a jQuery segítségével:


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

Itt három lépés történik:

  1. Lekéri a választónak megfelelő objektumot "a".
  2. Létrehozunk egy névtelen függvényt, amely meghívja a alert().
  3. Ezt a függvényt eseménykezelőként állítottuk be clickminden objektumhoz az 1. ponttól kezdve.

A jQuery másik jó tulajdonsága, hogy a kódja könnyen olvasható. Nem kell sok ahhoz, hogy rájöjjünk, hogyan működik minden. Ha van működő kód, akkor elég könnyű megérteni, hogy mit csinál.

8.3 Munka dokumentumelemekkel

Nézzünk meg néhány forgatókönyvet a dokumentumokkal való jQuery használatával történő munkavégzéshez.

Egy elem értékének lekérése (értékekkel rendelkező elemek esetén):

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

Állítsa be az elem értékét (értékkel rendelkező elemek esetén):

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

Hogyan lehet HTML-t hozzáadni valamilyen elemhez?

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

És hogyan lehet megszerezni az elemen belül található HTML-t?

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

Mi a teendő, ha nem HTML-t, hanem sima szöveget szeretnék kapni/hozni? Itt sincs meglepetés.

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

Mi a teendő, ha meg akarom szerezni/meg akarom változtatni egy elem színét?

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

Ha stílusokkal kell dolgoznia, akkor ezt is könnyű megtenni:

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

Hogyan lehet új elemet hozzáadni?

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