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

8. előadás.  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 

Hasonló előadás


Az előadások a következő témára: "8. előadás.  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 "— Előadás másolata:

1 8. előadás

2  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  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  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  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  $("#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  $(‘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  $("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  $("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  $("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  $("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  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  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

15  GET kérés  POST kérés  AJAX a mindentudó

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

17


Letölteni ppt "8. előadás.  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 "

Hasonló előadás


Google Hirdetések