[Powered by Google Translate] [Málstofa: jQuery] [Vipul Shekhawat, Harvard University] [Þetta er CS50.] [CS50.TV] Ef þú ert að elta eftir heima, getur þú í raun að nálgast glærur minn á netinu með því að fara á þennan tengil. Það er TjjRWj á bit.ly. Þú getur líka bara farið á slóðina beint, sem er cloud.cs50.net / ~ vshekhawat, sem er nafn mitt, og jQuery. Ég hvet mjög þú að fylgja eftir ef þú ert að horfa á heima, og ef þú ert hér, líka, því þetta er ansi gagnvirk kynningu. 

Svo í dag ætla ég að vera að tala um jQuery og fyrsta spurningin er, hvað er jQuery? Á þessu ári, ég veit að þú krakkar hafa ekki fjallað JavaScript í eins miklum smáatriðum eins og við höfum á undanförnum árum. JavaScript er fyrst af öllu, bara viðskiptavinur-hlið tungumál sem þú notar til að keyra forskriftir og kóða á vélinni hvers notanda. Svo þú hafa a framreiðslumaður sem veitir vefsíður til fólk, en þú vilt kannski að gera efni á tölvunni þeirra, spyrja þeirra vél til að senda beiðnir til þinn framreiðslumaður á 30 sekúndur eða eitthvað svoleiðis. Þú getur gert það með því að nota JavaScript. JQuery veitir bara meiri virkni á toppur af JavaScript sem gerir auka efni fyrir þig. Ef þú líta á the innihald á toppinn, sem lýsir sumir af the efni sem þú ert fær um að gera. Svo í heild, var það búið í janúar 2006. Það var fyrst hugsuð í ágúst 2005. Það hefur verið í kring fyrir nokkrum árum, og það er í raun hluti af nýju Vefur 2,0 hreyfing sem er gert internetið svo glansandi. Það er mest notaður JavaScript bókasafn. Yfir 19.600.000 vefsíður eru að nota það, og notkun er enn að aukast samkvæmt builtwith.com, sem virðist, á síðasta ári, hefur bara verið stöðugt vaxandi nokkuð línulega. Meðal efstu 10 milljón síður, það er enn - um 40% þeirra eru nú að nota það. Facebook notar það, hellingur af öðrum vefsíðum nota nú það. Þú getur litið á þeim tölfræði á eigin spýtur, ef þú vilt. Og þú gætir sagt það er legit því það hefur grunn og 13 stjórnarmanna, ásamt hópi 20 manna sem vinna á það með reglulegu millibili. Svo það er mjög mikið notað, það hefur a. Org slóð, það er fínt, það hefur snúningur-offs fyrir önnur efni, svo það er stór samningur. 

Hvers vegna ættir þú að nota það? JQuery er mjög léttur. Það þýðir að það er ekki mikið skrá. Þú getur hlaðið niður the minified skrá, sem er án allra hvítt rúm og athugasemdir, og það er aðeins 32 kB. Svo það er auðvelt að bara kasta á vefsíðuna þína og bara til að byrja að nota það. Það er líka mjög duglegur skrifað, svo það þýðir ekki að taka upp mikið af - það er ekki hægja vefsvæðið þitt mikið þegar þú notar það. Það gerir þér kleift að framkvæma hluti sem voru áður óframkvæmanlegar. Það eru nokkur atriði virkni, eins og að búa til hreyfimyndir, sem venjulega myndi vera mjög, mjög erfitt að gera. En í jQuery þeir eru í raun mjög einfalt. Og það eru sumir hlutir sem eru pirrandi að gera, mögulegt í JavaScript, eins og að senda POST beiðni, en að senda beiðni til miðlara, þú þarft að skrifa fimm eða sex eða sjö línur af kóða. Nú þú geta réttlátur gera það í einni línu af kóða í einu virka símtalinu. Það einfaldar mjög mikið af efni sem þú ert að gera. Og allir kaldur krakkarnir eru að nota það. Með því að meina ég mig. Í lokaverkefninu mínu á síðasta ári, sem er news.whrb.org, sem er fyrir útvarpsstöð, bjó ég þetta blogg sem hýsir allar sýningar sem við höfum gert og MP3 skrár fyrir þá. Þú getur flett í gegnum á undanförnum sýningum, og það er allt gert með því að nota jQuery. Þú getur sagt Vegna allra þessara fjör, í meginatriðum. Svo ef þú ert - ef þú ætlar að búa til nýja færslu, þú sérð þessa litlu slideDowns, það er allt gert með jQuery. Og þetta hverfa - þannig að svona efni er allt gert með því að nota jQuery, og þú þarft ekki að stöðugt endurhlaða síðunni til að vafra um síðuna. Annar kaldur hlutur sem er gert með því að nota jQuery er þetta kynning. Ég ætla að nota þetta opinn hlutur sem kallast scrolldeck, sem einhver skrifaði fyrir ofan jQuery. Ef þú horfir í raun á the uppspretta, getur þú séð að þeir nota þetta dollaramerki, dollara merki eru notuð í jQuery til að þar með að fall er jQuery virka. Svo þeir skilgreina umbúðir ofan á jQuery sem leyfir þér að gera kynningu eins og þetta, og þú getur séð að hér að þeir eru meðal upprunalega jQuery skrá, sem er það sem þú þarft að fela ef vilja til að nota jQuery í eigin vefsíður þínar. 

Að snerta á því, hvernig setja þér það? Þú getur bara farið til jQuery.com og sækja skrána, bæta við það til a Web Directory og fela það. Svo bara ofan í höfuðið tag HTML skrá helstu HTML skrá, bara þessi lína af kóða með rétta útgáfu fyrir hvaða útgáfa af jQuery þú ert að nota. Þú getur sótt það með því að fara til jQuery.com, smelltu á "Sækja jQuery," og þú hefur fengið það. Það er það. Og í raun getum við taka a líta á það sem það lítur út. Ef þú smellir á að sækja hér, jQuery er þetta. Það er bara einn stór JavaScript skrá sem gerir alla galdra efni fyrir þig. Þetta er minified útgáfa, sem er ekki læsileg á öllum. Þú getur einnig líta á þróun útgáfa, sem er læsileg en samt mjög, mjög langur. Það er mikið af efni í það. Þú getur einnig hlekkur til farfuglaheimili útgáfa Google á það. Svo sem mun leyfa þér að bara að treysta á Google til að veita hana. Þau veita hvert útgáfu af henni, í boði á öllum tímum. Svo þú getur sennilega að treysta á Google til að hýsa hana fyrir þig. Eða þú getur tengt eigin nýjustu jQuery er útgáfa. Þeir hafa vefslóð sem er alltaf uppfærð í nýjustu útgáfu. Það er jQuery-nýjasta, og það er eitt vandamál með það, sem er að ef uppfærður jQuery og sumir af the fyrri virkni þeir höfðu verður retrograded eða vanþóknun, það má ekki - það getur byrjað að ekki fá stutt lengur. Svo ef þú skrifar til vefsíðu með útgáfu 1.8.2, með þeim tíma útgáfa 2.7 kemur út sumir af þeim störfum sem þú skrifar virka ekki lengur. Svo það er betra að bara sækja 32 kB skrá, setja það á vefsíðu þína, og það mun virka að eilífu. 

Ég ætla að fara á undan og byrja að tala um raunverulegt virkni jQuery. The fyrstur hlutur er selectors. Þetta er það sem jQuery var upphaflega hugsuð til að veita. Og þú getur smellt á gögnum til að líta á ítarlegar handbækur fyrir selectors ég ætla að vera nær. Hugmyndin á bak við selectors er að þú getur valið HTML þætti á síðunni. Þættir á síðu hafa auðkenni og bekkjum og aðrar skilgreina þætti til þeirra. Það er líka - they're í mismunandi skipanir. Sumir af þeim tíma sem þeir eru hreiður inni hvor aðra. JQuery gerir þér kleift að byggja einfaldar fyrirspurnir sem sækja þætti af síðunni. Þá getur þú breytt þessum þætti að nota jQuery virka, sem er að sýsla kafla munum við fá að síðar. Þú getur breytt HTML, breyta CSS, þú getur líka lifandi og bæta við virka sem virkja á ákveðnum atburðum. Svo, til dæmis, ef eitthvað er smellt viltu eitthvað að gerast, þú getur gert það með því að nota jQuery eins og heilbrigður. Og það eru gríðarstór tala af lifnaðarhættir til að velja atriði. Flest af þeim ég hef aldrei notað, en það eru helstu sjálfur, sem eru nokkuð mikilvægt. Þátturinn val, td ef þú ætlar bara að velja neitt sem er div - Ég hef reyndar kóðann opinn fyrir þessa glærusýningu. Svo, til dæmis, hér er fyrsta renna. Hér höfum við div. Ef við veljum í raun allar Divs á síðunni, það verður bara að gefa okkur fjölbreytta öllum divs sem ríkir í þessari skrá. The ID val er hægt að velja neitt með tilteknu auðkenni. Þannig að ef þetta, til dæmis, þetta hlutur hefur auðkennið "Hvað," og ef við gerðum þetta með # það í stað einhvers ID, það myndi bara skila array sem hefur einn þáttur og það er að þátturinn á síðunni. Við getum einnig sameina selectors þessum hætti með því að hafa aðeins velja hluti með auðkenni sem divs. Svo já. Aðeins valið Divs sem hafa þessi auðkenni. Fyrir bekknum þú notar bara punkt, það er sama og CSS. Afkomandi virkar líka, svo ef þú hafa sumir tegund og það hefur hreiður þætti í henni - svo, til dæmis, það er einhver tegund og það hefur akkeri tag til að tengja við aðra síðu, þú getur notað þessa setningafræði til að sækja hlekkur. Þú getur einnig valið marga hluti í einu, bara skilja þá með kommum, notað hvaða val þú vilt, og þú verður að velja þær allar í einu, í einni fylking. Og þá er það einnig ekki val, þannig að þú getur valið allar Divs sem hafa ekki einhverja tiltekna tegund. Og það er bara gagnlegt leið til að fá kynningu á hvernig þetta val virkar. Ég skal sýna nokkur tiltekin dæmi í annað. 

Ítarlegri selectors eru - þetta eru bara nokkur dæmi. There ert heilmikið af þessu, en ef þú vilt að velja alla myndina tags á næstunni frumefni, þá gera bara: mynd. Ef þú vilt velja jafnvel þætti, td ef það eru 20 af þeim, þú vilt velja 0, 2, 4, 6 og svo framvegis, þú: jafnvel, eða þú getur líka gert: skrýtið. Þetta eru gervi selectors, sem þýðir að þeir reikna í raun sérhver annar þáttur frekar en bara að fara og velja þau öll. Þú getur einnig - hver þáttur getur einnig hafa sérstaka eiginleika. Svo, til dæmis, class = sent er einnig eiginleiki. Af þessum akkeri tag, href, HyperText tilvísun, er eiginleiki líka. Svo þú getur valið eitthvað sem tengir á tiltekna síðu eða bara - það er mjög almenn. Þú getur valið eitthvað með hvaða eiginleika sem þú vilt. Og þá líka, eiginleiki inniheldur. Ef þú, til dæmis, vildi velja allt inntak þætti sem hafa orðið "fara" eins og nafnið þeirra, ef síða hefur ritun blokk sem heitir "Lykilorð", sem myndi vera ein leið sem þú getur valið það. Og það eru margir fleiri. Þú getur farið á undan og líta á gögnum og sjá ákveðin dæmi um hvernig það virkar. 

The næstur hlutur er DOM meðferð. Eftir að við velja þætti, munum við viljum raunverulega gert efni með þeim. Svo langt að við höfum ekki litið á það yfirleitt, en ef þú horfir á gögnum, there 'raunverulega a einhver fjöldi sem við gætum gert. Á þessum tímapunkti erum við að fara að velja hluti á þessari kynningu og vinna þá nota jQuery. Vegna þess að þetta er hrint í framkvæmd með því að nota jQuery, höfum við aðgang að jQuery bókasafn, og við getum notað þessa virkni innan þessa kóða. Einn gagnlegur hlutur sem þú getur ekki vita um er að hugga. Og Google Chrome er það sem ég ætla að nota. Þú getur ýtt á alt stjórn J eða alt stjórn J til að opna stjórnborðið. Í Firefox Ég held stjórn það er vakt K eða stjórna shift K. Í Safari þú ert að fara að breyta einhverjum stillingum. Það er tengill ef þú vilt gera það, en ég mæli með að fá Chrome eða Firefox. Svo skulum opna stjórnborðið, er það niður hér. Það gerir þér kleift að í raun bara að gera hvað sem þú vilt. Svo þú getur bara slegið í að búa til breytu sem heitir X, x = 5, við skulum sjá hvað x + 2 er. Þú getur jafnvel gert eitthvað eins CS + skulum sjá, x + 45, sem verður CS50. Þú getur bara gera sumir dæmigerður JavaScript efni. En þú getur líka gert jQuery hér. 

Svo skulum líta á þetta fyrsta þætti hér. Við ætlum að búa til breytu sem heitir HTML, sem er band. Það hefur lið tag í það, sem er kallað einhvern nýjan texta. Þannig að við höfum þennan HTML kóða, það er sumir nýr texti, í tags mgr. Nú viljum við í raun að bæta því við síðuna. Ég setti það upp þannig að HTML fyrir þessa málsgrein, þetta titill hér er auka við ID. Ef við veljum auka ID og þá bæta við það HTML breytu ég búin bara, það mun bæta að HTML lok, rétt eftir að þetta lið tag. Þannig að ef við gerum það - við valið þessa málsgrein, og við höfum kallað auka virka með HTML breytu Ég bætti bara, það mun bæta því nýjan texta rétt þarna á síðunni. Við getum einnig prepend, sem þýðir að það mun fara fyrir í upphafi þess frumefni. Svo er einhver nýr texti í upphafi og eftir. Ég get farið á undan og hressa til að losna við þetta dót sem ég hef bara gert. En það er dæmi um hvernig þú getur notað prepend og bæta aðferðir að vinna efni á síðunni, bæta smá HTML-kóða. 

Þú getur einnig breytt bekkjum. Aftur í þessum stíl skrá, hef ég búið til þetta fyrir vinna bekknum sem hefur texta rauða litinn, sumir bakgrunnslit og texta skuggi. Það lítur hideous, en ég get í raun - málsgrein þessari samsvarar flokki ID. Svo ég get bætt flokki fyrir the vinna. Ég get keyrt þetta í vélinni, og það mun bæta þeim flokki, og nú lítur það hideous, sem skyldi. The CSS sjálfkrafa fær beitt að flokka sem þú - ef það er CSS fyrir flokk, sjálfkrafa það gerist beitt ef þú breytir tegund af þáttur. Þá getum við bara fjarlægja það með fjarlægingartáknið bekknum. Svo ef þið hafið einhverjar fyrirfram flokka eins og rauður eða auðkenndur, og þá þú vilt sækja þá til þætti, þú þarft ekki að gera alla CSS stíl hvert skipti. Þú getur bara bætt í bekknum til frumefni, og þá mun það sjálfkrafa verða - það vilja á sjálfvirkan hátt leita viðeigandi fyrir þeim flokki. Við getum einnig fjarlægja hlutina, þannig að ég ætla að velja allar Divs á síðunni og fjarlægja þá. Hvað er að fara að líta út? Það er að fara að líta út eins og ekkert, þannig að það er í raun ekkert eftir. Kynningin mín er farin. Ég get hressa og koma með hana aftur, sem betur fer, því það er bara að keyra einu sinni, en það er dæmi um að fjarlægja, ef þú vilt alveg eyða stak af síðunni. 

Þú getur einnig skrifa, og ég ætla að velja alla mgr tags á síðunni og fara inni þá og skipta hvað texta sem þeir hafa í þeim með bara orðið "próf." Ef þú gerir þetta, þú munt skipta hverjum lið á síðunni með þessu próf. Já. Þeir eru allir komi með próf. Svo er það dæmi um aðgang að texta og skrifa of mikið hana. Þú getur einnig sótt upplýsingar og þetta er virkilega flott fyrir kassa inntak. Ef þú ert með inntak kassi sem fólk er að skrifa efni í, fólk er að slá efni í það, hér við að velja inntak, allir inntak tag með gerð texta. Í þessu tilfelli, það er bara eitt inntak kassi í heild kynningu, svo við verðum bara að velja fyrsta einn, og þá erum við að hringja í VAL virka á það. Sem skilar gildi, og fyrir inntak kassi, gildið er bara hvað gerist til að vera inni. Þannig að ef við gerum þetta, það skilar bara band efni. Og ef við köllum það aftur eftir að skrifa meira efni, snýr það inn í fleiri efni. Það er ein góð leið til að fá aðgang þætti inntak kassi, og þá athuga, er þetta gilt netfang, er þetta gild dagsetning, til dæmis. Þú getur bara sótt efni um leið og fólk er að slá það, og þá athuga hvort það er í gildi, senda hana aftur til a framreiðslumaður, gera hvað sem þú vilt með það. Og það er hvernig þú nálgast það sem er inni þá kassa. 

Þú getur einnig breytt CSS beint, svo í stað þess að bæta klasa sem hefur einhverja fyrirfram eiginleika, þú getur bara bætt við hvað CSS þú vilt eitthvað. Velja þannig að við skulum líkami, sem er allt kynningu, og liturinn er eign sem skilgreinir hvað litirnir textinn er. Ef við breyta því að rauðu, allan texta á síðunni mun snúa að rauðu. Við getum gert eitthvað eins bakgrunnslit blár, þar við förum, það er fallegt. Þú getur gert hvað sem þú vilt með þetta. Using CSS eign, getur þú í raun að breyta hvernig eitthvað lítur á hverjum tíma. The næstur hlutur er áhrif. Áhrif eru í grundvallaratriðum það sama og breyta CSS, en þeir í raun veita sumir auka fjör í henni. Svo í stað þess bara að sýna eða fela eitthvað eða breyta lit, þú geta raunverulega gera það líflegur. Hér er þau skjöl, ef þú vilt taka a líta á the víðtækur skjöl fyrir það. En ég ætla að ná helstu sjálfur. Það eru að sýna og fela eignir. Sýna / fela ID svari í raun til this heild kassi, svo ef ég fel það, mun það bara hverfa. Og ég get sýnt það aftur ef ég vil gera það að koma til baka. Og það er aftur. Það gerði í raun ekki hverfa, Ég gerði í raun ekki fjarlægja það af síðunni, setti ég bara CSS eign skyggni til falinn svo þú getur ekki séð það lengur. Það er líka renna upp og renna niður, sem gerir þér kleift að hafa þessi áhrif. Það renna upp að hverfa, og eftir að hún hverfur þú getur renna það niður til að gera það aftur. Og nú er það aftur. Það er líka þetta hverfa áhrif, sem - hverfa ID samsvarar þessum reit. Ef ég hverfa það út, þá er það mun hægar hverfa. Ég get líka hverfa því í, og það mun koma aftur. Þú getur líka gert hverfa til, sem er sérstaklega við hverfa virka. Hægt er að hafa það hverfa til sérstakra ógagnsæi sem þú vilt. Svo ef þú hverfa það rólega til 0,5, mun það verða hálf sýnilegt. Ég get gert það að fara á 0,1, og aftur til 1. að gera það fullkomlega sýnileg aftur. Það er bara annað fjör sem þú getur gert. 

Það eru einnig að skipta á áhrif. Þannig að ég ætla að velja skipta ID, sem svarar til þessa kassa, og á þeim div þú getur hringt skipta, en ef það er sýnilegt að það verður ósýnilega, ef það er ósýnilegt það mun verða sýnileg aftur. Svo ég kallaði bara þetta skipta aðgerð tvisvar, sá fyrsti var sama og fela, annað símtal var það sama og sýningu. Og þú getur líka gert þetta með hverfa skipta, sem er það sama, nema það dofnar í raun. Og sama með mynd rofi. Það eru handjárnaða áhrif eins og heilbrigður, sem þýðir ef þú velur stak og bara hringja í fullt af aðferðum fjör á það, ef þú vildir það til að hverfa út, þá renna niður, og þá fela og þá hverfa í, mun það gera þau í röð. Svo hvarf, kom aftur - af einhverri ástæðu, sem fela ekki gerast. Við skulum reyna það út. Já, svo það dofna út og þá rennt í burtu. Og það eru miklu fleiri. Þú getur notað lifandi aðgerð að búa til eigin fjör, sem er nokkuð flókin, en það veitir þér óendanlega extensibility. Þú getur gert hvers konar hreyfimyndir sem þú vilt. Þú getur líka notað biðröð að biðröð upp mörgum fjör í einu. Svo ef þú vilt eitthvað til að fljúga yfir á síðunni, renna frá efst til hægri til neðst til vinstri, er hægt að gera það, og bara fullt af aðgerðum að fara einn á eftir öðrum. 

The næstur hlutur sem við erum að fara að tala um er atburðir. Viðburðir leyfa þér - svo langt, við höfum bara verið að slá það inn í vélinni og það er ein leið til að gera þetta gerast, en á raunverulegu síðunni, ætlar þú ekki að fara að vera fær um að gera tegund notanda hlutina í vélinni. Þú vilt það til að gerast sjálfkrafa. Fyrir þessi, þú þarft að nota atburði sem virkja á sumum ákveðnum atburði gerast. Þú getur athugað skjöl fyrir frekari upplýsingar. Svo skulum sjá. Við viljum til að fela eða sýna kassi, en núna þetta hnappur hjartarskinn ekki gera neitt vegna þess að ég vissi ekki að framkvæma það enn. Ég ætla að fara til the raunverulegur HTML síðu. Hér er mynd. Það er div fyrir hana. Það hefur flokki renna. Það er textinn. Nú, það er þessi kassi og kassi hnappinn. Hvernig myndum við gera í raun þetta hverfa? Fyrst af öllu, við skulum skrifa fall sem gerir kassi ID hverfa. Þetta er setningafræði til funtion, við skulum bara kalla það hideTheBox. Það tekur ekki neinar röksemdir, því það eru engin rök til að taka. Við getum valið reitinn ID. Svo nota jQuery velja, við getum valið kassi ID, og þá bara gera það hverfa. Skulum gera það hverfa. Ef við hljóp þetta virka í raun vélinni, við gætum skilgreint þessa aðgerð, við getum hringt hideTheBox, og það virkar. En við viljum það til að gerast þegar hnappur er í raun inni. Til að gera það, verðum við að nota atburði. Að binda við atburði að einhverju tilteknum hnappinn eða einhverju aðgerð gerast, við verðum að velja það atriði sem atburður vilja kalla - eða að mun kalla á atburði, því miður. 

Svo fyrst af öllu, við skulum velja hnappinn kassi ID því það er hnappur, og nú, að þessi hnappur, við viljum búa til hreyfimynd þegar hann er smellt. Svo er það þetta smell virka. Það gerir þér kleift að binda annan valkost við það. Þessi aðgerð tekur annan valkost sem rök við getum framhjá í hideTheBox virka, og þegar þessi hnappur er smellt að virka sjálfkrafa framkvæma. Þannig að þetta mun virka ef við vistað þetta, ég hressa, og - eina sekúndu, ég er hryggur. Leyfðu mér að laga þetta virkilega hratt. Allt í lagi. Þar við förum. Svo nú er kassi er að hverfa þegar við smellur the hnappur. Við getum líka breytt þessu til bara fadeToggle, breyta því bara til að fela eða sýna kassi, og þetta mun einnig vinna líka, ef við hressa. Við getum fela það, getum við einnig sýnt það, og það mun halda áfram að vinna. Annar hlutur sem við getum gert er, að við í raun ekki að skilgreina þetta hideTheBox virka áður en við köllum smell virka. Svo í stað þess að skilgreina hlutverk og starf hideTheBox, við erum bara að fara að hringja í það ef þetta er smellt. Svo við getum skilgreint það nafnlaust hér, sem er eiginleiki sem JavaScript er. Þú getur slegið inn virka, venjulega, við myndi segja virka hideTheBox með rökum, en í staðinn getum við bara sagt virka engin rök, hefja hrokkið Brace til að skilgreina hlutverk, loka hrokkið Brace, og þá bara að skilgreina hlutverk hér, í fyrsta sviga og síðasta sviga sem svara til rök að smella aðgerð. Þannig að við erum farið í þessa aðgerð, getum við afritað þessa línu af kóða hérna, og það mun gera nákvæmlega það sama. Og nú höfum við ekki þennan handahófi fadeTheBox virka sem situr í kring fyrir neitun augljós ástæða. Fallið var skilgreind nafnlaust, er það ekki að hafa nafn. Það mun aðeins framkvæma þegar við smellur á the kassi hnappinn. Svo hressandi aftur, einu sinni enn, og þú getur séð að það virkar enn. Og það er hvernig þú býrð atburði. 

There ert a einhver fjöldi af mismunandi atburðum sem við getum notað. Ég ætla að skipta aftur yfir í notkun á vélinni bara að sýna þér hvernig þetta verk. IDS Fyrir hvert þessara samsvara hverjum kassa. Þannig að þetta kassi er smellt ID, þetta er lykill ID, og ​​þetta er mús ID. Einn fleiri hlutur er að það er þessi aðgerð aðgerð, heldur en að slá það út í hvert skipti, Ég fór reyndar á undan og skilgreint þessa aðgerð virka hérna. Það er það sama sem hideTheBox virka. Það fær þennan reit og annaðhvort dofnar það út eða dofnar það inn Og það er þess vegna sem við erum fær um að nota það hér. Þannig að ef við smellt á þennan smell ID, viljum við að gera kassi hverfa eða birtast aftur. Það er það sama og the hnappur sem við áttum í síðustu mynd. Nú eftir að við köllum það, getum við smellt á þetta og kassi hverfur, smelltu á það aftur og kassi vilja birtast aftur. Það er frekar einfalt. Tvöfaldur smellur hjartarskinn the sami hlutur, nema það þarf að tvöfalda smell. Svo ef þú smellir á það einu sinni og smella á það aftur mun ekkert gerast, en ef þú tvísmellir fljótt, verður það hverfa. Ef þú tvísmellir aftur, mun það koma aftur. Svo er það frekar einfalt. Hljómborð inntak er skrýtin tilfinning, ég held ekki að það virkar í raun í þessu dæmi því lykillinn niður takkann upp og takkanum aðrar helstu aðgerðir virkja sama hvað þátturinn þú binda það til. Til dæmis, jafnvel þótt ég bundið takkanum niðri til líkama eða eitthvað annað fullkomlega, þá myndi samt virkja sama - það er ekki sérstakur. Ég þarf ekki að vera að smella á þetta og ýta á takkann til að gera eitthvað hverfa. Það myndi vera virk óháð því hvað þátturinn er ég nú inn Svo þetta er ekki raunverulega vinna í þessu dæmi því það er ekki viðurkenna mig sem slá inntak inn í the inntak hljómborð div. 

En ef þú horfir á mús aðgerðir, sá fyrsti er sveima, og það getur gert eitthvað af þessu að nota CSS. Ef þú notar CSS, getur þú búið til það þannig að ef þú sveima yfir eitthvað, þá þess stíl breytingar. En nota jQuery þú getur breytt stíl af öðrum hlutum eins og heilbrigður. Svo, til dæmis, við erum að fara að hringja til aðgerða ef við sveima yfir þessum div. Það þýðir að ef við sveima yfir það, þá er kassanum hverfa. Ef við flutt í burtu frá henni, kassi vilja birtast aftur. Ef við köllum þetta og sveima yfir það, kassi þýðir hverfa, og um leið og við flutt í burtu, kemur það til baka. Ef við köllum þetta sveima aðgerðina á mús ID, sem svarar til þessa kassa, þá ef við sveima yfir the kassi, þá kassi vilja raunverulega hverfa - það er að vera angurvær núna, en - ef við flutt í burtu frá honum, mun það birtast aftur. Núna er það aftur á bak fyrir sumir ástæða. Músin inn og mús færa aðgerðir eru nokkuð svipuð, en örlítið öðruvísi. Mús slá aðeins í gang þegar músin fer inn í kassann, eins og búist. Svo ef þú færir inn í það, það mun hverfa. En það mun ekki birtast aftur þegar þú ferð í burtu, þú þarft að fara aftur á það fyrir það að koma aftur. Það er líka færa mús virka, sem vilja virkja þegar músin er enn til staðar í kassanum. Svo það verður bara að halda áfram að fara, hverfa inn og út. Og það er í raun að skrá þig - það virðist eins og það er bara hverfa inn og út, en það er í raun skógarhögg mikið fleiri aðgerðir en þetta, svo þegar þú flytur í burtu það verður bara að halda áfram því það skráður eins þúsund af þeim. Kannski ekki þúsund. Kannski fimm. Það skráir meira en það. Aðalatriðið er, allar mús aðgerðir, there ert a einhver fjöldi af þeim. Þú getur lesið allt á öðrum sjálfur, en þeir eru allir örlítið öðruvísi, og þú getur valið hvort það sem þú þarft fyrir hvort Sértæk markmið sem þú ert að reyna að gera. 

Það næsta sem ég ætla að tala um er AJAX. AJAX, veit ég að við ekki ná JavaScript í eins miklu dýpi á þessu ári, þannig að ég ætla bara að fara að tala um Ajax í almennt í eina mínútu. AJAX stendur fyrir ósamstilltur JavaScript og XML. Það er í grundvallaratriðum, td þegar þú ert á Facebook og það ýtir þér tilkynningu, það er vegna þess AJAX er í gangi á vafranum þínum. Hvert par af sekúndum vefskoðarinn þinn er í raun fara til netþjóna Facebook, spyrja þá, þú hefur eitthvað nýtt fyrir mig, og þá kemur það aftur til þín. Þetta gerir þér kleift að senda beiðni til miðlara án þess í raun að þurfa að hlaða síðuna. Svo venjulega, ef þú ætlar bara að nota PHP og gagnasafn, þú þarft að uppfæra síðuna áður en þú getur fengið nýjar upplýsingar frá þjóninum. En nota AJAX, getur þú draga fyrir þessi nýju upplýsingar stöðugt, eða draga fyrir það þegar þú smellir á hnappinn eða eitthvað svoleiðis. Þannig að þetta gerir okkur kleift að senda beiðnir án þess að endurhlaða síðunni, og við getum notað annaðhvort GET eða POST beiðnir. 

FÁ beiðnir eru, til dæmis, ef þú að Google.com og gera q = próf. Það er að gefa þeim fyrirspurn próf. Og það er FÁ beiðni vegna þess að það er brottför í þeim breytum inn í URL sjálft. A POST beiðni er eins og ef þú ætlar að senda hana með pósti. Það er eins og þú setur það í bréfi og skip það burt til þeirra, en þeir gera í raun ekki séð innihald. Þeir eru ekki sýnileg í vefslóðinni. Þú getur ekki beint að slá það inn, þú þarft að senda það nánast leynilega. Það er í a staða. En nota jQuery, getur þú gert FÁ og POST beiðnir miklu auðveldara en þú venjulega væri að nota bara venjuleg JavaScript. Þú getur fyrirspurn API nota FÁ beiðnir, og þú getur einnig athugað fyrir innskráningarupplýsingar. Á næstu síðu, bjó ég þetta, sem spyr: "Hvað er í hádegismat?" nota Harvard mat API, þannig að við skulum draga það upp. Þetta er bara dæmi um hvernig hægt er að nota jQuery til að gera GET beiðni til API og fá upplýsingar til baka frá þeim. Þannig að við viljum sjá í valmyndinni í dag, og við viljum sjá hvað er í hádeginu. Hér er slóðin að búa til fá beiðni í jQuery. þú notar $. fá virka. Fyrsta rifrildi er slóðin, svo nákvæmlega hvað þú ert að fyrirspurn. Þá er næsta röksemd fall sem keyrir þegar FÁ beiðni er lokið. Svo þú sendir burt sumir beiðni til the framreiðslumaður, bíða eftir því að koma aftur. Þegar það er komið aftur, ætlar þú að fara að taka til aðgerða með gögn sem er aftur frá þjóninum. Við skulum fara á undan og kóða þetta eins og heilbrigður. Ég vissi ekki kóða það heldur, viljandi. Hér er TODO. Fyrst af öllu, við skulum nota atburði bindingu þannig að þegar þessi hnappur er þrýsta, sendu okkur burt GET beiðni. Og þegar að fá beiðni skilar með nokkrum gögnum, við erum að fara að skrifa það inn í þessa vöru máltíð ID div. Fyrst af öllu, við skulum velja hnappinn mat ID. Þegar það er smellt viljum við það að gera eitthvað. Skulum gera bara það nafnlaus fuction, eins og áður. Getur sett þau hrokkið axlabönd, og þegar þetta hnappur er þrýsta, viljum við senda GET beiðni til að athuga hvað er í hádeginu. Til að gera það, getum við bara slegið í $. Fá. Þetta er jQuery virka, með því að nota dollara merkið. Það tekur nokkrar rök. Sú fyrsta er slóðin, The second einn er svarhringingu virka, sem virka sem heitir þegar þessi beiðni raun skilar. Við skulum bara byggja slóðina fyrst. Við getum fengið það frá API sem Davíð skrifaði upp. Fara hér, getum við séð að það er food.cs50.net/api/1.3/menus, og þá fara bara í nöfnum á breytum sem þú vilt. Svo er breytu 1 gildi 1. Það lítur út eins og staðall dagsetningu, upphafsdagur, vanskil í dag ef þú ekki færa inn neitt, og lokadagsetningu einnig vanskil í dag ef þú ekki færa inn neitt. Það er það sem við viljum. Við viljum bara fá upplýsingar um í dag. 

Við viljum snið til að vera í JSON. Það er bara handahófskennt, þú getur notað hvaða form sem þú vilt. Þú getur notað CSV, en JSON er JavaScript Object Ritháttur. Það er mjög auðvelt fyrir JavaScript að skilja hvað það þýðir, og við getum prentað það út fleiri auðveldlega þannig. Svo skulum biðja um það í JSON og beiðni hádegismatur skulum. Svo máltíð = hádegismatur. Bara að skrifa upp þessi slóð, förum við aftur hingað. Það er valmyndir. Fyrsta breytu er framleiðsla = JSON því það er það sem við viljum, og þú skilja breytur með 'og'. Annað breytu er - Ég man það ekki. Máltíð. Og við viljum máltíð = hádegisverður. Þú getur prófað þessa slóð því að slá það inn í vafrann þinn og fara til þess. Það mun gefa þér framleiðsla. Það er bara fullt af efni sem er í hádeginu. Það er í þessu ljóta sniði. Við viljum að prenta það á síðuna okkar í betri formi. Svo slóðina er rétt, nú þurfum við bara að skrifa fall að hringja til baka þegar beiðni er vel. Þessi aðgerð mun reyndar taka rifrildi. Það mun vera gögn. Gögnin er það sem kemur til baka frá the fá beiðni eftir að FÁ beiðni er gert. Við getum gert hrokkið axlabönd, hér við að skrifa nafnlaus virka sem keyrir með þessi gögn þegar við fáum þær upplýsingar aftur. Svo gögnum, þegar við tegund í þessa slóð, þetta er það sem gögn er að fara að líta út. Það er að fara að vera svona mikið band. En gott er, JavaScript geta flokka það með því að nota JSON.parse virka. Svo skulum við búa til nýja breytu sem heitir flokka gögn. Og flokka upplýsingar er fylki af hlutum. Hver hlutur inniheldur upplýsingar, svo sem - ja, við skulum taka a líta. Það hefur dagsetningu, máltíð, flokki, uppskrift, allt þetta annað efni. Þannig að við skulum bara prenta út nafn fyrir hvert og eitt. Skulum iterate yfir allt array af efni sem við fáum til baka af því, og bara prenta út hvert og eitt - að prenta út nafn hvers og eins. Þetta er til hliðar. 

JavaScript verður þetta gagnlegt setningafræði þar sem þú getur búið til breytu og lykkja yfir fjölda, og var ég er bara Iterator, svo í stað þess að þurfa að gera VAR i = 0, Ég var minna en lengd, ég + +, þú getur bara gert Var ég í flokka gögn. Í þessu dæmi, flokka gögn (i) mun svara til núverandi frumefni í fylkinu, í raun mótmæla. Og við viljum fá nafn af því. Þannig að við skulum bara gera nafn. Og síðasti hlutur er, við erum að fara að hafa jQuery aftur. Reyndar bæta því við div, þetta upplýsingar máltíð div sem er tóm. Þannig að við skulum velja það. Við munum nota jQuery og veldu máltíð upplýsa div ID, eða máltíð upplýsa ID, því miður. Við viljum til að bæta við þetta. Ef við gerðum próf, til dæmis, myndi það bara skrifa það í hvert einasta skipti. Svo getum við bara auka þetta. Núverandi þáttur í array, munum við fá nafn út af því, og við munum auka það til enda af the upplýsa máltíð ID div. Og þá bara til að gera það líta hreinni, við munum einnig auka línu brot svo það er ekki allt í einni línu. Svo ef allt gengur vel, það ætti að vera gott að - fyrst af öllu, þegar þessi hnappur er smellt það mun senda frá sér fá beiðni á þessa slóð. Þegar gögn kemur aftur frá því, verður það að flokka hana, snúa það inn JSON, lykkja yfir allt array fulltrúi þessi gögn, og þá bæta við nafn og línu brot að sérhver lína í þessu info máltíð ID sem var áður tóm. Svo fara aftur á þessa síðu, endurnýjum við, smella, finna út - það virkar ekki. Það er óheppilegt. Og þetta er þar kembiforrit koma inn Index.html, lína 1. Það er áhugavert. Allt í lagi, vel, frekar en að eyða tíma í að gera þetta, ég er bara að fara að draga upp gert skrá sem ég hef, sem er lokið útgáfa. Ég er ekki viss um hvað munurinn er, en við getum bara opna þetta upp í staðinn. Og við förum á AJAX, og það ætti að virka rétt. Það er það sem var í hádeginu í dag, í engri sérstakri röð, með tilvitnunum í kringum það, svo það er ekki prettiest. En vitanlega, ef þú varst að gera þetta fyrir lokaverkefni, þú myndir gera það líta betur út. En það er bara einfalt dæmi um hvernig þú gera GET beiðni. Og ef við lítum á raunverulegum kóða, ég giska, ég er nokkuð viss það er samt ansi mikið það sama. Ó, ég gleymdi að umbreyta það til a band, það er það. Nei, það er enn ekki að virka. Burtséð, hér er í raun lokið númer fyrir hvað þetta ætti að líta út, og það er það sama og það sem ég framkvæmda bara. Þegar þú smellir á hnappinn, notar það fá JSON sjálfkrafa flokka gögnin. Það tekur gögnin aftur frá henni og lykkjur gegnum allt array og prenta út um - hvað er í hádeginu í dag, heiti því, og auka við línu brot eftir hverja línu. Það er hvernig þú notar GET virka. 

Þú getur líka notað POST, sem ég hafði ekki tíma að skrifa upp dæmi fyrir það, en við getum að líta á skjöl. Ef þú horfir á jquery.post, þú getur séð að það er nánast það sama. Þú ert með vefslóð, en í stað þess farið breytur með - bara að setja þá í band fyrir vefslóð sig, þú þarft að fara í þessum gögnum breytu sem er í grundvallaratriðum óákveðinn greinir í ensku fylking, orðabók sem varpar breytur til gildum. Þú framhjá að í, og sem sendir þá í að nota POST. Og þegar þú ert það, þá er hægt að hafa velgengni aðgerð sem keyrir þegar gögn kemur aftur. Annars er það nákvæmlega það sama. Svo nota POST, þú might vilja til nota POST, til dæmis, ef þú hafa óákveðinn greinir í ensku inntak mynd þú láta fólk inntak lykilorð inn í það, og senda þær lykilorð burt að handritið bak-endir, að athuga í gagnagrunninum hvort sem notandinn er í gildi eða ekki. Þú getur gert það allt með jQuery stað þess að þurfa að endurhlaða síðuna á öllum. Það er hvernig ég til framkvæmda í bloggið sem ég sýndi þér áðan. Ef við förum til enda vefsíðunni og skráir þig út, skráðu þig út, Útskrá virkar ekki. Jæja, láttu mig bara opna það upp í nýjum glugga. Hér er lykilorð, og ég var að fara að slá í eitthvað af handahófi. Það virkar ekki, en þú getur séð að við gerðum ekki reyndar þurft að uppfæra síðuna á öllum. Númerið, ef þú vilt líta á það, er allt í boði hér. Svo númerið sem ég skrifaði í fyrra einhvern tíma. Eins og þú geta sjá hér, við erum að senda POST beiðni. Ég er með skrá sem heitir login.php í bak endir, sem athugar hvort lykilorð er ógilt. Breytur við fara í eru lykilorð, varpað inntak sem er í þessum inntak kassi augnablikinu. Og þegar gögn kemur aftur, athuga við. Ef gögn eru rangar, þá segjum við rangt lykilorð, renna henni niður, og bara gera það hverfa eftir það. Annars hlaða við admin síðu. Og þetta var allt gert með JSON. Í þessu margar línur af kóða, getur þú bara fara upplýsingarnar bak endir, athuga hvort það er rétt, athuga hvort þú skráður í rétt, og í raun að bregðast við henni, Áframsendi mann á rétta síðu eða ekki að láta þá skrá þig inn og segja þeim að þeir höfðu rangt lykilorð. Svo er það dæmi um hvernig þú getur notað jQuery POST að senda POST beiðni um að bak endir þinn, athuga hvort einhver er skráður í rétt. 

Allt í lagi, svo það er allt dæmi sem ég átti, og allt draslið sem ég vildi ná. Þeir eru helstu hlutir sem jQuery leyfir þér að gera: velja þætti, breyta þeim með DOM meðferð, þú getur bætt áhrif, virkja það á ákveðnum atburðum, og einnig gera AJAX beiðnir mjög óaðfinnanlega og auðvelt. Svo þakka þér fyrir að koma eða horfa, og ef þú hefur einhverjar spurningar, bara láta mig vita. Já? [Námsmaður] baka þegar þú sýndi, hafði þú JSON eftir POST beiðni innan gæsalappa, og ég var bara að spá í hvað það gerði. >> Já, ég. Spurningin var að í dæminu sem ég sýndi bara, það var orðið JSON innan gæsalappa í kringum - Ég ætla bara að draga það upp aftur - um POST virka. Ég ætla bara að draga hana upp til að sýna. Svo er hér í POST beiðni, og það er þetta JSON innan gæsalappa. Sem skilgreinir bara það sem við erum að búast að framleiðsla til að vera. Þannig að ef við fara í JSON og væntanlegan gögn gerð, það er ekki þörf, en ef við gefa það í, þá gögn sjálfkrafa flokka sem JSON. Þannig að við þurfum ekki að hringja í JSON flokka virka á það, það verður bara að gerast sjálfkrafa. Og ef þú taka a líta á the gögn fyrir færslu, það er þessi gögn tegund breytu, tegund gagna vænta frá þjóninum. Vanskil það til greindur giska sem getur verið rangt, svo þú getur skilið það eftir autt, en það er bara tegund af gögnum í erfðaskrá að þú ert að nota, hvort sem það er JSON eða XML eða eitthvað annað. 

Allar aðrar spurningar? Allt í lagi. Ef þú hefur einhverjar fleiri spurningar, ekki hika við að sendu mér tölvupóst á vshekhawat@college.harvard.edu, og skyggnur og kóða ætti að vera í boði á netinu fljótlega. Gangi þér vel með lokaverkefnið þitt, vona að þú notar jQuery. [CS50.TV]