[Powered by Google Translate] [Seminar: jQuery] [Vipul Shekhawat, Harvard University] [See on CS50.] [CS50.TV] Kui sa pärast mööda kodus, tegelikult võite kasutada minu slaidid internetis minnes seda linki. See TjjRWj kohta bit.ly. Võite ka lihtsalt minna URL otse, mis on cloud.cs50.net / ~ vshekhawat, mis on minu nimi, ja jQuery. Ma väga soovitame jälgida mööda kui vaatate kodus, ja kui sa oled siin, ka, sest see on üsna interaktiivne esitlus. 

Nii et täna ma lähen rääkima jQuery, ja esimene küsimus on, Mis on jQuery? Sel aastal, ma tean, et te pole kaetud JavaScript nii üksikasjalikult, nagu me oleme viimastel aastatel. JavaScript on, esiteks, vaid kliendipoolse keel et sa kasutad skripte ja kood on iga kasutaja arvutisse. Nii et teil on server, mis pakub veebilehtede inimesed, kuid võite teha asju oma masin, küsida nende masin saata taotlused oma server iga 30 sekundi või midagi sellist. Seda saab teha, kasutades JavaScript. JQuery lihtsalt pakub rohkem funktsioone peal JavaScript mis teeb pildi kraami teile. Kui te vaatate sisu peal, mis kirjeldab mõningaid asju, et sa oled võimeline seda tegema. Nii üldine, see loodi jaanuaris 2006. See oli esimene eostatud augustis 2005. See on olnud juba paar aastat, ja see on tõesti osa uue Web 2.0 liikumine mis on tehtud Internet nii särav. See on levinuim JavaScript raamatukogu. Üle 19,6 miljoni veebilehed kasutavad seda ja kasutamine kasvab jätkuvalt vastavalt builtwith.com, mis ilmselt viimase aasta jooksul, äsja kasvab pidevalt üsna lineaarselt. Seas top 10 miljonit saite, seal on veel - umbes 40% neist, mis seda kasutavad. Facebook kasutab seda, palju mud veebilehed praegu kasutada. Võite vaadata need andmed ise, kui soovite. Ja siis võiks öelda, et see on õigustatud, sest see on vundament ja 13 juhatuse liikmed, koos meeskonnaga 20 inimest, kes töötavad seda regulaarselt. Nii et see on väga laialt levinud, see on. Org URL, see on väljamõeldud, see on positiivne kaasmõju muud kraami, nii et see on suur asi. 

Miks peaksid sa seda kasutada? JQuery on väga kerge. See tähendab, et see ei ole väga suur fail. Võite alla laadida minified fail, mis on ilma kõik valge ruum ja kommentaare, ja see on ainult 32 kB. Nii et see on lihtne lihtsalt Toss peale oma veebilehel ja lihtsalt kasutama hakata. See on ka väga tõhusalt kirjutatud, nii et see ei võta palju - see ei aeglusta oma kodulehel palju, kui sa seda kasutada. See võimaldab teil rakendada asjad, mis olid varem teostamatu. On mõned aspektid funktsionaalsus, nagu luua animatsioone, mis tavaliselt oleks väga raske teha. Aga jQuery nad tegelikult väga lihtne. Ja seal on mõned asjad, mis on tüütu teha, võimalik JavaScript, nagu saates POST taotluse vaid saata taotluse server, sa pead kirjutama viis või kuus või seitse rida koodi. Nüüd saad lihtsalt teha seda koodirida, ühes funktsioon kõne. See tõesti lihtsustab palju asju, mis sa teed. Ja kõik cool kids kasutavad seda. Poolt, et ma mõtlen mind. Minu lõplik projekt eelmisel aastal, mis on news.whrb.org, mis on raadiojaam, olen loonud seda blogi mis majutab kõik näitab, et me oleme teinud ja MP3 faile neile. Võite sirvida viimase näitab, ja see on kõik tehtud kasutades jQuery. Te võite öelda, sest kõik need animatsioonid sisuliselt. Nii et kui teil on - kui loote uus postitus, näed neid vähe slideDowns; et kõik on tehtud kasutades jQuery. Ja see fade - nii et selline värk on kõik tehtud kasutades jQuery, ja sa ei pea pidevalt asendusostu lehekülge navigeerida kohas. Teine lahe asi, mis on tehtud kasutades jQuery on see esitlus. Ma kasutan seda avatud lähtekoodiga asi nimega scrolldeck, mis keegi kirjutas peal jQuery. Kui teil tegelikult vaadata allikas, siis näete, et nad kasutavad seda dollari märk; dollari märgid kasutatakse jQuery tähendama, et funktsioon on jQuery funktsiooni. Nii nad määratlevad ümbrise peal jQuery mis võimaldab teil teha esitluse niimoodi, ja te näete, et siin nad ka originaal jQuery faili mis on see, mida sa pead lisada, kui soovid kasutada jQuery aastal oma veebilehed. 

Puudutades seda, kuidas sa seda installida? Sa võid minna jQuery.com ja alla laadida faili, lisada see web directory ja lisada see. Nii lihtsalt peal, peas tag oma HTML faili oma peamise HTML fail, lihtsalt et koodirida koos õige versioon, mille versioon jQuery te kasutate. Saate selle alla laadida minnes jQuery.com, vajuta "download jQuery," ja sul on see. Nii see on. Ja tegelikult, saame heita pilk kuidas see välja näeb. Kui klõpsate alla laadida siit, jQuery on see. See on lihtsalt üks suur JavaScript fail, mis teeb kogu magic kraami teile. See on minified versiooni, mis ei ole loetav üldse. Võite vaadata areng versioon, mis on loetav kuid siiski väga, väga pikad. On palju asju seal. Võite linkida Google'i hostitud versiooni. Nii et tulen võimaldab teil lihtsalt tugineda Google seda anda. Nad annavad iga versioon on kättesaadav igal ajal. Nii saab ilmselt tugineda Google võõrustada seda sinu jaoks. Või võite linkida jQuery enda uusim versioon. Nad on URL, mis on alati uuendatud uusimale versioonile. See on jQuery viimane, ja seal on üks probleem, et mis on see, et kui ajakohastatud jQuery ja mõned varasemad funktsioonid nad olid muutub retrograded või taunitud, see ei tohi - see võib hakata ei saa toetada enam. Nii et kui sa kirjutad veebilehel kasutades versioon 1.8.2, ajaks versioon 2.7 välja tuleb teatud funktsioone teile kirjutasin, ei tööta enam. Nii et see on parem lihtsalt alla 32 kB faili pane see oma veebilehele, ja see teen tööd igavesti. 

Ma lähen edasi minna ja hakata rääkima tegelik funktsionaalsuse jQuery. Esimene asi on valijad. See on see, mida jQuery algselt kavandatud anda. Ja te võite klõpsata dokumentatsioon vaadata üksikasjalikku dokumentatsiooni valijad ma lähen katab. Idee valijad on, et saate valida HTML elemendid lehel. Elements lehel on ID ja klasside ja muude kindlaks aspektid neile. Seal on ka - Nad on eri tellimusi. Osa ajast nad pesitses sees üksteist. JQuery võimaldab teil ehitada lihtsaid küsimusi, et tuua elemendid lehel. Siis saab manipuleerida neid elemente kasutades jQuery funktsiooni, mis on manipuleerimine osa me jõuame hiljem. Teil on võimalik muuta HTML, muuta CSS, saab ka animeerida ja lisada funktsioone, mis aktiveerivad teatud sündmused. Nii näiteks, kui midagi on klõpsatud, tahad, et midagi juhtuks, saate seda teha kasutades jQuery samuti. Ja seal on väga palju võimalusi, et valida elemente. Enamik neist ma ei ole kunagi kasutanud, kuid seal on põhilised need, mis on üsna oluline. Element valijat, näiteks kui oled valides midagi mis on div - Mul on tegelikult koodi avatud Selle esitluse. Nii näiteks, siin on esimene slaid. Siin on meil div. Kui me tegelikult valida kõik divs lehel see lihtsalt annab meile massiivi kõik divs, mis eksisteerivad selles failis. ID valija saab valida midagi antud ID. Nii et kui see on näiteks see asi on ID ", mida" ja kui me tegime seda # mida asemel mõned ID, see oleks lihtsalt tagasi array, mis on üks element ja see on, et element osas. Me võime ühendada ka valijad nii lastes valida vaid asju, mille turvalisus on divs. Nii et jah. Ainult vali divs mis on selle ID. Klassi sa lihtsalt kasutada dot, see on sama asi nagu CSS. Järeltulija töötab ka, nii et kui teil on mõned klass ja see on pesastatud elemente - nii näiteks seal on mõned klassi ja see on ankrusilt siduda teisele lehele, saate selle süntaks laadida link. Võite valida ka mitu asja korraga, siis eraldage nad komadega kasutage valijat soovite, ja siis valida neid kõiki korraga, ühte massiivi. Ja siis on ka mitte valijat, siis võite valida kõik divs mis ei ole mõne konkreetse klassi. Ja see on ainult kasulik viis sissejuhatus kuidas see valik toimib. Ma näitan mõned konkreetsed näited teine. 

Täpsem valijad on - need on vaid mõned näited. Seal on kümneid neid, aga kui sa tahad, et valida kõik pildi siltide jooksul mõned element, siis sa lihtsalt teha: pilt. Kui soovite valida isegi elemendid, näiteks, kui on 20 neist soovite valida 0, 2, 4, 6 ja nii edasi, sa: isegi, või saab ka teha: veider. Need on pseudo selektorid, mis tähendab, et nad tegelikult arvutama iga teine ​​element mitte lihtsalt läheb ja valides neid kõiki. Võite ka - iga element võib olla ka spetsiifilisi atribuute. Nii näiteks class = center on ka atribuut. Sel ankrusilt, href, hyper viide, on atribuut ka. Seega saad sa valida midagi, mis seob konkreetse lehe või lihtsalt - see on tõesti üldiselt. Võite valida midagi mis tahes omadus, mida te soovite. Ja siis ka, atribuut sisaldab. Kui te näiteks tahtis, et valida kõik input elemente mis on sõna "pass", nagu nimi neile, Kui lehte sisend tekstikuvakkeeksi seda nimetatakse "parool", et oleks üks viis võid valida seda. Ja seal on palju rohkem. Võite minna ja vaadata dokumente ja näha konkreetseid näiteid, kuidas see toimib. 

Järgmine asi on DOM manipuleerimine. Pärast valime elemente, me ei taha tegelikult teha asju koos nendega. Seni ei ole me vaatasime, et üldse, kuid kui te vaatate dokumentatsiooni seal on tõesti palju, mida me võiksime teha. Sel hetkel, me ei kavatse valida elemente selle esitlus ja töödelda, kasutades jQuery. Kuna see on rakendatud kasutades jQuery, meil on juurdepääs jQuery raamatukogu ja me saame kasutada neid funktsioone see kood. Üks kasulik asi, mida sa ei pruugi teada on konsool. Ja Google Chrome on, mida ma kasutan. Võite vajutada alt käsk J või alt kontrolli J avada konsool. Firefox ma arvan, et see käsk vahetustega K või kontrolli üleminekut K. Safari sa pead minema muuta mõned seaded. Seal on link, kui soovite seda teha, kuid ma soovitada saada Chrome või Firefox. Teeme avada konsool, see on siin. See võimaldab teil põhimõtteliselt lihtsalt midagi teha tahad. Nii saad lihtsalt kirjuta luua muutuja nimega x, x = 5, vaatame, mis x + 2 on. Võite isegi teha midagi sellist CS + Vaatame x + 45, mis on CS50. Sa võid teha mõned tüüpilised JavaScript kraam. Aga sa võid ka teha jQuery siin. 

Seega vaatame seda esimest aspekt. Me läheme luua muutuja nimega HTML, mis on string. See on punkt tag on see, et kutsutakse mõned uus tekst. Nii et meil on see HTML, see on mingi uus tekst, lõikes sildid. Nüüd me tegelikult tahame, et lisada see lehekülg. Ma ehita nii, et HTML selles punktis, see pealkiri siin, lisab ID. Kui valime lisab ID ja siis lisab see HTML muutuja Ma lihtsalt loodud, lisab, et HTML lõpus, kohe pärast käesolevas lõikes tag. Nii et kui me seda teeme - me valisime selle lõigu ja me oleme kutsutud lisab funktsiooni HTML muutuja Ma lihtsalt lisatakse, lisab, et uus tekst seal lehel. Saame ka ülaloleva, mis tähendab, et ta läheb enne, alguses, et element. Seega on mõned uue teksti alguses ja pärast seda. Võin minna ja värskendada vabaneda seda kraami ma olen lihtsalt teinud. Aga see on näide sellest, kuidas saab kasutada nimedele ja lisab meetodite manipuleerida kraami lehel, lisada mõned HTML. 

Saate muuta ka klassidesse. Tagasi selles stiilis faili, olen loonud seda win klass mis on teksti värv punane, mõned tausta värvi, teksti varju. Tundub kole, aga ma ei saa tegelikult - see lõik vastab klass ID. Ma võin lisada klassi eest võita. Võin täita seda konsooli, ja mis lisab, et klassi ja nüüd tundub kole, nagu loodeti. CSS automaatselt saab kohaldada klassid, mida - kui seal on CSS klass, see automaatselt saab kohaldada kui muudad klassi element. Siis saame lihtsalt eemaldada, kasutades eemalda klass. Nii et kui teil on eelnevalt klasside nagu punane või esiletõstetud ja siis, mida soovite rakendada neid, et elemendid, sa ei pea tegema kõik CSS stiil iga kord. Sa võid lisada klassi element, ja siis muutub see automaatselt - see automaatselt otsida korral selle klassi. Saame ka eemaldada asju, nii et ma lähen, et valida kõik divs lehel ja neid kõrvaldada. Mis on see, et läheb välja näeb? See hakkab välja nägema midagi, nii et seal on tegelikult midagi vasakule. Minu esitlus on läinud. Ma värskendada ja tuua ta tagasi, õnneks sest see on lihtsalt töötab kord, aga see on näide eemaldades, kui sa tahad täielikult hävitada element leheküljelt maha. 

Võite kirjutada, ja ma lähen, et valida kõik lõikes tags lehel ja minna sees ja asendada mis tahes teksti neil neid vaid sõna "testimiseks." Kui sa seda teed, siis saad vahetada iga punkt lehel seda testida. Yep. Nad kõik asendada testimist. Nii et see näide tutvumise teksti ja kirjutada seda. Võite alla laadida informatsiooni, ja see on tõesti lahe sisend kasti. Kui teil on sisend kasti, et inimesed on kirjutades kraami, inimesed kirjutades kraami sinna, siin me valida sisend, tahes sisend silt tüüpi teksti. Sel juhul on ainult üks sisend kasti kogu esitlus nii me lihtsalt valige esimene ja siis me nimetame val funktsioon peal. Mis tagastab väärtuse ja input box, väärtus on lihtsalt mis iganes juhtub olema sees. Nii et kui me seda teeme, seda lihtsalt tagastab stringi kraam. Ja kui me nimetame seda uuesti pärast kirjalikult rohkem asju, see muutub rohkem asju. See on üks suurepärane võimalus tutvuda elemente sisend kasti ja seejärel vaadata, on see kehtiv e-posti aadress, on see kehtiv kuupäev, näiteks. Sa võid laadida kraam koheselt, kuna inimesed on kirjutades, ja seejärel kontrollida, kas see on kehtiv, saadab selle tagasi server, midagi teha tahad sellega. Ja see, kuidas te juurdepääsu mis seal sees on need kastid. 

Samuti saate muuta CSS otse, nii et selle asemel, lisades klass, mis on mõned eelmääratud omadused võid lihtsalt lisada iganes CSS soovid midagi. Teeme vali keha, mis on kogu esitluse ja värv on vara, mis määratleb, mida värvid on tekst. Kui me muudame seda punast, kogu teksti lehekülje muutub punaseks. Me ei saa teha midagi sellist tausta värvi sinine, Vot, see on ilus. Seda saab teha kõike, mida sa tahad seda. Kasutades CSS vara, siis võib tõesti muuta, kuidas midagi välja igal ajal. Järgmine asi on mõju. Toime on põhimõtteliselt sama asi nagu muuta CSS, kuid nad tegelikult pakkuda mõned ekstra animatsiooni ta. Nii et selle asemel lihtsalt näitab või varjab midagi või muudavad värvi, tegelikult võite teha seda animeeritud. Siin on dokumendid, kui soovite võtta pilk ulatusliku dokumentatsiooni selle eest. Aga ma lähen, et katta peamised. On Kaardimenüü omadused. Näita / peida ID vastab tegelikult kogu see kast, nii et kui ma seda varjata, siis lihtsalt kaovad. Ja ma ei näita seda uuesti, kui ma tahan, et see tuleb tagasi. Ja ta on tagasi. See tegelikult ei kao, Ma tegelikult ei kustuta seda lehekülge, ma lihtsalt seada CSS vara nähtavus varjatud nii et sa ei näe seda enam. Seal on ka slaid ja lükake alla, mis võimaldab teil on selle mõju. Ta libiseb üles kaduma ja pärast see kaob saab libistada alla, et muuta see tagasi tulla. Ja nüüd on see tagasi. Seal on ka see fade mõju, mis - fade ID vastab see kast. Kui ma fade see välja, siis see saab aeglaselt kaduma. Võin ka tuhmuma seda, ja siis tagasi tulla. Võite teha ka ilmumise, mis on spetsiifiline fade funktsioon. Sul võib olla see tuhmuma ühegi konkreetse läbipaistmatus, mida soovite. Nii et kui sa fade see aeglaselt 0,5, siis see muutub pool nähtav. Ma ei oleks minna 0,1 ja tagasi 1, et muuta see täielikult uuesti nähtavaks. See on lihtsalt üks animatsioon, mida saate teha. 

On ka toggle mõju. Nii et ma lähen valima toggle ID, mis vastab see kast, ja et div võite helistada lülita ja kui see on nähtav muutub nähtamatuks, kas see on nähtamatu muutub nähtavaks. Nii et ma lihtsalt nimetatakse seda toggle funktsioon kaks korda; esimene oli sama asi nagu nahk, teine ​​kõne oli sama asi, show. Ja te võite seda teha ka koos fade lülita, mis teeb sama asja, ainult et tegelikult kaob. Ja sama asi slide lülitada. Seal on aheldatud mõju hästi, mis tähendab, kui valite element ja helistage kamp animatsioon metoodikaid, kui sa tahtsid seda fade out, siis lükake alla, ja siis peita ja siis fade, ta teeb neid järjest. Nii kadus, tuli tagasi - miskipärast hide ei juhtunud. Proovime seda. Jah, nii see pleekinud välja ja siis jooksnud minema. Ja seal on palju rohkem. Võite kasutada animeerida funktsioon luua oma animatsioone, mis on üsna keeruline, kuid see annab teile lõpmatu laiendatavus. Võite teha mingeid animatsioon sa tahad. Võite kasutada ka järjekorda Jonottaa mitu animatsioone korraga. Nii et kui sa tahad midagi lennata üle lehekülje, slide ülevalt paremalt alt vasakule, saad seda teha, ja lihtsalt hunnik tegevusi toimub üksteise järel. 

Järgmine asi, mida me ei kavatse rääkida, on üritusi. Sündmused võimaldab teil - nii kaugele, oleme lihtsalt kirjutada asju konsool ja see on üks viis, kuidas see võimalik on, kuid tegelik leht, sa ei kavatse olla võimeline teha kasutaja tüüpi asju arvesse konsooli. Sa tahad asju juhtuda automaatselt. Sest, et sa pead kasutama sündmuste aktiveerida mõne teatud sündmuse toimumisest. Saate kontrollida dokumentatsiooni üksikasjad. Seega vaatame. Tahame näidata või peita kasti aga praegu see nupp ei tee midagi, sest ma ei kasutanud seda veel. Ma lähen minema tegelik HTML leht. Siin on klapp. Seal div jaoks slide. See on klass slide. Seal on tekst. Nüüd on see kast ja kasti nuppu. Kuidas me tegelikult teha see kaob? Esiteks, ärgem kirjutada funktsioon, mis muudab kasti ID kaovad. See on süntaks funtion, lähme lihtsalt nimetame seda hideTheBox. See ei võta mingeid argumente, sest puuduvad argumendid, mis tuleb võtta. Me saame valida box ID. Nii et kasutades jQuery valida, saame valida box ID, ja siis lihtsalt muuta see kaob. Teeme taanduma. Kui me jooksime seda funktsiooni tegeliku konsool me võiks määratleda selle funktsiooni, me võib helistada hideTheBox, ja see töötab. Aga me tahame, et see juhtuks, kui nupp on tegelikult pressitud. Selleks, et me peame kasutama sündmus. Siduma sündmus teatud nuppu või teatud tegevus toimub, Meil on valida element, et sündmus käivitab - või mis käivitavad juhul kahju. 

Nii kõigepealt, lähme valima kasti nupp ID sest see on nupp, ja nüüd, et selle nupu me tahame luua animatsiooni, kui see on klõpsatud. Nii et seal on see click funktsioon. See võimaldab teil siduda teise funktsiooni ta. See funktsioon võtab teise funktsiooni argumendina saame liigu hideTheBox funktsioon, ja iga kord, kui seda nuppu klõpsata, et funktsioon automaatselt täita. Nii, et see töötab, kui me salvestada see, et ma värskendada, ja - üks teine, ma vabandan. Las ma lahendan selle tõesti kiiresti. Okei. Vot nii. Nüüd kast kaob, kui me nuppu. Me võime muuta ka lihtsalt fadeToggle, muuta see lihtsalt näidata või peita kasti ja see töötab ka liiga, kui me värskendada. Me ei varja seda, saame ka näidata, ja et jätkab tööd. Teine asi, mida me teha saame, on, me tegelikult ei ole määratleda see hideTheBox funktsioon Enne me nimetame kliki funktsioon. Nii et selle asemel määratletakse funktsiooni ning kutsudes hideTheBox, me ainult kavatse seda nimetada, kui see asi on klõpsatud. Nii saame defineerida anonüümselt siin, mis on funktsioon, JavaScript on. Saate määrata funktsiooni; tavaliselt, me ütleks funktsioon hideTheBox argumentidega, vaid saame öelda toimida ühtegi argumenti, alustada lokkis traksidega, mis määrab funktsiooni, lähedal, et lokkis traksidega, ja siis lihtsalt määrab funktsiooni siin, esimese sulgudes ja viimane sulgudes mis vastavad argumendid click funktsioon. Nii et me möödaminnes seda funktsiooni, saame kopeeri see rida koodi siin, ja mis teeb täpselt sama asja. Ja nüüd me ei ole seda juhuslikult fadeTheBox funktsioon mis istub ümber ilma nähtava põhjuseta. Funktsioon on defineeritud anonüümselt, see ei ole veel nime. Ta täidab ainult siis, kui me klõpsa kasti nuppu. Nii värskendav veel kord, veel kord, ja te näete, et see ikka töötab. Ja see, kuidas sa luua sündmusi. 

Seal on palju erinevaid üritusi, et saame kasutada. Ma lähen tagasi lülituda kasutades konsooli lihtsalt näidata, kuidas need töötavad. ID kõigi nende vastavad igas kastis. Nii et see kast on kliki ID, see on võti ID ja see on hiir ID. Üks asi on see, et seal on see tegevus funktsioon; mitte kirjutades seda iga kord, Ma tegelikult läks edasi ja määratletud käesoleva meetme funktsioon siin. See teeb sama asja nagu hideTheBox funktsioon. Läheb see kast ja kas kaob see ära või kaob see sisse Ja sellepärast me saame kasutada seda siin. Nii et kui me klõpsa seda nuppu ID, me tahame teha kasti kaovad või uuesti. See on sama asi, kui nuppu, et meil oli eelmisel slaidil. Aga pärast me nimetame, et me saame klikkige sellel ja kast kaob Seejärel klõpsa uuesti ja kast ilmub uuesti. See on päris lihtne. Topeltklõps teeb sama asja, välja arvatud see nõuab topeltklõps. Nii et kui klõpsate seda üks kord ja klõpsake seda uuesti ei juhtu midagi, kuid kui te topeltklõps kiiresti, siis see kaob. Kui te topeltklõps jälle, siis tagasi tulla. Nii et on üsna lihtne. Klaviatuuriga on imelik, ma ei usu, et see tegelikult töötab selles näites sest võti maha, võti üles ja klahvivajutust ja muud olulised tegevused aktiveerida ükskõik mida element te siduda see. Näiteks isegi kui ma seotud klahvi keha või midagi muud täielikult siis ikkagi aktiveerida ükskõik - see ei ole konkreetne. Ma ei pea olema klõpsates seda ja vajuta klahvi teha midagi kaduma. Oleks aktiveeritud hoolimata sellest, mida element ma olen praegu sisse Nii et need tegelikult ei tööta selles näites sest ta ei tunne mind nii sisenemisel sisestada klaviatuurilt sisestamine div. 

Aga kui te vaatate hiir meetmeid, Esimene neist on hõljuma, ning seda saab teha mõned seda kasutades CSS. Kui kasutate CSS, saate luua, nii et kui te hover üle midagi, siis tema stiili muutusi. Kuid kasutades jQuery saab muuta stiilid muid asju samuti. Nii näiteks, me nimetame tegevus kui me hover üle selle div. See tähendab, et kui me hover üle, siis kast kaob. Kui me liigume eemale, kast ilmub uuesti. Kui me nimetame seda ja hover üle, kast ei kao, ja niipea, kui me minema, ta tuleb tagasi. Kui me nimetame seda hover funktsioon hiire ID, mis vastab selle kasti, siis kui me hover üle kast siis kast tegelikult kaob - see on funky just nüüd, kuid - kui me liigume eemale, ta naaseb. Praegu on tagasi mingil põhjusel. Hiir siseneda ja hiir liikuda funktsioonid on mõnevõrra sarnane, kuid veidi erinev. Mouse siseneda ainult aktiveerub, kui hiir siseneb kasti ootuspäraselt. Nii et kui sa liikuda, see kaon. Aga see ei ole taas, kui sa minema, sa pead liikuma tagasi peale seda ta tagasi tulla. Seal on ka hiir liikuda funktsiooni, mis aktiveerub kui hiir on isegi praeguse kasti. Nii, et see muudkui läheb, pleegib sisse ja välja. Ja see on tegelikult metsaraie - tundub, et see on lihtsalt pleegib sisse ja välja, aga see on tegelikult metsaraie palju rohkem tegevusi kui see, nii et kui sa minema see muudkui läheb, sest ta sisse nagu tuhat neist. Võib-olla mitte tuhat. Võib-olla viis. Ta logib rohkem. Asi on selles, kõik hiir meetmeid, seal on palju neid. Võite lugeda üles teiste ones, kuid nad on kõik veidi erinevad, ja saab valida kumb vajate kumb kindlal eesmärgil sa üritad teha. 

Järgmine asi, mida ma rääkida on AJAX. AJAX, ma tean, et me ei katnud JavaScript nii palju sügavust tänavu nii et ma olen lihtsalt kavatse rääkida AJAX üldiselt üks minut. AJAX tähistab Asynchronous JavaScript ja XML. See on põhimõtteliselt, näiteks siis, kui sa oled Facebookis ja see surub te teate, see on sellepärast, AJAX töötab oma veebibrauseris. Iga paari sekundi oma veebilehitseja on tegelikult läheb Facebook serveritesse, paludes neil, kas sul on midagi minu jaoks uus, ja siis tuleb sulle tagasi. See võimaldab teil saata taotlused server ilma et oleks tegelikult koormus lehel. Nii tavaliselt, kui sa oled lihtsalt kasutades PHP ja andmebaasi pead värskenda lehekülge enne saate uue info serverisse. Kuid kasutades AJAX, saab tõmmata jaoks uut informatsiooni pidevalt, või tõmmake see, kui klõpsate nuppu või midagi sellist. Nii, et see võimaldab meil saata taotlusi ilma lehekülge uuesti laadida, ja me saame kasutada kas GET või POST taotlused. 

GET nõudmised, näiteks kui teil on Google.com ja teha q = test. See on neile päringu test. Ja see on GET taotluse, sest see kulgeb nende parameetreid arvesse URL ise. POST taotlusel on sama, kui saadate neid posti teel. See on nagu sa pane see kirja ja saata see välja, et neil, kuid nad ei ole tegelikult näha sisu. Nad ei ole nähtav URL. Sa ei saa otse kirjuta see, et teil on saata see peaaegu salaja. See on postitus. Kuid kasutades jQuery, mida saate teha, GET ja POST taotlused palju kergemini kui tavaliselt võiks kasutades lihtsalt JavaScript. Võite päringu API kasutades GET nõudmised ning saate kontrollida ka sisselogimise andmeid. Järgmisel leheküljel, olen loonud seda, mis küsib: "Mis on lõunaks?" kasutades Harvard toit API, niiet tõmmake see üles. See on vaid üks näide, kuidas saab kasutada jQuery teha GET päringu API ja saada teavet tagasi saada. Nii et me tahame näha menüüs täna ja me tahame näha, mis on lõuna. Siin on link, et luua GET taotluse jQuery. kasutate $. saada funktsiooni. Esimene argument on URL, nii et mida sa täpselt päringu. Siis järgmine argument on funktsioon, mis täidab kui GET taotluse on lõpetatud. Nii et ära saatma mõned taotluse serverile, oodake, kuni see tagasi tulla. Kui see ei tule tagasi, sa lähed, et võtta mõned meetmed, mille andmeid on tagasi serverisse. Lähme edasi ja kodeerida seda samuti. Ma ei koodi see nii, meelega. Siin on TODO. Esiteks, ärgem kasutada juhul siduv nii et kui seda nuppu vajutada, saadame välja GET taotluse. Ja kui see GET päringu naaseb koos mõned andmed, me seda kirjutada sellesse jahu info ID div. Esiteks, ärgem valida toidu nupp ID. Kui see on klõpsatud, me tahame seda teha midagi. Teeme lihtsalt teha see anonüümne fuction, nagu enne. Kas murrab need looksulg, ja kui seda nuppu vajutada, me tahame saata GET taotluse vaadata, mida on lõunale. Selleks, et saaksime lihtsalt kirjutada $. Saada. See on jQuery funktsiooni abil dollari märk. See võtab paar argumenti. Esimene neist on URL, teine ​​on tagasikutse funktsiooni, funktsiooni, mis kutsutakse kui see taotlus tegelikult tagasi. Olgem lihtsalt luua URL esimene. Saame selle API, et David kirjutas üles. Lähen siin näeme, et see on food.cs50.net/api/1.3/menus, ja siis sa lihtsalt liigu nimed parameetrid, mida soovite. Nii parameeter 1 on väärtus 1. Tundub, et standard kuupäev, alguskuupäev, vaikimisi täna kui te ei anna midagi, ja lõppkuupäev ka vaikimisi et täna, kui te ei anna midagi. See on see, mida me tahame. Tahame lihtsalt saada teavet täna. 

Me tahame, et formaat olema JSON. See on lihtsalt suvaline, saate kasutada mis tahes, mida soovite. Võite kasutada CSV, kuid JSON on JavaScript Object märke. See on väga lihtne JavaScript aru, mida see tähendab, ja me võime printida lihtsamalt niimoodi. Teeme seda taotleda JSON ja olgem taotluse lõunasöök. Nii jahu = lõunasöök. Lihtsalt üles kirjutama, et URL, me läheme tagasi. Seal menüüd. Esimene parameeter on väljund = JSON sest see, mida me tahame, ja sa eraldi parameetrid "ja". Teine parameeter on - ma ei mäleta. Sööki. Ja me tahame jahu = lõunasöök. Võite katsetada seda URL tippides selle brauseri ja läheb see. See annab teile mõned väljund. See on lihtsalt hunnik asju, mis on lõuna. See on see inetu formaadis. Me tahame, et seda trükkida peale meie lehe paremas vormis. Nii URL on õige, nüüd me lihtsalt vaja kirjutada funktsioon tagasi kutsuda, kui taotlus on edukas. See funktsioon tegelikult võtta argument. On andmeid. Andmed, mida tuleb tagasi GET taotluse pärast GET taotluse on tehtud. Me saame seda teha looksulg; siin me kirjutame anonüümne funktsioon et täide, kasutades andmete kui me saada teavet tagasi. Seega andmed, kui me tipitud URL, see on see, mis andmeid läheb nägema. See saab olema see suur string. Aga hea asi on see, JavaScript saab sõeluda seda kasutades JSON.parse funktsioon. Nii loome uue muutuja nimega sõeluda andmed. Ja sõeluda andmed massiivi objektid. Iga objekt sisaldab teavet näiteks - hästi, võtame pilk. See on kuupäev, jahu, kategooria, retsept, kõik see muu kraam. Teeme lihtsalt välja printida nimi igaüks. Olgem korrata kogu massiivi värk, et saada tagasi seda, ja lihtsalt välja printida iga üks - trükkida nimi igaüks. See on silmus. 

JavaScript on see kasulik süntaks, kus saate luua muutuja ja silmus üle massiivi ja var i on lihtsalt iteraatoris nii, selle asemel et teha var i = 0, i oli väiksem kui pikkus, i + +, saate lihtsalt teha var i sõeluda andmed. Selles näites sõeluda andmed (i) vastab praegusele element massiiv, tegelik eesmärk. Ja me tahame saada nimi välja. Teeme lihtsalt seda nime. Ja viimane asi, me ei kavatse olla mõned jQuery uuesti. Tegelikult lisada see div, see eine info div see on tühi. Teeme siis vali see. Me kasutame jQuery ja valige eine info div ID või jahu info ID, sorry. Me tahame, et lisada sellele. Kui me tegime katse, näiteks, oleks lihtsalt kirjutada seda iga kord. Nii saame lihtsalt lisada see. Praegune element massiivi, me jõuame nimi välja, ja me lisab selle lõppu jahu info ID div. Ja siis lihtsalt, et see näeks puhtam, me ka lisada line break nii see ei ole kõik ühel real. Nii et kui kõik läheb hästi, et peaks olema hea - esiteks, kui seda nuppu klõpsata, saadab ta ära GET päringu URL. Kui andmed tuleb tagasi saada, siis see sõeluda see, muuta see JSON, loop kogu massiivi esindavad et andmed, ja siis lisada nimi ja reavahetuse iga rida selles jahu info ID, mis varem oli tühi. Nii läheb tagasi sellele lehele, muudame, kliki, teada - see ei tööta. See on kahetsusväärne. Ja see on koht, kus silumine on sisse Index.html, joon 1. See on huvitav. Olgu, mitte kulutada aega seda teha, ma lihtsalt läheb tõmba teha faili, et mul on, mis on läbinud versioon. Ma ei ole kindel, mis vahe on, kuid me saame selle avada asemel. Ja me läheme AJAX, ja see peaks töötama korralikult. Just see oli lõunasöögiks täna ei kindlas järjekorras, jutumärgid, nii see ei ole prettiest. Aga loomulikult, kui sa seda teed lõplik projekt, siis oleks muuta see otsima parem. Aga see on lihtsalt näide sellest, kuidas te seda teete GET taotluse. Ja kui me vaatame tegelikku koodi, ma arvan, ma olen päris kindel, see on ikka päris palju sama. Oh, ma unustasin selle teisendada string, mis see on. Ei, see ikka ei tööta. Sõltumata sellest, siin on tegelikult lõpetatud kood mida see peaks välja nägema, ja ta teeb sama asja nagu ma lihtsalt rakendada. Kui klõpsate nuppu, kasutab ta GET JSON automaatselt sõeluda andmed. See võtab andmed tagasi saada ja silmuseid läbi terve rida ja prindib välja - kõike, mis on lõuna täna, nime see, ja lisab reavahetuse pärast iga rida. See, kuidas te kasutate GET funktsioon. 

Võite kasutada POST, mida ma ei ole aega üles kirjutama näiteks seda, kuid me ei saa vaadata dokumente. Kui te vaatate jquery.post, siis näete, et see on peaaegu sama asi. Sul on URL, kuid lähitulede asemel parameetreid kasutades - lihtsalt panemist stringi URL ise, pead läbima selle andmed muutuja mis on põhimõtteliselt massiiv, sõnastik, mis kaardistab parameetrite väärtused. Jätate et, ja, mis saadab neid kasutades POST. Ja kui sul on, et siis võib olla edu funktsioon mis täidab kui andmed tuleb tagasi. Muidu on täpselt sama. Nii et kasutades POST, võiksite kasutada POST, näiteks kui teil on sisendi lasete inimesed sisend paroolid sinna, ja saata need paroolid välja oma back-end script, et kontrollida andmebaasi, kas kasutaja on kehtiv või mitte. Seda saab teha, et kõik kasutavad jQuery asemel et värskenda lehekülge üldse. See, kuidas ma ellu blogi, mida ma teile näidanud varem. Kui läheme lõpuni portaali ja välja logida, välja logida, Logi välja ei tööta. Noh, las ma lihtsalt ava see uues aknas. Siin on parool ja ma läksin kirjutada midagi juhuslikku. See ei tööta, kuid on näha, et me ei tegelikult on värskenda lehekülge üldse. Kood, kui soovite seda vaadata, kõik on saadaval siin. Nii koodi kirjutasin eelmisel aastal millalgi. Nagu näete siin, me saadame POST taotluse. Mul on fail nimega login.php lõppfaasi, mis kontrollib, kui parool on kehtiv. Parameetreid me läbima on parool, kaardistatakse sisend, mis on selles sisend kasti praegu. Ja kui andmed tuleb tagasi, me kontrollime. Kui andmed on vale, siis me ütleme, vale parool, lükake seda allapoole, ja siis tee seda kaovad pärast seda. Muidu laadida admin lehele. Ja see oli kõik tehtud kasutades JSON. Sel palju ridu koodi, saate läbida andmed kolp, kontrollida, kas see on õige, kas sa sisse õigesti, ja tegelikult reageerida, suunates inimese õigele lehele või ei lase neid sisse ja ütlen neile, et nad olid vale parool. Nii et see on näide sellest, kuidas sa võiksid kasutada jQuery POST saata POST taotluse oma lõppfaasi, kontrollida, kas keegi on sisse õigesti. 

Olgu, see on kõik näited mul oli ja kõik asjad tahtsin katta. Need on peamised asjad, jQuery võimaldab teil teha: Valige elemendid, muuta neid kasutades DOM manipuleerimine, saate lisada efekte, aktiveerida asju teatud sündmusi, ja teha ka AJAX taotlusi väga sujuvalt ja lihtsalt. Seega tänan teid tulevad või vaadates, ja kui teil on küsimusi, siis andke teada. Jah? [Student] tagasi, kui selgus, siis tuli JSON pärast POST taotluse hinnapakkumisi, ja ma just mõtlesin, mida see ka tegi. >> Jah, ma näen. Küsimus oli, et näiteks ma lihtsalt näitas, seal oli sõna JSON jutumärkides ümber - Ma lihtsalt tõmmake see uuesti - umbes POST funktsiooni. Ma lihtsalt tõmmates seda üles näidata. Nii et siin on postitus taotluse ja seal on see JSON jutumärkides. See lihtsalt määratleb, mida me ootame väljund olema. Nii et kui me läbima JSON oodatavad andmed tüüp, see ei ole nõue, kuid kui võtame seda, siis andmed automaatselt sõeluda nagu JSON. Nii et me ei pea helistama JSON sõeluda funktsioon peal, see lihtsalt juhtub automaatselt. Ja kui te võtate pilk dokumentatsiooni POST, on käesoleva andmete tüüpi muutuja, mis tüüpi andmeid oodatakse server. Vaikimisi on selleks intelligentne arvan, et võib olla vale, nii et sa ei jäta see tühjaks, aga see on lihtsalt tüüpi andmeid kodeerimine, et te kasutate, kas see on JSON või XML või midagi muud. 

Muid küsimusi? Hea küll. Kui teil on küsimusi, emaili mulle kell vshekhawat@college.harvard.edu, ja slaidid ja kood peaks olema kättesaadav internetis üsna varsti. Õnn oma lõpliku projekti, loodan, et te kasutate jQuery. [CS50.TV]