JQuery Kocsis Roland 2014.04.10..

Az előadások a következő témára: "JQuery Kocsis Roland 2014.04.10.."— Előadás másolata:

1 JQuery Kocsis Roland

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

3 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

4 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

5 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

6 Html DOM tree

7 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:

8 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

9 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 …

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

11 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

12 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

13 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

14 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()

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

16 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

17 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ő …

18 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

19 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

20 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

21 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

22 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.

23 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();

24 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

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

26 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 …

27 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

28 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

29 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

30 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:

31 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?

32 Köszönöm a figyelmet! Kocsis Roland