[Powered by Google Translate] [Seminar: JQUERY]
[Vipul Shekhawat, Harvard University]
[Ito ay CS50.] [CS50.TV]
Kung sinusubaybayan mo kasama sa bahay, maaari mong aktwal na ma-access ang aking mga slide online
sa pamamagitan ng pagpunta sa link na ito.
Ito ay TjjRWj, sa bit.ly.
Maaari ka ring pumunta lamang sa URL direkta,
na kung saan ay cloud.cs50.net / ~ vshekhawat, na kung saan ay ang aking pangalan,
at jquery.
Ko lubos na hinihikayat ka upang sundin kasama kung pinapanood mo sa bahay,
at kung ikaw ay dito, din, dahil ito ay isang medyo interactive na pagtatanghal.
>> Kaya ngayon pupuntahan ko ay pakikipag-usap tungkol sa jQuery, at ang unang tanong ay,
ano ang jQuery?
Ito taon, alam ko sa iyo guys na hindi sakop ng JavaScript
sa ng maraming detalye hangga't kami ay may sa nakalipas na taon.
Ang JavaScript ay, una sa lahat, lamang ng isang client-side na wika
na gagamitin mo upang patakbuhin ang script at code sa machine sa bawat gumagamit.
Kaya ikaw ay may isang server na nagbibigay ng mga web page sa mga tao,
ngunit maaaring gusto mong gawin ang mga bagay-bagay sa kanilang mga computer,
tanungin ang kanilang mga machine upang magpadala ng mga kahilingan sa iyong server sa bawat 30 segundo o isang bagay tulad na.
Maaari mong gawin na gamit ang JavaScript.
JQuery lamang ay nagbibigay ng higit pang mga pag-andar sa tuktok ng JavaScript
na ang ibig dagdag bagay-bagay para sa iyo.
Kung tumingin ka sa mga nilalaman sa itaas,
na naglalarawan ng ilan sa mga bagay-bagay na nagawa mong gawin.
Kaya pangkalahatang, ito ay nilikha noong Enero 2006.
Ito ay unang conceived ng sa Agosto 2005.
Ito ay naging sa paligid para sa isang ilang taon, at ito ay talagang bahagi ng bagong kilusan Web 2.0
na ginawa sa Internet kaya makintab.
Ito ay ang pinaka-tinatanggap na ginamit library JavaScript.
Higit sa 19,600,000 ang mga website na gumagamit nito, at ang paggamit pa rin ang pagtaas ng
ayon sa builtwith.com, na, tila, sa huling taon,
Na naging patuloy na pagtaas ng patas na linearly.
Kabilang sa mga nangungunang 10 milyong mga site, mayroong pa rin -
sa paligid ng 40% ng mga ito ay kasalukuyang gumagamit nito.
Facebook gumagamit nito, maraming iba pang mga website kasalukuyan gamitin ito.
Maaari mong tingnan ang mga istatistika sa iyong sarili, kung gusto mo.
At maaari mong sabihin ito ay legit ito dahil mayroon itong isang pundasyon at 13 board mga kasapi,
kasama ang isang koponan ng mga 20 mga tao na nagtatrabaho sa ito sa isang regular na batayan.
Kaya ito ay napaka malawakang ginagamit, mayroon itong. URL org, ito'y magarbong,
mayroon itong iikot-off para sa iba pang mga bagay-bagay, kaya ito ay isang malaking pakikitungo.
>> Bakit dapat mong gamitin ito? JQuery ay napaka-magaan ang timbang.
Iyon ay nangangahulugang ito ay hindi isang malaking file. Maaari mong i-download
ang minified file, na kung saan ay walang ang lahat ng mga puting espasyo at mga komento, at ito ay lamang 32 kB.
Kaya napakadali lamang sa itaas na bigla papunta sa iyong web page
at lamang upang simulan ang paggamit nito.
Ito ay din napaka mahusay nakasulat, kaya hindi ito tumagal ng maraming -
hindi ito nagpapabagal sa website magkano kapag ginagamit mo ito.
Ito ay nagbibigay-daan sa iyo ipatupad ang mga bagay na nauna nang unfeasible.
Mayroong ilang mga aspeto ng pag-andar,
tulad ng paglikha ng mga animation, na normal ay magiging napaka, napakahirap gawin.
Ngunit sa jQuery ang mga ito ay talagang napaka-simple.
At mayroong ilang mga bagay na nakakainis na gawin,
maaari sa JavaScript, tulad ng pagpapadala ng isang POST kahilingan,
ngunit upang magpadala ng isang kahilingan sa isang server, kailangan mong isulat
lima o anim o pitong linya ng code.
Ngayon ay maaari mo lamang gawin ito sa isang solong linya ng code, sa isang solong tawag function.
Iyon talaga pinapasimple ng maraming mga bagay-bagay na ginagawa mo.
At lahat ng mga cool na bata ay gumagamit nito. Sa pamamagitan ng na, ibig sabihin ko sa akin.
Sa aking huling proyekto noong nakaraang taon, na kung saan ay news.whrb.org,
na kung saan ay para sa mga istasyon ng radyo, nilikha ko ang blog na ito
na nagho-host ng lahat ng mga palabas na ginawa namin at mga MP3 files para sa kanila.
Maaari kang mag-browse sa pamamagitan ng mga nakalipas na mga palabas,
at ang lahat ng tapos na ito gamit ang jQuery. Maaari mong sabihin
dahil sa lahat ng mga animation, mahalagang.
Kaya kung mayroon kang - kung lumilikha ka ng isang bagong post,
makita mo ang mga maliit slideDowns; na lahat tapos gamit jQuery.
At ito Fade - upang ang uri ng mga bagay-bagay ay tapos na ang lahat ng gamit jQuery,
at hindi mo na kailangang patuloy na i-reload ang pahina upang mag-navigate sa site.
Isa pang cool na bagay na ginawa gamit ang jQuery ay ang pagtatanghal na ito.
Ginagamit ko ang bukas na bagay na tinatawag na pinagmulan scrolldeck,
na kung saan may isang taong nagsulat sa tuktok ng jQuery.
Kung talagang tingnan ang source, maaari mong makita na
ginagamit nila ito dollar sign; palatandaan dollar
ay ginagamit sa jQuery upang magpahiwatig na ang isang function na ay isang jQuery function.
Kaya sila ng pagtukoy sa isang wrapper sa tuktok ng jQuery
na nagbibigay-daan sa iyo upang makagawa ng isang pagtatanghal na tulad nito,
at maaari mong makita na dito sila ay kabilang ang orihinal na file jQuery,
na kung saan ay kung ano ang kailangan mong isama kung gusto mong gamitin ang jQuery
sa iyong sariling website.
>> Pagpindot sa na, paano mo i-install ito?
Maaari kang pumunta lamang sa jQuery.com at i-download ang file,
idagdag ito sa isang direktoryo ng web at isama ito.
Kaya lang sa tuktok, sa head tag sa iyong HTML file
ng iyong pangunahing HTML file, na lang ay na linya ng code
kasama ang tamang bersyon para sa kung aling bersyon ng jQuery ginagamit mo.
Maaari mong i-download ito sa pamamagitan ng pagpunta sa jQuery.com,
i-click ang "i-download ang jQuery," at mayroon ka nito. Iyan na ang lahat.
At talagang, maaari naming tumingin sa kung ano ang mukhang.
Kung nag-click sa i-download dito, jQuery ay ito.
Ito ay isa lamang malaking JavaScript file na ginagawa ng lahat ng mga magic bagay-bagay para sa iyo.
Ito ang minified bersyon, na kung saan ay hindi nababasa sa lahat.
Maaari mo ring tingnan ang bersyon na pag-unlad, na kung saan ay nababasa
ngunit pa rin napaka, napaka-napakahabang.
Ito ay may maraming mga bagay-bagay sa doon.
Maaari ka ring mag-link sa na-host na bersyon ng Google ng mga ito.
Kaya na kailangan payagan mo lang umasa sa Google na bigyan ito.
Nagbibigay ang mga ito sa bawat bersyon ng ito, magagamit sa lahat ng oras.
Kaya maaari mong malamang na umaasa sa Google upang i-host ito para sa iyo.
O maaari mong i-link sa jQuery sariling pinakabagong bersyon.
Mayroon silang isang URL na palaging update sa pinakabagong bersyon.
Ito ay jQuery-pinakabagong, at mayroong isang problema sa na,
na kung saan ay kung na-update na jQuery at ang ilan sa mga naunang pag-andar
sila ay nagiging retrograded o tinutulan,
hindi ito May-May ito upang simulan ang hindi makapag-suportado na ngayon.
Kaya kung ka magsulat ng isang website gamit ang bersyon 1.8.2,
sa pamamagitan ng mga oras na bersyon 2.7 ay out
ang ilan sa mga pag-andar ka nagsulat ay hindi gumagana na ngayon.
Kaya ito ay mas mahusay na lamang upang i-download ang file na 32 kB,
ilagay ito sa iyong web page, at makikita ito gumagana nang permanente.
>> Pupunta ako sa sige at simulan ang pakikipag-usap tungkol sa mga aktwal na pag-andar ng jQuery.
Ang unang bagay ay ang tagapili. Ito ay kung ano ang jQuery ay una conceived na magbigay.
At maaari mong i-click sa dokumentasyon upang tumingin sa
ang detalyadong papeles para sa tagapili ng pupuntahan ko ay sumasaklaw.
Ang ideya sa likod ng tagapili ay maaari mong piliin ang HTML na mga elemento sa isang pahina.
Mga elemento sa isang pahina na may mga ID at mga klase at iba pang mga aspeto pagkilala sa kanila.
Mayroon ding - they're sa iba't ibang ayos.
Ang ilan sa mga oras na sila ay nested sa loob ng bawat isa.
JQuery nagpapahintulot sa iyo na bumuo ng mga simpleng query na mabawi ang mga elemento mula sa pahina.
Pagkatapos ay maaari mong manipulahin ang mga elementong ito gamit ang jQuery-andar,
kung saan ay ang pagmamanipula ng seksyon Makakapagsimula na kami mamaya.
Maaari mong baguhin ang HTML, baguhin ang CSS,
maaari mo ring bigyang-buhay at magdagdag ng pag-andar na buhayin sa mga tiyak na mga kaganapan.
Kaya, halimbawa, kung ang isang bagay-click ito, gusto ka ng isang bagay na mangyayari,
maaari mong gawin iyon gamit ang jQuery pati na rin.
At mayroong isang malaking bilang ng mga paraan upang pumili ng mga elemento.
Karamihan sa kanila ay hindi ko ginamit, subalit doon ay ang mga pangunahing mga bago,
na kung saan ay medyo mahalaga.
Ang mga elemento ng selector, halimbawa, kung lamang ka ng pagpili ng kahit ano
iyon ay isang div - ko talagang magkaroon ng code na bukas para sa pagtatanghal na ito slide.
Kaya, halimbawa, narito ang unang slide.
Narito kami ay may isang div. Kung kami talaga piliin ang lahat ng mga divs sa pahina,
Makikita lamang ito magbibigay sa amin ng isang array ng lahat ng mga divs na umiiral sa file na ito.
Ang ID selector ay nagbibigay-daan sa iyo piliin ang anumang bagay na may ibinigay na ID.
Kaya kung ito, halimbawa, mga bagay na ito ay may mga ID "ano,"
at kung ginawa namin ito na may # ano sa halip ng ilang mga ID,
Gusto ito bumalik lamang ng isang array na may isang solong elemento at iyon ay ang elemento ng pahina.
Maaari din naming pagsamahin ang tagapili ng paraang ito sa pamamagitan ng pagkakaroon
lamang piliin ang mga bagay na may ID na divs.
Kaya oo. Piliin lang ang mga divs na mayroon na ID.
Para sa klase mo lamang gumamit ng isang tuldok, ito ay ang parehong bagay bilang CSS.
Inapo ay gagana rin; kaya kung mayroon kang ilang mga klase
at ito ay nested mga elemento sa loob nito - sa gayon, halimbawa,
mayroong ilang mga klase at mayroon itong isang anchor tag na mag-link sa isa pang pahina,
maaari mong gamitin ang syntax na ito upang makuha ang link.
Maaari ka ring pumili ng maramihang mga bagay nang sabay-sabay; lamang ihiwalay ang mga ito sa pamamagitan ng mga kuwit,
gumamit ng anumang selector gusto mo, at ikaw ay piliin ang lahat ng mga ito nang sabay-sabay, sa isang solong array.
At pagkatapos ay mayroon ding mga hindi selector, sa gayon maaari mong piliin ang lahat ng divs
na hindi magkakaroon ng ilang partikular na klase.
At ito lamang ay isang kapaki-pakinabang na paraan upang makakuha ng isang panimula sa kung paano ang piliang ito ay gumagana.
Kukunin ko ipakita ang ilang mga kongkreto halimbawa sa isang segundo.
>> Advanced na tagapili ng mga - ang mga ito ay ilan sa mga halimbawa.
May mga dose-dosenang mga ito, ngunit kung nais mong piliin ang lahat ng mga tag ng larawan
sa loob ng ilang mga elemento, pagkatapos mo lamang gawin: larawan.
Kung gusto mong piliin ang kahit na mga elemento, halimbawa, kung mayroong 20 sa mga ito,
Gusto mo bang piliin 0, 2, 4, 6 at iba pa,
gawin mo: kahit na, o maaari mo ring gawin: kakaiba.
Ito ang mga palsipikado tagapili, na nangangahulugan na sila talaga compute
bawat iba pang mga elemento sa halip na lamang ng pagpunta at pagpili sa lahat ng mga ito.
Maaari mo ring - bawat elemento ay maaari ring magkaroon ng tiyak na mga katangian.
Kaya, halimbawa, class = center din ang isang katangian.
Para sa ang tag na ito anchor, href, hypertext reference, ay isang katangian din.
Kaya maaari mong piliin ang isang bagay na mga link sa isang partikular na pahina o lamang - ito ay talagang pangkalahatan.
Maaari kang pumili ng anumang bagay na may anumang mga katangian na gusto mo.
At pagkatapos, din, attribute ay naglalaman ng.
Kung, halimbawa, gusto upang piliin ang lahat ng mga elemento ng pag-input
na mayroon ang salitang "pass" bilang pangalan ng mga ito,
kung ang isang pahina ay may isang input bloke ng teksto
na tinatawag na "password," na nais maging isang paraan na maaari mong piliin na.
At mayroong maraming higit pa. Maaari mong sige at tingnan ang dokumentasyon
at makita ang partikular na mga halimbawa ng kung paano ito gumagana.
>> Ang susunod na bagay ay ang DOM pagmamanipula.
Pagkatapos piliin namin ang mga elemento, kami ay nais upang aktwal na gawin ang mga bagay-bagay sa kanila.
Sa ngayon hindi pa namin ay tumingin sa na sa lahat, ngunit kung tumingin ka sa papeles,
doon talaga ng maraming na maaari naming gawin.
Sa puntong ito, kami ay pagpunta upang piliin ang mga elemento sa pagtatanghal na ito
at manipulahin ang mga ito gamit ang jQuery.
Dahil ito ay ipinatupad gamit ang jQuery, kami ay may access sa jQuery library,
at maaari naming gamitin ang mga function sa loob ng code na ito.
Isang kapaki-pakinabang na bagay na hindi mo maaaring malaman tungkol sa ay ang console.
At ang Google Chrome ay kung ano ang ginagamit ko. Maaari mong pindutin ang alt utos J
o alt control J upang buksan ang console.
Sa Firefox tingin ko ito utos ng shift K o kontrol shift K.
Sa Safari mayroon kang pumunta sa baguhin ang ilang mga setting.
Mayroong isang link na ito kung gusto mong gawin ito, ngunit inirerekumenda ko ang pagkuha ng Chrome o Firefox.
Kaya sabihin buksan ang console, ito ay down na dito.
Ito ay nagbibigay-daan sa iyo talaga upang lamang gawin ang anumang nais mo.
Kaya maaari mong i-type lamang sa lumikha ng isang variable na tinatawag na x,
x = 5, sabihin makita kung ano ang x + 2 ay.
Kahit mo maaaring gawin ang isang bagay tulad ng CS + hayaan ang makita, + x 45, na magiging CS50.
Maaari mo lamang gawin ang ilang karaniwang mga bagay-bagay JavaScript.
Ngunit maaari mo ring gawin jQuery in dito.
>> Kaya tingnan natin ang unang aspeto dito.
Kami ay pagpunta upang lumikha ng isang variable na tinatawag na HTML, na isang string.
Ito ay may isang talata na tag sa loob nito, na tinatawag na ang ilang mga bagong teksto.
Kaya mayroon kaming ito HTML, ito ang ilang mga bagong teksto, sa mga tag talata.
Ngayon namin talagang gusto upang idagdag ito sa ang pahina.
I-set up ito sa gayon ang HTML para sa talatang ito, ang pamagat dito, ay Magkabit ng ID.
Kung pinili namin Magkabit ng ID at pagkatapos ay isama ito sa
ang HTML variable ko lang ginawa,
ito ay idagdag na HTML sa dulo, kanan matapos ang tag na talata.
Kaya kung gagawin namin na - namin napili ang talatang ito,
at kami na tinatawag na Magkabit ng function na may mga HTML variable ko lang ang naidagdag,
ay ito na magdagdag ng mga bagong teksto doon sa pahina.
Maaari din namin prepend, na nangangahulugang ito ay pumunta bago, sa simula ng na elemento.
Kaya mayroong ilang mga bagong teksto sa simula at pagkatapos.
Maaari ko sige at i-refresh upang makakuha ng mapupuksa ang mga bagay-bagay na ito lamang ko na tapos na.
Ngunit iyon lamang ang isang halimbawa kung paano maaari mong gamitin ang prepend at ikabit ang mga pamamaraan
upang manipulahin ang mga bagay-bagay sa pahina, magdagdag ng ilang mga HTML.
>> Maaari mo ring baguhin ang mga klase.
Bumalik sa ganitong estilo file, na aking nilikha ito para sa mga klase panalo
na may Kulay ng teksto ng pula, ang ilang mga kulay ng background, at isang text anino.
Mukhang kahindik-hindik, ngunit maaari ko talaga -
talata na ito ay tumutugon sa class na ID.
Kaya ang maaari kong idagdag ang mga klase para sa panalo.
Maaari ko bang isakatuparan ito sa console,
at iyon ay magdadagdag na klase, at ngayon ito mukhang kahindik-hindik, tulad ng inaasahan.
Ang CSS ay makakakuha ng awtomatikong mailalapat sa mga klase mo na -
kung mayroong CSS para sa isang klase, ito ay makakakuha ng awtomatikong ilalapat
kung babaguhin mo ang klase ng isang elemento.
Pagkatapos ay maaari naming alisin lamang ito gamit alisin class.
Kaya kung mayroon kang ilang mga paunang-natukoy na mga klase tulad ng red o highlight,
at pagkatapos ay nais mong mag-apply sa mga elemento,
hindi mo na kailangang gawin ang lahat ng CSS estilo bawat oras.
Maaari mong idagdag lamang ang klase sa isang sangkap, at pagkatapos ay awtomatiko nitong maging -
awtomatiko itong tumingin naaangkop para sa na klase.
Maaari din naming alisin ang mga bagay; kaya ako pupunta upang piliin ang lahat ng mga divs
sa pahina at alisin ang mga ito.
Ano ay na pagpunta sa hitsura?
Ito ay pagpunta sa hitsura walang anuman, kaya walang tunay na walang kaliwa.
Aking mga pagtatanghal ay nawala.
Maaari ko bang i-refresh at dalhin ito pabalik, sa kabutihang-palad,
dahil lamang ito ay tumatakbo sa isang beses,
ngunit na ang isang halimbawa ng pag-alis, kung nais mong ganap na sirain ang isang elemento off ang pahina.
>> Maaari mo ring patungan, at ako pupunta upang piliin ang lahat ng mga tag talata sa pahina
at pumunta sa loob ng mga ito at palitan ang kahit anong teksto mayroon silang sa kanila
lang sa mga salitang "pagsubok."
Kung gagawin mo ito, makikita mo palitan ang bawat talata sa pahina na may ganitong pagsubok.
Yep. Lahat ng mga ito ay pinalitan ng mga pagsubok.
Kaya na ang isang halimbawa ng pag-access ng teksto at patungan ito.
Maaari mo ring makuha ang impormasyon, at ito ay talagang cool na para sa mga kahon ng input.
Kung mayroon kang isang input box na ang mga tao ay pag-type ng mga bagay-bagay sa,
mga tao ay pag-type ng mga bagay-bagay sa ito,
dito kami piliin ang input, ang anumang mga input tag na may isang uri ng teksto.
Sa kasong ito, mayroon lamang isang input box para sa buong pagtatanghal,
kaya namin lamang piliin ang unang isa, at pagkatapos namin tumawag sa Val sa function na ito.
Iyon ay magbabalik ng mga halaga, at para sa isang input box,
ang halaga ay lamang ano ang mangyayari sa maging sa loob nito.
Kaya kung gagawin namin ito, ito lamang ay magbabalik ng mga bagay-bagay string.
At kung tinatawag namin itong muli pagkatapos magsulat ng maraming mga bagay-bagay, ito lumiliko sa higit pang mga bagay-bagay.
Iyan ay isang mahusay na paraan upang ma-access ang mga elemento ng isang input box, at pagkatapos suriin,
ito ay isang wastong email address, ito ay isang may-bisang petsa, halimbawa.
Maaari mo lamang makuha ang mga bagay-bagay agad bilang mga tao ay pag-type ito,
at pagkatapos ay tingnan kung ito ay wasto, ipadala ito pabalik sa isang server, gawin ang anumang nais mo sa mga ito.
At na kung paano mo ma-access kung ano ang nasa loob ng mga kahon.
>> Maaari mo ring baguhin ang CSS direkta, kaya sa halip ng pagdaragdag
isang klase na may ilang mga paunang-natukoy na mga katangian,
maaari mong idagdag lamang ang CSS kahit anong gusto mo sa anumang bagay.
Kaya natin piliin ang katawan, kung saan ay ang buong pagtatanghal,
at kulay ay ang ari-arian na tumutukoy sa kung ano ang kulay ng teksto sa ay.
Kung namin baguhin ito sa pula, ang lahat ng teksto sa pahina na ito ay magpapasara sa pula.
Maaari naming gawin ang isang bagay tulad ng kulay ng background bughaw,
doon kami pumunta; ito ay maganda.
Maaari mong gawin ang anumang nais mo na may ito.
Paggamit ng mga ari-arian ng CSS, maaari mo talagang baguhin ang anumang bagay kung paano hitsura sa anumang oras.
Ang susunod na bagay ay ang mga epekto.
Effect ay talaga ang parehong bagay bilang ng pagbabago sa CSS,
ngunit sila talaga magbigay ng ilang dagdag na animation dito.
Kaya sa halip ng pagpapakita lamang o pagtatago ng isang bagay o pagbabago ng kulay,
Maaari mong aktwal na gawin itong animated.
Narito ang dokumentasyon, kung gusto mong kumuha ng isang pagtingin sa mga malawak na dokumentasyon para dito.
Ngunit ako pupunta upang masakop ang mga pangunahing mga bago.
Mayroong ang show at itago katangian.
Ipakita / itago ang ID aktwal na tumutugon sa ito buong kahon,
kaya kung ako itago ito, ito lamang mawala.
At maaari kong ipakita ito muli kapag gusto kong gawin itong bumalik.
At ito ay bumalik. Hindi nito talagang mawala,
Hindi ko talagang alisin ito mula sa pahina, ko lang i-set ang CSS ari-arian ng kakayahang makita sa mga nakatagong
kaya hindi mo ito makikita.
Mayroong din pataas ang slide at slide paibaba; na nagbibigay-daan sa iyo upang magkaroon ng epekto ito.
Ito slide hanggang sa mawala, at pagkatapos mawala ito
maaari mong padausdusin ito pababa upang gawin itong bumalik. At ngayon ito ay bumalik.
Mayroon ding ito Fade epekto, na kung saan - Fade ID ay tumutugon sa kahon na ito.
Kung ako manlabo ito, pagkatapos ay magkakaroon ito ng dahan-dahan mawala.
Maaari ko ring manlabo ito sa, at ito ay bumalik.
Maaari mo ring gawin Fade sa, na kung saan ay tiyak na ang Fade function.
Maaari kang magkaroon ng ito fade sa anumang partikular opacity na gusto mo.
Kaya kung nag-fade ito dahan-dahan sa 0.5, ito ay magiging half nakikita.
Ang maaari kong gawin itong pumunta sa 0.1, at pabalik sa 1 upang gawin itong ganap na nakikita muli.
Iyon ay isa lamang na animation na maaari mong gawin.
>> Mayroon ding mga toggle ang effect.
Kaya ako pupunta upang piliin ang mga toggle ID, na tumutugon sa kahon na ito,
at sa div na maaari mong tawagan toggle; kung ito ay nakikita itong maging invisible,
kung ito ay hindi maaaring makita ito ay maging nakikita muli.
Kaya ko lang tinatawag na ito toggle function na dalawang beses; ang unang isa ay
ang parehong bagay bilang itago, ang pangalawang tawag ay ang parehong bagay bilang isang show.
At maaari mo ring gawin ito na may isang Fade toggle,
kung saan ang ipinapakita ng parehong bagay, maliban ito talaga fades.
At parehong bagay sa mga slide magpalipat-lipat.
Mayroong chained effect pati na rin, na nangangahulugang
kung pipiliin mo ang isang elemento at tawagan lamang ng grupo ng mga pamamaraan ng animation sa ito,
kung ginusto ito upang manlabo out, pagkatapos ay i-slide paibaba,
at pagkatapos ay itago at pagkatapos ay i-fade sa, ito ay gawin ang mga ito sa isang hilera.
Kaya nawala, ay dumating likod - para sa ilang kadahilanan, ang itago ay hindi mangyayari.
Tayo'y subukan ito. Oo, kaya kupas out at pagkatapos ay slid ito ang layo.
At maraming marami pa. Maaari mong gamitin ang function na bigyang-buhay
upang lumikha ng iyong sariling mga animation, na kung saan ay medyo kumplikado,
ngunit ito ay nagbibigay sa iyo ng walang katapusan na posibilidad na pahabain.
Maaari kang gumawa ng anumang uri ng animation na gusto mo.
Maaari mo ring gamitin queue sa queue up ng maramihang mga animation sa isang pagkakataon.
Kaya kung nais mo ng isang bagay upang lumipad sa buong pahina,
slide mula sa tuktok na kanan sa kaliwa ibaba, maaari mong gawin iyon,
at lamang magkaroon ng isang bungkos ng mga aksyon ng pagpunta sa isa pagkatapos ng iba.
>> Ang susunod na bagay na kami ay pagpunta sa makipag-usap tungkol sa mga kaganapan ay.
Mga Kaganapan daan sa iyo - sa ngayon, lamang namin ang na-type ng mga bagay sa console
at iyon ay isang paraan upang gawin ito mangyari,
ngunit sa isang aktwal na pahina, hindi ka pagpunta sa magagawang
gawin ang mga bagay na uri ng user sa console.
Gusto mong bagay upang awtomatikong mangyari.
Para sa na, kailangan mong gumamit ng mga kaganapan na buhayin sa ilang mga tiyak na mangyari kaganapan.
Maaari mong tingnan ang dokumentasyon para sa buong detalye.
Kaya natin makita. Gusto naming itago o ipakita ang kahon,
ngunit sa ngayon ang pindutan na ito ay hindi gumawa ng anumang bagay dahil hindi ko ipatupad ito pa.
Pupunta ako upang pumunta sa aktwal na pahina ng HTML.
Narito ang slide. Mayroong isang div para sa mga slide.
Ito ay may klase ng slide.
Mayroong teksto ng. Ngayon, mayroong kahon na ito at ang kahon na pindutan.
Paano namin talagang gawin ito mawala?
Una sa lahat, sabihin magsulat ng isang function na ginagawang ang kahon ID mawala.
Ito ang syntax para sa funtion, sabihin lamang tumawag ito hideTheBox.
Hindi ito gumawa ng anumang argumento, dahil walang mga argumento upang madala.
Maaari naming piliin ang kahon ID.
Kaya gamit ang jQuery piliin, maaari naming piliin ang kahon ID,
at pagkatapos lamang gawin itong mawala.
Natin gawin itong fade out.
Kung namin ang bumangga ito sa function na ang aktwal na console,
maaari naming tukuyin ang mga function na ito; maaari naming tumawag hideTheBox, at ito ay gumagana.
Pero gusto naming ito upang mangyari kapag ang pindutan ay aktwal na pinindot.
Upang gawin iyon, mayroon kaming upang gamitin ang isang kaganapan.
Upang isailalim sa isang kaganapan sa ilang mga tukoy na pindutan o ang ilang mga aksyon mangyari,
kami ay may upang piliin ang mga sangkap na kaganapan ang magpapalitaw -
o na magpapalitaw sa mga kaganapan, paumanhin.
>> Kaya una sa lahat, sabihin piliin ang kahon sa ID pindutan
dahil iyon ang pindutan, at ngayon, para na pindutan,
nais namin na lumikha ng isang animation kapag ito ay na-click.
Kaya mayroong click na ito function.
Ito ay nagbibigay-daan sa iyo upang panagutin ang isa pang function na ito.
Function na ito ay tumatagal ng isa pang pag-andar bilang isang argument
maaari naming pumasa sa function na hideTheBox,
at kailanman pindutan na ito ay na-click, function na ay awtomatikong execute.
Kaya ito ay gagana kung namin i-save ito, makikita ko i-refresh,
at - isang segundo, Sorry.
Hayaan akong ayusin ito talagang mabilis.
Okay. Nagkaroon kami pumunta. Kaya ngayon ang box ay mawala kapag kami i-click ang pindutan.
Maaari din naming baguhin ito upang lamang fadeToggle,
baguhin ito lamang upang itago o ipakita ang kahon,
at ito ay gumagana rin masyadong, kung i-refresh namin.
Maaari naming itago ito, maaari rin naming ipakita dito, at iyon ay patuloy na gagana.
Isa pang bagay na maaari naming gawin ay, hindi namin talagang may upang tukuyin ito function na hideTheBox
bago tinatawag naming ang pag-click function.
Kaya sa halip ng pagtukoy sa mga function at pagtawag hideTheBox,
lamang kami ng pagpunta sa tumawag ito kung ang bagay na ito ay na-click.
Kaya maaari naming tukuyin ang mga ito nang hindi nagpapakilala sa dito,
na kung saan ay isang tampok na may JavaScript.
Maaari mong tukuyin ang isang function; normal, gusto naming sabihin function na hideTheBox
may mga argumento, ngunit sa halip, maaari naming lamang sabihin gumana walang argumento,
simulan ang kulot suhay upang tukuyin ang pag-andar,
isara na kulot suhay, at pagkatapos lamang tukuyin ang mga function na sa dito,
sa loob ng unang panaklong at ang huling panaklong
na tumutugon sa mga argumento ng function na-click.
Kaya kami ay pagpasa sa function na ito, maaari naming kopyahin ito linya ng code dito mismo,
at iyon ay gawin ang mga eksaktong parehong bagay.
At ngayon, wala kaming ganitong random function na fadeTheBox
na nakaupo sa paligid para sa walang maliwanag na dahilan.
Ang function na ay tinukoy ng di-kilalang tao, ito ay hindi magkaroon ng isang pangalan.
Ito ay lamang kapag execute namin click ang pindutan sa kahon.
Kaya nagre-refresh nang isang beses pa, isa pang beses, at maaari mong makita na ito ay gumagana pa rin.
At na kung paano mo gumawa ng mga kaganapan.
>> May ng maraming iba't ibang mga kaganapan na maaari naming gamitin.
Pupunta ako upang lumipat pabalik sa paggamit ng console lamang upang ipakita sa iyo kung paano ang mga trabaho.
Ang mga ID para sa bawat isa sa mga tumutugon sa bawat kahon.
Kaya ang kahon na ito ay i-click ang ID, ang isang ito ay key ID, at ang isang ito ay mouse ID.
Isa pang bagay ay na mayroong sa pagkilos na ito function na; sa halip na mag-type ito sa bawat oras,
Ako talagang nagpunta lang at tinukoy ang pagkilos na ito function na pababa dito.
Ginagawa nito ang parehong bagay bilang ang function na hideTheBox.
Ito ay nakakakuha sa kahong ito at sa alinman fades ito o ito fades in
At iyon ang dahilan kung bakit hindi namin magagawang gamitin ito dito.
Kaya kung namin i-click ang ID na ito click, nais naming gumawa ng box ang nawawala o lumabas na muli.
Ito ay ang parehong bagay bilang ang pindutan na nagkaroon kami sa huling slide.
Ngayon pagkatapos tinatawag naming na, maaari naming i-click ito at kahon ang mawawala,
pagkatapos ay i-click ito muli at ang kahon ay muling lilitaw.
Iyan ay medyo simple. Double-click ang ipinapakita ng parehong bagay,
maliban ito ay nangangailangan ng isang double-click.
Kaya kung nag-click ka sa mga ito nang isang beses at i-click ito muli walang mangyayari,
ngunit kung i-double click mabilis, magkakaroon ito mawala.
Kung double-click muli, ito ay bumalik.
Kaya na medyo simple.
Keyboard input ay uri ng kakaiba; palagay ko ay hindi ito talagang gumagana sa halimbawang ito
dahil ang key pababa, pataas key at pindutin ang key at iba pang mahahalagang mga aksyon
buhayin ang walang mahalaga kung ano ang elemento isailalim mo.
Halimbawa, kahit na ako nakatali key pababa sa katawan o ibang bagay nang ganap,
pagkatapos ay gusto pa rin itong gawing aktibo man - ito ay hindi tiyak.
Hindi ko kailangang pag-click sa ito at pindutin ang key upang gumawa ng kahit ano mawala.
Gusto itong i-activate alintana ng kung ano ang elemento Ako ay kasalukuyang in
Kaya ang mga hindi talaga gumana sa halimbawang ito
dahil hindi nito makilala ako bilang ng pagpasok ng input sa div keyboard input.
>> Ngunit kung titingnan mo ang mga pagkilos ng mouse,
ang unang isa ay mag-hover, at maaari itong gawin ang ilan sa mga ito gamit ang CSS.
Kung gumagamit ka ng CSS, maaari kang lumikha ng ito upang kung mag-hover ka sa ibabaw ng isang bagay,
pagkatapos nito estilo pagbabago.
Ngunit gamit ang jQuery maaari mong baguhin ang mga estilo ng iba pang mga bagay pati na rin.
Kaya, halimbawa, kami ay pagpunta sa tumawag pagkilos kung mag-hover sa ibabaw namin ito div.
Iyon ay nangangahulugang kung mag-hover sa ibabaw namin ito, pagkatapos ay ang kahon mawawala.
Kung ililipat namin ang layo mula dito, ang mga kahon ay muling lilitaw.
Kung tinatawag naming ito at mag-hover sa ito, ang kahon ay nawala,
at sa lalong madaling ilipat namin ang layo, ito ay bumalik.
Kung tinatawag naming ito hover sa function na ang ID mouse,
na kung saan ay tumutugon sa kahon na ito, pagkatapos ay kung kami mag-hover sa kahon,
pagkatapos box ang aktwal na mawala - ito ay pagiging funky sa ngayon, ngunit -
kung ililipat namin ang layo mula sa ito, ito ay muling lilitaw. Sa ngayon ito ay paurong para sa ilang kadahilanan.
Ang mouse at ipasok ang mouse ilipat ang function ay medyo katulad na, ngunit bahagyang naiiba.
Mouse ipasok lamang aktibo kapag ang mouse ay nagpasok ng kahon, tulad ng inaasahan.
Kaya't kung ikaw ay naglalakbay sa ito, kailangan mawala ang mga ito.
Ngunit hindi ito ay muling lilitaw kapag nilipat mo ang layo; kailangan mong ilipat pabalik papunta ito para dito upang bumalik.
Mayroon ding ang mouse function na ilipat, na kung saan ay buhayin
tuwing ang mouse ay kahit na naroroon sa kahon.
Kaya magkakaroon ito lamang panatilihin sa pagpunta, dahan in at out.
At talagang ito ay pag-log - ito tila lamang ito ay dahan in at out,
pero sa totoo ito ay pag-log ng maraming higit pang mga pagkilos kaysa ito,
kaya kapag nilipat mo ang layo magkakaroon ito lamang panatilihin ang pagpunta dahil naka-log tulad ng isang libong ng mga ito.
Siguro hindi isang thousand. Siguro lima.
Nag log ng higit sa na.
Ang punto ay, ang lahat ng mga pagkilos ng mouse, may mga ng maraming mga ito.
Maaari mong basahin up sa iba pang mga bago, ngunit ang mga ito ay ang lahat ng mga bahagyang naiiba,
at maaari kang pumili ng alinman ang isa na kailangan mo
para sa alinman ang tiyak na layunin na sinusubukan mong gawin.
>> Ang susunod na bagay na pupuntahan ko pag-uusapan ay ang AJAX.
AJAX, alam ko hindi namin ginawa masakop ang JavaScript sa bilang magkano ang lalim ng taong ito,
kaya lang ako pagpunta sa makipag-usap tungkol sa AJAX sa pangkalahatan para sa isang minuto.
AJAX ay nakatayo para sa Asynchronous JavaScript at XML.
Talaga Ito ay, halimbawa, kapag handa ka sa Facebook at ito pushes ka ng abiso,
iyon ay dahil sa AJAX ay tumatakbo sa iyong web browser.
Ang bawat pares ng mga segundo sa iyong web browser ay talagang
pagpunta sa Facebook mga server, pagtatanong sa kanila, huwag mayroon kang anumang bagay bagong para sa akin,
at pagkatapos ito ay bumalik sa iyo.
Ito ay nagbibigay-daan sa iyo upang magpadala ng mga kahilingan sa isang server
nang hindi aktwal na pagkakaroon upang i-load ang pahina.
Kaya normal, kung lamang ka gamit ang PHP at isang database,
mayroon kang upang i-refresh ang pahinang ito bago maaari kang makakuha ng bagong impormasyon mula sa server.
Ngunit gamit ang AJAX, maaari mong hilahin na para sa bagong impormasyon Patuloy,
o hilahin para dito kapag nag-click sa isang pindutan o anumang bagay tulad na.
Kaya ito ay nagbibigay-daan sa amin upang magpadala ng mga kahilingan nang walang i-reload ang pahina,
at maaari naming gamitin ang alinman GET o POST kahilingan.
>> Kumuha ng mga request ay, halimbawa, kung ka upang i-Google.com
at gagawin q = test. Na nagbibigay sa kanila ng isang query pagsubok.
At iyon ay isang Kumuha ng kahilingan dahil ito ay ang pagpasa sa mga parameter sa URL mismo.
Isang POST kahilingan ay bilang kung ipinapadala mo ang mga ito sa pamamagitan ng post.
Ito ay tulad ng inilagay mo ito sa isang sulat at ipadala ang mga ito off sa kanila,
ngunit hindi sila talaga makita ang mga nilalaman. Ang mga ito ay hindi makikita sa URL.
Hindi direkta mo maaaring i-type ito; mayroon kang upang ipadala ito halos lihim.
Ito ay sa isang post.
Ngunit gamit ang jQuery, maaari mong gawin GET at POST kahilingan
mas madali kaysa sa karaniwan mong ma gamit lamang plain JavaScript.
Maaari mong i-query gamit ang mga API GET kahilingan, at maaari mo ring tingnan para sa impormasyon sa pag-login.
Sa susunod na pahina, nilikha ko ito, na nagtatanong ng, "Ano para sa tanghalian?"
gamit ang Harvard pagkain API, kaya sabihin na hilahin pataas.
Ito ay lamang ng isang halimbawa ng kung paano maaari mong gamitin ang jQuery upang gawin ang isang GET kahilingan sa isang API
at kumuha ng impormasyon pabalik mula dito.
Kaya gusto namin upang makita ang mga menu para sa araw na ito,
at gusto naming makita kung ano ang para sa tanghalian.
Narito ang URL upang lumikha ng isang GET kahilingan sa jQuery.
gamitin mo ang $. makakuha ng function.
Ang unang argument ay ang URL, kaya eksakto kung ano ang querying.
Pagkatapos ng susunod na argumento ay isang function na executes kapag ang Kumuha ng kahilingan ay kumpleto na.
Kaya mong ipadala off ang ilang mga kahilingan sa server, maghintay para dito upang bumalik.
Kapag ito ay bumalik, ikaw ay pagpunta sa tumagal ng ilang mga aksyon na may data na bumalik mula sa server.
Sabihin sige at code na ito pati na rin.
Hindi ko code na ito alinman, planado.
Narito ang TODO. Una sa lahat, gamitin natin ang kaganapan nagbubuklod
kaya na pindutan kapag ito ay pipi, nagpapadala kami sa off isang Kumuha ng kahilingan.
At kapag na GET babalik kahilingan na may ilang mga data,
kami ay pagpunta sa isulat ito sa pagkain na ito div info ID.
Una sa lahat, sabihin piliin ang mga pagkain ID button.
Kapag nag-click ito, gusto naming ito upang gawin ang isang bagay.
Sabihin lang gawin itong isang hindi nakikilalang fuction, tulad ng dati.
Puwede I-wrap ang mga kulot tirante,
at kapag ang pindutan na ito ay pipi, gusto naming magpadala ng GET kahilingan
upang suriin kung ano ang para sa tanghalian.
Upang gawin iyon, maaari naming i-type lamang sa $. Makakuha.
Ito ay isang jQuery function, gamit ang dollar sign.
Tatagal ng ilang mga argumento. Ang unang isa ay ang URL,
ang ikalawa ay ang callback function, ang pagpapaandar na tinatawag na
kapag binanggit na aktwal na nagbabalik.
Sabihin lamang bumuo ng ang URL muna.
Maaari naming makakuha ng ito mula sa API na sinulat ni David up.
Pupunta dito, maaari naming makita na ito ay food.cs50.net/api/1.3/menus,
at pagkatapos mo lamang pumasa sa mga pangalan ng mga parameter na iyong nais.
Kaya 1 parameter value ay 1.
Mukhang standard petsa, petsa ng simula, nagde-default sa ngayon
kung hindi ka nagpasok ng anumang bagay, at petsa ng pagtatapos din mga default
sa araw na ito kung hindi mo ipasok ang kahit ano.
Iyon ay kung ano ang gusto namin. Gusto naming lamang makuha ang impormasyon para sa ngayon.
>> Gusto naming ang format na nasa JSON.
Iyon lamang arbitrary; maaari mong gamitin ang anumang paraan na nais mo.
Maaari mong gamitin ang CSV, ngunit JSON ay pagtatanda JavaScript Bagay.
Ito ay napakadali para JavaScript upang maunawaan kung ano ang ibig sabihin nito,
at maaari naming i-print ito nang mas madali na paraan.
Kaya sabihin humiling ito sa JSON, at kahilingan tanghalian natin.
Kaya meal = tanghalian. Lamang na magsulat up ang URL na iyon, pumunta namin pabalik dito.
Mayroong mga menu. Ang unang parameter ay ang output = JSON
dahil iyon ang kung ano ang gusto namin, at ihiwalay mo ang mga parameter na may isang 'and.'
Ang pangalawang parameter - Hindi ko matandaan.
Meal. At gusto namin na meal = tanghalian.
Maaari mong subukan ang URL na ito sa pamamagitan ng pag-type ito sa iyong browser at pagpunta sa ito.
Ito ay magbibigay sa iyo ng ilang mga output. Ito ay lamang ng grupo ng mga bagay-bagay na para sa tanghalian.
Ito ay sa ito pangit na format. Gusto naming i-print ito sa aming mga pahina sa isang mas mahusay na format.
Kaya ang URL ay tama, ngayon pa lang namin na kailangang magsulat ng isang function
upang tumawag pabalik kapag ang kahilingan ay matagumpay.
Function na ito ay aktwal na tumagal ng isang argumento. Magiging data.
Ang data ay kung ano ang isa ay bumalik mula sa Kumuha ng mga kahilingan pagkatapos ng GET kahilingan ay tapos na.
Maaari naming gawin ang kulot tirante; in dito namin isulat ang hindi kilalang function na
na executes, gamit ang data na iyon kapag makuha namin ang impormasyon pabalik.
Kaya data, kapag kami nag-type sa URL na ito,
ito ay kung ano ang data pupuntahan hitsura. Ito ay pagpunta sa maging ang malaking string.
Ngunit ang magandang bagay ay, maaari JavaScript parse ito sa pamamagitan ng paggamit ng function na JSON.parse.
Kaya sabihin lumikha ng isang bagong variable na tinatawag na pag-parse ng data.
At parse ng data ay isang hanay ng mga bagay.
Ang bawat bagay ay naglalaman ng impormasyon tulad ng - na rin, sabihin kumuha ng isang hitsura.
Ito ay may isang petsa, isang pagkain, kategorya, recipe, ang lahat ng mga ito ng iba pang mga bagay-bagay.
Kaya sabihin lang i-print ang pangalan para sa bawat isa.
Sabihin umulit sa ibabaw ng buong hanay ng mga bagay-bagay na makuha namin pabalik mula dito,
at lamang i-print ang bawat isa - i-print ang pangalan ng bawat isa.
Ito ay isang para sa loop.
>> JavaScript ay may kapaki-pakinabang na ito syntax kung saan maaari kang lumikha ng isang variable at loop sa ibabaw ng isang array,
at var i lamang ang iterator, kaya sa halip ng pagkakaroon na gawin var i = 0,
i ay mas mababa kaysa sa haba, i + +, maaari mo lamang gawin var i-parse sa data.
Sa halimbawang ito, parse data (i) ay tumutugma sa mga kasalukuyang mga elemento
ng array, ang aktwal na bagay.
At gusto namin upang makuha ang mga pangalan out ng ito.
Kaya sabihin lamang gawin pangalan.
At ang huling bagay ay, kami ay pagpunta sa may ilang mga jQuery muli.
Talaga idagdag ito sa div, ito pagkain div info na kasalukuyang walang laman.
Kaya sabihin na pumili.
Gagamitin namin ang jQuery at piliin ang pagkain info div ID, o pagkain ng impormasyon ID, paumanhin.
Gusto naming ikabit sa ito.
Kung ginawa namin test, halimbawa, ito ay magdudulot lamang patungan ito bawat solong oras.
Kaya maaari naming ikabit lang ito.
Ang kasalukuyang elemento sa array, susuriin namin ang pangalan out ng ito,
at kami ikabit ito sa dulo ng pagkain div info ID.
At pagkatapos lamang upang gumawa ng hitsura nito mas malinis,
gagamitin din namin ikabit ang isang line break kaya hindi lahat sa isang linya.
Kaya kung ang lahat napupunta rin, na dapat ay handa na upang -
una sa lahat, sa tuwing pindutan na ito ay na-click,
ito ay magpadala-off ang isang GET kahilingan sa URL na ito.
Kapag ang data ay bumalik mula sa ito, kailangan itong i-parse ito,
i-on ito sa JSON, loop sa buong array na kumakatawan sa data na iyon,
at pagkatapos ay isama ang pangalan at isang line break
sa bawat linya sa ID na ito meal ng impormasyon na dati ay walang laman.
Kaya pagpunta bumalik sa pahinang ito, ire-refresh namin,
click, malaman - hindi ito gumana. Iyon ay kapus-palad.
At ito ay kung saan ay pag-debug in
Index.html, linya 1.
Iyan ay nakawiwili.
Ang lahat ng mga karapatan, na rin, sa halip na patagalin ang paggawa na ito, lamang pupuntahan ko
hilahin pataas ang nagagawa file na mayroon akong, kung saan ay ang natapos na bersyon.
Hindi ako sigurado kung ano ang pagkakaiba ay, ngunit maaari naming lamang buksan ito up sa halip.
At kami pumunta sa AJAX, at ito ay dapat na gumana nang tama.
Iyon ay kung ano ang tanghalian para sa araw na ito,
sa walang partikular na pagkakasunod-sunod, na may mga quote sa palibot nito, kaya hindi ang prettiest.
Subalit, malinaw naman, kung ang iyong ginagawa ito para sa isang pangwakas na proyekto,
Gusto mong gawin itong mas mahusay na hitsura.
Ngunit ito lamang ay isang simpleng halimbawa ng kung paano gagawin mo ang Kunin ang kahilingan.
At kung tinitingnan namin ang aktwal na code, ako sa paghula, ako ay medyo sigurado
pa ito sa medyo magkano ang parehong.
Oh, nakalimutan ko i-convert ito sa isang string, na ito.
Hindi, pa rin ito ay hindi gumagana. Maging ano pa man, narito ang aktwal na nakumpleto code
para sa kung ano ito ay dapat magmukhang,
at ginagawa nito ang parehong bagay tulad ng kung ano ko lang ipinatupad.
Kapag nag-click ka sa pindutan, ginagamit nito GET JSON upang awtomatikong i-parse ang data.
Tatagal ang data pabalik mula dito at sa pamamagitan ng mga loop ang buong array
at mga print out ang - kahit anong para sa tanghalian ngayon, ang pangalan ng ito,
at nagkakabit ng isang line break na pagkatapos ng bawat linya.
Iyon ay kung paano mo ginagamit ang function na makakuha ng.
>> Maaari mo ring gamitin POST, na hindi ko magkaroon ng panahon
upang sumulat ng tungkol sa isang halimbawa para dito, ngunit maaari naming tumingin sa papeles.
Kung tumingin ka sa jquery.post,
Maaari mong makita na ito ay halos ang parehong bagay.
Mayroon kang isang URL, ngunit sa halip ng pagpasa sa mga parameter ng gumagamit ng -
lamang ng paglalagay ng mga ito sa mga string para sa URL mismo,
mayroon kang upang pumasa ito sa variable na data
iyon ay isa lamang ng isang array, isang diksyunaryo ng mga mapa na mga parameter sa mga halaga.
Pumasa ka na sa, at na nagpapadala ng mga ito sa paggamit ng POST.
At sa sandaling mayroon ka na, pagkatapos ay maaari kang magkaroon ng isang function na tagumpay
na executes kapag ang data ay bumalik.
Kung hindi man, ito ay eksaktong pareho. Kaya gamit ang POST,
baka gusto mong gamitin ang POST, halimbawa, kung mayroon kang isang paraan ng pag-input
Hinahayaan ka ng mga tao ang mga password sa pag-input ito, at ipadala ang mga password off
sa iyong back-end script, mag-check in sa database kung ang user na iyon ay may-bisa o hindi.
Maaari mong gawin na ang lahat ng gamit jQuery sa halip ng pagkakaroon upang i-refresh ang pahinang ito sa lahat.
Iyon ay kung paano ko naipatupad sa blog na aking ipinakita sa iyo ang mas maaga.
Kung kami pumunta sa portal ng pagtatapos at mag-log out, mag-log out,
Mag-log out ay hindi gumagana.
Well, ipaalam sa akin lamang buksan ito up sa isang bagong window.
Narito doon ay isang password, at ako ay pagpunta sa i-type sa isang bagay random.
Hindi ito gumagana, ngunit maaari mong makita na ginawa namin hindi
talaga mayroon upang i-refresh ang pahinang ito sa lahat.
Ang code, kung gusto mong tumingin sa mga ito,
lahat ay magagamit sa dito.
Kaya ang code ko ay sumulat noong nakaraang taon noong una.
Tulad ng iyong nakikita dito, ipinapadala namin sa isang POST kahilingan.
Mayroon akong isang file na tinatawag na login.php sa likod ng pagtatapos,
na sumusuri kung ang password ay wasto.
Ang mga parameter pumasa kami sa mga password, map sa
ang input na ito sa input box kasalukuyan.
At kapag ang data ay bumalik, namin suriin.
Kung ang data ay hindi totoo, at pagkatapos ay sabihin namin hindi tamang password, padausdusin ito pababa,
at lamang gawin ito pagkatapos mawala na.
Kung hindi man, kami ay i-load ang pahina ng admin.
At ito ay ang lahat ng tapos na gamit ang JSON.
Sa maraming mga linya ng code, maaari mo lamang pumasa ang data sa likod ng pagtatapos,
tingnan kung ito ay tama, i-check mo kung naka-log in nang tama,
at aktwal na tumugon sa mga ito, mare-redirect ang tao sa tamang pahina
o hindi pagpapaalam sa kanila mag-log in at nagsasabi sa kanila na sila ay nagkaroon ng hindi tamang password.
Kaya na ang isang halimbawa ng kung paano maaari mong gamitin jQuery POST
upang magpadala ng POST kahilingan sa iyong likod ng pagtatapos,
check kung ang isang tao ay naka-log in nang tama.
>> Ang lahat ng mga karapatan, sa gayon na ang lahat ng mga halimbawa ko ay nagkaroon, at ang lahat ng mga bagay-bagay Nais kong upang masakop.
Iyon ang mga pangunahing bagay na jQuery nagpapahintulot sa iyo na gawin:
piliin ang mga elemento, baguhin ang mga ito gamit ang DOM pagmamanipula,
maaari kang magdagdag ng mga epekto, buhayin ang mga bagay sa mga tiyak na mga kaganapan,
at din gawin mga kahilingan AJAX napaka walang putol at madali.
Kaya salamat sa iyo para sa darating o panonood,
at kung mayroon kang anumang mga katanungan, mangyari lamang na ipaalam sa akin. Oo?
[Mag-aaral] Bumalik kapag ikaw ay nagpakita, nagkaroon ka ng JSON pagkatapos ng POST kahilingan sa mga panipi,
at lamang ako ay nagtataka kung ano na ang ginawa.
>> Oo, nakikita ko. Ang tanong ay na, sa halimbawa ko lang ang nagpakita,
nagkaroon ng salitang JSON sa mga panipi sa paligid ng -
Kukunin ko na lang hilahin ito up muli - sa paligid ng POST function.
Lang ako sa paghila ito hanggang sa ipakita.
Kaya narito ang POST kahilingan, at mayroong ito JSON sa mga panipi.
Iyon lamang tumutukoy sa kung ano kami ay umaasa ang output upang maging.
Kaya kung pumasa kami sa JSON bilang ang inaasahang uri ng data,
ito ay hindi isang kinakailangan, ngunit kung namin pumasa ito sa,
pagkatapos ay ang data ay awtomatikong mai-parse ang JSON.
Kaya hindi namin na kailangang tawagan ang function na JSON parse sa mga ito,
Makikita lamang ito mangyari awtomatikong.
At kung tingnan ang dokumentasyon para sa POST,
doon ay ang data na ito variable na uri, ang uri ng data na inaasahan mula sa server.
Ito ay nagde-default sa isang intelligent na hula na maaaring maging mali,
sa gayon maaari mong iwanan ito blangko, ngunit ito lamang ay ang uri ng data
sa coding na ginagamit mo, kung ito ay ang JSON o XML o ibang bagay.
>> Anumang iba pang mga katanungan?
Ayos lang. Kung mayroon kang anumang iba pang mga katanungan, huwag mag-atubili na mag-email sa akin
sa vshekhawat@college.harvard.edu,
at ang mga slide at code ay dapat na magagamit sa online medyo lalong madaling panahon.
Good luck sa iyong huling proyekto, inaasahan mong gamitin ang jQuery.
[CS50.TV]