[Powered by Google Translate] [Seminar: jQuery] [Vipul Shekhawat, Harvard University] [To je CS50.] [CS50.TV] Če ste po skupaj doma, lahko dejansko dostop do mojih diapozitivov na spletu da greste na tej povezavi. To je TjjRWj na bit.ly. Lahko tudi samo pojdite na URL neposredno, ki je cloud.cs50.net / ~ vshekhawat, ki je moje ime, in jQuery. Toplo priporočamo, da sledite skupaj, če ste gledal doma, in če ste tukaj, tudi zato, ker je to zelo interaktivna predstavitev. 

Torej, danes bom govoril o jQuery, in prvo vprašanje je, kaj je jQuery? Letos vem, fantje niso zajeti JavaScript v čim več podrobnosti, kot smo jih v preteklih letih. JavaScript je najprej samo client-side jezik ki ga uporabljate za zagon skripte in kode za vsakega uporabnika stroja. Torej imate strežnik, ki omogoča spletne strani za ljudi, vendar boste morda želeli narediti stvari na svojem računalniku, zaprosijo za njihovo stroj za pošiljanje zahtev na strežnik vsakih 30 sekund ali kaj podobnega. To lahko storite, da z uporabo JavaScript. JQuery samo ponuja več funkcionalnosti na vrhu JavaScript da ne ekstra stvari za vas. Če pogledamo vsebino na vrhu, , ki opisuje nekatere od stvari, ki ste sposobni narediti. Torej na splošno, je bilo ustanovljeno januarja 2006. To je bil prvi zamislil v avgustu 2005. To je bilo približno za nekaj let, in to je res del novega Web 2.0 gibanja , ki je postavil na internet, tako sijoča. To je najbolj pogosto uporablja JavaScript knjižnico. Več kot 19,6 milijona spletnih straneh, so jo uporabljajo, in uporaba se še povečuje po builtwith.com, ki je očitno v zadnjem letu, je bilo že ves čas narašča precej linearno. Med top 10 milijonov spletnih strani, tam je še vedno - okrog 40% jih trenutno uporabljate. Facebook jo uporablja, veliko drugih spletnih strani, ki trenutno uporabljajo. Si lahko ogledate na teh statistik na svoje, če želite. In lahko vam povem, da je zakonit, saj ima temelje in 13 članov upravnega odbora, skupaj z ekipo 20 ljudi, ki delajo na njem redno. Torej, to je zelo pogosto uporablja, da ima ORG. URL, to je domišljija, to je spin-off za druge stvari, tako da je velika stvar. 

Zakaj bi ga morali uporabiti? JQuery je zelo lahek. To pomeni, da ni veliko datoteko. Lahko prenesete the minified datoteka, ki je brez vseh praznega prostora in komentarje, in to je samo 32 kB. Tako da je težko, da samo kretnjo na vaši spletni strani in samo, da začnete uporabljati. To je tudi zelo učinkovito napisano, tako da ne zavzemajo veliko - to ne bo upočasnilo vaše spletne strani veliko, če ga uporabljate. To vam omogoča, da izvaja stvari, ki so bile prej neizvedljive. Obstajajo nekatere vidike funkcionalnosti, kot so ustvarjanje animacije, ki bi se običajno zelo, zelo težko storiti. Toda v jQuery oni so pravzaprav zelo preprost. In obstaja nekaj stvari, ki so nadležno storiti, mogoče v JavaScriptu, kot so pošiljanje zahtevo POST, ampak poslati zahtevo strežniku, morate napisati Pet ali šest ali sedem vrstic kode. Zdaj lahko samo to storite v eni vrstici kode, v enem klicu funkcije. To je res poenostavlja veliko stvari, ki jih počnete. In vse cool otroci ga uporabljate. S tem, mislim jaz. V mojem zadnjem projektu v lanskem letu, ki je news.whrb.org, kar je za radijsko postajo, sem ustvaril ta blog ki gosti vse kaže, da smo storili in MP3 datoteke za njih. Lahko brskate po preteklih razstavah, in to je vse narejeno z jQuery. Lahko povem, Zaradi vseh teh animacije bistvu. Torej, če imate - če želite ustvariti novo delovno mesto, vidiš te male slideDowns, ki je vse narejeno z jQuery. In to fade - tako, da vrsta stvari je vse narejeno z uporabo jQuery, in vam ni treba nenehno osvežite stran za navigacijo mesto. Še ena kul stvar, ki je izdelano z uporabo jQuery je to predstavitev. Jaz sem z uporabo tega odprtokodne stvar, imenovano scrolldeck, kar je nekdo napisal na vrhu jQuery. Če ste dejansko pogled na viru, lahko vidite, da oni uporabljate to znak za dolar, dolar znakov se uporabljajo v jQuery ki nakazuje, da je funkcija jQuery funkcija. Torej, oni opredelitev ovoj na vrhu jQuery , ki vam omogoča, da predstavitev, kot je ta, in lahko vidite, da tu oni tudi izvirno jQuery datoteko , ki je tisto, kar boste morali tudi, če želite uporabiti jQuery v svoje spletne strani. 

Ob dotiku na to, kako ga namestiti? Lahko greš na jQuery.com in prenos datoteke, ga dodate na spletnem imeniku in jo vključiti. Torej, samo na vrhu, v glavi tag datoteko HTML vaše glavne datoteke HTML, samo še to vrstico kode s pravilno različico, za katero različico jQuery, ki jo uporabljate. Lahko ga prenesete, da greste na jQuery.com, Kliknite "Prenesi jQuery," in ste jo dobili. To je to. In dejansko, da bomo lahko ogledate, kako izgleda. Če kliknete na prenesete tukaj, jQuery je to. To je samo ena velika datoteka Javascript, da ne vse čarobne stvari za vas. To je minified različica, ki ni berljivo sploh. Si lahko ogledate tudi v različici za razvoj, ki je berljiva vendar še vedno zelo, zelo dolgotrajen. To je veliko stvari notri. Lahko tudi povezava na Googlov gosti različici tega. Tako da boste vam omogočajo, da opirati le na Googlu, da ji. Nudijo vse različice njej, ves čas na razpolago. Torej, si verjetno lahko zanesejo na Googlu za gostiteljico za vas. Ali lahko povezavo na lastno najnovejšo različico jQuery je. Imajo URL, ki je vedno posodobljen na najnovejšo različico. To je jQuery zadnje, in tam je en problem s tem, , ki je, če je posodobitev jQuery in nekatere prejšnje funkcionalnosti ki so jih postane retrograded ali opuščena, pa tudi ne - to lahko začne, da se ne podpira več. Torej, če napišete spletno stran z uporabo različice 1.8.2, s časom različici 2.7 pride ven nekatere funkcije, ki ste jih napisali, ne deluje več. Zato je bolje, da samo prenos 32 kB datoteko Povedano na vaši spletni strani, in da bo delovalo večno. 

Jaz grem naprej in začeli govoriti o dejanski funkcionalnosti jQuery. Prva stvar je, selektorji. To je tisto, kar je bil prvotno zasnovan jQuery zagotoviti. In lahko kliknete na dokumentaciji, na pogled podrobna dokumentacija za selektorji bom krili. Ideja selektorjev je, da lahko izberete HTML elementov na stran. Elementi na strani imajo ID in razredov ter druge vidike, ki opredeljujejo do njih. Tam je tudi - oni so v različnih naročil. Nekaj ​​časa oni ugnezdeni znotraj drug drugega. JQuery vam omogoča, da graditi preprosta vprašanja, da pridobite elemente strani. Potem boste lahko manipulirati teh elementov s pomočjo jQuery funkcije, ki je del manipulation bomo prišli kasneje. Lahko spremenite HTML, CSS, spremenite lahko pa tudi animirati in dodajte funkcije, ki aktivirajo na določene dogodke. Tako, na primer, če je kaj kliknil, hočeš da se kaj zgodi, lahko storite, da z uporabo jQuery, kot dobro. In obstaja veliko več načinov, da izberete elemente. Večina od njih še nikoli nisem delal, vendar so osnovne dejavnosti, ki so zelo pomembni. Selektor element, na primer, če ste šele izbiro ničesar da je div - pravzaprav imam kodo odprt za to predstavitev slide. Tako, na primer, tukaj je prvi diapozitiv. Tukaj imamo div. Če smo dejansko izbrati vse divs na strani da bom samo, da nam celo paleto vseh divs, ki obstajajo v tej datoteki. Selektor ID vam omogoča, da izberete kaj z dano ID. Torej, če je to, na primer, je to stvar, ki ima ID »kaj« in če bomo to naredili s # kaj namesto neke ID, da bi le vrne niz, ki ima en sam element, in da je ta element strani. Mi lahko kombinirate tudi selektorji na ta način, ki ga ima izberete samo stvari, s-jev, ki so divs. Torej, ja. Izberite le divs, da se bodo ta ID. Za razredu si uporabite piko, to je ista stvar kot CSS. Potomec deluje tudi, tako da, če imate nekaj razred in se je ugnezdila elemente v njej - tako, na primer, obstaja nekaj razreda in ima sidro oznako za povezavo na drugo stran, lahko uporabite to sintakso za pridobivanje povezavo. Izberete lahko tudi več stvari hkrati, samo jih ločite z vejicami, uporabljajte gumb, ki ga želite, in vam bo izbrati vse naenkrat, v enem polju. In potem je tukaj tudi ni selektor, tako da si lahko izberete vse divs da nimajo neke posebne razred. In to je samo koristen način, da bi dobili uvod, kako deluje ta izbor. Jaz bom pokazal nekaj konkretnih primerov na sekundo. 

Napredno selektorji, ki so - to je le nekaj primerov. Obstaja ducate njih, če pa želite izbrati vse slikovne tags znotraj nekega elementa, potem si naredil: podobe. Če želimo izbrati tudi elemente, na primer, če je 20 od njih boste izbrali 0, 2, 4, 6 in tako naprej, ti: tudi, ali lahko storite tudi: čudno. To so psevdo selektor, kar pomeni, da so dejansko izračunati vsak drugi element, ne samo tekoč in izbiro vse od njih. Prav tako lahko - vsak element ima lahko tudi posebne lastnosti. Tako, na primer, razred = sredina je tudi lastnost. Za to sidro tag, href, hipertekst sklic, je tudi atribut. Tako da lahko izberete nekaj, ki se povezuje z določeno stran ali pa samo - to je res splošen. Izberete lahko karkoli s katero koli lastnost, ki jo želite. In nato tudi atribut vsebuje. Če, na primer, je želel, da izberete vse vhodne elementi da imajo besedo "pass" kot ime njih, če stran ima blok besedila vhodni , ki se imenuje "password", da bi bil eden od načinov, da lahko izberete, da. In obstaja veliko več. Lahko gredo naprej in poglejte v dokumentacijo in glej konkretne primere, kako to deluje. 

Naslednja stvar je, DOM manipulacija. Potem ko smo izbrati elemente, bomo želeli, da dejansko ne stvari z njimi. Do sedaj še nismo pogledal, da na vse, vendar če pogledaš na dokumentaciji, pa je res veliko, da bi lahko storili. Na tej točki se bomo, da izberete elemente na tej predstavitvi in manipulirati z njihovo uporabo jQuery. Ker se to izvaja z uporabo jQuery, imamo dostop do jQuery knjižnico, in ne moremo uporabiti te funkcije v okviru te oznake. Ena uporabna stvar, ki morda ne poznajo, je konzola. In Google Chrome je tisto, kar sem uporabo. Lahko pritisnete alt ukaz J ali alt kontrola J, da odprete konzolo. V Firefoxu Mislim, da je ukaz shift K ali nadzorni shift K. V Safari moraš iti spremeniti nekatere nastavitve. Tukaj je link, če želite, da to storite, vendar vam priporočam pridobivanje Chrome ali Firefox. Torej, kaj je odpreti konzolo, da je tukaj dol. To vam omogoča, da v bistvu samo to, kar hočeš. Tako da lahko samo vpišite ustvariti spremenljivko z imenom x, x = 5, da vidimo, kaj x + 2, je. Lahko tudi kaj takega CS + Poglejmo, x + 45, ki bo CS50. Lahko samo še nekaj tipičnih stvari JavaScript. Vendar pa lahko naredite tudi jQuery tukaj. 

Zato si oglejmo ta prvi vidik tukaj. Bomo ustvarili spremenljivko HTML, ki je niz. Ima posameznih odstavkih znački, navedla se imenuje nekatere nove besedila. Torej imamo to HTML-ja, da je to neka nova besedila, v točki oznakami. Zdaj smo pravzaprav želite dodati na stran. I je nastavljena tako, da je HTML tem odstavku, ta naslov tukaj, dodajanje ID. Če izberemo dodajanje ID in nato dodajte v njej HTML spremenljivka Pravkar sem ustvaril, da bo dodal, da HTML konec, takoj po tem odstavku oznako. Tako da, če bomo to storili - smo izbrali ta odstavek, in smo imenovano funkcijo dodajanje s spremenljivko HTML sem dodano vrednost, da bo dodal, da novo besedilo, tam na strani. Lahko tudi pripnite, kar pomeni, da bo šlo prej, na začetku tega elementa. Torej je nekaj novo besedilo na začetku in po njem. Lahko grem naprej in osvežiti, da se znebite te stvari sem pravkar opravil. Ampak to je primer, kako lahko uporabite prepend in dodajte metode da manipulira stvari na strani, dodamo nekaj HTML. 

Prav tako lahko spremenite razrede. Nazaj v tem slogu spisa, sem to ustvaril za zmago razred da ima besedilo rdeče barve, nekateri barvo ozadja in besedila sence. Videti je grozno, vendar sem lahko dejansko - Ta odstavek ustreza prvemu razredu ID. Tako da sem lahko dodate razred za zmago. To lahko izvrši v konzoli, in da bo dodal, da razred, in zdaj je videti grozno, kot je bilo pričakovano. CSS se samodejno uporabljajo za razrede, ki jo - če je CSS za razred, pa se samodejno uporabi Če spremenite razred elementa. Potem lahko samo odstranite z premestitev razred. Torej, če imate prednastavljene nekatere razrede, kot so rdeče ali označen, in potem si želim, da jih uporabijo za elemente, vam ni treba storiti vse CSS styling vsakič. Lahko le dodamo razred, v elementu, nato pa bo samodejno postal - se bo samodejno iskati primerno za ta razred. Mi lahko odstranite tudi stvari, zato bom, da izberete vse divs na strani in jih odpraviti. Kaj se, da bo izgledal? To bo izgledal nič, tako da je pravzaprav ni nič ostalo. Moja predstavitev je izginil. Jaz lahko osvežimo in jo prinese nazaj, na srečo, saj to je samo teče enkrat, ampak to je primer odstranitev, če želite, da popolnoma uniči element off strani. 

Lahko tudi prepisati, in bom, da izberete vse odstavek oznake so na strani go in nadomestil glede besedila so v njih v njih s samo "testiranje". beseda Če boste to storili, boste nadomestiti vsako točko na strani tega testiranja. Ja. Oni vsi nadomesti s testiranjem. Tako da je primer dostop do besedila in jo prepisal. Lahko pridobite tudi informacije, in to je res super za polji. Če imate vnosno polje, da so ljudje tipkanje stvari v, ljudje so tipkanje stvari v njem, tu izberite vhod, vsak vnos oznak z vrsto besedila. V tem primeru je samo ena polje za vnos v celotni predstavitvi, tako da bomo šele izbrati prvo, potem pa klic funkcije val na njej. To vrne vrednost, in za vnosno polje,, vrednost je samo karkoli se zgodi, da je v njej. Torej, če to storimo, je samo vrne niz stvari. In če ga pokličete spet po pisanju več stvari, se spremeni v več stvareh. To je eden odličen način za dostop do elementov vnosno polje, in nato preverite, je ta veljaven e-poštni naslov je ta veljaven datum, na primer. Lahko samo priklicati stvari v trenutku, kot so ljudje, da ga vnesete, in nato preverite, ali je veljaven, ga pošlje nazaj strežniku, naredite vse, kar hočeš z njim. In to je, kako lahko dostopate, kaj je v teh škatlah. 

Prav tako lahko spremenite CSS neposredno, tako da namesto dodajanja razred, ki je shranjenih nekaj lastnosti, lahko samo dodate karkoli CSS želite karkoli. Torej, kaj je select organ, ki je celotna predstavitev, in barva je lastnost, ki določa, kaj barve je besedilo. Če ga spremenili v rdeče, bo vse besedilo v stran, pa do rdeče. Mi lahko naredite nekaj takega ozadja modro barvo, Takole, to je lepo. Lahko narediš karkoli hočeš s tem. Uporaba nepremičnine CSS, lahko resnično spremeniti, kako kaj izgleda v vsakem trenutku. Naslednja stvar je, učinkov. Učinki so v bistvu ista stvar kot spreminjanje CSS, ampak dejansko opravljajo neko dodatno animacijo za to. Torej, namesto da samo kaže, ali nekaj skrivajo ali spremembo barve, lahko dejansko bi bilo animirani. Tukaj je dokumentacija, če želite, da pogled na obsežno dokumentacijo za to. Ampak bom pokrila glavne narave. Obstaja predstava in skriti lastnosti. Prikaži / skrij ID dejansko ustreza vsem tem polju, tako da, če sem ga skriti, bo kar izginil. In sem lahko spet pokazal, če želim, da bo prišel nazaj. In to je nazaj. To dejansko ni izginila, Pravzaprav nisem ga odstranite iz strani, sem nastavite lastnost CSS o vidnosti skritih tako da ne morem več videti. Tam je tudi potisnite navzgor in ga potisnite navzdol, ki vam omogoča, da imajo ta učinek. To drsi izginila, in potem izgine lahko ga potisnite navzdol, da bo prišel nazaj. In zdaj je nazaj. Tam je tudi ta zbledi učinek, ki je - fade ID ustreza tem polju. Če sem ga fade out, potem pa je počasi izginila. Jaz lahko tudi zbledi, in da bo prišel nazaj. Prav tako lahko naredite zbledi, ki je specifičen za fade funkcijo. Lahko so to zbledi v kakršne koli posebne motnosti, ki jo želite. Torej, če ste jo zbledi počasi 0,5, da bomo postali pol vidna. Lahko, da bo šel na 0,1, in nazaj do 1. da se ponovno v celoti vidna. To je samo še ena animacija, ki jih lahko storite. 

Obstajajo tudi preklop učinki. Tako bom, da izberete preklop ID, ki ustreza te škatle, in na tej div lahko pokličete preklop, če je vidna bo postala nevidna, Če je nevidna bo lahko spet postanejo vidne. Torej sem to imenoval preklop funkcijo dvakrat, prvi je bil ista stvar kot kožo, je bil drugi razpis ista stvar kot show. Prav tako pa lahko to storite z zbledi preklop, ki počne isto stvar, le da dejansko zbledi. In ista stvar s slide preklop. Obstajajo esencialne učinki, kot tudi, kar pomeni Če izberete element in samo pokličite kup načinov animacije na njej, če si hotel, da bi izginila, nato pa ga potisnite navzdol, in potem skriti, nato pa zbledi, jih bo naredil v vrsti. Torej je izginil, se je vrnil - iz neznanega razloga se skrivajo ni zgodilo. Poskusimo ven. Ja, tako da izgine, nato pa zdrsnila stran. In obstaja veliko več. Lahko uporabite animirati funkcijo ustvariti lastne animacije, kar je precej zapletena, vendar pa vam ponuja neskončno raztezanja. Lahko naredite kakršnokoli animacijo, ki jo želite. Lahko uporabite tudi čakalne vrste v čakalno vrsto do različnih animacij naenkrat. Torej, če hočeš kaj leteti čez stran, slide od zgoraj desno do spodaj levo, lahko to storite, in samo še kup ukrepov, ki gredo ena za drugo. 

Naslednja stvar, bomo govorili o je prireditve. Dogodki vam omogočajo - doslej smo pravkar tipkanje stvari v konzoli in to je eden od načinov, da bi se to zgodilo, ampak na dejanski strani, ne boš šel, da bi lahko narediti stvari tipa uporabnikov v konzolo. Hočeš stvari zgodi samodejno. Za to, morate uporabiti dogodke, ki aktivirajo na nek določen dogodek dogaja. Lahko preverite dokumentacijo za vse podrobnosti. Torej, da vidimo. Želimo, da skriti ali prikazati polje, ampak zdaj ta gumb ne naredi ničesar, ker nisem še izvajajo. Jaz grem na dejanski strani HTML. Tukaj je tobogan. Obstaja div za diapozitiv. To je razred zadrg. Tam je besedilo. Zdaj pa je to polje in gumb polje. Kako bi dejansko lahko to izgine? Najprej, kaj je napisal funkcijo, ki omogoča polje ID izginejo. To je sintaksa za funtion, kaj je samo da hideTheBox poklicati. To ne sprejme nobenih argumentov, saj ni nobenih argumentov, da je treba sprejeti. Mi lahko izberete polja ID. Torej, z uporabo jQuery izbiro, lahko izberete polje ID, in potem samo da bo izginila. Naj bo fade out. Če bomo to funkcijo tekel v dejanski konzoli, smo lahko opredeli to funkcijo lahko rečemo hideTheBox, in deluje. Vendar želimo, da se zgodi, ko je gumb dejansko pritisnjen. Da bi to dosegli, moramo uporabiti dogodek. Vezati dogodka nekaj posebnega gumba ali kakšnega akcijskega dogajanja, moramo izbrati element, ki bo dogodek sproži - ali bo to sproži dogodek, žal. 

Torej, najprej, kaj je izberete polje gumba ID ker to je gumb, in zdaj, ta gumb, želimo ustvariti animacijo, ko ga kliknete. Torej je to klik funkcijo. To vam omogoča, da se veže drugo funkcijo do njega. Ta funkcija je drugo funkcijo kot argument bomo lahko preide v funkciji hideTheBox, in če kliknete ta gumb, se bo ta funkcija samodejno izvršiti. Tako da bo to delovalo, če bomo prihranili to, bom osvežiti, in - eno sekundo, žal mi je. Naj se popravim to res hitro. Ok. Takole. Torej, zdaj je škatla izginja, ko smo kliknite na gumb. Mi lahko spremenite tudi to, da samo fadeToggle, spremenite samo, da skriti ali prikazati polje, in to bo prav tako delovala tudi, če bomo osvežili. Mi ga lahko skrijete, lahko tudi pokazati, in da bo še naprej delovala. Še ena stvar, ki jo lahko naredimo je, ne bomo dejansko morali opredeliti to funkcijo hideTheBox preden smo poklicali funkcijo klik. Torej, namesto opredeljevanju funkcije in kliče hideTheBox, smo šele tekoč, da ga pokličem, če je ta stvar kliknili. Torej lahko definiramo to anonimno tukaj, ki je funkcija, ki ima Javascript. Lahko definiramo funkcijo, normalno, bi rekli funkcijo hideTheBox z argumenti, ampak, lahko samo povem, delovati brez argumenta, začetek kodraste oklepaja opredeliti funkcijo, zapreti tisto kodrasti Podpornik, in potem samo opredeliti funkcijo tukaj, v prvem oklepaju in zadnji oklepaju ki ustrezajo argumentov funkcije klik. Tako da smo mimo v tej funkciji, lahko kopirate to vrstico kode tukaj, in da bo naredil točno isto stvar. In zdaj nimamo te naključno funkcijo fadeTheBox da se poseda brez očitnega razloga. Funkcija je definirana anonimno, nima imena. To bo izvrševala šele, ko smo kliknite na gumb box. Tako osvežujoče še enkrat, še enkrat, in boste lahko videli, da še vedno deluje. In to je, kako si ustvariti dogodke. 

Obstaja veliko različnih dogodkov, ki jih lahko uporabimo. Grem nazaj prehod na konzolo samo vam pokaže, kako to delo. Identitete za vsako od njih ustreza vsako polje. Torej, to polje klik oglasa, ta je ključnega pomena ID, in to je ena miš ID. Ena stvar je, da je to dejanje funkcija, namesto da vnesete ven vsakič, Pravzaprav sem šel naprej in ta ukrep funkcijo opredeljen tukaj. To počne isto stvar kot funkcijo hideTheBox. To postane to polje in niti zbledi ven ali noter fade In to je razlog, zakaj smo sposobni uporabiti tukaj. Torej, če kliknete na klik ID, želimo, da bi polje izgine ali ponovno pojavila. To je ista stvar kot gumb, da smo imeli v zadnji diapozitiv. Zdaj, ko pravimo, da smo lahko s klikom na to polje in bodo izginili, nato kliknite na to še enkrat, in okno se bo ponovno pojavil. To je zelo preprosta. Dvojni klik počne isto stvar, razen to zahteva dvojni klik. Torej, če ste enkrat kliknite nanj in ponovno kliknite na to ne bo zgodilo nič, vendar če ste dvakrat kliknite hitro, bo izginila. Če ste dvakrat kliknite še enkrat, bo prišel nazaj. Torej, to je zelo preprosta. Vhod tipkovnica je nekako čudno, jaz ne mislim, da dejansko deluje v tem primeru ker je tipka dol, ključ gor in pritisk ter druge ključne ukrepe aktiviranje ni važno, kaj element jo veže. Na primer, tudi če sem vezan tipko navzdol na telesu ali kaj drugega popolnoma, potem bi bilo še vedno aktivirajte ne glede na to - to ni specifična. Jaz ni treba kliknete to in pritisnite tipko nekaj ustvariti izginejo. To se aktivira glede na to, kaj element Trenutno sem noter To je torej dejansko ne deluje v tem primeru saj ne me prepozna kot vstop vhod v tipkovnico vhodni div. 

Ampak, če pogledaš na ukrepe miško prvi je, da lebdijo, in to lahko storite nekaj od tega z uporabo CSS. Če uporabljate CSS, lahko ustvarite tako, da če ste hover nad nečim, potem svojem slogu spremembe. Vendar z uporabo jQuery lahko spremenite sloge drugih stvari, kot dobro. Tako, na primer, bomo poklical ukrep, če bomo lebdijo nad tem div. To pomeni, da če bomo lebdijo nad njim, nato pa se bo okno izgine. Če gremo stran od nje, se bo okno ponovno pojavi. Če pravimo, in hover nad njim, se polje izgine, in takoj, ko se oddaljujemo, da pride nazaj. Če rečemo to funkcijo lebdenja na miški ID, ki ustreza tem polju, nato, če želimo lebdijo v polju potem se bo okno dejansko izgine - to je pa funky prav zdaj, ampak - če se oddaljujemo od njega, bo ponovno pojavili. Zdaj je nazaj iz nekega razloga. Miška se začne in miške funkcije move so nekoliko podobne, vendar nekoliko drugačen. Miška vpišite samo aktivira, ko miška vstopi v polje, kot je pričakovala. Torej, če se preselite v to, da bomo izginili. Vendar to ne bo znova pojavijo, ko se premikate stran, boste morali premakniti nazaj na njem za to, da pridejo nazaj. Tam je tudi funkcija miške poteza, ki bo aktivirala če je še prisoten v škatli za miško. Tako da bomo kar naprej dogaja, izginja in ven. In to je pravzaprav sečnje - zdi se, kot da je pravkar izginja ven in noter, ampak to je dejansko prijavi veliko več dejanj, kot je ta, tako da če se oddaljite bo to kar naprej dogaja, ker je zabeležen kot tisoč njih. Mogoče ne tisoč. Mogoče pet. To dnevniki več kot to. Bistvo je, da vsi ukrepi z miško, obstaja veliko od njih. Lahko bral o drugih, ki so, vendar so vsi nekoliko drugačna, izberete pa lahko tisti, ki ste potrebovali za kar koli poseben namen skušaš narediti. 

Naslednja stvar, bom govoril o je AJAX. AJAX, vem, da si letos ne zajema JavaScript v toliko globine, tako da bom samo govoril o AJAX na splošno za minuto. AJAX je kratica za Asynchronous JavaScript in XML. To je v bistvu, na primer, ko ste na Facebooku in vam potisne obvestilo, To je zato, ker AJAX teče v vašem spletnem brskalniku. Vsakih nekaj sekund, spletni brskalnik je dejansko dogaja, da strežniki Facebook, jih prosi, imaš kaj novega za mene, in potem gre nazaj k tebi. To vam omogoča pošiljanje zahtev na strežnik da bi dejansko morali naložite stran. Torej ponavadi, če ste le z uporabo PHP in baze podatkov, boste morali osvežiti stran, preden boste lahko dobili nove informacije iz strežnika. Vendar z uporabo AJAX, lahko potegnite za te nove informacije nenehno, ali vleči za to, ko boste kliknili na gumb ali kaj podobnega. Torej, to nam omogoča pošiljanje zahtev brez ponovnega stran, in smo lahko uporabite GET ali POST zahtevkov. 

GET zahteve so, na primer, če si Google.com in English in ne q = test. Da se jim test poizvedbe. In to je GET zahtevo, saj je posredovanje v teh parametrov v URL sama. Zahteva POST je, kot če ste jih pošiljali po pošti. To je, kot ste jo dali v pismu in ga poslati off z njimi, vendar dejansko ne vidite vsebino. Oni niso vidne v URL. Ne moreš direktno ga vnesite v, boste morali poslati skoraj na skrivaj. To je v post. Vendar z uporabo jQuery, lahko to storite GET in POST zahteve veliko lažje, kot si običajno lahko uporabljate samo navaden JavaScript. Lahko poizvedbo API uporabo GET zahteve, in si lahko ogledate tudi podatke za prijavo. Na naslednji strani, sem ustvaril to, kar sprašuje, "Kaj je za kosilo?" pomočjo Harvard hrane API, tako da je vleči, da gor. To je samo primer, kako lahko uporabite jQuery narediti GET zahtevo za API in dobite podatke nazaj iz nje. Tako želimo videti meni za danes, in želimo, da vidim, kaj je za kosilo. Tukaj je URL ustvariti GET zahtevo v jQuery. uporabljate $. dobil funkcijo. Prvi argument je URL, tako da točno to, kar ste poizvedovanje. Potem naslednji argument funkcijo, ki, ko je GET zahteva popolna. Torej ste poslali off nekaj zahtevo strežniku, počakajte, da pridejo nazaj. Ko je pa prišel nazaj, boš sprejmejo nekatere ukrepe s podatki, ki se je vrnil iz strežnika. Pojdimo naprej in kodiranje, da je to dobro. Nisem kodo to bodisi na namen. Tukaj je TODO. Najprej, kaj je uporaba vezavo dogodkov tako da, ko pritisnete na ta gumb, bomo poslali off GET zahtevo. In ko se to GET zahtevo donose z nekaterimi podatki, bomo jo napišite v to obroka info ID div. Najprej dajmo izberite ID gumb hrane. Ko je to kliknil, si želimo, da nekaj storiti. Reciva, da ga anonimni fuction, kot prej. Lahko ogradite tiste zavite oklepaje, in ko pritisnete na ta gumb, želimo poslati GET zahtevo da preverite, kaj bo za kosilo. Da bi to dosegli, bomo lahko samo tip v $. Dobili. To je jQuery funkcije, ki uporabljajo znak za dolar. To traja nekaj argumentov. Prva je URL, drugi je funkcija za povratni klic, funkcija, ki se imenuje ko se to zahteva dejansko vrne. Reciva, najprej zgraditi URL. Lahko ga dobite od API, da David zapisal. Dogaja, lahko vidimo, da je food.cs50.net/api/1.3/menus, in potem samo potujejo v imena parametrov, ki jih želite. Torej parameter 1, je vrednost 1. Izgleda kot standardni datum, datum začetka, zamude do danes Če ne vnesete ničesar, in končni datum tudi zamude do danes, če ne vnesete ničesar. To je tisto, kar želimo. Radi bi le dobili podatke za danes. 

Želimo, da bi oblika, ki bo v JSON. To je samo samovoljen, ki jih lahko uporabljajo katero koli obliko, ki jo želite. Lahko uporabite CSV, vendar JSON je JavaScript Object Notation. To je zelo enostaven za JavaScript razumeti, kaj to pomeni, in smo jo lahko natisnete lažje na ta način. Torej, kaj je to zahteva, JSON, in kaj je prošnja kosilo. Torej obrok = kosilo. Samo da bi napisati, da je naslov URL, gremo nazaj. Tam je meniji. Prvi parameter je izhod = JSON ker to je tisto, kar želimo, in vas loči parametre z "in". Drugi parameter je - ne spomnim se. Obrok. In želimo obrok = kosilo. Lahko preizkusite ta URL ga vnesete v brskalnik in grem z njo. To vam bo dala nekaj moči. To je samo kup stvari, ki je za kosilo. To je v tej grdi obliki. Želimo, da ga natisnete na naši spletni strani v boljši obliki. Torej je URL pravilen, zdaj smo morali napisati funkcijo poklicati nazaj, ko je zahteva uspešna. Ta funkcija bo dejansko lahko argument. To bo podatke. Podatke je tisto, kar prihaja iz GET zahtevo nazaj, potem je narejeno GET zahtevo. Mi lahko storite zavite oklepaje, tukaj smo napisali anonimno funkcijo da se izvaja z uporabo te podatke, ko bomo dobili podatke nazaj. Torej podatke, ko bomo vnesli v ta URL, To je tisto, kar so podatki bo izgledal. To se dogaja, da je to ogromen niz. Ampak dobra stvar je, lahko ga razčleniti Javascript s pomočjo JSON.parse funkcijo. Torej, kaj je ustvariti novo spremenljivko podatke razčleniti. In podatke razčleniti je niz predmetov. Vsak objekt vsebuje informacije, kot so - no, pa poglejmo. To je datum, na obrok, kategorijo, recept, vse te druge stvari. Vzemiva izpisal ime za vsakega od njih. Oglejmo Ponovil skozi celotno paleto stvari, ki smo se vrnem iz njega, in samo izpisal vsak eno - tiskati ime vsakega od njih. To je zanka. 

Ima Javascript to koristno sintakso, kjer si lahko ustvarite spremenljivko in zanko nad matriko, in var i je samo iterator, tako da namesto da bi to var i = 0, i je bila manjša od dolžine, i + +, lahko samo naredi Var i v razčleniti podatkov. V tem primeru bo razčleniti podatki (i) ustreza trenutnemu elementu iz matrike, dejansko predmet. In želimo, da se ime iz nje. Torej, kaj je pač ime. In zadnja stvar je, da bomo spet imeli nekaj jQuery. Pravzaprav jo dodajte v div, ta info obrok div, da je trenutno prazna. Torej, kaj je, da izberete. Uporabili bomo jQuery in izberite obrok info div id, ali obrok Informacije ID, žal. Želimo dodati k temu. Če smo test, na primer, da bi le prepisati ga vsak čas. Tako smo lahko samo dodati to. Sedanji element v matriki, bomo dobili ime iz nje, in bomo ga dodajte na koncu obroka info ID div. In potem samo da bi bilo videti čistejša, bomo priložiti tudi prelom vrstice, tako da ni vse v eni vrstici. Torej, če bo šlo vse dobro, da bi bilo dobro, da - Najprej, če kliknete ta gumb, ga bodo poslali off GET zahtevo za ta naslov URL. Ko pride podatke nazaj iz njega, bo to razčleniti, sprevrgla v JSON, zanke skozi celotno paleto predstavlja, da so podatki, in nato dodajte ime in prelom vrstice za vsako vrstico tega obroka info ID, ki je bila prej prazna. Torej grem nazaj na to stran, bomo osvežili, klik, ugotovili - to ne deluje. To je žalostno. In to je, če debugging pride noter Index.html, linija 1. To je zanimivo. V redu, dobro, namesto da preživijo čas početje to, da sem šele tekoč dvigni narediti datoteko, ki ga imam, kar je končana različica. Ne vem, v čem je razlika, vendar smo lahko samo odpreti to gor namesto tega. In gremo na AJAX, in to naj bi delovala pravilno. To je tisto, kar je bilo danes za kosilo, V nobenem posebnem vrstnem redu, z narekovaji okoli njega, tako da to ni najlepši. Ampak, seveda, če ste počeli to za končni projekt, da bi bilo videti bolje. Ampak to je samo preprost primer, kako vam GET zahtevo. In če gledamo dejansko kodo, ugibam, sem prepričan, je še vedno precej enake. Oh, sem pozabil, da ga pretvori v niz, to je to. Ne, še vedno ne deluje. Ne glede na to, tukaj je dejansko končana koda Za kaj naj bi to izgledal, in to počne isto, kot tisto, kar sem pravkar izvaja. Ko boste kliknili na gumb, ki jih uporablja GET JSON samodejno razčleniti podatke. To traja podatke nazaj iz nje in zanke skozi celotno paleto in odtisi izključuje - vse, kar je danes za kosilo, ime ji, in doda prelom vrstice po vsaki vrstici. To je, kako boste uporabili GET funkcijo. 

Lahko uporabite tudi POST, ki jih nisem imel časa napisati gor zgled za to, vendar smo lahko ogledate na dokumentaciji. Če pogledaš na jquery.post, lahko vidite, da je skoraj ista stvar. Imate URL, ampak prenosa parametrov s pomočjo - samo, da jih postavi v niz za URL sama, moraš opraviti v tem Variabilni podatki da je v bistvu matrika, slovar, da zemljevidi parametrov v vrednosti. Podaš da, in da jih pošlje v uporabo POST. In ko ste, potem imate lahko funkcijo uspehu da se izvede, ko pride podatke nazaj. Sicer pa je popolnoma enak. Torej z POST, boste morda želeli uporabiti POST, na primer, če imate obrazec za vnos pustite ljudi vnosa gesla vanjo, in pošiljanje teh gesel brez s svojim zalednim scenarij, da preverite v bazi podatkov, ali je ta uporabnik veljavna ali ne. To lahko storite vse, z uporabo jQuery, namesto da bi osvežite stran sploh. Tako sem izvajal v blog, ki sem vam pokazala že prej. Če gremo do konca portal in se odjavite, se odjavite Odjava ne deluje. No, naj ga pravkar odprla v novem oknu. Tu je geslo, in sem bil tekoč, da tip v nekaj naključno. To se ne dela, ampak lahko vidite, da nismo dejansko morali osvežiti stran sploh. Kodo, če želite, da pogled na to, je vse na voljo tukaj. Torej kode sem lani zapisal bivši. Kot lahko vidite tukaj, smo poslali prošnjo za delovno mesto. Imam datoteko z imenom login.php v zadnjem delu, ki preveri, če je geslo veljavna. Parametri peljemo v so gesla, preslikana vhod, ki je v tem vnosno polje zdaj. In ko pride podatke nazaj, bomo preverili. Če so podatki napačni, potem rečemo napačno geslo, ga potisnite navzdol, in samo da bo izginila po tem. V nasprotnem primeru bomo naložili admin strani. In to je bilo vse narejeno z JSON. V tem veliko vrstic kode, lahko samo mimo podatke za zadnji konec, preveri, ali je pravilna, preverite, ali ste prijavljeni pravilno, in dejansko odzivajo na to, preusmerjanje osebo na pravi strani ali dajanje v najem jih prijavite in jim povedali, da so imeli napačno geslo. Torej, to je primer, kako lahko uporabite jQuery POST poslati zahtevo za post na svoj zadnji konec, preverjanje, ali je kdo prijavljen pravilno. 

Vse je v redu, tako da je vse primere sem imel, in vse stvari sem hotel za kritje. To so glavne stvari, ki jQuery vam omogoča, da: izberite elemente, ki jih spreminjate z uporabo DOM manipulacijo, lahko dodate učinke, aktivirajte stvari o določenih dogodkih, in tudi ne AJAX zahteve zelo gladko in brez težav. Torej hvala za prihod ali gledanje, in če imate kakršnakoli vprašanja, mi samo povej. Da? [Študent] nazaj, ko je pokazala, da je JSON po POST zahtevo, v narekovajih, in sem se spraševala, kaj je storil. >> Ja, vidim. Vprašanje je bilo, da v tem primeru sem pokazala, tam je bila beseda JSON v narekovaje - Jaz bom samo dvigni še enkrat - po funkciji POST. Jaz sem samo vleče pokazati. Torej, tukaj je ta POST zahtevo, in tam je to JSON v narekovajih. To samo opredeljuje tisto, kar smo pričakovali izhod biti. Torej, če se peljemo v JSON kot pričakovano vrsto podatkov, to ni potrebno, vendar če ga prenese v, potem se bodo podatki samodejno razčleniti kot JSON. Torej nimamo poklicati funkcijo JSON razčleniti na njej, to bomo šele zgoditi samodejno. In če ste vzeli pogled na dokumentacijo za POST, da so ti podatki tipičnih spremenljivk, vrsto podatkov, pričakovana od strežnika. Je privzeto inteligentno ugibanje, da je lahko narobe, tako da lahko pustite prazno, ampak to je samo vrsta podatkov V kodiranje, ki ga uporabljate, ali je JSON ali XML ali kaj drugega. 

Še kakšno vprašanje? Vse je v redu. Če imate kakršnakoli druga vprašanja, vas prosimo, da mi email ob vshekhawat@college.harvard.edu, in diapozitivi in ​​koda bi morala biti na voljo na spletu kmalu. Srečno pri končnih projektov, upam, da uporabite jQuery. [CS50.TV]