20 Hasznos módszerek jquery
1. után () / előtt ()
Néha meg kell beszúrni valamit a DOM, de nem jó a nyomokat, amellyel meg tudod csinálni; append () és a betoldott () nem teszi lehetővé, hogy egyenesen, és nem szeretné, hogy adjunk egy extra elem vagy id. Ez a két funkció lehet, amire szüksége van. Ez lehetővé teszi, hogy helyezze elemek a DOM közvetlenül megelőzően vagy azt követően a kiválasztott elemet úgy, hogy az új elem kerül ugyanazon a szinten.
Ezt is el lehet végezni, ha a munka közvetlenül a kívánt elemet beilleszteni; csak használja insertAfter () vagy insertBefore.
2. módosítás ()
változás módszer () - Ez az eseménykezelő, mint click () vagy hover (). módosíthatja az esemény - a szöveges mezők, beviteli mezők és a kiválasztás az ablakok, és működni fog, mikor kell változtatni az értéket a megcélzott sejt; Megjegyzendő, hogy ez nem ugyanaz, mint a kezelők focusOut () vagy blur () események hatására bekövetkező olyan elem elveszíti a fókuszt, hogy módosított vagy nem érték.
változás () esemény hibátlanul hitelesítése adatok a kliens oldalon; ez sokkal jobb, mint a blur (), mert akkor nem lehet újra végrehajtani az ellenőrzést mezőket, amikor a felhasználó megváltoztatja az értéket.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
3. Háttér
Context - ez a paraméter, és a vagyon jQuery. A feldolgozás elemek akkor adja át a jQuery funkció, mint a második paraméter. Ez a paraméter - összefüggésben jellemzően elem DOM, és ez korlátozza az elemek megállapítás a választó, a gyermekek a kontextus elemek. Talán egy kicsit zavaros, így nézd meg ezt egy példa:
Tehát, ha ez hasznos lehet? Egy ilyen helyzet előfordulhat belsejében eseménykezelő függvényt. Ha kell, hogy egy gyermek eleme az esemény forrásának, akkor tegyük bele az ingatlan, mint a háttér:
4. adatok () / removeData ()
Volt valaha, hogy szükség van további információkat tároljanak a terméket? Az adatok segítségével () metódus, akkor könnyen csinálni. Állítsa be az értéket, akkor át a két paraméter (kulcs és érték), vagy csak az egyik (tárgy).
Hogy újra az adatokat, egyszerűen hívja a módszer kulcsfontosságú érték, amire szüksége van.
Ahhoz, hogy minden adatot, amelyek megfelelnek az elem adathívás () metódus paraméterek nélkül; kapsz egy objektumot, amely tartalmazza az összes kulcsokat és értékeket, hogy már elemhez rendelhető.
Ha törölni kívánja a kulcs / érték párt után hozzáadjuk a tétel, egyszerűen hívja removeData (), átadva a megfelelő gombot.
5. sorban () / dequeue ()
queue () és dequeue () kapcsolódnak animáció. Queue (queue) - listáját animációk által végrehajtott elem; Az alapértelmezett sor elem az úgynevezett „fx”. Nézzük meg a helyzetet:
Szóval, itt van, hogy mi történik: a funkció animateBox felállítottuk az összes animáció, Vegyük észre, hogy az utolsó bejegyzés ismét utal, hogy a függvény úgy, hogy folyamatosan ismétlődő minden. Ha rákattintunk li # start, a funkció hívják, és a sorban kezdődik. Ha rákattintunk li # Reset, a jelenlegi animáció befejeződött, és meg kell állítanunk az animáció div. Ehhez a jQuery, mind a nevét „fx” (ne felejtsük, az alapértelmezett sor) van beállítva, hogy egy üres tömböt; Lényegében, tisztázzuk a sorban. És mi történik, ha kattintson li # hozzáadni? Először is, hívjuk a sorban () a div; Az ingatlan, használt függvényében át vele, hogy a végén a sorban; mivel nem volt meg minden, mint az első paraméter, a standard „fx” nevet. Ezen belül a funkciót, akkor animálni a div, majd hívja dequeue () a div, annak érdekében, hogy távolítsa el ezt a lépést a sorból, és folytatják a feldolgozást; így minden meg kell ismételni, de ez a funkció nem lesz része.
6. késleltetés ()
Mivel egy lánc animáció, akkor a késleltetés () metódus, hogy függessze fel az animáció egy bizonyos ideig; idő telt el, mint a paraméter ezredmásodperc.
7. bind (), csaatolja (), élnek (), és a die ()
Tudtad, hogy ha hozzáad egy kattintás felvezető egy ehhez hasonló elem.
sőt, csak használja a shell kötődni () metódus? Ahhoz, hogy a bind () metódus is, akkor át az esemény típusát, mint az első paraméter, majd működni, mint a második.
Azt is rendelheti ugyanazt a funkciót több esemény egyidejű, szóközzel elválasztva nevét. Tehát, ha azt akarta, hogy a hatás lebeg, hogy indulhasson a következő:
Az is lehetséges, hogy az adatok továbbítására funkciót, hozzáadásával a harmadik paraméter (második helyzet).
Előbb-utóbb úgy találja, hogy helyezzen be egy elemet a DOM keresztül eseménykezelő; de hamarosan meg fogja találni, hogy az esemény rakodók, hogy már végzett a bind vagy őt héj, nem működik az újonnan beillesztett elemek. Ilyen esetekben meg kell használni a módszert (élő) (vagy megbízottja); ez lehetővé teszi, hogy adjunk eseménykezelőkkel a megfelelő elemeket ki.
Eltávolításához eseménykezelők létrehozott bind (), használja unbind () módszer. Ha nem ad neki semmilyen paramétert, akkor távolítsa el az összes rakodók; akkor át az esemény típusát eltávolítani csak a eseménykezelőkkel ilyen típusú; távolítsa el a rendezvény egy adott névtér, adjuk hozzá a névtér, vagy használja azt külön-külön. Ha csak akar távolítani egy speciális funkciót, át szerint a neve, mint a második paraméter.
Vegye figyelembe, hogy hozzá lehet rendelni / eltávolítani eseménykezelőkkel függvények küldött névtelenül; Ezek a módszerek csak a nevét funkciókat.
Ha megpróbálja eltávolítani egy eseménykezelő a függvény belsejében hívják az eseményt, csak át csaatolja () hivatkozás az esemény objektumot.
Nem tudja használni unbind () eseménykezelő hozzon létre egy függvényt (élő); használ die () függvénnyel. Ennek hiányában paraméterek, eltávolítja az összes élő eseménykezelőkkel az összessége az elemeket; is lehetőség van, hogy közvetítse az esemény típusát vagy esemény típusa, valamint a kezelő nevét funkciót.
Most rendelkeznek a teljesítmény és a rugalmasság a jQuery esemény mechanizmusát!
Azt is meg kell tanulni a küldött () metódus, hiszen ez jelentős teljesítmény előnyt (élő) módszer.
Ha keres egy adott elem egy sor elemet, akkor adja át az index eq () metódus, és kap egy jQuery elem. Transfer negatív index segítségével számlál visszafelé a tárcsázás végét.
Szintén használhatja: eq () a saját választás; így az előző példában így nézne ki:
Fogadása egy sor elemet, jQuery vissza őket, mint a jQuery objektumot, úgy, hogy hozzáférést biztosít az összes módszer. Ha szüksége van, csak a „nyers» (raw) DOM elemeket, akkor a get () metódus.
Megadhatja az index, hogy egyetlen elem.
10. grep ()
Ha nem ismeri a szoftver kagyló (héj) Unix / Linux, akkor nem hallotta a kifejezést grep. A terminál - egy szöveges kereső eszköz; de itt a jQuery, tudjuk használni, hogy kiszűrje a tömb elemeinek. Ez nem egy módszer jQuery gyűjtemények; 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ó két paramétert: az elem a tömb és annak index. Meg kell csinálni a dolgát, és vissza igaz vagy hamis. Alapértelmezésben az összes elem, amelyre azt vissza igaz, beleesik a szűrő eredményeit. Azt is hozzá egy harmadik paramétert, a logikai kifejezés, hogy fordítsa az eredményeket, és válassza ki a megfelelő terméket, amelyre a szűrési függvény false.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
11. Az ál
Sizzle, CSS-választó motor belsejében jQuery, kínál számos ál-kiválasztásának megkönnyítése a megfelelő megoldás az Ön számára megfelelő terméket. Látod, ez érdekes:
Persze, vannak mások, de ezek - egyedülálló.
12. isArray () / isEmptyObject () / isFunction () / isPlainObject ()
Néha meg kell győződnie arról, hogy az átadott paramétert funkciója volt a megfelelő típusú; Ezek a funkciók könnyen megtenni. Az első három magukat kellően magyarázza meg:
A következő példa nem ilyen egyértelmű; isPlainObject () értéke igaz, ha az átvitt paraméter objektum jött létre, mint egy állandó, vagy az új Object ().
13. makeArray ()
Amikor létrehoz egy gyűjtemény DOM elemeket a jQuery, kapsz jQuery objektum; Bizonyos helyzetekben, azt szeretné, hogy ez volt a szokásos tömb vagy DOM elemeket; funkció makeArray () pontosan, mit lehet tenni.
térkép () módszer távolról hasonló grep (). Amint lehet képzelni, hogy felvesz egy paramétert a 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ó, hogy adja át egyszer végrehajtja az egyes tételek a gyűjtemény; és minden értéket a függvény visszatérési váltja ki az elemet a gyűjtemény, amit mint argumentum.
15. parseJSON ()
Ha a $ .post vagy $ Szálljon -, valamint más esetekben, ha dolgozik, húrok JSON - talál hasznos funkciókat parseJSON. Bár minden bizonnyal jobb, ha a függvény egy beépített böngésző JSON parser, ha az (ami nyilván gyorsabb).
16. proxy ()
Ha van egy funkció - objektum tulajdonság, és használja a másik objektum tulajdonságait, akkor nem ezt a funkciót belül egyéb funkciókat, és kap a megfelelő eredményt. Tudom, hogy ez zavaró, ezért nézzük meg egy példa egy zseniális:
Maga person.meet () jelenik meg a helyes információkat; de ha ez az úgynevezett eseménykezelő, akkor kiad egy „Hi! A nevem definiált.”. Ez fog történni az a tény, hogy a funkció nem hívják a megfelelő kontextusban. Akkor használja a proxy () függvényt, hogy rögzítse:
Az első paraméter a függvény proxy - a technika, hogy el kell indítani; A második - ez az összefüggés, amelyben meg kell futtatni. Egy másik esetben tudjuk átadni az első paraméter az összefüggésben, valamint a módszer nevét, mint egy húr - a második. Most azt találjuk, hogy a függvény jelét (riasztások) helyesen.
17. replaceAll () / replaceWith ()
Ha ki kell cserélni néhány DOM elemeket, a másik, itt van, hogyan kell csinálni. Nevezhetjük replaceAll () a eleme a gyűjtemény, vagy az újonnan létrehozott elemeket, rámutatva választó azokat az elemeket, szeretnénk cserélni. Ebben a példában az osztály minden tagja váltja hiba hoztuk létre span.
replaceWith () módszer egyszerűen megváltoztatja a szelektor helyeken azaz Először megnézzük, hogy mit akarunk cserélni:
Is, akkor át a két módszer a funkciója, mint egy érv, hogy vissza fog térni elemek vagy HTML szöveg.
18. serialize () / serializeArray ()
serialize () módszer -, hogy a szükséges kódoló értékek a formák egy string.
Ön is használja serializeArray (), átalakítani az értéke abban a formában, egy sor tárgyak helyett egy string.
19. testvérek ()
Talán tudod kitalálni, amit a testvérek () módszerrel; visszatér a gyűjtemény tételek ugyanazon a szinten, és hogy minden egyes eleme az eredeti gyűjtemény:
20. borítás () / wrapAll () / wrapInner ()
Három ilyen funkciók könnyen, hogy lezárja az egyik eleme a másikra. Először is, mégis megemlítem, hogy mindhárom módszer, hogy ugyanazért a lehetőséget: egy elem (ami adható HTML-line, CSS-választó, a jQuery objektum, vagy egy DOM-elem), vagy egy függvény, amely visszaadja a tételt.
borítás () módszer pakolások minden egyes gyűjtő elem az említett tag:
WrapAll () lezárja az egyik tagja minden tagja a gyűjtemény; Ez azt jelenti, hogy az elemek a gyűjtemény kerül át az új helyére a DOM; lesznek összehoztuk az első eleme a gyűjtemény, majd lesz csomagolva:
Összefoglalva, wrapInner funkciót pakolások a teljes tartalmát minden elem a gyűjtemény által meghatározott paraméterek elemei:
következtetés
Nos, most már több mint húsz új jQuery technikákat, amelyekkel akkor elveszíti a következő projekt; jó szórakozást!
Fordította és szerkesztette: Victor Horn és Andrew Bernátsky. webformyself csapat.
A jelenlegi trendek és megközelítések webfejlesztés
Tudjon algoritmus gyors szakmai növekedés nulla helyszíni építési
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
