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:
- Lekéri a választónak megfelelő objektumot
"a"
. - Létrehozunk egy névtelen függvényt, amely meghívja a
alert()
. - Ezt a függvényt eseménykezelőként állítottuk be
click
minden 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"));
GO TO FULL VERSION