Výukový program jQuery (4. časť)

Reklama

Dnes to vykopneme do zárezu a skutočne ukážeme, kde jQuery svieti - diania. Ak ste sa riadili minulými tutoriálmi, mali by ste mať teraz celkom dobre pochopené základná kódová štruktúra jQuery Výukový program jQuery - Začíname: Základy a výberyMinulý týždeň som hovoril o tom, aké dôležité je jQuery pre každého moderného webového vývojára a prečo je to úžasné. Tento týždeň si myslím, že je čas, aby sme si zašpinili ruky nejakým kódom a zistili sme, ako ... Čítaj viac (a všetky príšerné zložené rovnátka, ktoré s tým súvisia), ako aj ako nájsť prvky DOM a niektoré z vecí, ktoré môžete urobiť, aby ste s nimi manipulovali Úvod do jQuery (časť 2): Metódy a funkcieToto je súčasť pokračujúceho úvodného úvodu do programovacej série jQuery web. Časť 1 sa venovala základom jQuery, ako ju zahrnúť do vášho projektu, a výberom. V časti 2 budeme pokračovať ... Čítaj viac . Tiež som vám ukázal, ako získať prístup k internetu konzola pre vývojárov v prehliadači Chrome Zistite problémy s webom pomocou vývojových nástrojov prehliadača Chrome alebo prehliadača Firebug

Ak ste doteraz sledovali moje návody jQuery, možno ste už narazili na problémy s kódom a neviete, ako ich opraviť. Keď čelíme nefunkčnému kódu, je to veľmi ... Čítaj viac a ako by ste ho mohli použiť na ladenie kódu jQuery.

Udalosti - okrem iného - umožňujú reagovať na veci, ktoré sa dejú na interakcii stránky a používateľa - klikanie, posúvanie a všetko, čo sa vám páči.

Čo je vlastne udalosť?

Pre tých nových, ktorí programujú nové grafické rozhranie, sa udalosti týkajú akejkoľvek interakcie medzi používateľom a aplikáciou; alebo môžu byť generované interne iným procesom. Aplikácie si vyberajú, ktoré udalosti „počúvajú“, a keď sa udalosť spustí, môžu nejakým spôsobom reagovať.

Napríklad klepnutie na obrazovku vášho iPhone vygeneruje jednu „udalosť klepnutia“ s súradnicami x, y presne tam, kde ste klepli. Ak ste klepli na konkrétny objekt, napríklad na tlačidlo, je pravdepodobné, že tlačidlo počúvalo danú udalosť a podľa toho vykoná určitú akciu. Keby to bola iba prázdna časť rozhrania, k udalosti nebolo pripojené nič, a tak sa nič nestane.

Potiahnutím prsta po obrazovke by sa vygenerovala ďalšia udalosť, ktorá obsahuje informácie o počiatočnom a koncovom bode ťahania a možno aj o rýchlosti. Udalosti nám poskytujú jednoduchý spôsob reagovať na veci, ktoré sa dejú.

Jednoduché: kliknutie

Asi najjednoduchšou udalosťou na počúvanie je udalosť kliknutia, ktorá sa spustí vždy, keď používateľ klikne na prvok. Nemusí to byť konkrétne „tlačidlo“ - k čomukoľvek na obrazovke môžete pripojiť poslucháča udalostí, ale ako vývojár webu musíte túto intuitívne urobiť. Vytvorenie pseudodlačidla z písmena skryté v odseku textu je možné, ale trochu hlúpe.

Postupy pripájania poslucháča udalostí sa v priebehu rokov značne zmenili, keďže sa vyvíjal jQuery, ale toto je v súčasnosti akceptovaná metóda využívajúca na ():

$(volič).na(udalosť,akčné);

Vypočuť si “cvaknutie“Udalosť na akýchkoľvek prvkoch tejto triedy .klikni na mňa, a potom prihlásite správu do konzoly obsahujúcej text prvku, na ktorý ste klikli, by ste urobili:

$ ( "Click"). Na ( "cvaknutie", function () { console.log ($ (this) .Texty ()); });

Mali by ste vidieť, že akcia, ktorú sme tu vložili, je anonymná funkcia, ktorá používa toto selektor (ktorý sa vzťahuje na ktorýkoľvek objekt jQuery, ktorý v súčasnosti rieši) - v tomto prípade to bolo kliknuté. Potom extrahujeme text tohto kliknutého objektu a prihlásime ho do konzoly. Ľahké, však?

Zastaviť predvolenú akciu:

V určitom okamihu budete chcieť priložiť k niečomu ako tlačidlo na odoslanie odkazu alebo formulára, ktoré zvyčajne robí niečo iné. V takom prípade je veľmi pravdepodobné, že nechcete, aby sa táto pôvodná akcia vykonala - namiesto toho by ste chceli urobiť nejakú fantastickú AJAX alebo špeciálnu kúzlu jQuery.

Aby sme zabránili uskutočneniu tejto predvolenej akcie, máme praktickú metódu s názvom preventDefault. Očividne. Pozrime sa, ako by to fungovalo pri manipulácii s tlačidlom odoslania formulára

$ ("# myForm"). on ("submit", function (event) { console.log (event); event.preventDefault (); návrat nepravdivý; });

Tu je niekoľko zmien - najskôr sa pripájame k internetu Predložiť udalosť namiesto kliknutia. Toto je vhodnejšie pri manipulácii s formulárom, ako by mohol užívateľ Karta-space, hit vstúpiť, alebo stlačte a Predložiť tlačidlo - to všetko by vyvolalo predvolenú akciu formulára. Premieňame tiež premennú udalosti na anonymnú funkciu, takže sa môžeme odvolať na údaje o udalosti. Potom sme použili event.preventDefault () v kombinácii s návrat nepravdivý zastaviť dokončenie všetkých obvyklých akcií.

V takom prípade je to iba zaznamenávanie udalosti do konzoly, ale v skutočnosti by ste pravdepodobne mali tu obsluhu AJAX, s ktorou sa budeme zaoberať v nasledujúcej lekcii.

Udalosti môžu byť spustené aj vy

V predchádzajúcich dvoch príkladoch sme na počúvanie udalosti použili metódu on, ale udalosť môžete spustiť aj manuálne, ale namiesto toho ju môžete vyvolať manuálne. Je ťažké pochopiť, prečo by ste to mohli použiť na vynútenie kliknutia, ale dáva zmysel, ak sa pozrieme na udalosť zamerania.

Zaostrenie sa zvyčajne používa so vstupnými poľami na vypnutie správy, keď používateľ klikne do políčka a zadá text - napríklad inštruktážnu správu vo formáte, ktorý má použiť. Môžete ho tiež použiť na vynútenie používateľa do poľa používateľského mena, keď sa stránka načíta - takže môžu okamžite začať písať svoje prihlasovacie údaje.

$ (document) .ready (function () { $ ( '# Username'.focus (); });

Keby ste tiež pripojili poslucháča udalostí zaostrenia k tomuto poľu užívateľského mena, spustilo by sa to aj vtedy, keď ste vynútili zameranie. Udalosti sa preto dajú spustiť aj načúvať.

Nateraz cvičte pripájaním sa k rôznym udalostiam na stránke - nájdete úplný zoznam všetkých udalostí udalosti sú k dispozícii tu - nezabudnite použiť funkciu preventDefault, ak ide o odkaz alebo tlačidlo, a zistite, aký výstup získate z konzoly o údajoch udalostí.

Nechám to tam dnes, keď sa blížime ku koncu tejto mini-série tutoriálov jQuery. Na konci by ste mali byť dostatočne sebavedomí, aby ste na svoju stránku vrhli jQuery a urobili z toho niečo. Budúci týždeň sa pozrieme na AJAX - dôležitú súčasť moderného webu, ktorá vám umožní načítať a odoslať požiadavky na pozadí bez prerušenia používateľa.

Spätná väzba, otázky, pripomienky a problémy sú ako vždy vítané.

Obrázkový kredit: Dotyková obrazovka cez Shutterstock