1 / 17

jQuery

jQuery. 8. előadás. 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. jQuery betekintő. Könnyű megtanulni Rövid a kódolási folyamat

Download Presentation

jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related