JQuery Kocsis Roland 2014.04.10.

Mi is az a JQuery? Erőteljes és népszerű JavaScript könyvtár Megalkotója John Resig Első bemutatása 2006-ban

A JQuery célja Html-t és JavaScriptet igyekszik közelebbi kapcsolatba hozni JavaScriptben megismert technikák egyszerűbbé tétele, úgy, hogy az eredeti nyelv erejéből semmit nem veszít „The purpose of jQuery is to make it much easier to use JavaScript on your website.” – w3schools.com

A JQuery célja II. Egyszerű metódusokba csomagol gyakori feladatok megoldásához szükséges JavaScript kódokat Több sornyi JavaScript helyett általában 1-2 sor JQuery Ajax hívások egyszerű kezelése DOM manipuláció, animációk

DOM Standard objektummodell, amire a HTML is épül Egymással gyerek-szülő kapcsolatban álló objektumok rendszere A DOM segítségével érhetjük el a HTML dokumentumunk elemeit, valamint a böngésző eseményeit, mint a kattintás, vagy a görgetés. Csomópontok: node

Html DOM tree

JQuery beemelése a Html oldalba Html dokumentum head részében vagy a záró body tag előtt A teljes Html dokumentum betöltése – így a DOM teljes betöltése – előtt nem tudjuk annak elemeit elérni/módosítani, megoldás:

JQuery szelektorok Ugyanazokat a szelektorokat használhatjuk, mint CSS esetén Az így kijelölt elemeket manipulálhatjuk Eseménykezelőket aggathatunk rájuk Lekérdezhetjük az értéküket Megváltoztathatjuk attribútumait Sok egyéb működéssel láthatjuk el

JQuery szelektorok II. $(“*”) - Minden elem kijelölése $(“p”) – Bekezdés elemek kijelölése. $(“#box”) – A box id-vel rendelkező elem kijelölése. $(“div#box”) – A box id-vel rendelkező div elem kijelölése. $(“.box”) – A box class tulajdonsággal rendelkező elem kijelölése. $(“input:checked”) – Kijelölt checkboxok kijelölése …

JQuery szelektorok III. A this kijelölővel arra az elemre hivatkozhatunk, amelyikkel aktuálisan dolgozunk.

DOM bejárás A kijelölési módszerek finomítása Lényegében 3 fajta relációt különböztetünk meg a kapcsolódó elemek között gyerek – szülő leszármazott – ős/felmenő testvér

DOM bejárás II. Leszármazott kijelölők - egy elem leszármazottjait jelölik ki Children() Közvetlen leszármazottakat adja vissza (vagyis a gyerekeket) Find(“*“) Az összes leszármazottat visszaadja

DOM bejárás III. Ős kijelölők - egy elem felmenőit jelölik ki Parent() Közvetlen felmenőket adja vissza (vagyis a szülőket) Parents() Az összes felmenőt visszaadja Parents(“ul“) – csak az ul felmenők

DOM bejárás IV. Testvér kijelölő - egy elem testvéreit jelöli ki, azaz a DOM-ban azonos szinten elhelyezkedő elemeket. Siblings()

DOM bejárás V. $(”div”).children() $(”div”).find(”*”)

Események Nagy figyelmet kapott a JQuery tervezőitől Dinamikus, a felhasználói interakcióra reagáló oldalakat hozhatunk létre Legegyszerűbb példa: egérkattintás, billentyű leütés

Események II. Néhány gyakran használt esemény Click() – kattintás, bármilyen Html elemhez köthető Dblclick() – dupla kattintás, bármilyen Html elemhez köthető Focus() – „fókuszba kerülés”, form elemekhez(<input>, <select> stb.) és linkekhez köthető Mousedown() / Mouseup() – egérgomb lenyomás / felengedés, bármilyen Html elemhez köthető Resize() – böngésző ablak átméretezése, window elemhez köthető Change() – érték változása, <input>,<textarea>,<select> elemekhez köthető Submit() – űrlap elküldése, <form> elemhez köthető …

Egy divre kattintva annak szélességét 200px-re állítjuk Események III. - példa Click esemény Egy divre kattintva annak szélességét 200px-re állítjuk

Események IV. – Trigger() „De hát ez előbb még nem így nézett ki” A trigger() eljárás segítségével manuálisan előidézhetünk egy eseményt. Miután frissítjük az oldalt, a div 2 másodperc után 200px szélesre vált

Események V. – On(), Off() JQuery 1.7 óta megjelent két új eseménykezelő eljárás, az on() és off() Célja, hogy összefoglalja az összes, eseményekért felelős eljárást Különálló események használata helyett már ez ajánlott

Események VI. Esemény objektum A visszatérési függvény hívás során megadható objektum Számos dolgot megmutat az aktuális eseményről Például egérkattintás pozíciója: event.pageX, event.pageY event.preventdefault() – alapértelmezett működés megakadályozása

Események VII. Event Delegation Az események felhalmozódásának a problémáját oldja meg Nem közvetlenül az elemekhez rendeljük az eseményt, hanem a szülő elemhez, amiben megtalálhatóak az elemek. Csak egy eseményt hozunk létre, ami az aktuális eseményt megvizsgálja és alkalmazza a gyerek elemeken.

Események VIII. Event Propagation A gyerek-szülő elemekben található események külön futtatására kínál megoldást Ha mind az ős és mind a leszármazott kap egy eseményt, a gyerek esemény „felbuborékozik” – event bubbling Ez a működés felülbírálható: event.stopPropagation();

Animációk Látványos mozgásokat, áttűnéseket hozhatunk létre pár sor kóddal A fő eljárás az animate() CSS tulajdonság – érték párokkal számos dolgot animálhatunk Tulajdonságok, hossz, dinamika, visszatérési érték

Animációk II. - példa A tulajdonságok egyszerre animálódnak Az animáció lépésekben történik

Animációk III. A gyakrabban használatos animációs módokhoz létrehoztak külön eljárásokat show()/hide() – megjelenítik ill. elrejtik a kívánt elemet slideDown() / slideUp() – megjeleníti legörgetve ill. elrejti felgörgetve a kívánt elemet …

Ajax Adatok küldése egy szervernek, és a felhasználó értesítése az szerverfolyamat elkészültéről Betölt és futtat egy javascript fájlt

Ajax II. Mindkét változat rövidíthető a $.post() és $.get() szintaxissal Ha json a visszatérési érték, akkor használható a $.getJSON() szintaxis

JQuery UI Az alap Jquery könyvtárra épül Célja az interaktív, összetett felhasználói felület létrehozása Főbb alkotóelemei: Widgets – pl. Button, Dialog, DatePicker Effects – Color Animation, Toggle, Hide, Add Class Themes – UI lightness, UI darkness, Redmond, Sunny

JQuery UI - DatePicker Talán a leggyakrabban használt elem Rengeteg beállítási lehetőség Az alapértelmezett használat azonban triviális:

Kérdések Mi a különbség a children() és a find() kijelölők között? Milyen eljárással tudunk előidézni manuálisan egy eseményt? Az esemény objektum mely metódusával akadályozható meg az alapértelmezett működés?

Köszönöm a figyelmet! Kocsis Roland 2014.04.10.