JQuery 8. előadás.

Az előadások a következő témára: "JQuery 8. előadás."— Előadás másolata:

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") $("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 jQuery plugin 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