07. JQuery tanfolyam

jQuery

Mi ajQuery?

A jQuery Javascript nyelven írt könyvtár, egy library egy nagy fájlban. A javascript kódot egy csomó speciális lehetőséggel ruházza fel. A weboldalak kényelmesebb, programozott kezelését és még sok egyebet tesz lehetővé. Segítségével az oldal kinézetét, és tartalmát is lehet módosítani.

Ajax hívásokkal a szerverről lekérdezhetők adatok, amelyeket visszakapva a weboldal tartalmát is lehet módosítani. A szerver és kliens közötti kommunikáció több féle módon, például JSON adatokkal is működhet.

jQuery UI segítségével komplex felületi megoldások hozhatók létre, mint például redőnyök, automatikusan változó ablakok, drag-and-drop funkciók és még sok más.

Miért érdemes használni?

Ez a library a javascript amúgy is meglévő tulajdonságait, használatát egységesíti, teszi egyszerűbbé. Bár a jQuery library körülbelül 80-90 kb-os overhead-et (túlterhelést) okoz a meglévő weboldalon, de valójában a programozási feladatokat annyival könnyebbé teszi, hogy megéri használni, továbbá a szerverek megfelelő beállításával az említett overhead időben és teljesítményben csak lényegtelen veszteséget jelent.

jQuery telepítése

JQuery letöltésének helye

Telepítése és használatbavétele egyszerű. ebben az esetben a jQuery library abban a folderben található, ahol a HTML oldal kódja.

<!doctype html>
<html lang="hu">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
 <script src="jquery-3.6.0.min.js"></script>
 <body>
.. Javascript és HTML kód...
</body>
</html>

Hogyha olyan összetett a weboldal, hogy nagyon sok különálló js, css, image és egyéb fájlt töltünk le ugyanarról a szerverről, akkor érdemes a jQuery és általában minden egyéb javascript library-t úgynevezett CDN szerverről letölteni. Mivel a böngészők ugyanarról a szerverről csak egy időben maximum 20 fájlt tudnak megnyitni, ezért ha egy library más szerveren van, akkor azt le tudják párhuzamosan tölteni a többivel. Ha ráadásul a böngésző gyorstárba teszi a fájlt, akkor a letöltése nem tart semeddig.

<!doctype html>
<html lang="hu">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <body>
.. Javascript és HTML kód...
</body>
</html>

A jQuery tömörítve kb. 89 kb, eredeti formájában 288 kb. Folyamatosan fejlesztik, ezért a méret kissé változhat a fejlesztés során.

A jQuery kód elhelyezése

Mint minden javascript kódot a jQuery utasításokat is bárhová helyezhetjük a HTML oldalon, de arra vigyázni kell, hogy csakis a jQuery library betöltődése után tudjuk használni, tehát a jQuery lib-et a kód elején töltjük be, majd a saját kódunkat később...

DOM és DOM elemek

A böngészőkben a HTML tartalom egy hierarchikus objektum struktúrába kerül, az úgynevezett Document Object Model, röviden DOM-ba. Amikor a HTML oldalt bármilyen módon módosítjuk, akkor a böngészőben az Objektum módosul és amikor egy javascript kód módosítja a DOM-ot, akkor a módosítás megjelenik a böngésző kimenetén is.

A böngésző ahogyan olvassa a HTML, CSS, javascript és egyéb tartalmakat folxyamatosan bővíti a DOM-ot, ami mindig eltart egy kis ideig. Ha egy kód - akár CSS, akár javascript - olyan objektumra  hivatkozik, amelyik még nem került be a DOM-ba, akkor a hivatkozás érvénytelen lesz és például a javascript kód a böngésző konzolába hibaüzenetet ír ki és a megfelelő kódrészlet hibára fut.

A fentiek miatt bonyolult javascript kódot mindig a HTML kód végére teszünk, különálló javascript fájlba, valahogy így:

<!doctype html>
<html lang="hu">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <body>
...HTML kód...
</body>
<script src="sajat.js"></script>
</html>

$ a jQuery objektum

A $ reprezentálja a jQuery obejktumot. Amikor a jQuery-t használjuk, akkor ezzel az jellel tudunk hivatkozni a teljes jQuery objektumra.

$( document ).ready()

Ez az utasítás tetszőleges számban létezhet egy weboldalon, illetve a javascript oldalakon. Ennek a nyelvi szerkezetnek a hatására a ready(....) belsejében lévő kód csak akkor fut le egyszer, amikor a DOM teljesen készen áll a használatra. Valahogyan így:

$( document ).ready( function(){
  ...
  ... a "védett" kód
  ...
});

A fenti kódban a function() úgynevezett anonim, avagy névtelen függvény, amelyet a javascript megenged. Ha nevesített függvényt akarunk hazsnálni, arra is van lehetőség:

function ReadyFn(){
    .... itt van a védendő kód....
}

$( document ).ready( ReadyFn);

No-Conflict mód

Ha a jQuery-t más library-kkal is akarjuk használni, előfordulhat, hogy a másik library is (például a prototype.js) használja a $ jelet, a saját céljaira. Ebben az esetben az alábbi módon lehet elkerülni a több rendszer összeütközését:

<!-- A jQuery-t no-conflict módba tesszük -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 
var $j = jQuery.noConflict();
// $j lesz innen a jQuery objektum. 
 
$j(document).ready(function() {
    $j( "div" ).hide();
});
 
// A $ változó innen a prototype library változóját jelenti, 
</script>
Tags
jquery