Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
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
Hasonló előadás
© 2024 SlidePlayer.hu Inc.
All rights reserved.