„jQuery“ vadovėlis (4 dalis)

Skelbimas

Šiandien mes tai padidinsime ir tikrai parodysime, kur šviečia „jQuery“ - įvykiai. Jei sekėte ankstesnius vadovus, dabar turėtumėte gana gerai suprasti pagrindinė jQuery kodo struktūra „jQuery“ pamoka - pradžia: pagrindai ir parinkėjaiPraėjusią savaitę aš kalbėjau apie tai, kokia svarbi „jQuery“ bet kuriam šiuolaikiniam interneto kūrėjui ir kodėl tai nuostabu. Šią savaitę, manau, atėjo laikas susitepti rankas su kažkokiu kodu ir išmokti, kaip ... Skaityti daugiau (ir visi su tuo susiję siaubingi garbanų petnešos), taip pat kaip rasti DOM ir kai kuriuos dalykus, kuriuos galite padaryti, kad jais manipuliuotumėte „JQuery“ (2 dalis) įvadas: metodai ir funkcijosTai pradedančiųjų pradedančiojo „jQuery“ interneto programavimo serijos įžangos dalis. 1 dalyje aprašyti „jQuery“ pagrindai, kaip įtraukti ją į savo projektą, ir parinkėjai. 2 dalyje mes tęsime su ... Skaityti daugiau . Aš taip pat parodžiau, kaip pasiekti kūrėjo pultas „Chrome“ Išsiaiškinkite svetainių, susijusių su „Chrome“ kūrėjų įrankiais ar „Firebug“, problemas

Jei iki šiol sekėte mano „jQuery“ vadovus, galbūt jau susidūrėte su kai kuriomis kodo problemomis ir nežinote, kaip jas išspręsti. Kai susiduri su nefunkciniu bitų kodu, tai labai ... Skaityti daugiau ir kaip galėtumėte naudoti jį norėdami suderinti „jQuery“ kodą.

Be kitų įvykių, įvykiai leidžia jums reaguoti į dalykus, kurie vyksta puslapyje, ir vartotojo sąveiką - spustelėti, slinkti ir visa tai, kas išgalvota.

Kas vis tiek yra įvykis?

Tiems, kurie dar nėra programavę ir kuriuose yra tam tikros formos grafinė sąsaja, įvykiai reiškia bet kokią vartotojo ir programos sąveiką; arba gali būti sugeneruotas viduje kitu procesu. Programos pasirenka, kuriuos įvykius „klausytis“, ir kai tas įvykis suveikia, jie gali tam tikru būdu reaguoti.

Pvz., Bakstelėję „iPhone“ ekrane, sugeneruosite vieną įvykį „bakstelėkite“ su x, y koordinatėmis tiksliai toje vietoje, kur bakstelėjote. Jei bakstelėjote tam tikrą objektą, pavyzdžiui, mygtuką, greičiausiai mygtukas klausėsi to įvykio ir atitinkamai atliks tam tikrą veiksmą. Jei tai buvo tik tuščia sąsajos dalis, prie įvykio niekas nebuvo pridėta ir nieko nebus.

Vilkdami pirštą per ekraną, sugeneruosite kitą įvykį, kuris apima informaciją apie tempimo judesio pradžios ir pabaigos taškus, o galbūt ir greitį. Įvykiai suteikia mums lengvą kelią reaguoti į įvykius.

Lengva: spustelėkite

Turbūt lengviausias įvykis, kurio galima klausytis, yra paspaudimų įvykis, suaktyvinamas kiekvieną kartą, kai vartotojas spustelėja elementą. Tai nebūtinai turi būti konkretus „mygtukas“ - įvykių klausytoją galite prisegti prie bet kurio ekrano, tačiau, kaip žiniatinklio kūrėjas, jūs turite tai padaryti intuityviai. Sukurti pseudo mygtuką iš raidės a paslėpti teksto pastraipoje yra įmanoma, tačiau šiek tiek kvaila.

Metams bėgant, tobulėjant „jQuery“, labai pasikeitė renginio klausytojo pritvirtinimo būdai, tačiau tai yra šiuo metu priimtas metodas, naudojantis įjungta ():

$(selektorius).apie(įvykis,veiksmas);

Norėdami klausytis „paspauskiteĮvykis su visais klasės elementais .Paspausk mane, ir tada įrašykite pranešimą į konsolę, kurioje yra tekstas elemento, kurį spustelėjote, darytumėte taip:

$ (". clickme"). on ("click", function () { console.log ($ (this) .text ()); });

Turėtumėte pamatyti, kad veiksmas, kurį mes čia įdėjome, yra anoniminė funkcija, naudojanti tai parinkiklis (kuris nurodo bet kokį objektą, su kuriuo šiuo metu susijęs „jQuery“) - šiuo atveju dalykas, kuris buvo paspaustas. Tada mes ištraukiame to paspausto objekto tekstą ir įrašome jį į konsolę. Lengva, tiesa?

Sustabdyti numatytąjį veiksmą:

Tam tikru metu norėsite pridėti prie kažkokio saito ar formos pateikimo mygtuko, kuris paprastai daro ką nors kita. Tokiu atveju visiškai tikėtina, kad nenorite, jog būtų atliktas originalus veiksmas - vietoj to norite padaryti kokį nors išgalvotą AJAX ar ypatingą „jQuery“ magiją.

Norėdami užkirsti kelią tam numatytam veiksmui, turime patogų metodą, vadinamą prevenDefault. Akivaizdu. Pažiūrėkime, kaip tai veiktų dirbant su formos pateikimo mygtuku

$ („# myForm“). on („pateikti“, funkcija (įvykis) { console.log (įvykis); event.preventDefault (); grąžinti klaidingą; });

Keletas pakeitimų čia - pirmiausia pridedame prie Pateikti įvykis, o ne paspaudimas. Tai yra tikslingiau, kai kalbama apie formą, kaip gali vartotojas tabu-tarpas, pataikė įeiti, arba paspauskite a Pateikti mygtukas - visa tai suaktyvins numatytąjį formos veiksmą. Mes taip pat perduodame įvykio kintamąjį į anoniminę funkciją, todėl galime nurodyti įvykio duomenys. Tada mes panaudojome event.preventDefault () kartu su grąžinti klaidingą sustabdyti visus įprastus veiksmus.

Tokiu atveju jis tik registruoja įvykį prie konsolės, tačiau iš tikrųjų čia greičiausiai turėtumėte AJAX tvarkyklę, su kuria mes susidursime kitoje pamokoje.

Įvykiai taip pat gali jus paskatinti

Ankstesniuose dviejuose pavyzdžiuose įvykio klausymui naudojome įjungimo metodą, tačiau taip pat galite rankiniu būdu suaktyvinti įvykį, pavadindami jį kaip metodą. Sunku suprasti, kodėl galite tai panaudoti, norėdami priversti „paspausti“, tačiau prasmingiau, jei žiūrime į fokusavimo įvykį.

Fokusavimas paprastai naudojamas įvesties laukuose, kad būtų suaktyvintas pranešimas, kai vartotojas spustelėja langelį, norėdamas įvesti tekstą, pavyzdžiui, instrukcinis pranešimas, kurio formatas naudojamas. Bet jūs taip pat galite naudoti jį, kad priverstumėte vartotoją į vartotojo vardo lauką, kai puslapis buvo įkeltas, kad jis galėtų nedelsdamas pradėti rašyti savo prisijungimo duomenis.

$ (dokumentas). jau (funkcija () { $ ('# vartotojo vardas'.focus (); });

Jei prie to vartotojo vardo lauko taip pat būtumėte pridėjęs fokusavimo įvykio klausytoją, jis taip pat suveiktų, kai priverstinis fokusavimasis. Todėl įvykius galima ir sukelti, ir jų klausytis.

Kol kas atlikite praktiką prisirišdami prie įvairių įvykių puslapyje - galite rasti išsamų visų renginius galite rasti čia - nepamirškite naudoti prevenDefault, jei tai yra nuoroda ar mygtukas, ir pažiūrėkite, kokį išvestį iš įvykio duomenų gausite iš konsolės.

Šiandien paliksiu tai, kai artėsime prie šios mini „jQuery“ vadovėlių serijos pabaigos. Pabaigoje turėtumėte būti įsitikinę, kad į savo puslapį įmesite šiek tiek „jQuery“ ir priversite jį ką nors padaryti. Kitą savaitę apžvelgsime AJAX - svarbią šiuolaikinio žiniatinklio dalį, leidžiančią įkelti ir siųsti užklausas fone netrukdant vartotojui.

Kaip visada, atsiliepimai, klausimai, komentarai ir problemos laukiami žemiau.

Vaizdo kreditas: Liečiamas ekranas per „Shutterstock“