Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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 

Hasonló előadás


Az előadások a következő témára: "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 "— 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  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  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  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  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:  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  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  …  $(“*”) - 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. o 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  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  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  Ő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()  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  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(, 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,,, elemekhez köthető  Submit() – űrlap elküldése, elemhez köthető  …  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(, 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,,, elemekhez köthető  Submit() – űrlap elküldése, elemhez köthető  …

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

19 Események IV. – Trigger()  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  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 „De hát ez előbb még nem így nézett ki”

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  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  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.  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();  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  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  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  …  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  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  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:  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?  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


Letölteni ppt "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 "