Dolgozunk események jquery
Ez a bemutató nem egy teljes útmutató, hanem magában foglalja az alapokat, amelyek szükségesek az írás legtöbb szkripteket. Megvalósítása ötleteit, akkor szükség lehet egy teljes listát a jQuery esemény módszerekkel.
A következő témákat fogják fedezni a bemutató:
- Mi lesz az esemény?
- Munka események
- Egy egyszerű eseménykezelő
- Parancsikon módszerek kötő közös események
- Hozzáférés az elemek a eseménykezelő
- A további információk az adott esemény
- Megállás alapértelmezett műveletek és az esemény terjedési
- Visszaállítása eseménykezelő
- kiváltó események
Mi lesz az esemény?
kattintson akkor keletkezik, amikor a felhasználó rákattint az elemre az egér gombját dblclick, amikor a felhasználó duplán kattint egéráthúzáskor elem keletkezik, amikor a felhasználó mozgatja az egérmutatót a terhelés keletkezik, ha az elem, például a kép teljesen betöltődött eljuttatják akkor keletkezik, amikor űrlapküldés jelentkezik (ez az esemény csak akkor keletkezik, az elemek formájában)
Dolgozunk események
Együttműködik eseményeket jQuery akkor létre kell hozni egy függvény által hívott eseménykezelő. amely együtt fog működni az esetben, amikor ez történik. Ekkor ez hívja a jQuery kötődnek módszerrel. amely kötődik a funkcióját egy eseménykezelő egy adott esemény a kiválasztott elem (vagy elemek).
Sok módszer a jQuery kötődni eseményeket a rakodók, de bind () módszer közül a legfontosabb. Tart egy esemény nevét és egy funkció neve érvként és tulajdonít egy eseménykezelő a kiválasztott elem (ek):
Aztán, amikor egy esemény bekövetkezik, akkor a kezelő funkció automatikusan elindul, és az esemény feldolgozása szükséges.
Egy egyszerű példa
Az alábbi példa bemutatja, hogyan lehet létrehozni egy egyszerű eseménykezelő és megkötik azt a click esemény az űrlap gomb:
Ha megnyomja a gombot az oldalon, egy üzenet fog megjelenni a következő szavakkal: „minden - hello!”.
Parancsikon módszerek kötő közös események
Ahhoz, hogy az élet könnyebb jQuery számos helyi módszerek összekapcsolásával általánosan használt eseménykezelőkkel a funktsiyami-. Íme néhány közülük:
kattintson a (functionName) egyenértékű hívást bind ( 'click', functionName) dblclick (functionName) egyenértékű hívást bind ( 'dblclick', functionName) terhelés (functionName) egyenértékű hívást bind ( 'load' functionName)
Például, akkor átírják a hívás kötődni () metódus a fenti példa a következő:
Hozzáférés az elemek a eseménykezelő
Amikor egy esemény hatására a függvényt, akkor kap hozzáférést a DOM-elem, mint a tárgya a felvezető a kulcsszó ezt. Ez azt jelenti, hogy minél több információt a tételt, hogy a generált az esemény, akkor az adatok kezeléséhez elemet, és így tovább.
A következő példa létrehoz egy gyűrűző gombot (elbomlik simán és zökkenőmentesen újra megjelenik), kattintson rá. Ahhoz, hogy a feladat elvégzéséhez, az eseménykezelő hozzáfér egy objektum gombok megnyomása segítségével ezt. Ez pakolások tárgya jQuery, majd meghívja módszerek jQuery fadeOut () és fadeIn () a szervezet számára lüktető gomb:
A további információk az adott esemény
Gyakran a felvezető nem Több információra van szüksége egy esemény, amely elindította őt. De ha további információra van szüksége a tételt, hogy a generált az esemény, akkor használja ezt a kulcsszót, korábban már leírták. Azonban jQuery adhat további információt a rendezvény, ha szükséges.
Ahhoz, hogy minél több információt az esemény, a felvezető kell fogadni jQuery esemény objektum érvként. Ebben az esetben egy eseménykezelő elérheti a kiegészítő információk segítségével különböző módszerek és objektum tulajdonságait.
Az alábbi példa nem csak egy üzenetet jelenít meg, ha megnyomja a gombot, hanem jelzi a pontos dátumot és az időt, amikor az esemény bekövetkezett, és kiadja az X és Y koordinátái az egérmutatót idején:
A fenti szkript használja a fenti három tulajdonság 3 ingatlan esemény.
timestamp amikor az esemény bekövetkezett pageX X koordinátája az egérmutatót, ha megnyomja a gombot felé bal felső sarokban a dokumentum pageY Y koordinátája egérmutatót, ha megnyomja a gombot felé bal felső sarokban a dokumentum
Bővebb információt az objektum esetén. beleértve annak minden tulajdonságok és módszerek. A jQuery dokumentáció (sajnos, a hálózat nincs teljesen lefordítva magyar nyelvre, az e szakasz részét információ megtalálható itt oroszul).
Megállás alapértelmezett műveletek és az esemény terjedési
- Az alapértelmezett művelet. Sok esemény van alapértelmezett művelet. Például, ha a felhasználó rákattint a linkre, akkor az alapértelmezett click esemény a link megnyitja a linket.
- Megoszlása az események. Az is ismert, mint a „buborékos” események bekövetkezése esetén, ha kötődnek egy felvezető ugyanazon esemény az elem és a szülő. Például, ha kötődnek egy felvezető a kattintás esemény kapcsolatokat, és megkötözte a másik felvezető a kattintás esemény a bekezdés, amely tartalmazza a link. Amikor a felhasználó rákattint a linkre, a kattintás eseménykezelő hivatkozás indult először, majd az esemény „kiugrik” a szülő bekezdés kiváltó kattintásnövelő eseménykezelő.
Gyakran van szükség, hogy megakadályozzák a dob az alapértelmezett művelet, és / vagy a terjesztés eseményeket. Például, ha beállítja a kattintás eseménykezelő a link, amelyre szükség van, hogy ellenőrizze a helyességét űrlapok kitöltése előtt elhagyja ezt az oldalt, akkor kell, hogy megakadályozzák az átadás a kapcsolat, ami az alapértelmezett.
Vagy ha a szülő elem és leszármazottjai meg ugyanazt kattintással eseménykezelő lehet szükség, hogy megakadályozzák a dob minden funkció ugyanabban az időben.
jQuery esemény objektumot ad egy pár módszert, hogy állítsa le az ilyen magatartás a program:
preventDefault () Leállítja az alapértelmezett szerinti stopPropagation akció () Leállítja a „emelkedés” az az esemény, hogy a szülő elem
A következő példa megnyitja a linket egy új ablakban, ha megnyomja, és használja preventDefault () metódus a nyitás a linkeket a jelenlegi ablakban:
Akkor is megáll az alapértelmezett művelet és terjesztése az események egyszerűen visszatérő hamis az eseménykezelő.
Visszaállítása eseménykezelő
Ha azt szeretnénk, hogy távolítsa el az eseménykezelő egy elemet, hívja a unbind () metódust. Ahhoz, hogy távolítsa el az összes eseménykezelőkkel:
Ahhoz, hogy távolítsa el a megadott eseménykezelő:
kiváltó események
Néha meg kell futtatni az eseményt a terméket közvetlenül a kódot. Például, meg kell egy űrlapot automatikusan, amikor a felhasználó rákattint a hivatkozásra.
jQuery ravaszt () módszer generál egy bizonyos esemény egy kiválasztott elem (vagy elemek). A rendezvény neve átvinni kívánt ravaszt () kiváltó érv.
A példában van egy űrlap benyújtása, ha a felhasználó rákattint egy linkre az oldalon:
Azt is generál egy eseményt az azonos helyi módszereket használtak kötődni események (a korábban leírtak a bemutató). Csak egy rövid hívás eljárás nélkül érveket. Például:
Ebben a leckében megnéztük, hogyan kell dolgozni események jQuery:
- Mi lesz az esemény?
- Munka események
- Egy egyszerű eseménykezelő
- Parancsikon módszerek kötő közös események
- Hozzáférés az elemek a eseménykezelő
- A további információk az adott esemény
- Megállás alapértelmezett műveletek és az esemény terjedési
- Visszaállítása eseménykezelő
- kiváltó események
Az események egy nagyon hatékony és hasznos eszköz, de jQuery sokat tettek azért, hogy megkönnyítse a munkáját velük.
5 óra utolsó oszlopában „jQuery”
Ma szeretnénk, hogy meséljek TypeIt könyvtár - ingyenes jQuery plugin. Ön tudja használni, hogy szimulálja a gépelést. Ha minden megfelelően van beállítva, nagyon realisztikus hatás érhető el.
jQuery plugin létre egy idővonal.
jQuery plugin létre egy Gantt diagram.
Egy példa arra, hogyan hajtsák végre a letöltött fájl segítségével PHP és jQuery ajax.
postaltomsk
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!