Bevezetés a jQuery használatába Hatékony javascript manipuláció weboldalakhoz

Mi az a jQuery? A jQuery egy JavaScript library (továbbiakban könyvtár), ami a kliensoldali JavaScript és a HTML kód közötti kapcsolatot hivatott egyszerűbbé tenni, és több funkcióval ellátni. John Resig 2006 januárjától fejleszti (Mozilla Alapítvány). A jQuery ingyenes, nyílt forrású szoftver (GNU és MIT licenc) Alapelve, hogy minél inkább leválassza a HTML-ről a JavaScript kódot, és saját eseményvezérlőkön, és azonosítókkal kommunikáljon a weblap elemeivel. Saját projektjeikben előszeretettel alkalmazzák a nagyobb IT cégek (pl. a Visual Studio .NET ASP AJAX platformja is erre épül).

jQuery segédletek Magyarul (Kotroczó Máté 2012-es szakdolgozata): http://justlight.net/jquery/ Angolul: W3Schools oldal: http://www.w3schools.com/jquery/default.asp jQuery hivatalos API dokumentáció: http://api.jquery.com/ jQuery GUI hivatalos API dokumentáció: http://api.jqueryui.com/

Kiválasztók (selectors) A CSS kiválasztókat alapul véve a jQuery rengeteg szabályt biztosít az elemek kiválasztására. Lényege, hogy a HTML elemekre azonosítójuk (id), osztályuk (class), típusuk, altípusuk vagy akár paramétereik alapján hivatkozni tudjunk jQuery/javascript műveleteinkben. „Hagyományos” javascript mód: document.getElementById("azon").style .display = "none"; jQuery mód: $("#azon").hide(); Néhány kiválasztó példa a következő oldalon látható:

Kiválasztó Példa Magyarázat * $("*") Kijelöli az összes elemet. #id $("#utonev") Kijelöli az id=”utonev” azonosítójú elemet. .class $(".bemutat") Kijelöli az összes class="bemutat" osztályú elemet. element $("p") Kijelöli az összes p elemet. :first $("p:first") Kijelöli az első p elemet. :last $("p:last") Kijelöli az utolsó p elemet. :even $("tr:even") Kijelöl minden páros elemet. :odd $("tr:odd") Kijelöl minden páratlan elemet. [attribute=value] $("[href='ez.htm']") Kijelöli az összes „href” attribútummal rendelkező elemet, aminek az értéke „ez.htm”. [attribute!=value] $("[href!='ez.htm']") Kijelöli az összes „href” attribútummal rendelkező elemet, aminek az értéke más mint „ez.htm”. :input $(":input") Kijelöli az összes input elemet. :text $(":text") Kijelöli az összes type=”text” típusú input elemet. :enabled $(":enabled") Kijelöli az összes engedélyezett input elemet. :disabled $(":disabled") Kijelöli az összes letiltott input elemet. :selected $(":selected") Kijelöli az összes kiválasztott input elemet. :checked $(":checked") Kijelöli az összes kipipált input elemet.

Bejárás A kiválasztók mellett megadhatjuk, szűkíthetjük a keresett elem helyét, illetve hogy a megtalált elemekkel mit akarunk kezdeni. Arra is van mód, hogy a kiválasztott DOM elem környezetét módosítsuk (a szülőjét, vagy éppen a gyermekeit). Ehhez hasonlóan sok más hasznos eszközt ad a kezünkbe a (többek közt) bejárással is foglalkozó fejezet. Az alábbi táblázatban végigveszem a parancsokat, és a funkcióikat is. Néhány bejárási metódus a következő oldalon látható:

Utasítás Magyarázat .add() DOM elemeket ad hozzá a kiválasztóban megjelölt elemekhez. A megadott elemeket átváltoztatja a láncolt utasítás elején lévő (kiválasztó által talált) elemmé. .andSelf() A szűréshez hozzáadja a kiválasztóban lévő elemet (önmagát) is. .children() A kiválasztott elem gyermekeit kapjuk meg. Opcionálisan paraméterként megadott szűréssel szűkíthető a találati lista. .closest() A kiválasztó által talált legelső elemtől felfelé indulva végigjárja a DOM fát, és az első találatnál megáll. .contents() Visszaadja a kiválasztó összes gyermekét. Az frame és iframe típusú elemek tartalmának kezelésére alkalmas. .each() A kiválasztó által talált elemekhez ugyanazt a függvényt rendelhetjük. Mindegyik elem esetén lefut a függvény. .end() A művelet láncban leállítja a legutóbbi szűrés műveletet (pl. find()), azért hogy újra a teljes kiválasztóval, a szűrés mentes elemekkel dolgozhassunk. .find() A kiválasztó által talált elemek közt keres. Paraméterként kiválasztót, elemet, vagy objektumot adhatunk meg. .first() A kiválasztó alapján kapott lista első elemét adja meg. .has() Visszaadja azokat az elemeket, amik a paraméterben megadott kiválasztót, vagy DOM elemet tartalmazzák. (Van olyan leszármazottjuk). .next() A kiválasztó által talált elem után következő szomszéd elemet adja vissza. .offsetParent() Visszaadja a talált elem legközelebbi ősét. .parent() Visszaadja a kiválasztó által talált elemek szülőjét. .parents() Visszaadja a kiválasztó által talált elemek ősét. .prev() A kiválasztó által talált elem előtt lévő szomszéd elemet adja vissza.

Eseménykezelés Az eseményekhez hozzárendelhetnünk funkciókat egy vagy több elem számára. Néhány esemény neve ismerős lehet (javascript események) Böngésző események: pl.: .error(), .resize(), .scroll() Dokumentum betöltés: pl.:load(), .ready() Eseménykezelők hozzárendelése: pl. bind(), .on(), off(), .trigger() Űrlap események: pl. .change(), .focus(), .blur(), .submit() Egér, billentyűzet események: pl. .click(), .hover(), .keydown(), .keypress()

Effektek Megjelenítésre, elrejtésre, egyedi animációk létrehozására használják (pl. beúszó menük, egymást váltó reklámképek, stb.)

Utasítás Magyarázat animate() CSS tulajdonságokkal megadott, egyéni animáció beállítására szolgál. fadeIn() Fokozatosan lejjebb veszi a kiválasztott elem átlátszóságát, a láthatatlantól egészen a láthatóig. A kiválasztott elem megjelenik. fadeOut() Fokozatosan lejjebb veszi a kiválasztott elem átlátszóságát, a láthatótól egészen a láthatatlanig. A kiválasztott elem eltűnik. fadeTo() Fokozatosan változtatja meg a kiválasztott elem átlátszóságát, az átlátszóság jelenlegi mértékétől egy megadott értékig. fadeToggle() A láthatóság és az elrejtés közt kapcsolgat, miközben animálja a kiválasztott elem átlátszóságát. hide() Eltűntet egy kiválasztott elemet, animáció nélkül. show() Megjelenít egy kiválasztott elemet, animáció nélkül. slideDown() Fokozatosan változtatja meg egy kiválasztott elem magasságát a nullától a teljes méretig, amíg az elem teljesen meg nem jelenik. slideToggle() A láthatóság és az elrejtés közt kapcsolgat, miközben a slideUp() és a slideDown() effektekkel animálja a kiválasztott elem átlátszóságát. slideUp() Fokozatosan változtatja meg egy kiválasztott elem magasságát a teljes mérettől a nulláig, amíg az elem teljesen el nem tűnik. stop() Egy kiválasztott elem minden animációját megállítja. toggle() Egy kiválasztott elem megjelenése show() és eltűnése hide() közt, vagy egyénileg beállított funkciók közt kapcsolgat.

Példa (css, toggleClass() )

CSS manipulációs metódusok CSS stílusok, pozíciók, méretek, egész osztályok, hozzárendelése vagy módosítása „menet közben” a html elem(ek)hez oldaltöltés nélkül

Utasítás Magyarázat addClass() Egy vagy több CSS osztályt ad a kiválasztott elemhez. css() Beállítja vagy visszaadja a kiválasztott elem egy vagy több stílus tulajdonságát. height() Visszaadja a kiválasztott elem magasságát. A css({’height’:’100px’}) illetve lekérdezéshez a css(’height’) parancsok megbízhatóbbak! innerHeight() Visszaadja a kviálasztott elem belső magasságát. Annyival több a height() utasításnál, hogy a padding méretét is hozzá veszi a magassághoz. innerWidth() Visszaadja a kviálasztott elem belső szélességét. Annyival több a width() utasításnál, hogy a padding méretét is hozzá veszi a szélességhez. offset() Visszaadja a kiválasztott elem relatív pozícióját a dokumentum egészéhez képest. outerHeight() Visszaadja a kviálasztott elem külső (teljes) magasságát. Annyival több a height() utasításnál, hogy a border méretét is hozzá veszi a magassághoz. outerHeight(true) parancs esetén pedig a margin méretét is. outerWidth() Visszaadja a kviálasztott elem külső (teljes) szélességét. Annyival több a width() utasításnál, hogy a border méretét is hozzá veszi a szélességhez. outerWidth(true) parancs esetén pedig a margin méretét is. position() Visszaadja a kviálasztott elem relatív pozícióját, annak szülőjéhez képest. removeClass() Eltávolítja a kiválasztott elem egy vagy több stílus osztályát. scrollLeft() Beállítja vagy visszaadja a kiválasztott elem vízszintes görgetősávjának pozícióját. scrollTop() Beállítja vagy visszaadja a kiválasztott elem függőleges görgetősávjának pozícióját. toggleClass() A kiválasztott elem egy vagy több CSS osztálya közt kapcsolgat, hozzáadja és eltávolítja őket. width() Visszaadja a kiválasztott elem szélességét. Acss({’width’:’100px’}) illetve lekérdezéshez a css(’width’) parancsok megbízhatóbbak!

Példa (css, toggleClass() )

Ajax utasítások Ajax előnye: a weblap teljes újratöltése nélkül frissülő tartalmak (javascript alapú) Beépített ajax utasítások adatok előkészítésére, küldésére és fogadására „Fogadó”, vagy „adó” program lehet asp, php, szinte bármi a szerver oldalon. Az elküldött adatok könnyen előkészíthetőek A kapott adatszerkezet lehet xml, json, script, text, html is, ha nem adjuk meg „intelligens találgatással” dönti el.

Példa (ajax.post, php)

jQuery UI Feladata: natív programokhoz hasonló felhasználói felületek és interakciók létrehozása böngészőben A jQuery-re épül (nyilván) Előre gyártott grafikus elemek (widget-ek), pl: gombok, dialógus ablakok, menük, dátumválasztók, stb. További effektek ezekhez az új elemekhez kapcsolódóan Letölthető, készen használható témák, online témagenerátor a témák módosítására: ThemeRoller

http://jqueryui.com/themeroller/ Téma kiválasztása, letöltése, telepítése

jQueryUI elemek Accordition Autocomplete Button Datepicker Dialog Menu Slider Spinner Progressbar Tab Tooltip Widget Factory: további elemek hozhatók létre hasonló elveken, örökölve a $.Widget vagy bármelyik másik objektumból.

Példák…