jQuery

1. jQuery 8. előadás

2. Dióhéjban… • jQuery betekintő • Kijelölő rendszer • Műveletek • DOM manipuláció • Eseménykezelés • AJAX általában • AJAX kérés jQuery segítségével • jQuery plugin beépítése • ZF helper írása

3. jQuery betekintő • Könnyű megtanulni • Rövid a kódolási folyamat • Kis méret (csomagolás nélkül: core 55 KB, ui : 188 KB) • Böngésző-független (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome) • Egyedülálló kijelölési eszközrendszerrel rendelkezik • Szinte mindenre találunk plugint

4. jQuery betekintő • Core - implementálja az alapvető DOM műveletek: elem kijelölés, új elem létrehozása, elem attribútumának megváltoztatása • User Interface (UI) - felhasználói interfész, mellyel gyönyörű animációkkal, stílusozható kütyükkel (widgets) vértezhetjük fel weboldalunkat • Plugins – olyan eszközök, melyek az előző kettőbe nem vagy másképpen találhatóak meg

5. Kijelölő rendszer • A HTML dokumentum elemei, bizonyos tulajdonságuk alapján kijelölhetőek, a kijelölt elemeken csoportos művelteteket lehet végrehajtani. • Kijelölésre a $() függvény szolgál, amely lényegében alias neve a jQuery() függvénynek • Visszatérési érték egy DOM csomópontokat tartalmazó objekum

6. Kijelölő rendszer • $("#IdAlapjan"); id azonosító alapján • $(".classNev"); class név alapján • $("div"); tag név alapján • $("div.class_nev"); div elem aminek a class értéke class_nev • $("div,span,ul"); div,span,ul elemek kijelölése

7. Kijelölő rendszer • $(‘tagNév[attrNév]’) ; tag melynek neve tagNév és rendelkezik attrNév attributummal • $(‘tagNév[attrNév$=végén]’); az attributum értékének a vége megegyezik a végén sztringgel • $(‘tagNév[attrNév*=valahol]’); az attributum értékében valahol szerepel a valahol sztring • $(‘tagNév[attrNév^=elején]’); az attributum értékének az eleje megegyezik az elején sztringgel • Példák: $("a[href$=.pdf"); // fájlvég teszt a href értékben $("a[href=^http]"); // azon a tagok melyekenk href értéke http-vel kezdődik

8. Műveletek • $("kijelölő").val(); érték kiolvasás az elsőre megtalált elemből • $("kijelölő").val("Érték"); érték beállítás az összes elemre • $("kijelölő").attr("attribútumNév") érték kiolvasás az elsőre megtalált elemből • $("kijelölő").attr("attrNév","attrÉrték"); érték beállítás az összer elemre • $("kijelölő").attr({ attrNév1: "attrÉrték1",…,attrNévN: "attrÉrtékN"}) több érték beállítás ({kulcs: "érték",}) • $("kijelölő").removeAttr("attrNév"); attribútum eltávolítása az összes elemre

9. Műveletek • $("kijelölő").css("property"); style-ban megadott érték kiolvasása • $("kijelölő").css({"property":"value",…, "propertyN":"valueN"}); több érték beállítása • $("kijelölő").addClass("cssClassNev"); css class hozzáad • $("kijelölő").removeClass("cssClassNev"); .class eltávolítás • $("kijelölő").hasClass("cssClassNev"); .classNev ellenőrzés • $("kijelölő").toggleClass("cssClassNev"); ha jelen van ez az érték akkor eltávolítja, ha nincs hozzáadja

10. DOM manipuláció • $("kijelölő").html(); innerHTML kinyerése az elsőre megtalált elemből • $("kijelölő").html("htmlKód"); innerHTML beállítás az összes elemre • $("kijelölő").text() szöveges tartalom kiolvasás az elsőre megtalált elemből • $("kijelölő"). text("szöveg"); szöveg beállításaaz összes elemre • $("mihez").append("mit") a mihez elem(ek) tartalmának a végéhez hozzáfűzi a mit eleme(ke)t, azaz a mihez elem(ek) utolsó gyermeke után beszúrja a mit eleme(ek)t

11. DOM manipuláció • $("mit").appendTo("mihez"); az előző dolog csak fordítva • prepand, prepandTo hasonlóan, csak az előre szúr be • $("miután").after("mit") miután elem után beszúrja a mit elemet • $("mielőtt").before("mit") mielőtt elem elé beszúrja a mit elemet • $("kijelölő").empty() törli az összes gyermeket • $("kijelölő").clone() másolja az elemeket, ha adunk true paramétert akkor az események is másolódnak

12. Eseménykezelés • Oldal betöltődés: $(document).ready(function(){//todo }); • Elemekhez esemény rendelése bind segítségével: • $('kijelölő').bind(‘esemény',function(){//todo}); $('#alma').bind('click',function(){alert(‘alma’)}) • „Gyorsíró” módszer: $('kijelölő').esemény(function(){//todo }); $('#alma').click(function(){alert(‘alma’)}); • Esemény eltávolítása $('kijelölő').unbind(‘esemény‘); $('#alma').unbind('click‘); • Esemény kiváltása$('kijelölő').trigger(‘esemény‘); $('#alma').trigger('click‘);

13. AJAX általában • Jesse James Garrett nevezte nevén • Útvonal a felhasználó böngészőjének JavaScript környezete és a szerver közötti kommunikáció között • Értékes kapcsolatot teremt a felhasználói felület és a kiszolgálói logika között • Kérelem-válasz folyamatosan fennáll anélkül, hogy a kapcsolat a felhasználó és az alkalmazás között megszakadna

14. AJAX általában

15. AJAX kérés jQuery segítségével • GET kérés • POST kérés • AJAX a mindentudó

16. jQueryplugin beépítése • JS, CSS, kép állományok elhelyezése • Elérési utak átírása • JS, CSS állományok betöltése

17. ZF helper írása