20 hasznos módszer jquery, hogy használható a munka
Szóval próbáltam használni jQuery, és élvezted! Itt az ideje, hogy térjen át a következő fokára a létra a készség. Ez a lecke bemutatja 20 funkció és módjait jQuery, amelyek lehet, hogy soha nem hallott.
1. után () / előtt ()
Néha meg kell beszúrni valamit a DOM, de nincs megfelelő linkeket, hogy a betét használatával append () és a betoldott (). és nem akarja, hogy extra elemek vagy id. után function () / előtt () segítségével ebben az esetben. Ezek az elemek behelyezve DOM után azonnal és közvetlenül megelőzően a másik elem, az új elem ugyanaz lesz szülő az egyik alkalmazott.
Meg tudod csinálni ugyanazt, ha használja a munkájukat az elemek, de szükséges használni insertAfter () vagy insertBefore ().
2. módosítás ()
változás () metódus egy eseménykezelő, valamint a kattintás () vagy hover (). változás esetén keletkezik tárgyak szöveges mezők, beviteli mezők, kiválasztási mezők, és ez akkor történik, amikor a változó értéke a cél elemet ellentétben eseménykezelõkkel focusOut () vagy blur (). amelyek akkor keletkeznek, amikor az elem elveszti a fókuszt, függetlenül attól, hogy az érték megváltozott, vagy sem.
változás () esemény nagyszerű ügyféloldali érvényesítés. Sokkal jobb, hogy használja ahelyett, hogy a blur (). mivel nem kell újra ellenőrizni a területeken, ahol a felhasználó nem módosíthatja az értéket.
3. Háttér
Context - ez a paraméter és a vagyon jQuery. Ha kiválasztott egy elemet, akkor tegyük bele a második paraméter a jQuery funkció. Ez a paraméter az összefüggésben általában elem DOM, és ez korlátozza a tételek listáját, amelyek vissza megfelelően a választó tárcsával elem utódai összefüggésében. Úgy hangzik, zavaros, de megnézzük egy példát:
Hogy lehet hasznos? Például az eseménykezelő függvényt. Ha azt szeretnénk, hogy az elem, amelyben az esemény történt, akkor át kell adnia ezt a kontextusban:
4. adatok () / removeData ()
Azt valaha menteni néhány információt a tételt? Könnyedén Ehhez adatok felhasználásával () metódust. Állítsa be az értéket kell átadni a két paraméter (kulcs és érték), vagy egy (tárgy).
Ahhoz, hogy az adatokat, meg kell hívni egy módszert a megfelelő gombot.
Ahhoz, hogy az összes releváns adatot elemet, hívja adat paraméterek nélkül. Lesz kap egy objektumot a kulcsokat és értékeket, hogy meg kell adnunk az elem.
Ha törölni szeretnénk egy kulcs / érték párt, miután adja hozzá a kívánt elemet hívja removeData () metódust. így ez a megfelelő kulcsot.
5. sorban () / dequeue ()
queue () és dequeue () együttműködik az elem. Minden - a lista animációk, hogy teljesíteni kell egy elem. Alapértelmezésben az összes elem „fx” nevet. Nézzünk egy példát:
Szóval, mi folyik itt? Funkció animateBox beállítottuk animációk. Vegyük észre, hogy az utolsó pont ismét animateBox funkciót. így folyamatosan ismételjük meg a sorban. Amikor egy egér történik li # start. funkciót hívjuk és végrehajtása megkezdődik az animáció sorban. Ha rákattintunk a li # állítani. A jelenlegi animáció befejeződött, majd div megáll az animáció. JQuery elindultunk a hely neve alatt „fx” (ne felejtsük, az alapértelmezett sor) egy üres tömböt; sőt, törölje a sorból. És mi történik, ha kattintson li # add. Először is, hívjuk a sor elem div. Ez a művelet hozzáadja a függvényt az a sor végére, és mivel nem adunk meg a sor nevét, mint az első paraméter, ispolztsetsya „fx”. Ebben a funkciót, animálni a div. majd hívja a funkció dequeue () az elem div. udalayaet hogy ez a funkció a sorból. A sorban tovább fut, de a funkció nincs jelen.
6. késleltetés ()
Amikor viszont animációk, akkor a késleltetés () metódust. megállítani egy ideig animáció. Meg kell átadni a milliszekundum.
7. bind (). csaatolja (). élnek (). és die ()
Tudtad, hogy ha az esemény megnyomásával az egér adunk az elem, például:
Akkor tulajdonképpen egy shell kötődni () metódust. Ahhoz, hogy a bind () módszer. Meg kell adni az esemény típusát, mint az első paraméter és a funkciója, mint a második paraméter.
Azt is rendelheti ugyanazt a funkciót több esemény egyidejű, szóközzel elválasztva. Tehát, hogy a hatás a felemelkedés, kezdhetjük az alábbiak szerint:
Akkor át ezeket a funkciókat hozzáadásával a harmadik paraméter (a második pozícióban):
Előbb vagy utóbb lesz találkozás a helyzet, amikor, ha a behelyezett egy elemet a DOM segítségével eseménykezelő, az eseménykezelő, ami készült bind (vagy kagyló), nem működik a behelyezett elem. Ebben az esetben meg kell használni az élő () metódus (delegált). Így felhalmozását megfelelő eseménykezelő adunk behelyezett elem.
Eltávolításához egy eseménykezelő létrehozott bind () módszer. használja unbind () módszer. Ha nem telt el olyan paramétereket, ez eltávolítja rakodók. Akkor neki az esemény típusát, és azt, hogy távolítsa el a eseménykezelők csak a megadott típusú. Eseményeket szeretne törölni kívánt névtér, adjuk hozzá a névtér. Ha törölni szeretnénk egy adott funkciót, adja meg a nevét, mint a második paraméter.
Használhatja a bind / unbind módszerek névtelenül. Ebben az esetben a módszerek csak akkor működik a függvény nevét.
Ha kell csaatolja egy eseményt a funkciót, ami miatt az esemény, csak át az eljárás unbind () objektum esetén.
Nem tudja használni unbind (), hogy eseményeket élőben. Használja a matrica () metódust. Paraméterek nélkül is eltávolítja az összes eseményt élőben a gyűjtő elemet. Akkor is meg kell adni neki a típusú esemény vagy a típus és a funkció.
Ha szüksége van egy adott elem a készletben, akkor lehet, hogy át az index módszer ekvivalens (), és kap egy jQuery elem. Transzfer negatív index termel számolni visszafelé végén az elejére beállítva.
Ön is használja a: eq () a választó. Mivel az előző példa lehet a következő:
Átvételekor a gyűjteményt a jQuery visszaadja a jQuery objektumot. Így van hozzáférése a módszereket. Ha azt szeretnénk, hogy egy DOM elemeket használja get () metódus.
Megadhatja az index, hogy csak az egyik eleme.
10. grep ()
Ha nem ismeri a Unix / Linix, talán még soha nem hallott a grep. A terminál egy olyan eszköz, szöveget keresni. De jQuery, tudjuk használni, hogy kiszűrje a tömbben. Ez nem a módszer a jQuery gyűjtemény. Akkor át tömb, mint az első paraméter és a szűrési funkció, mint a második paraméter. A szűrő funkció is két paramétert: a táblázat elem és annak index. Majd szűrjük függvény a feldolgozás és vissza kell térni igaz vagy hamis. Alapértelmezésben minden olyan tétel, amelyhez vissza igaz. mentve. Akkor adjunk hozzá egy harmadik paraméter logikai típusú. megfordítani eredményeként, és mentse az elemek, amelyek a visszatérési érték hamis.
11. Pszeudo-szelektorok
Sistergés, a CSS választók a jQuery mechanizmus, több ál-szelektor, amelyek megkönnyítik a munkát, hogy válassza ki a kívánt tételt. Itt vannak:
Ezek, persze, több, de ezek - egyedülálló.
12. isArray () / isEmptyObject () / isFunction () / isPlainObject ()
Néha biztos akar lenni abban, hogy a paraméter, amely eljut a funkció a megfelelő típusú. Ezek a módszerek lehetővé teszik, hogy könnyen ellenőrizni. Az első három módszer nyilvánvaló neveket.
isPlainObject () metódus igaz értékkel tér vissza. ha az átvitt paraméter jött létre, mint egy karakter vagy tárgy segítségével új Object ().
13. makeArray ()
Amikor létrehoz egy gyűjtemény DOM elemeket jQuery, ha visszatér a jQuery objektumot. Bizonyos esetekben, hasznos lehet, hogy visszatérjen a szokásos sor DOM elemek. makeArray () függvény végrehajtja a műveletet.
térkép () metódus halványan emlékeztet a grep (). Elvesz egy paraméter - funkciót. Ez a funkció két paramétert: az index a jelenlegi elem és magát az elemet. Itt van, mi történik: a funkció végezhető, ha az egyes tételek a gyűjteményben. Függetlenül attól, hogy milyen értéket ad vissza, ha olyan műveletet végez egy elemet, akkor kezelni a teljes gyűjtemény.
15. parseJSON ()
Ha a $ .post és $ Szálljon-és a különböző helyzetekben, akkor dolgozik egy húr JSON. Ebben az esetben a parseJSON funkció hasznos lesz az Ön számára. Ez a funkció a beépített böngésző értelmező JSON, ESL-ion (amely felgyorsítja a feldolgozás).
16. proxy ()
Ha van egy funkciója, mint egy ingatlan az objektum, és ez a funkció egy másik ingatlan egy tárgy, akkor nem ezt a funkciót belül egy másik funkció, és hogy a megfelelő eredményt. Nézzünk egy példát, hogy megértsük:
Önmagában person.meet () végzi a riasztási helyesen. De amikor ez okozta eseménykezelő, akkor megjelenik a „” Szia! A nevem nem definiált”. Mi történik, azért van, mert a függvény neve egy másik kontextusban. A helyzet orvoslására, fel tudjuk használni proxy () függvényt.
Az első paraméter proxy funkció - kivégzési módszer. A második lehetőség - a körülményeket, amelyek között végre kell hajtania. Alternatív megoldásként tudjuk átadni, első menetben keretében, majd egy string a módszer neve is. Most, a funkció megfelelően hajtják végre.
17. replaceAll () / replaceWith ()
Ha ki kell cserélni egy másik DOM elem szükséges a használatához. Nevezhetjük replaceAll () elemek vannak jelölve vagy létre halad egy választó az elemeket ki kell cserélni. Ebben a példában minden olyan elem hiba osztály helyett az újonnan létrehozott span.
replaceWith () metódus ugyanazt a műveletet, de azt szelektorok fordított sorrendben - az első választó helyébe a második:
Azt is át a két módszert egy függvény, amely visszaadja elemek vagy HTML szöveg.
18. serialize () / serializeArray ()
serialize () módszerrel átalakítani értékek formájában egy string.
Használhatja serializeArray () konvertálni formájában értékeket egy tömbben a tárgyak helyett egy string:
19. testvérek ()
testvérek () metódus visszaadja gyűjteménye elemek, amelyek ugyanolyan szintű amint a hierarchia az eredeti gyűjtemény:
20. borítás () / wrapAll () / wrapInner ()
Három adat funkciók megkönnyítik a csomagolási folyamat elemeit más elemekkel. Mindhárom módszer, hogy egy egyetlen paraméter: egy elem (amely lehet HTML szöveg választó CSS, jQuery kifogást, vagy DOM elem), vagy egy függvény, amely visszaadja az elem.
pakolás () metódus pakolások minden elem a gyűjtemény kijelölt elem:
wrapAll () módszer körülöleli egyetlen eleme az összes elem van a gyűjteményben. Ez azt jelenti, a tárgyakat a gyűjtemény kerül át egy új rész a DOM. Ők lesznek felemelte arra a helyre, ahol az első elem a gyűjtemény, majd lesz csomagolva:
HTML használni a módszert wrapAll ()
HTML használat után wrapAll () metódus
wrapInner eljárás pakolások belül minden egyes eleme a gyűjtemény a megadott tételek:
HTML használni a módszert wrapInner
HTML használat után wrapInner eljárás
Remélem, hogy a lecke volt hasznos az Ön számára!
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.
Igen, és szerzett egy blog
A szórakozás - módszer "data ();" rontja az érvényességét a falu? És ahol minden információt tárolnak.
kód díszítve ülések, ami nem jó, és néhány kiemeli ebből nem egyértelmű. javítsd
Á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!