JQuery õpetus (4. osa)

Reklaam

Täna hakkame seda püstitama ja näitame, kus jQuery paistab - sündmused. Kui järgisite varasemaid õpetusi, peaks teil nüüd olema üsna hea arusaam jQuery põhiline koodistruktuur jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ... Loe rohkem (ja kõik jubedad lokkis traksid, mis sellega kaasnevad), samuti kuidas leida DOM-i elemente ja mõned asjad, mida saate nendega manipuleerimiseks teha JQuery (2. osa) sissejuhatus: meetodid ja funktsioonidSee on osa pidevast jQuery veebiprogrammeerimissarja tutvustamisest. 1. osa hõlmas jQuery põhitõdesid selle kaasamiseks oma projekti ja valijaid. 2. osas jätkame ... Loe rohkem . Näitasin teile ka, kuidas juurde pääseda arendajakonsool Chrome'is Saate teada saada veebisaidi probleeme Chrome'i arendaja tööriistade või FirebugigaKui olete seni jQuery õpetusi jälginud, võib-olla olete juba mõne koodiprobleemiga kokku puutunud ja pole teada, kuidas neid parandada. Mittefunktsionaalse bitti koodiga silmitsi seistes on see väga ...

Loe rohkem ja kuidas saaksite seda kasutada oma jQuery koodi silumiseks.

Sündmused - muu hulgas - võimaldavad teil reageerida lehel juhtuvatele asjadele ja kasutajate interaktsioonidele - klõpsamisele, kerimisele ja kõigele muule.

Mis on ikkagi sündmus?

Uute programmeerimises, mis hõlmab mingisugust graafilist liidest, osutavad sündmused kasutaja ja rakenduse vahelisele interaktsioonile; või saab seda sisemiselt genereerida mõne muu protsessi abil. Rakendused valivad sündmused, mida „kuulata”, ja kui see sündmus käivitatakse, saavad nad mingil viisil reageerida.

Näiteks genereerib teie iPhone'i ekraanil koputamine ühe koputusürituse x, y koordinaadiga täpselt selles kohas, kuhu koputasite. Kui koputasite konkreetsele objektile, näiteks nupule, siis on tõenäoline, et nupp kuulas seda sündmust ja teeb vastavalt sellele mõnda toimingut. Kui see oli lihtsalt liidese tühi osa, ei lisatud sündmusele midagi ja nii ei juhtu midagi.

Sõrme lohistamine üle ekraani genereerib veel ühe sündmuse, mis sisaldab teavet lohistamise alguse ja lõpppunkti ning võib-olla ka kiiruse kohta. Üritused pakuvad meile lihtsat viisi reageerida toimuvatele asjadele.

Lihtne: klõpsamine

Võib-olla on kõige lihtsam sündmus, mida kuulata, klõpsamissündmus, mis vallandatakse iga kord, kui kasutaja klõpsab mõnel elemendil. See ei pea olema konkreetne nupp - saate sündmuse kuulaja ekraanile kinnitada, kuid veebiarendajana peate selle loomulikult intuitiivseks tegema. Pseudo-nupu loomine tähest välja a teksti lõiku peidetud on võimalik, kuid mõnevõrra rumal.

JQuery arenedes on sündmuste kuulaja kaasamise meetodid aastatega märkimisväärselt muutunud, kuid see on praegu aktsepteeritud meetod, kasutades peal():

$(valija).peal(sündmus,tegevus);

Et kuulata „klõps”Üritus mis tahes elementidega klassiga .clickme, ja logige seejärel sõnum konsooli, mis sisaldab tekst klõpsatud elemendist teeksite järgmist:

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

Teil peaks olema võimalus näha, et siin manustatud toiming on anonüümne funktsioon, mis kasutab funktsiooni see valija (mis viitab mis tahes objektile, millega jQuery praegu tegeleb) - sel juhul asi, millele klõpsati. Seejärel ekstraheerime klõpsatud objekti teksti ja logime selle konsooli. Lihtne, eks?

Peatage vaikimisi toiming:

Mingil hetkel soovite manustada mõnele lingile või vormi saatmise nupule, mis tavaliselt teeb midagi muud. Sel juhul on üsna tõenäoline, et te ei soovi, et see originaaltoiming teostatakse - selle asemel soovite teha mõnda väljamõeldud AJAX-i või spetsiaalset jQuery võlu.

Selle vaikimisi toimimise vältimiseks on meil käepärane meetod nimega preventDefault. Ilmselt. Vaatame, kuidas see toimiks vormi esitamise nupuga tegelemisel

$ ("# myForm"). on ("edastama", funktsioon (sündmus) { console.log (sündmus); event.preventDefault (); tagastama vale; });

Siin on mõned muudatused - esiteks kinnitame Esita klõpsamise asemel sündmus. See on sobivam vormi käsitlemisel, nagu kasutaja võib sakk-tühik, lööma sisenemavõi vajuta a Esita nuppu - see kõik käivitaks vormi vaikimisi toimingu. Samuti edastame sündmuse muutuja anonüümsesse funktsiooni, nii et saame viidata sündmuste andmed. Seejärel oleme kasutanud event.preventDefault () koos tagasi vale kõigi tavapäraste toimingute lõpetamiseks.

Sel juhul logib see sündmuse ainult konsooli, kuid tegelikult oleks teil siin tõenäoliselt AJAX-käitleja, millega me järgmises õppetükis tegeleme.

Sündmused võivad teid ka käivitada

Kahes eelmises näites kasutasime sündmuse kuulamiseks sisse lülitatud meetodit, kuid võite sündmuse ka käsitsi käivitada, nimetades seda meetodina. Raske on aru saada, miks võiksite seda klõpsamiseks kasutada, kuid see on mõttekam, kui vaatame fookusesündmust.

Fookust kasutatakse tavaliselt sisestusväljadega, et kustutada teade, kui kasutaja klõpsab kasti teksti sisestamiseks - näiteks kasutatava vormingu juhendsõnum. Kuid võite seda kasutada ka kasutaja sundimiseks kasutajanime väljale, kui leht on laaditud - nii saavad nad kohe hakata oma sisselogimisandmeid tippima.

$ (dokument). juba (funktsioon () { $ ('# kasutajanimi'.focus (); });

Kui oleksite sellele kasutajanime väljale lisanud ka fookusesündmuse kuulaja, käivitub see ka fookuse sundimisel. Seetõttu saab sündmusi nii käivitada kui ka kuulata.

Praegu harjutage, kinnitades erinevaid sündmusi lehel - leiate kõigi nende täieliku loendi üritused saadaval siin - pidage meeles, et kasutage tõrkeotsingut, kui see on link või nupp, ja vaadake, millist väljundit saate konsoolilt sündmuste andmete kohta.

Jätan selle täna sinna, kui oleme selle jQuery õpetuste miniseeria lõpu lähedal. Peaksite selle lõpuks olema piisavalt enesekindel, et visata oma lehele mõni jQuery ja panna see midagi tegema. Järgmisel nädalal vaatame AJAX-i - moodsa veebi olulist osa, mis võimaldab teil taustal laadida ja saata taotlusi kasutaja segamata.

Nagu alati, on tagasiside, küsimused, kommentaarid ja probleemid teretulnud allpool.

Kujutise krediit: Puuteekraan Shutterstocki kaudu