[Powered by Google Translate] [Seminaras: JQuery] [Vipul Shekhawat, Harvardo universitetas] [Tai CS50.] [CS50.TV] Jei po kartu namuose, jūs iš tikrųjų galite pasiekti savo skaidres lankosi , eikite į šią nuorodą. Tai TjjRWj, ant bit.ly. Taip pat galite tiesiog eiti į URL tiesiogiai kuris yra cloud.cs50.net / ~ vshekhawat, kuris yra mano vardas, ir jQuery. Aš labai rekomenduojame jums sekti kartu, jei jūs žiūrite namuose, ir jei jūs čia taip pat, nes tai gana interaktyvus pristatymas. 

Taigi, šiandien aš ruošiuosi kalbėti apie JQuery, ir pirmas klausimas, kas yra JQuery? Šiais metais, aš žinau, jūs vaikinai neapima "JavaScript" taip detaliai, kaip mes turime per pastaruosius metus. "JavaScript" yra, visų pirma, tik client-side kalba kad jūs naudojate paleisti scenarijus ir kodeksas kiekvieno vartotojo kompiuteryje. Taigi jūs turite serverį, kuris suteikia tinklalapius žmonėms, , bet jūs galbūt norėsite daryti stuff savo mašina, paprašyti jų mašina siųsti užklausas į serverį kas 30 sekundžių arba kažkas panašaus. Jūs galite padaryti, kad naudojant "JavaScript". JQuery tik suteikia daugiau funkcionalumo viršuje "JavaScript" kad nėra papildomų dalykų už jus. Jei pažvelgti į turinį ant viršaus, kuris apibūdina kai kurių dalykų, kad jums pavyko tai padaryti. Taigi, apskritai, jis buvo sukurtas 2006 metų sausį. Ji pirmą kartą buvo sumanyta 2005 metų rugpjūtį. Jis buvo maždaug už keletą metų, ir tai tikrai dalis naujosios Web 2.0 judėjimo tai padarė Interneto taip blizga. Tai plačiausiai naudojamas biblioteka JavaScript. Per 19,6 mln tinklapis yra nenaudoti ir naudojimas vis dar didėja pagal builtwith.com, kuris, matyt, per pastaruosius metus, ką tik buvo nuolat didėja gana tiesiškai. Tarp geriausių 10 milijonų svetainių, dar - apie 40% iš jų šiuo metu jį naudoti. "Facebook" naudoja ją, daug kitų svetainių, šiuo metu ja naudotis. Jūs galite peržvelgti tų apie savo statistiką, jei norite. Ir tu gali pasakyti, kad atėjo teisėtu, nes jis turi pagrindą ir 13 tarybos narių, kartu su 20 žmonių, kurie dirba su juo reguliariai komanda. Taigi tai labai plačiai naudojama, ji turi. Org URL, tai išgalvotas, ji turi papildoma nauda kitų dalykų, todėl baisi. 

Kodėl jūs turėtumėte jį naudoti? JQuery yra labai lengvas. Tai reiškia, kad tai ne didžiulis failas. Galite atsisiųsti minified failą, kuris yra be visų tarpą ir komentarus, ir tai tik 32 KB. Taigi tai lengva tiesiog išmesti į savo tinklalapį ir tiesiog pradėti jį naudoti. Taip pat labai efektyviai parašyta, todėl neužima daug - jis nelėtina jūsų svetainę daug, kai jūs jį naudoti. Jis leidžia jums įgyvendinti tai, kas anksčiau buvo neįmanoma. Yra keletas funkcijų aspektus, kaip sukurti animaciją, kad paprastai būtų labai, labai sunku padaryti. Tačiau JQuery jie iš tikrųjų labai paprasta. Ir yra keletas dalykų, kurie erzina daryti, galima JavaScript, pavyzdžiui, siųsti POST užklausą, bet nusiųsti prašymą į serverį, jūs turite parašyti penkių ar šešių ar septynių eilučių kodo. Dabar galite tiesiog daryti vienos eilutės kodą, vienu skambinimo funkcijos. Tai tikrai supaprastina stuff, kad jūs darote daug. Ir visi cool vaikai jį naudoti. Iki, kad aš turiu galvoje mane. Baigiamajame projekto praėjusiais metais, kuri yra news.whrb.org, kuri yra radijo stoties, aš sukūriau šį dienoraštį kuriame vyksta visas rodo, kad mes padarėme ir MP3 failus už juos. Jūs galite naršyti per pastaruosius rodo, ir visa tai daroma naudojant JQuery. Galite pasakyti dėl visų šių animacija iš esmės. Taigi, jei turite - jei kuriate naują pranešimą, pamatysite šių mažai slideDowns; kad visa tai daroma naudojant JQuery. Ir tai išnyks - taip, kad daiktų rūšis yra viskas padaryta naudojant JQuery, ir jūs neturite nuolat perkraukite puslapį naršyti svetainėje. Kitas cool dalykas, kad pagaminti naudojant JQuery tai pateikimas. Aš naudoju atviro kodo dalykas vadinamas scrolldeck, kuris nors rašė ant JQuery. Jei jūs iš tikrųjų pažvelgti šaltinio, galite matyti, kad jie naudoja šį dolerio ženklas; dolerio ženklus naudojami JQuery, reiškia, kad funkcija yra JQuery funkcija. Taigi jie apibrėžti įvynioti ant JQuery , kuri leidžia jums padaryti pristatymą, kaip šis, ir jūs galite pamatyti, kad čia jie taip pat originalus JQuery failą, o tai, ką jūs turite būti, jei norite naudoti JQuery į savo interneto svetainėse. 

Kreipdamiesi apie tai, kaip jūs jį įdiegti? Jūs galite tiesiog eiti į jQuery.com ir atsisiųsti failą, pridėti jį prie žiniatinklio katalogą ir jį įtraukti. Taigi tik ant viršaus, į galvą tegus HTML failą jūsų pagrindinis HTML failą, tereikia, kad kodo eilutę su teisinga versija, kuri versija JQuery jūs naudojate. Jūs galite jį atsisiųsti, eikite į jQuery.com, spustelėkite "Atsisiųsti JQuery", ir jūs turite jį. Štai ir viskas. Ir iš tikrųjų, mes galime pažvelgti, kas atrodo išvaizdą. Jei paspausite ant parsisiųsti čia jQuery tai. Tai tiesiog vienas didelis failas JavaScript, kad atlieka visą magija stuff jums. Tai minified versija, kuri nėra įskaitomas ne visiems. Taip pat galite pažvelgti į vystymosi versiją, kuri yra skaitoma bet vis tiek labai, labai ilgas. Tai stuff ten daug. Jūs taip pat galite susieti su "Google" surengė versiją. Taigi, kad jums leis jums tiesiog remtis "Google" ją suteikti. Jie teikia kiekvieną jo versiją, kurią galima bet kuriuo metu. Taigi, jūs greičiausiai gali remtis Google priimančiosios tai už jus. Arba jūs galite įdėti nuorodą į JQuery savo naujausią versiją. Jie turi adresą, kuris visada atnaujinta iki naujausios versijos. Tai JQuery vėliau, ir ten viena problema su tuo, yra tai, kad jei atnaujinama JQuery ir kai kurie iš ankstesnės funkcijos jie tampa retrograded arba pasenusios, ji negali - jis gali pradėti ne gauti nebepalaikomi. Taigi, jei rašote svetainę naudojant versiją 1.8.2, iki to laiko, versija 2.7 ateina iš kai kurios funkcijos rašė nebeveikia. Taigi, tai geriau tiesiog atsisiųsti 32 KB failą, įdėti jį į savo tinklalapį, ir jis bus dirbti amžinai. 

Aš ruošiuosi eiti į priekį ir pradėti kalbėti apie tikrąjį funkcionalumą JQuery. Pirmas dalykas yra selektoriai. Tai, ką JQuery iš pradžių buvo siekiama suteikti. Ir jūs galite spustelėti ant dokumentų pažvelgti išsami dokumentacija selektoriai aš ruošiuosi danga. Už selektoriai idėja yra ta, kad jūs galite pasirinkti HTML elementų puslapyje. Puslapio elementai turi ID ir klases ir kitus identifikavimo aspektai, į kuriuos juos. Taip pat - they're įvairių užsakymus. Kai laiko jie įdėtos viduje tarpusavyje. JQuery leidžia jums sukurti paprastus klausimus, kad atkurtumėte elementus puslapyje. Tada galite manipuliuoti šiuos elementus naudojant jQuery funkcijas, kuris yra manipuliavimas skyriuje mes susisieksime vėliau. Galite keisti HTML, keisti CSS, taip pat galite animuoti ir pridėti funkcijų, kurios aktyvuoja tam tikrus įvykius. Taigi, pavyzdžiui, jeigu kažkas manimi paspaudėte, norite ką nors, kad taip atsitiktų, jūs galite padaryti, kad naudojant JQuery taip pat. Ir yra daugybė būdų, kaip pasirinkti elementus. Dauguma jų aš niekada nesinaudojo, tačiau yra pagrindiniai tie, kuris yra gana svarbus. Elementas selektorių, pavyzdžiui, jei jūs tiesiog pasirinkti nieko tai DIV - Aš iš tikrųjų turi kodą atviras šio skaidrių pristatymą. Taigi, pavyzdžiui, čia pirmą skaidrę. Čia mes turime div. Jei mes iš tikrųjų pasirinkti visus DIV-ų puslapyje, jis bus tiesiog suteikia mums visų DIV kad egzistuoja šio failo masyvo. ID selektorių leidžia pasirinkti nieko su tam tikru ID. Taigi, jei tai, pavyzdžiui, tai, ką turi ID "kas" ir jei mes tai su # ką vietoj tikru ID, tai tiesiog grąžina masyvą, kuris turi vieną elementą ir tai, kad šio puslapio elementas. Mes taip pat galime derinti selektoriai tokiu būdu, turintys pasirinkti tik dalykų su ID, kurie DIV-ų. Taigi, taip. Tik pasirinkite DIV-ų, kurie turi tą ID. Klasei, jūs tiesiog naudokite tašką, tai tas pats, kaip CSS. Palikuonis taip pat veikia, tad jei turite kokių nors klasę ir ji įdėtos elementai joje - Taigi, pavyzdžiui, yra keletas klasė ir ji turi inkaro tegus nuorodą į kitą puslapį, galite naudoti šią sintaksę gauti nuorodą. Taip pat galite pasirinkti keletą dalykų vienu metu, tiesiog atskirkite juos kableliais, naudoti bet selektorių, kurį norite, ir jums bus pasirinkti juos visus vienu metu, viename masyve. Ir tada ten taip pat nėra selektorių, todėl jūs galite pasirinkti visus Divs kad neturite tam tikrą klasę. Ir tai tik naudingas būdas gauti įvadas į tai, kaip šis pasirinkimas veikia. Aš jums parodysiu keletą konkrečių pavyzdžių sekundę. 

Išplėstinė selektoriai yra - tai tik keletas pavyzdžių. Yra daugybė jų, bet jei norite pasirinkti visus Nuotraukos žymos per kai kurių elementų, tada jums tiesiog daryti: įvaizdį. Jei norite pasirinkti net elementus, pavyzdžiui, jei yra 20 iš jų, norite pasirinkti 0, 2, 4, 6 ir tt, jums: net, arba galite padaryti: keista. Tai yra pseudo selektoriai, tai reiškia, kad jie iš tikrųjų apskaičiuoti kiekvienas kitas elementas, o ne tik ketina ir pasirinkti juos visus. Taip pat galite - kiekvienas elementas taip pat gali turėti specifines savybes. Taigi, pavyzdžiui, klasė = centras taip pat yra atributas. Dėl šios žymės saito href, hiperteksto nuoroda yra atributas, taip pat. Taigi galite pasirinkti kažką, kad nuorodos į konkretų puslapį arba tiesiog - tai tikrai bendri. Galite pasirinkti nieko su bet atributas, kurį norite. Ir tada, taip pat atributas yra. Jei, pavyzdžiui, norėjo pasirinkti visus įvesties elementai kurie turi žodį "pass" kaip jų vardu, jei puslapis turi įvesties teksto bloką tai vadinama "slaptažodis", kad būčiau vienas iš būdų, galite pasirinkti, kad. Ir yra daug daugiau. Jūs galite eiti į priekį ir ieškoti dokumentų ir pamatyti konkrečius pavyzdžius, kaip ji veikia. 

Kitas dalykas yra DOM manipuliacijos. Kai mes pasirinkti elementus, mes norime iš tikrųjų stuff su jais. Iki šiol mes ne pažvelgė, kad ne visi, bet jei pažvelgti į dokumentus, ten tikrai daug, kad mes galime padaryti. Šiuo metu mes ketiname pasirinkti elementus, šį pristatymą ir manipuliuoti juos naudojant JQuery. Kadangi tai yra įgyvendinama naudojant JQuery, mes turime prieigą prie jQuery biblioteką, ir mes galime naudoti šias funkcijas šiuo kodu. Vienas naudingas dalykas, kad jūs negalite žinoti apie tai konsolė. Ir "Google Chrome" yra tai, ką aš naudoju. Galite paspausti alt komandų J arba AltControl J atidaryti konsolę. "Firefox" Manau, kad komandų Shift K ar kontrolės Shift K. Safari jūs turite eiti pakeisti kai kuriuos nustatymus. Yra nuoroda, jei norite tai padaryti, bet aš rekomenduoju gauti Chrome "arba" Firefox ". Taigi galime atverti konsolę, tai čia. Jis leidžia jums iš esmės tiesiog daryti ką tik nori. Taigi, galite tiesiog įveskite sukurti kintamąjį pavadinimu x, x = 5, pažiūrėkime, ką X + 2. Jūs netgi galite padaryti kažką panašaus CS + pažiūrėkime, X + 45, tai bus CS50. Jūs galite tiesiog padaryti kai kurių tipiškų JavaScript stuff. Bet taip pat galite padaryti JQuery čia. 

Taigi pažvelkime į šio pirmojo aspekto čia. Mes ketiname sukurti kintamąjį vadinamą HTML, kuri yra eilutė. Ji pastraipos žymę jame, tai vadinama kai naują tekstą. Taigi, mes turime šį HTML, tai kai naujas tekstas, paragrafe žymes. Dabar mes iš tikrųjų nori jį pridėti prie puslapio. Aš jį taip, kad už šioje dalyje, HTML, šis pavadinimas čia yra pridėkite vardą. Jei mes pasirinkti papildymo ID ir tada pridėti jį HTML kintamasis aš ką tik sukūrėte, tai pridės, kad HTML pabaigoje, iš karto po šio straipsnio žyma. Taigi, jei mes tai darome - mes išrinkome šią dalį, ir mes vadinamas papildymo funkciją su HTML kintamojo Aš ką tik pridėjo, tai pridės, kad naują tekstą tiesiai ten puslapyje. Mes taip pat galime pridėkite iki keliu ženklas, kuris reiškia, kad jis eis, tuo šio elemento pradžioje. Taigi yra keletas naujų teksto pradžioje ir vėliau. Aš galiu eiti į priekį ir atnaujinkite atsikratyti šio stuff Aš ką tik padaryta. Bet tai, kaip galite naudoti Dėti pavyzdys ir pridėti metodus manipuliuoti stuff puslapyje, pridėti šiek tiek HTML. 

Taip pat galite keisti klases. Atgal į šio stiliaus failą, aš sukūriau šį win klasės kad turi Teksto spalva raudona, šiek tiek fono spalvą ir teksto šešėlis. Jis atrodo šlykštus, bet aš iš tikrųjų galite - Ši dalis atitinka klasės ID. Taigi aš galiu pridėti, kad laimėti klasę. Galiu atlikti tai konsolės ir kad bus pridėti šią klasę, o dabar atrodo šlykštus, kaip tikėtasi. CSS automatiškai gauna kreipėsi į klases, kad jūs - jei yra CSS klasę, ji automatiškai bus taikomas jei jūs pakeisite elemento klasę. Tada mes galime tiesiog ištrinti jį naudojant Pašalinti klasę. Taigi, jei turite kokių nors iš anksto klases, pavyzdžiui, raudonos arba Pažymėję ir tada jūs norite taikyti tiems elementams, Jūs neturite daryti viską CSS Styling kiekvieną kartą. Jūs galite tiesiog pridėti klasės elementas, ir tada ji automatiškai taps - ji bus automatiškai ieškoti tinkamų šiai klasei. Mes taip pat galime pašalinti dalykų, kad aš ruošiuosi pasirinkti visus Divs puslapyje ir pašalinti jas. Kas tai atrodys? Tai atrodys nieko, todėl ten tikrai nieko kairėje. Mano pristatymas dingo. Galiu atnaujinti ir priima jį atgal, laimei, nes jis tiesiog veikia vienu metu, bet tai pašalinti Pavyzdžiui, jei norite visiškai sunaikinti off puslapio elementas. 

Taip pat galite perrašyti, ir aš ruošiuosi pasirinkti visus šio straipsnio žodžius puslapyje ir eiti jų viduje ir pakeisti bet kokį kitą tekstą, jie turi juos tik su žodžiu "bandymai". Jei tai padarysite, jums pakeisti kiekvieną dalį į puslapį su šiuo bandymai. Yep. Jie visi pakeisti bandymų. Štai prieiti tekstą ir perrašyti jį pavyzdys. Taip pat galite gauti informaciją, ir tai yra tikrai cool įvesties langelius. Jei turite įvesties langelį, kad žmonės rašomą įbrukti, žmonės rašyti stuff į jį, Čia mes pasirinkti įvestį, koks indėlis tegus su teksto tipo. Šiuo atveju yra tik vienas įėjimas langelį visam pristatymui, todėl mes tiesiog pasirinkite pirmąjį, ir tada mes vadiname VAL funkciją ant jo. Tai grąžina reikšmę, o įvesties lange vertė yra tik kas beatsitiktų būti viduje. Taigi, jei mes tai darome, tai tiesiog grąžina eilutę stuff. Ir jei mes jį vadiname vėl rašyti daugiau daiktų, jis virsta daugiau stuff. Štai vienas puikus būdas pasiekti elementus įvesties lange ir tada patikrinkite, tai galiojantis elektroninio pašto adresas, tai yra neteisinga data, pvz. Jūs galite tiesiog gauti dalykų iš karto, nes žmonės jį rinkdami, ir tada patikrinkite, ar jis galioja, siųsti jį atgal į serverį, daryti viską, ką nori su juo. Ir tai, kaip jūs gauti, kas viduje tas dėžes. 

Taip pat galite pakeisti CSS tiesiogiai, todėl vietoj pridedant klasė, kuri turi tam tikrų iš anksto nustatytų savybių, galite tiesiog pridėti norimą CSS nieko. Taigi leiskite pasirinkite kūnas, kuris yra visą pateiktį, ir spalva yra turto, kuris apibrėžia, ką spalvos tekstas. Jei mes jį pakeisti į raudoną, visi į puslapio tekstas bus paversti į raudoną. Mes galime padaryti kažką panašaus fone mėlynos spalvos, ten mes einame, tai gražus. Jūs galite padaryti viską, ką nori su šiuo klausimu. Naudojant CSS turto, jums tikrai gali pakeisti tai, kaip kas nors atrodo bet kuriuo metu. Kitas dalykas yra poveikis. Poveikis yra iš esmės tas pats, kaip pakeisti CSS, tačiau jie faktiškai teikia papildomų animaciją jį. Taigi vietoj to, kad tiesiog parodyčiau arba kažką slepia arba pakeisti spalvą, jūs iš tikrųjų galite padaryti animacinis. Štai dokumentus, jei norite pažvelgti į išsamiais paaiškinimais už jį. Bet aš ruošiuosi padengti pagrindines tie. Yra rodyti ir slėpti savybės. Rodyti / slėpti ID tikrųjų atitinka šį visą lange todėl, jei aš jį paslėpti, ji tiesiog išnyksta. Ir aš galiu parodyti jį dar kartą, jei aš noriu, kad jis ateis atgal. Ir tai atgal. Tai iš tikrųjų nebuvo išnyksta, Aš ne iš tikrųjų pašalinti jį iš puslapio, aš tiesiog nustatyti CSS nuosavybė matomumą paslėptas todėl jūs negalite pamatyti it anymore. Yra taip pat skaidrę aukštyn ir stumkite žemyn, kuri leidžia jums turėti šį poveikį. Tai skaidres iki išnyks, o po to dingsta galite pastumti jį žemyn, kad jis ateis atgal. Ir dabar tai atgal. Taip pat tai išnyks poveikis, kuris - išnyks ID atitinka šį bloką. Jei aš išnyks jį, tada jis bus pamažu išnyksta. Taip pat galiu išnyks jį, ir jis ateis atgal. Taip pat galite padaryti Fade To, kuris yra būdingas išnyks funkcija. Jūs galite turėti tai išnyks su kokia nors konkrečia neskaidrumo, kad jūs norite. Taigi, jei jūs išnyks jį lėtai 0,5, tai tapsite pusė matomas. Aš galiu padaryti, tai eiti į 0,1, ir atgal į 1, kad jis visiškai matomas dar kartą. Tai tik dar vienas animacija, jūs galite padaryti. 

Taip pat yra perjungimo poveikis. Taigi, aš ruošiuosi pasirinkti perjungimo ID, kuris atitinka šiame langelyje, ir tą div galite skambinti perjungti, jei tai matoma ji taps nematomas, jei jis nematomas jis taps vėl matomu. Taigi aš tiesiog pavadino perjungimo funkciją du kartus; Pirmasis buvo tas pats, kaip paslėpti, antrasis kvietimas buvo tas pats, kaip šou. Ir jūs taip pat gali tai padaryti su išnyks perjungimo, kurie daro tą patį, tik kad ji iš tikrųjų išsisklaido. Ir tas pats su skaidrę perjungti. Yra grandinės poveikis, taip pat, o tai reiškia, jei pasirinksite elementą ir tik skambinti animacijos metodų krūva ant jo, jei norite, kad ji išnyks, tada slinkite žemyn, ir tada paslėpti ir tada išnyks, jis darys juos iš eilės. Taigi dingo, grįžo - kažkodėl Slėpti neatsitiko. Pabandykime jį. Taip, kad jis numirė ir tada jis slydo toli. Ir yra daug daugiau. Galite naudoti animate funkciją sukurti savo animaciją, kuris yra gana sudėtingas, tačiau ji suteikia jums begalinės įtempis. Jūs galite padaryti bet animacija rūšies jūs norite. Taip pat galite naudoti eilės į eilę kelis animacija metu. Taigi, jei norite ką nors skristi virš puslapio Pristatymas nuo viršutiniame dešiniajame į apatinį kairįjį, galite tai padaryti, ir tiesiog tam tikrus veiksmus vienas po kito vyksta krūva. 

Kitas dalykas, mes ketiname kalbėti apie tai įvykių. Renginiai leidžia jums - Kol kas mes ką tik buvo įvedę daiktus į konsolės ir tai yra vienas iš būdų, kad tai įvyktų, bet dėl ​​faktinio puslapyje, jūs nesiruošia galėtų padaryti Vartotojo tipas dalykų, į konsolę. Norite dalykų atsitikti automatiškai. Norėdami, kad jums reikia naudoti įvykius, kurie aktyvuoja dėl kai tam tikras įvykis vyksta. Galite patikrinti už visą informaciją dokumentaciją. Taigi pažiūrėkime. Mes norime slėpti arba rodyti langelį, bet dabar šis mygtukas nieko nedaro, nes aš ne jį įgyvendinti dar. Aš ruošiuosi eiti į faktinę puslapio HTML. Štai skaidrę. Yra ir skaidrių DIV. Ji turi skaidrę klasę. Yra tekstas. Dabar, yra šis langelis ir langelis mygtuką. Kaip mes iš tikrųjų tai dingsta? Pirmiausia, galime parašyti funkciją, kuri leidžia imtuvo ID išnyksta. Tai už funtion sintaksė, galime tik jį vadiname hideTheBox. Ji neatsižvelgia jokių argumentų, nes nėra argumentų, kurių turi būti imtasi. Mes galime pasirinkti langelį ID. Taigi, naudojant JQuery pasirinkti, mes galime pasirinkti imtuvo ID, ir tada tiesiog padaryti jį išnyksta. Padarykime tai išnyks. Jei mes bėgo šią funkciją, faktinis konsolės mes galime apibrėžti šią funkciją, galime skambinti hideTheBox, ir ji veikia. Bet mes norime, kad jis įvyktų, kai mygtukas yra iš tikrųjų štampuoto. Norėdami tai padaryti, mes turime naudoti renginį. Norėdami susieti renginį kai kurių konkrečių mygtuką arba tam tikrų veiksmų vyksta, mes turime pasirinkti elementą, kad renginys bus sukelti - ar kad sukels renginį, atsiprašau. 

Taigi, visų pirma, tegul pasirinkite langelį mygtuką ID nes tai mygtukas, o dabar už tą mygtuką, mes norime sukurti animaciją, kai jis paspaudžiamas. Taigi, čia yra tai spustelėkite funkcija. Jis leidžia jums įpareigoti kitą funkciją į jį. Ši funkcija žengia dar vieną funkciją kaip argumentą mes galime pereiti į hideTheBox funkcija, ir kai šis mygtukas paspaudžiamas, kad funkcija bus automatiškai įvykdyti. Taigi tai veiks, jei mes taupome tai, aš atnaujinti, ir - vieną sekundę, aš atsiprašau. Leiskite man išspręsti šią problemą labai greitai. Gerai. Čia mes eiti. Taigi dabar langas nyksta kai mes paspauskite mygtuką. Mes taip pat galime tai pakeisti tiesiog fadeToggle, pakeisti jį tiesiog paslėpti ar rodyti langelį, ir tai taip pat veiks taip pat, jei mes atnaujinti. Mes galime ją slėpti, mes taip pat gali parodyti, ir kad toliau dirbs. Kitas dalykas, mes galime padaryti, tai mes ne iš tikrųjų turėti apibrėžti šį hideTheBox funkciją Prieš mes vadiname spustelėkite funkciją. Taigi vietoj apibrėžti funkciją ir raginama hideTheBox, mes tik ketinate skambinti, jei šis dalykas yra paspaudėte. Taigi, mes galime apibrėžti tai anonimiškai čia kuris yra požymis, kad "JavaScript". Galite nustatyti funkciją; paprastai, sakytume funkcija hideTheBox su argumentais, bet vietoj to, mes galime tik pasakyti, veikia jokių argumentų, pradėti garbanotas petnešomis apibrėžti funkciją, uždaryti šią garbanotais petnešomis, ir tada tiesiog apibrėžti funkciją čia per pirmą skliaustuose ir paskutinis skliaustuose kurios atitinka paspaudimo funkcija argumentais. Taigi, mes perduoti šią funkciją, galime nukopijuoti šį kodo eilutę čia, ir kad bus padaryti tą patį dalyką. Ir dabar mes neturime šio atsitiktinių fadeTheBox funkciją , kuris sėdi be aiškios priežasties. Funkcija buvo apibrėžta anonimiškai, ji neturi vardą. Jis tik vykdyti kai mes paspauskite ant dėžutės mygtuką. Taigi gaivus dar kartą, dar kartą, ir jūs galite pamatyti, kad jis vis dar veikia. Ir tai, kaip jums sukurti įvykius. 

Yra daug įvairių renginių, kad mes galime naudoti daug. Aš ruošiuosi pereiti į naudojant konsolę tiesiog parodyti jums, kaip tai darbas. Už kiekvieną iš jų identifikatoriai atitinka kiekvieną dėžutę. Taigi šis langelis spustelėkite vardą, tai vienas raktas ID ir tai vienas pelės vardą. Dar vienas dalykas yra tai, kad ten tai veiksmas funkcija;, o ne rašyti jį kiekvieną kartą, Aš iš tikrųjų nuėjo į priekį ir apibrėžti šio veiksmo funkciją čia. Tai nėra tas pats kaip hideTheBox funkcija. Ji gauna šį langelį, ir arba išnyksta it out ar blunka jį in Ir štai kodėl mes galime jį naudoti čia. Taigi, jei mes paspauskite ant šio paspaudimą ID, mes norime, kad langas išnyks arba pasikartoti. Tai tas pats, kaip mygtuką, kad mes turėjome paskutinės skaidrės. Dabar, kai mes tai vadiname, mes galime paspausti tai ir langas išnyks, tada spustelėkite jį dar kartą ir langas vėl atsiras. Tai gana paprasta. Dukart spustelėkite daro tą patį, išskyrus todėl yra reikalingas dvigubas spragtelėjimas. Taigi, jei paspausite ant jos vieną kartą ir spustelėkite jį dar kartą nieko nenutiks, bet jei jūs dukart spustelėkite greitai, ji išnyks. Jei dukart spustelėkite dar kartą, jis ateis atgal. Taigi, tai gana paprasta. Klaviatūrosįvestis rūšies keista, aš nemanau, kad ji iš tikrųjų veikia šiame pavyzdyje nes raktas žemyn, mygtuką aukštyn ir spauda ir kiti pagrindiniai veiksmai įjungti nesvarbu, ką elementas tu suriši ją. Pavyzdžiui, net jei aš laikytis klavišą žemyn į kūną arba kažkas visiškai tada jis vis dar įjungti, nesvarbu - tai ne konkretus. Aš neturiu būti spaudžiant ant ir paspauskite klavišą, kad padaryti nieko nebeliks. Tai būtų aktyvuota, nepriklausomai nuo to, ką elementas Aš šiuo in Taigi tai ne iš tikrųjų dirbti šiame pavyzdyje nes ji nepripažįsta mane kaip patekti indėlį į klaviatūros įvesties div. 

Bet jei pažvelgti į pelės veiksmus, Pirmasis yra nemenka, o tai gali daryti kai tai naudojant CSS. Jei naudojate CSS, galite ją sukurti taip, kad jei jūs Pakimba virš kažko, tada jos stiliaus pokyčiai. Tačiau naudojant JQuery galite pakeisti kitų dalykų, stilius taip pat. Taigi, pavyzdžiui, mes ketiname skambinti veiksmų, jei mes užveskite pelės žymeklį ant šios div. Tai reiškia, jei mes užveskite pelės žymeklį ant jo, tada langas išnyks. Jei mes tolti nuo jo, langas vėl atsiras. Jei mes vadiname tai ir užveskite pelės žymeklį ant jo, langas išnyks, ir kuo greičiau mes tolti, jis grįžta. Jei mes tai vadiname hover funkciją pelės ID, kuris atitinka šiame langelyje, tada, jei mes užveskite pelės žymeklį ant lango tada langas bus iš tikrųjų dingsta - jis yra madingas dabar, bet - jei mes tolti nuo jo, jis vėl atsiras. Dabar tai atgal dėl kokios nors priežasties. Pelės įveskite ir pelės perkelti savo veiklą yra šiek tiek panašūs, tačiau šiek tiek skiriasi. Pelės įvesti tik aktyvuoja kai pelės patenka į langelį, kaip ir tikėtasi. Taigi, jei jums judėti į jį, jis išnyks. Bet tai nebus vėl atsiras, kai tolti; jūs turite perkelti atgal ant jo už jį grįžti. Taip pat pelės judėti funkciją, kuri bus aktyvuoti kai pelė yra net nedalyvavo lauke. Taigi tai bus tiesiog nuolat vyksta, išblukimo ir išeina. Ir tai iš tikrųjų prisijungti - atrodo, kad tai tik išblukimo ir išeina, bet tai iš tikrųjų prisijungti daug daugiau veiksmų, nei tai, todėl, kai jūs tolti jis bus tik nesustoti, nes jis prisijungęs kaip jų tūkstančio. Gal ir ne tūkstančiai. Gal penki. Jis prisijungia daugiau nei tai. Esmė ta, kad visos pelės veiksmai, yra jų daug. Jūs galite perskaityti apie kitų, bet jie visi šiek tiek skiriasi, ir jūs galite pasiimti ta, kurią reikia kokiai konkrečiam tikslui bandote daryti. 

Kitas dalykas, aš ruošiuosi kalbėti apie AJAX. AJAX, aš žinau, mes neapėmė JavaScript tiek gylio šiais metais, todėl aš tiesiog norėčiau pakalbėti apie AJAX apskritai už minutę. AJAX reiškia Asynchronous JavaScript ir XML. Tai iš esmės, pavyzdžiui, kai esate "Facebook" ir verčia jums pranešimą tai todėl, kad AJAX veikia jūsų naršyklėje. Kiekvienas kelias sekundes jūsų naršyklė tikrai ketina Facebook "serverius, prašydama, jūs turite nieko naujo man, ir tada ji ateina su Jumis. Tai leidžia jums siųsti užklausas į serverį be realiai įkelti puslapį. Taigi paprastai, jei jūs tik naudojant PHP ir duomenų bazės, jūs turite atnaujinti puslapį, kad galėtumėte gauti naują informaciją iš serverio. Tačiau naudojant AJAX, galite traukti tą naują informaciją nuolat, arba patraukite jį, kai paspausite mygtuką ar ko nors panašaus. Taigi tai leidžia mums siųsti prašymus neperkraunant puslapio, ir mes galime naudoti arba GET arba POST užklausų. 

GET prašymai, pavyzdžiui, jei jums į Google.com ir daryti q = testą. Tai jiems užklausą testą. Ir tai prašymą GET, nes jis yra išlaikęs tuos parametrus į URL pati. PO prašymas yra tarsi jūs siunčiate juos elektroniniu paštu. Tai, kaip jūs įdėti jį į laišką ir išsiųsti jį į juos, bet jie iš tikrųjų matyti turinį. Jie nėra matomi URL. Jūs negalite tiesiogiai įveskite jį, jūs turite nusiųsti jį beveik slapta. Tai įraše. Tačiau naudojant JQuery, galite tai padaryti GET ir POST užklausų daug lengviau, nei jūs paprastai gali naudoti tik paprastą "JavaScript". Jūs galite užklausti API naudojant GET užklausų, taip pat galite patikrinti prisijungimo informaciją. Kitame puslapyje, aš sukūriau tai, kuris klausia: "Kas pietums?" naudojant Harvardo maisto API, todėl galime traukti, kad iki. Tai yra tik, kaip jūs galite naudoti JQuery daryti GET užklausą API pavyzdys ir gauti informaciją atgal iš jo. Taigi, mes norime matyti meniu šiandien, ir mes norime pamatyti, kas pietums. Štai URL sukurti GET užklausą JQuery. naudoti $. gauti funkciją. Pirmasis argumentas yra URL, todėl, ką jūs užklausų. Tada kitas argumentas yra funkcija, kuri vykdo kai prašymą GET yra baigtas. Taigi jūs išlydėti kai prašymą į serverį, palaukite, kol ateis atgal. Kai jis grįžta, jūs ketinate imtis tam tikrų veiksmų su duomenimis, nugarą iš serverio. Eikime į priekį ir koduoti tai taip pat. Aš ne koduoti tai arba, tikslas. Štai TODO. Pirmiausia, galime naudoti įvykio privalomas kad kai šį mygtuką, mes išsiųsti GET užklausą. Ir kai tai GET užklausos grįžta su kai kurių duomenų, mes ketiname rašyti į šį miltų info ID div. Pirmiausia, galime pasirinkti maisto mygtuką ID. Kai jis paspaudžiamas, mes norime, kad ji kažką daryti. Leiskite tik kad jis anoniminis Funkcija, kaip ir anksčiau. Galite wrap tuos vingiuotus skliaustus, o kai šį mygtuką, mes norime siųsti GET užklausą patikrinti, kas yra pietums. Norėdami tai padaryti, mes galime tiesiog įveskite $. Gauti. Tai JQuery funkcija, naudojant dolerio ženklas. Tai užtrunka daug argumentų pora. Pirmasis yra URL Antrasis yra atgalinio ryšio funkcija, funkcija, kuri vadinama kai šis prašymas iš tikrųjų grįžta. Tegul tik sukurti URL pirmas. Mes galime gauti iš API Dovydas parašė viršų. Ėjimas čia matome, kad tai food.cs50.net/api/1.3/menus, ir tada tiesiog praeiti atsižvelgiant į parametrus, kuriuos norite vardais. Taigi 1 parametras yra vertė 1. Atrodo standarto leidimo data, pradžios datą, nutylėjimą šiandien jei jums nereikia įvesti nieko, dieną ir baigiasi taip pat pagal nutylėjimą iki šiandien, jei jūs neturite įvesti nieko. Štai ką mes norime. Mes norime tik gauti už šiandienos informaciją. 

Mes norime, kad formatas būtų JSON. Tai tik savavališkai, galite naudoti bet kokia forma, kad jūs norite. Galite naudoti CSV, tačiau JSON yra JavaScript objektas žymėjimas. Tai labai lengva JavaScript suprasti, ką tai reiškia, ir mes galime atspausdinti jį lengviau, kad taip. Taigi, galime prašyti, kad JSON, ir tegul prašymas pietūs. Taigi miltai = pietūs. Tiesiog rašyti iki šį URL, mes grįžti čia. Yra meniu. Pirmasis parametras yra išėjimas = JSON nes tai, ką norime, ir jūs atskirti parametrus su "ir". Antrasis parametras yra - nepamenu. Valgio. Ir mes norime valgio = pietūs. Galite išbandyti šį adresą įvesdami jį į savo naršyklę ir eiti į jį. Jis duos jums kažkokią išvestį. Tai tiesiog stuff krūva tai pietums. Tai šiame negraži formatu. Mes norime spausdinti ant mūsų puslapyje geriau formatu. Taigi URL yra teisingas, dabar mes tiesiog reikia parašyti funkciją paskambinti, kai prašymas yra sėkminga. Ši funkcija bus iš tikrųjų imtis argumentas. Tai bus duomenys. Duomenys, kas grįžta iš GET užklausos po prašymą GET daroma. Mes galime padaryti garbanotas petnešos; čia mes rašome anoniminę funkciją kad vykdo, naudojant tuos duomenis, kai mes gauname informaciją atgal. Taigi, duomenimis, kai mes įvedėte šį URL, tai, ką duomenys ketina atrodyti. Tai bus šis didžiulis eilutė. Bet geras dalykas yra, "JavaScript" gali apdoroti jį naudojant JSON.parse funkciją. Taigi, galime sukurti naują kintamąjį vadinamą parse duomenys. Ir parse duomenys objektų masyvo. Kiekvienas objektas yra informacijos, tokios kaip - gerai, tegul pažvelgti. Ji datą, valgį, kategoriją, receptas, visa tai kitų dalykų. Taigi galime tiesiog atsispausdinti kiekvieno užsakymo vardą. Leiskite pakartoti per visą įvairių dalykų, kad mes grįžti iš jo, ir tiesiog atsispausdinti kiekvieną iš jų - atsispausdinti kiekvieno jų pavadinimą. Tai už linijos. 

JavaScript turi šią naudingą sintaksę, kur Jūs galite sukurti kintamąjį ir užsilenkti masyvo, ir varas i tiesiog iteratorius, todėl vietoj to, kad daryti var i = 0, man buvo mažesnis nei ilgio, i + +, galite tiesiog padaryti var i ir apdoroti duomenis. Šiame pavyzdyje, apdoroti duomenis (i) bus atitikti esamą elementą masyvo, tikrasis objektas. Ir mes norime gauti vardą iš jo. Taigi galime tiesiog pavadinimas. Ir paskutinis dalykas yra, mes ketiname turėti tam tikrą JQuery dar kartą. Tiesą sakant įtraukti jį į div Šis patiekalas informacija div tai šiuo metu tuščias. Taigi galime pasirinkti, kad. Mes naudojame JQuery ir pasirinkite valgio info div ID, ar rupiniai info ID, atsiprašau. Mes norime pridėti į tai. Jei mes padarė testus, pavyzdžiui, jis būtų tiesiog perrašyti kiekvieną kartą. Taigi, mes galime tik pridėti tai. Dabartinis elementas masyve, mes gauti vardą iš jo, ir mes pridėti jį į miltus info ID div pabaigos. Ir tada tik, kad ji atrodytų švaresnis, mes taip pat pridėti eilutės lūžį, kad tai dar ne viskas vienoje eilutėje. Taigi, jei viskas vyks gerai, kad turėtų būti gerai - visų pirma, kai šis mygtukas paspaudžiamas, ji bus išsiųsti prašymą GET į šį URL. Kai duomenys gaunami atgal iš jo, jis bus išanalizuoti jį, įjunkite jį į JSON, linijos per visą masyvą atstovaujanti, kad duomenys, ir tada pridėkite pavadinimą ir eilutės lūžį į kiekvieną šio valgio info ID, kuris anksčiau buvo tuščia linija. Taigi grįžtame į šį puslapį, mes atnaujinti, spustelėkite, sužinoti - jis neveikia. Tai gaila. Ir tai yra, kai derinimo Įgijusi Index.html linija 1. Tai įdomu. Gerai, gerai, o ne praleisti laiką darai tai, aš tik ketina atsigriebti padaryti failą, kad aš, kuris yra baigtas versija. Aš nesu įsitikinęs, ką skirtumas yra, bet mes galime tiesiog atidaryti tai padaryti vietoj. Ir mes einame į AJAX, ir tai turėtų veikti. Tai, kas buvo pietums šiandien ne pirma tvarka, su kabutėmis aplink jį, todėl tai nėra gražiausia. Bet, žinoma, jei jūs darote tai, kad galutinė projekto jums, kad ji atrodytų geriau. Bet tai tik paprastas pavyzdys, kaip jūs darote GET užklausą. O jei pažvelgsime į faktinį kodą, spėju, aš esu gana įsitikinęs, jis vis dar gana daug pats. Oi, aš pamiršau jį konvertuoti į eilutę, kad viskas. Ne, jis vis dar neveikia. Nepaisant to, čia yra tikrasis baigtas kodas už ką tai turėtų atrodyti, ir jis tą patį, kaip ką tik įgyvendinti. Kai paspausite mygtuką, ji naudoja GET JSON automatiškai apdoroti duomenis. Ji mano duomenis atgal iš jo ir kilpos per visą masyvas ir spausdina The - viską, kas pietums šiandien, jo pavadinimas, ir prideda eilutės po linija. Štai kaip jūs naudojate GET funkcija. 

Taip pat galite naudoti POST, kurį aš neturėjau laiko rašyti sukurti už tai pavyzdys, bet mes galime pažvelgti į dokumentus. Jei pažvelgti jquery.post, galite matyti, kad tai beveik tas pats. Jūs turite URL, tačiau vietoj perdavimo parametrus naudojant - tiesiog išleisti jas už pats URL eilutę, jūs turite pereiti per šį duomenų kintamojo kad iš esmės yra masyvas, žodynas, kad žemėlapiai parametrų vertes. Jums perduoti, kad ir kad siunčia juos naudojant POST. Ir kai jūs turite, tuomet jūs galite turėti sėkmės funkciją kad vykdo kai duomenys grįžta. Priešingu atveju, tai lygiai tas pats. Taigi, naudojant POST, jūs galbūt norėsite naudoti POST, pavyzdžiui, jei turite įvesties formą tegul žmonės įvesties slaptažodžius į jį, ir siųsti tuos slaptažodžius nuo savo back-end scenarijų, patikrinti duomenų bazėje, ar tas vartotojas yra galioja, ar ne. Jūs galite padaryti, kad visi naudoja JQuery vietoj to, kad atnaujinti puslapį ne visiems. Štai kaip aš įgyvendinama dienoraštį, kad jums rodžiau anksčiau. Jei mes einame į galutinio portalą ir išsiregistruoti, išsiregistruoti, Atsijungti neveikia. Na, leiskite man tiesiog atidarykite jį naujame lange. Čia yra slaptažodis, ir aš buvau ketinate įvesti kažką atsitiktinai. Ji neveikia, bet jūs galite pamatyti, kad mes ne iš tikrųjų turi atnaujinti puslapį ne visiems. Kodas, jei norite žiūrėti į jį, yra visiems prieinama čia. Taigi kodą parašiau pernai kažkada. Kaip matote čia, mes siųsti POST užklausą. Turiu failą pavadinimu login.php ant galinės pabaigoje, kuri patikrina, ar slaptažodis yra neteisingas. Parametrai mes pereiname į slaptažodžiu, susietas su įvesties tai šiame įvesties langelį dabar. Ir kai duomenys gaunami atgal, mes tikriname. Jeigu duomenys yra klaidinga, tada mes sakome neteisingą slaptažodį, stumkite jį žemyn, ir tik kad jis išnyksta po to. Priešingu atveju, mes įkelti admin puslapyje. Ir tai buvo daroma naudojant JSON. Be to daug eilučių kodo, galite tiesiog perduoti duomenis nugaros pabaigoje, patikrinti, ar tai teisinga, pasitikrinti, ar teisingai prisijungęs, ir iš tikrųjų į jį atsakyti, nukreipti asmenį į teisingą puslapį ar ne leisti jiems prisijungti ir pasakoja jiems, kad jie turėjo neteisingą slaptažodį. Štai, kaip galite naudoti JQuery POST pavyzdys siųsti POST prašymą savo nugaros pabaigoje, tikrinti, ar kažkas teisingai prisijungęs. 

Gerai, kad yra visi pavyzdžiai turėjau, ir visi stuff aš norėjau padengti. Tai yra pagrindiniai dalykai, kurie JQuery leidžia jums padaryti: pasirinkite elementus, juos modifikuoti, naudojant DOM manipuliacijos, galite pridėti efektų, įjungti dalykus dėl tam tikrų įvykių, ir taip pat padaryti AJAX prašymus labai sklandžiai ir lengvai. Taigi ačiū, kad atvykote ar žiūrėti, ir jei turite kokių nors klausimų, tik leiskite man žinoti. Taip? [Studentų] Atgal kada parodė, jūs turėjote JSON po POST kabučių, ir man buvo tiesiog įdomu, kas tai padarė. >> Taip, matau. Klausimas buvo, kad, pavyzdžiui, aš tik parodė, ten buvo žodis JSON į kabutes aplink - Aš tiesiog ištraukite jį vėl - apie POST funkcija. Aš tiesiog traukdami jį parodyti. Taigi čia This Post prašymas, ir ten tai į kabutes JSON. Tai tiesiog apibrėžia, ką mes tikisi produkcija būti. Taigi, jei mes pereiname JSON kaip tikimasi duomenų tipo, tai nėra reikalavimas, bet jei mes pereiname jį, tada duomenys bus automatiškai apdoroti kaip JSON. Taigi mes neturime skambinti JSON analiz s funkcija ant jo, jis bus tiesiog atsitikti automatiškai. O jei pažvelgti į "post dokumentų išvaizdą, yra šio duomenų tipo kintamasis, duomenų, kurių tikimasi iš serverio tipą. Pagal nutylėjimą jis protingas spėti, kad gali būti negerai, todėl jūs galite palikti jį tuščią, bet tai tik duomenų tipas kodavimo, kad jūs naudojate, ar tai JSON ar XML ar kažkas kita. 

Visi kiti klausimai? Gerai. Jei turite kokių nors klausimų, nedvejodami rašykite man ne vshekhawat@college.harvard.edu, ir skaidres ir kodas turi būti prieinama internete gana greitai. Sėkmės su jūsų galutinis projektų, tikimės, kad jums naudoti JQuery. [CS50.TV]