[Powered by Google Translate] [Seminè: JQUERY] [Vipul Shekhawat, Inivèsite Harvard] [Sa a se CS50.] [CS50.TV] Si w ap swiv ansanm nan kay la, ou ka aktyèlman jwenn aksè glisad mwen sou entènèt pa ale nan lyen sa a. Li nan TjjRWj, sou bit.ly. Ou kapab tou jis ale nan URL la dirèkteman, ki se cloud.cs50.net / ~ vshekhawat, ki se non mwen, ak jquery. Mwen trè ankouraje w swiv ansanm, si w ap gade nan kay la, ak si w ap isit la, tou, paske sa a se yon prezantasyon trè entèaktif. 

Se konsa, jodi a mwen pral yo dwe pale sou jQuery, ansanm ak kesyon an premye se, ki sa ki jQuery? Ane sa a, mwen konnen ou nèg pa gen kouvri JavaScript nan kòm anpil detay kòm nou gen nan ane sot pase yo. JavaScript se, premye nan tout, jis yon lang kliyan-kòt ke ou itilize nan kouri Scripts ak kòd sou machin chak itilizatè a. Se konsa, ou gen yon sèvè ki bay paj wèb nan moun, men ou ta ka vle fè lòt bagay sou machin yo, mande machin yo voye demann nan sèvè ou a chak segonn 30 oswa yon bagay tankou sa. Ou ka fè sa lè l sèvi avèk JavaScript. JQuery jis bay fonctionnalités plis sou tèt JavaScript ki fè bagay anplis pou ou. Si ou gade nan sa ki sou tèt, ki dekri kèk nan bagay la ke w ap kapab fè. Se konsa, an jeneral, li te kreye nan mwa janvye 2006. Li te premye vin ansent nan nan mwa Out 2005. Li te alantou pou yon ane koup, ak li vrèman yon pati nan nouvo mouvman an 2.0 Web ki nan te fè entènèt la pou klere. Li nan pi lajman itilize JavaScript bibliyotèk la. Plis pase 19.6 milyon dola sou sit entènèt yo lè l sèvi avèk li, epi l 'a se toujou ogmante dapre builtwith.com, ki, aparamman, sou ane ki sot pase yo, te jis te toujou rete ogmante san patipri linear. Pami sit sa yo tèt 10 milyon dola, gen nan toujou - apepwè 40% nan yo yo kounye a lè l sèvi avèk li. Facebook sèvi ak li, anpil nan lòt sit wèb yo kounye a sèvi ak li. Ou ka gade nan sa yo demografik sou pwòp ou a, si ou ta renmen. Men, ou ta ka di legi li a paske li gen yon fondasyon ak 13 manm konsèy, ansanm ak yon ekip de 20 moun k ap travay sou li sou yon baz regilye. Se konsa, li trè lajman itilize, li gen yon URL org., Li nan anpenpan, li gen vire-konpwomi pou lòt bagay, se konsa li nan yon kontra gwo. 

Poukisa ou ta dwe sèvi ak li? JQuery se yon bagay ki lejè. Sa vle di li pa yon dosye gwo. Ou ka telechaje dosye a minified, ki se san yo pa tout espas ki la blan ak kòmantè, ak li a sèlman 32 ko. Se konsa, li fasil jis lanse sou paj entènèt ou an ak jis kòmanse lè l sèvi avèk li. Li la tou trè efikas ekri nan Liv la, se konsa li pa pran yon anpil nan - li pa ralanti sit entènèt ou a anpil lè ou sèvi ak li. Li pèmèt ou aplike bagay sa yo ki te deja Inposibl. Gen kèk aspè nan fonksyonalite, tankou kreye Animations, ki nòmalman ta dwe trè, trè difisil fè. Men, nan jQuery yo ap aktyèlman trè senp. Men, gen kèk bagay ki anmèdan fè, posib nan JavaScript, tankou voye yon demann POST, men yo voye yon demann yo voye yon sèvè, ou gen yo ekri senk oswa sis oubyen sèt liy nan kòd. Koulye a, ou ka jis fè l 'nan yon sèl liy nan kòd, nan yon apèl fonksyon sèl. Ki vrèman senplifye yon anpil nan bagay la ke w ap fè. Apre sa, tout timoun yo fre yo lè l sèvi avèk li. Pa sa, mwen vle di m '. Nan pwojè final mwen ane pase, ki se news.whrb.org, ki se pou estasyon radyo a, mwen te kreye sa a blog ki gen tout pouvwa a tout montre yo ke nou te fè ak dosye yo MP3 pou yo. Ou ka browse atravè montre ki sot pase yo, ak li a tout fè lè l sèvi avèk jQuery. Ou ka di paske nan tout Animations sa yo, esansyèlman. Se konsa, si ou gen - si w ap kreye yon pòs nouvo, ou wè sa yo slideDowns ti kras, mwen ki nan tout fè lè l sèvi avèk jQuery. Lè sa a fennen - Se konsa, se ki kalite bagay tout fè lè l sèvi avèk jQuery, epi ou pa genyen toujou ap Reload paj la navige sit la. Yon lòt bagay fre ki nan te fè lè l sèvi avèk jQuery sa a prezantasyon. Mwen lè l sèvi avèk bagay sa a sous louvri rele scrolldeck, kote gen yon moun te ekri sou tèt jQuery. Si ou aktyèlman gade nan sous la, ou ka wè ke yo ap lè l sèvi avèk sa a siy dola; siy dola yo te itilize nan jQuery siyifi ke yon fonksyon se yon fonksyon jQuery. Se konsa, yo ap defini yon pakè sou tèt jQuery ki pèmèt ou fè yon prezantasyon tankou sa a, epi ou ka wè ke isit la yo ap gen ladan dosye a jQuery orijinal la, ki se ki sa ou pral oblije gen ladan si vle itilize jQuery nan sit entènèt pwòp ou yo. 

Touche sou sa, ki jan ou enstale li? Ou ka jis ale nan jQuery.com ak download dosye a, ajoute li nan yon anyè entènèt ak gen ladan li. Se konsa, jis sou tèt, nan tag nan tèt nan dosye HTML ou nan dosye prensipal ou HTML, jis gen ki liy nan Kòd ak vèsyon ki kòrèk la pou ki vèsyon an jQuery w ap itilize. Ou ka telechaje li pa ale nan jQuery.com, klike sou "download jQuery," epi ou te gen li. Sa a li. Men, aktyèlman, nou ka pran yon gade nan sa li sanble. Si ou klike sou download isit la, jQuery sa a. Se jis nan yon sèl gwo JavaScript dosye ki fè tout bagay la majik pou ou. Sa a se vèsyon an minified, ki se pa lizib nan tout. Ou ka gade tou nan vèsyon an devlopman, ki se lizib men yo toujou trè, trè long. Li se yon anpil nan bagay nan la. Ou kapab tou mennen nan anime vèsyon Google a nan li. Se konsa, ki pral pèmèt ou jis konte sou Google ba yo li. Yo bay chak vèsyon nan li, disponib nan tout fwa. Se konsa, ou ka pwobableman konte sou Google lame li pou ou. Oswa ou ka mennen nan pwòp vèsyon jQuery nan dènye. Yo gen yon URL ki nan toujou mete ajou vèsyon an dènye. Li nan jQuery-dènye, ak gen yon pwoblèm ak sa, ki se ke si jQuery a mete ajou ak kèk nan fonctionnalités a anvan yo yo te vin retrograded oswa Obsoleted, li pa gen dwa - li kapab kòmanse pa jwenn sipòte ankò. Se konsa, si ou ekri yon sit entènèt lè l sèvi avèk vèsyon 1.8.2, pa vèsyon an tan 2.7 soti kèk nan fonksyon yo ou te ekri pa travay ankò. Se konsa, li pi bon yo jis download 32 ko dosye a, mete l 'sou paj entènèt ou an, epi li pral travay pou tout tan. 

Mwen pral ale pi devan epi yo kòmanse pale sou fonksyonalite aktyèl la nan jQuery. Premye bagay la se seleksyon. Sa a se sa jQuery te okòmansman vin ansent yo bay. Epi ou ka klike sou dokiman gade nan lòt dokiman an detay pou seleksyon yo mwen pral yo dwe kouvri. Lide a dèyè seleksyon se ke ou ka chwazi eleman HTML sou yon paj. Eleman nan yon paj gen idantite ki ak klas ak lòt idantifye aspè nan men yo. Genyen tou - they're nan lòd diferan. Gen kèk nan tan an yo ap nich andedan youn ak lòt. JQuery pèmèt ou konstwi demann senp ki rekipere eleman ki soti nan paj la. Lè sa a, ou ka manipile eleman sa yo lè l sèvi avèk fonksyon jQuery, ki se seksyon nan manipilasyon nou pral jwenn yo pi ta. Ou ka chanje HTML a, chanje CSS la, ou ka tou enkouraje epi ajoute fonksyon yo ki kapab aktive sou evènman sèten. Se konsa, pou egzanp, si yon bagay nan klike, ou vle yon bagay yo rive, ou kapab fè sa lè l sèvi avèk jQuery kòm byen. Men, gen yon nimewo gwo nan fason yo ka chwazi eleman. Pifò nan yo mwen pa janm te itilize, men gen yo se yo menm debaz yo, ki se trè enpòtan. Fè seleksyon yo a eleman, pou egzanp, si w ap sèlman chwazi anyen ki se yon div - Mwen gen aktyèlman kòd la louvri pou sa a prezantasyon glise. Se konsa, pou egzanp, isit la nan glise la an premye. Isit la nou gen yon DIV. Si nou aktyèlman chwazi tout div ki nan paj la, li pral jis ba nou yon etalaj de tout div yo ki egziste nan sa a ranpli. Seleksyon nan ID pèmèt ou chwazi anyen ak yon ID bay yo. Se konsa, si sa a, pou egzanp, bagay sa a gen ID a "ki sa," epi si nou te fè sa ak # sa olye pou yo kèk ID, li ta jis retounen yon etalaj ki gen yon eleman sèl e ke se ke eleman nan paj la. Nou kapab tou konbine seleksyon fason sa a pa gen chwazi sèlman bagay sa yo ak idantite ki ki div. Se konsa, yeah. Se sèlman chwazi div ki gen ke ID. Pou klas ou jis sèvi ak yon dot, li nan menm bagay la kòm CSS. Pitit tou travay; Se konsa, si ou gen kèk klas e li te nich eleman nan li - se konsa, pou egzanp, gen kèk klas-la ak li gen yon tag jete lank lyen nan yon lòt paj, ou ka itilize sa a sentaks rekipere lyen an. Ou kapab tou chwazi bagay sa yo plizyè nan yon fwa; jis separe yo pa vigil, sèvi ak nenpòt seleksyon ou ta renmen, epi ou pral chwazi tout nan yo nan yon fwa, nan yon etalaj sèl. Lè sa a, gen tou pa fè seleksyon yo a, se konsa ou kapab chwazi tout div ki pa gen kèk klas espesifik. Epi sa a, jis yon bon fason yo ka resevwa yon entwodiksyon sou ki jan sa a seleksyon travay. Mwen pral montre kèk egzanp konkrè nan yon dezyèm fwa. 

Seleksyon Avanse yo - sa yo, se jis yon kèk egzanp. Gen plizyè douzèn sa yo, men si ou vle yo chwazi tout etikèt yo imaj nan kèk eleman, Lè sa a ou jis fè: imaj. Si ou vle chwazi eleman yo menm, pou egzanp, si gen 20 nan yo, ou vle chwazi 0, 2, 4, 6 ak sou sa, ou fè: menm, oswa ou ka tou fè: enpè. Sa yo se seleksyon pseudo, ki vle di yo ke yo aktyèlman kalkile chak eleman lòt olye ke jis ale epi chwazi tout nan yo. Ou kapab tou - chak eleman ka yo te genyen tou atribi espesifik. Se konsa, pou egzanp, klas = sant tou se yon atribi. Pou sa a tag jete lank, href, ipèrtèks referans, se yon atribi tou. Se konsa, ou ka chwazi yon bagay ki lyen ki mennen nan yon paj espesifik oswa jis - li a vrèman jeneral. Ou ka chwazi anyen ak nenpòt ki atribi ke ou ta renmen. Lè sa a, tou, atribi gen. Si ou, pou egzanp, yo te vle chwazi tout eleman ki opinyon ki gen mo "pas la" kòm non an nan yo, si yon paj gen yon blòk tèks opinyon ki nan rele "modpas," ki ta ka yon fason ou ka chwazi sa. Men, gen anpil plis. Ou ka ale pi devan epi gade nan dokiman an ak wè egzanp espesifik nan kijan li fonksyone. 

Bagay la pwochen se Dom manipilasyon. Apre nou chwazi eleman, nou pral vle aktyèlman fè bagay ak yo. Se konsa, lwen nou pa gen gade ki nan tout, men si ou gade nan dokiman an, gen nan reyèlman yon anpil ke nou ta ka fè. Nan pwen sa a, nou ap ale nan chwazi eleman sa a sou prezantasyon ak manipile yo lè l sèvi avèk jQuery. Paske sa a se aplike lè l sèvi avèk jQuery, nou genyen aksè nan bibliyotèk la jQuery, epi nou ka sèvi ak moun ki fonksyon ki nan Kòd sa a. Youn nan bagay ki itil ke ou pa ka konnen sou se konsole la. Men, Google Chrome se sa m ap lè l sèvi avèk. Ou ka peze alt lòd J oswa alt kontwòl J louvri konsole a. Nan Firefox Mwen panse ke K lòd li nan chanjman oswa kontwòl chanjman K. Nan Safari ou gen yo ale chanje kèk anviwònman. Genyen yon lyen si ou ta renmen fè li, men mwen rekòmande resevwa Chrome oswa Firefox. Se konsa, kite a louvri moute konsole a, li la desann isit la. Li pèmèt ou fè fondamantalman jis fè anyen ou vle. Se konsa, ou ka jis tape nan kreye yon varyab x rele, x = 5, se pou yo wè sa ki x + 2 se. Ou menm kapab fè yon bagay tankou CS + Ann wè, x + 45, ki pral CS50. Ou ka jis fè kèk bagay JavaScript òdinè. Men, ou ka tou fè jQuery nan isit la. 

Se konsa, kite pou yo gade nan sa a nan aspè premye isit la. Nou pral kreye yon varyab rele HTML, ki se yon fisèl. Li te gen yon tag paragraf nan li, ki rele kèk tèks nouvo. Se konsa, nou gen sa a HTML, li nan kèk tèks nouvo, nan Tags paragraf. Koulye a, nou aktyèlman vle ajoute li nan paj la. Mwen mete l 'kanpe pou ke HTML a pou paragraf sa a, tit sa a isit la, se ajoutra ID. Si nou chwazi ajoutra ID ak Lè sa a kole nan li varyab la HTML Mwen jis kreye, li pral ajoute ke HTML nan fen a, dwa apre sa a tag paragraf. Se konsa, si nou fè sa - nou chwazi paragraf sa a, e nou te rele fonksyon an ajoutra ak varyab la HTML Mwen jis te ajoute, li pral ajoute tèks sa a nouvo dwa gen nan paj la. Nou kapab tou prepan, ki vle di li ap mache devan, nan konmansman an nan ki eleman. Se konsa, gen kèk tèks nouvo nan kòmansman an ak apre sa. Mwen ka ale pi devan epi rafrechi debarase m de bagay sa a Mwen te jis fè. Men, sa a yon egzanp sou kouman ou ka itilize prepan a ak kole metòd manipile bagay sou paj la, ajoute kèk HTML. 

Ou kapab tou chanje klas yo. Retounen nan sa a ranpli style, mwen te kreye sa a pou klas la genyen ki gen koulè wouj tèks, kèk koulè background, ak yon lonbraj tèks. Li sanble efreyan, men mwen ka aktyèlman - paragraf sa a koresponn ak ID klas la. Se konsa, mwen ka ajoute klas la pou genyen an. Mwen ka egzekite sa a nan konsole a, ak ki pral ajoute ke klas, e kounye a, li sanble efreyan, jan yo espere. CSS la otomatikman vin aplike nan klas sa yo ke ou - si gen nan CSS pou yon klas, li otomatikman vin aplike si ou chanje klas la nan yon eleman. Lè sa a, nou ka jis retire li lè l sèvi avèk Retire klas la. Se konsa, si ou gen kèk klas predefini tankou wouj oswa evidans, ak Lè sa a ou vle aplike sa yo nan eleman, ou pa bezwen fè tout CSS la manier chak fwa. Ou ka jis ajoute klas la nan yon eleman, ak Lè sa a, li pral otomatikman vin - li pral otomatikman gade ki apwopriye pou ki klas la. Nou kapab tou retire bagay sa yo, se konsa mwen pral chwazi tout div yo nan paj an ak retire yo. Ki sa ki ki pral sanble? Li nan ale nan gade tankou pa gen anyen, se konsa gen la aktyèlman pa gen anyen gòch la. Se prezantasyon mwen ale. Mwen ka rafrechi ak pote l 'tounen, erezman, paske li nan jis kouri yon fwa, men sa a yon egzanp retire, si ou vle detwi yon eleman nan paj la. 

Ou kapab tou recouvrir, ak mwen pral chwazi tout etikèt yo paragraf nan paj la epi ale andedan yo epi ranplase tou sa tèks yo gen nan yo ak jis mo "tès la." Si ou fè sa, ou pral ranplase chak paragraf nan paj la ak sa a egzamen an. Oui. Yo ap tout ranplase ak tès yo. Se konsa, sa a, se yon egzanp nan aksè nan tèks la ak ranplasan li. Ou kapab tou rekipere enfòmasyon, e sa se vrèman fre pou bwat opinyon. Si w gen yon bwat opinyon ke gen moun ki ap tape bagay an, moun yo sezisman bagay nan li, isit la nou chwazi D 'a, nenpòt ki tag opinyon ak yon di ki kalite tèks. Nan ka sa a, gen nan yon sèl bwat D 'nan prezantasyon an antye, se konsa nou pral jis chwazi yon sèl la an premye, ak Lè sa a nou rele fonksyon an Val sou li. Sa retounen valè la, ak pou yon bwat D ', valè a se jis tou sa k ap pase yo andedan li. Se konsa, si nou fè sa, li jis retounen bagay la fisèl. Men, si nou rele li ankò apre ekri plis bagay, li vire nan plis bagay. Sa a yon fason gwo jwenn aksè nan eleman nan yon bwat D ', ak Lè sa a, tcheke, sa a se yon adrès imel ki valab, se sa a yon dat ki valab, pou egzanp. Ou ka jis rekipere bagay imedyatman kòm moun ki ap tape li, ak Lè sa a tcheke si li la valab, voye li tounen nan yon sèvè, fè anyen ou vle avèk li. Epi sa a, ki jan ou gen aksè a sa ki andedan sa yo bwat. 

Ou kapab tou chanje CSS dirèkteman, se konsa olye pou yo ajoute yon klas ki gen kèk pwopriyete predefini, ou ka jis ajoute tou sa CSS ou vle anyen. Chwazi kò Se konsa, kite a, ki se prezantasyon la an antye, ak koulè a ​​se pwopriyete a ki defini sa ki koulè yo nan tèks la se. Si nou chanje li nan wouj yo, tout tèks la nan paj an pral ale nan wouj. Nou ka fè yon bagay tankou ble koulè background, gen nou ale; li nan bèl. Ou kapab fè nenpòt sa ou vle ak sa. Sèvi ak pwopriyete a CSS, ou ka reyèlman chanje ki jan anyen parèt nan nenpòt ki lè. Bagay la pwochen se efè. Efè yo fondamantalman menm bagay la kòm modifye CSS la, men yo aktyèlman bay kèk animasyon siplemantè nan li. Se konsa, olye pou yo jis ki montre oswa kache yon bagay oswa chanje koulè a, ou ka aktyèlman fè li anime. Isit la nan dokiman an, si ou vle pran yon gade nan dokiman an vaste pou li. Men, mwen pral kouvri yo menm ki prensipal la. Gen montre nan ak pwopriyete kache. Montre / kache ID aktyèlman koresponn ak bwat sa a tout antye, Se konsa, si mwen kache li, li pral jis disparèt. Apre sa, mwen ka montre l 'ankò si mwen vle fè l' tounen. Epi li tounen. Li pa t 'aktyèlman disparèt, Mwen pa t 'aktyèlman retire li nan paj la, mwen jis mete pwopriyete a CSS nan vizibilite kache pou w pa ka wè l 'ankò. Genyen tou glise leve, li glise desann; ki pèmèt ou gen efè sa a. Li glisad jiska disparèt, epi apre li fin disparèt ou ka glise li desann nan fè li tounen. Epi, koulye a li nan tounen. Genyen tou sa a efè fennen, ki - ID fennen koresponn ak bwat sa a. Si m 'fennen li soti, lè sa a li pral tou dousman disparèt. Mwen kapab tou fennen li nan, epi li pral tounen. Ou kapab tou fè fennen a, ki se espesifik nan fonksyon an fennen. Ou ka gen li fennen nan nenpòt stupidity espesifik ke ou vle. Se konsa, si ou fennen li tou dousman .5, li pral vin mwatye vizib. Mwen ka fè li ale nan .1, ak tounen yo nan 1 fè li konplètman vizib ankò. Se jis yon lòt animasyon ke ou ka fè. 

Genyen tou efè activer. Se konsa, mwen pral chwazi ID a baskil, ki koresponn ak sa a bwat postal, ak sou ki div ou ka rele activer; si li vizib li pral vin envizib, si li nan envizib li yo ap vin vizib ankò. Se konsa, mwen jis rele fonksyon sa a activer de fwa; youn nan premye te menm bagay la kòm kache, rele nan dezyèm te menm bagay la kòm yon montre. Epi ou ka tou fè sa ak yon activer fennen, ki fè menm bagay la, eksepte li aktyèlman disparet. Men, menm bagay ak glise nan aktive. Gen efè nan chenn kòm byen, ki vle di si ou chwazi yon eleman ak jis rele yon pakèt moun sou metòd animasyon sou li, si ou te vle li nan fennen soti, Lè sa a, glise desann, ak Lè sa a kache ak Lè sa a fennen nan, li pral fè yo nan yon ranje. Se konsa, disparèt, tounen vin - pou kèk rezon, po a, pa t 'rive. Ann eseye li soti. Yeah, se konsa li ta vle chanje koulè deyò epi yo Lè sa a, li glise ale. Men, gen anpil plis. Ou ka itilize fonksyon an anime yo kreye Animations pwòp ou a, ki se jistis konplèks, men li bay ou ak èkstansibl enfini. Ou ka fè nenpòt kalite animasyon ou vle. Ou kapab tou itilize keu nan keu moute Animations miltip nan yon tan. Se konsa, si ou vle yon bagay vole atravè paj la, glise de dwat nan tèt a gòch la anba, ou ka fè sa, ak jis gen yon pakèt moun sou aksyon pral youn apre lòt la. 

Bagay nan pwochen nou pwal pale sou se evènman yo. Evènman pèmèt ou - byen lwen tèlman, nou te jis te tape bagay sa yo nan konsole a e ke se yon fason yo fè sa a rive, men sou yon paj aktyèl la, ou pa pwal pou kapab fè bagay sa yo di ki kalite itilizatè nan konsole a. Ou vle bagay sa yo rive otomatikman. Pou sa, ou bezwen sèvi ak evènman ki aktive sou kèk evenman k ap pase a sèten. Ou ka tcheke dokiman an pou detay yo plen. Se konsa, kite a wè. Nou vle kache oswa montre bwat la, men kounye a bouton sa-a pa fè anyen paske mwen pa t 'aplike li ankò. Mwen pral pou yo ale nan paj aktyèl la HTML. Isit la nan glise la. Genyen yon div pou glise la. Li te gen klas la nan glise. Genyen tèks la. Koulye a, gen nan bwat sa a ak bouton an bwat. Ki jan nou ta aktyèlman fè sa-a disparèt? Premye a tout, se pou yo ekri yon fonksyon ki fè ID nan bwat disparèt. Sa a se sentaks la pou funtion, kite yo jis rele li hideTheBox. Li pa pran okenn agiman, paske pa gen okenn agiman li dwe te pran. Nou ka chwazi ID nan bwat. Se konsa, lè l sèvi avèk jQuery a chwazi, nou ka chwazi ID bwat postal, ak Lè sa a jis fè l 'disparèt. Se pou yo fè l 'fennen deyò. Si nou kouri fonksyon sa a nan konsole aktyèl la, nou te ka defini fonksyon sa a, nou ka rele hideTheBox, epi li travay. Men, nou vle li nan rive lè se bouton an aktyèlman bourade. Pou fè sa, nou gen yo sèvi ak yon evènman. Pou yo mete yon evènman nan kèk bouton espesifik oswa kèk kap pase aksyon, nou gen yo chwazi eleman nan ke evènman an pral deklanche - oswa ki pral deklanche evènman an, regrèt. 

Se konsa, premye nan tout, se pou yo chwazi ID a bouton bwat paske se bouton an, epi kounye a, pou ki bouton, nou vle kreye yon animasyon lè li klike. Se konsa, gen nan fonksyon sa a klike sou. Li pèmèt ou fè mare yon lòt fonksyon li. Fonksyon sa a pran yon lòt fonksyon kòm yon agiman nou ka pase nan fonksyon an hideTheBox, ak chak fwa sa a se bouton klike, ki fonksyon pral otomatikman egzekite. Se konsa, sa a pral travay si nou sove sa a, mwen pral rafrechi, ak - yon sèl, dezyèm lan, mwen regrèt. Kite m 'ranje sa a vrèman byen vit. Okay. Gen nou ale. Se konsa, koulye bwat la se toudènyeman lè nou klike sou bouton an. Nou kapab tou chanje sa a nan jis fadeToggle, chanje li jis vle kache oswa montre bwat la, ak sa a ap travay tou tou, si nou rafrechi. Nou ka kache l, nou ka montre tou li, epi ki pral kontinye travay. Yon lòt bagay nou ka fè se, nou pa gen aktyèlman defini fonksyon sa a hideTheBox anvan nou rele fonksyon an klike sou. Se konsa, olye pou yo defini fonksyon an ak rele hideTheBox, nou ap sèlman ale nan rele l 'si se bagay sa a klike. Se konsa, nou ka defini li anonim nan isit la, ki se yon karakteristik ki JavaScript te genyen an. Ou ka defini yon fonksyon; nòmalman, nou ta ka di hideTheBox fonksyon ak agiman, men olye, nou ka jis di fonksyone pa gen agiman, kòmanse atèl a Curly defini fonksyon an, fèmen ki atèl Curly, ak Lè sa a, jis defini fonksyon an nan isit la, nan parantèz nan premye ak parantèz ki sot pase a ki koresponn ak agiman yo nan fonksyon an klike sou. Se konsa, nou ap pase nan fonksyon sa a, nou ka kopye liy sa a nan kòd dwa isit la, ak ki pral fè egzak menm bagay la. Epi, koulye a nou pa gen fonksyon sa a fadeTheBox o aza ki chita alantou pou okenn rezon aparan. Te fonksyon ki defini anonim, li pa gen yon non. Li pral sèlman egzekite lè nou klike sou bouton an bwat. Se konsa, entérésan yon fwa plis, yon sèl fwa pi plis, epi ou ka wè ke li toujou ap travay. Epi sa a, ki jan ou kreye evènman yo. 

Gen yon anpil nan evènman diferan ke nou kapab itilize. Mwen pral chanje tounen nan lè l sèvi avèk konsole a jis montre w kouman sa yo travay. Idantite ki yo pou chak nan sa yo koresponn ak chak bwat. Se konsa, ti kare sa a se klike sou ID, sa a se yon sèl ID kle, ak sa a se yon sèl ID sourit. Youn nan bagay plis se ke gen nan fonksyon sa a aksyon; olye ke tape li soti chak fwa, Mwen aktyèlman pran devan ak defini fonksyon sa a aksyon desann isit la. Li fè menm bagay la kòm fonksyon an hideTheBox. Li vin bwat sa a ak swa disparet li soti oswa disparet li pous Ak Se poutèt sa nou ap kapab itilize li isit la. Se konsa, si nou klike sou sa a ID klike sou, nou vle fè bwat la disparèt oswa repwodwi. Li nan menm bagay la kòm bouton an ke nou te nan glise an dènye. Koulye a, apre nou fin rele sa, nou kapab klike sou sa a ansanm ak ti bwat la pral disparèt, Lè sa a, klike sou l 'ankò ansanm ak ti bwat la ap repwodwi. Sa a trè senp. Klike sou doub fè menm bagay la, eksepte li mande pou yon klike sou doub. Se konsa, si ou klike sou li yon fwa, epi klike sou l 'ankò pa gen anyen ki pral rive, men si ou doub klike sou byen vit, li pral disparèt. Si ou doub klike ankò, li pral tounen. Se konsa, sa a, se trè senp. D 'klavye se kalite etranj, mwen pa panse ke li aktyèlman ap travay nan egzanp sa a paske kle a desann, moute kle a ak kle laprès ak lòt aksyon kle aktive pa gen pwoblèm sa eleman ou mare l 'bay. Pou egzanp, menm si mwen mare kle desann nan kò oubyen yon lòt bagay nèt, Lè sa a, li ta toujou aktive pa gen pwoblèm - li an pa espesifik. Mwen pa gen yo dwe klike sou sa a ak laprès yon kle fè anyen disparèt. Li ta dwe aktive kèlkeswa sa ki eleman mwen se kounye a pous Se konsa, sa yo pa aktyèlman ap travay nan egzanp sa a paske li pa rekonèt m 'tankou k ap antre nan D' nan div a opinyon klavye. 

Men, si ou gade nan aksyon sa yo sourit, youn nan premye se hover, epi li ka fè kèk nan sa a lè l sèvi avèk CSS. Si ou itilize CSS, ou kapab kreye li pou ke si ou hover sou yon bagay, Lè sa a, chanjman style li yo. Men, lè l sèvi avèk jQuery ou kapab chanje estil yo nan lòt bagay yo tou. Se konsa, pou egzanp, nou ap ale nan rele aksyon si nou hover sou sa a DIV. Sa vle di si nou hover sou li, Lè sa a, bwat la pral disparèt. Si nou avanse pou pi lwen l ', bwat la ap repwodwi. Si nou rele sa a ak hover sou li, ti bwat la disparèt, ak le pli vit ke nou avanse pou pi lwen, li vini tounen. Si nou rele fonksyon sa a hover sou ID an sourit, ki koresponn ak sa a bwat postal, Lè sa a, si nou hover sou bwat la, Lè sa a, bwat la aktyèlman ap disparèt - li an ke yo te Funky kounye a, men - si nou avanse pou pi lwen li, li pral repwodwi. Kounye a li nan bak pou kèk rezon. Sourit la antre nan ak fonksyon deplase sourit se yon ti jan ki similè yo, men yon ti kras diferan. Sourit antre nan sèlman aktive lè sourit la antre nan ti bwat la, jan yo espere. Se konsa, si ou deplase nan li, li pral disparèt. Men, li pa pral repwodwi lè ou avanse pou pi lwen; ou pral gen pou avanse pou pi tounen sou li pou l 'bay tounen. Genyen tou fonksyon an deplase sourit, ki pral aktive chak fwa sourit la se menm prezan nan bwat la. Se konsa, li pral jis kenbe sou prale a, manyak nan ak soti. Men, li la aktyèlman antre - li sanble tankou li nan jis manyak nan ak soti, men li la aktyèlman antre yon anpil plis aksyon pase sa a, Se konsa, lè ou avanse pou pi lwen li pral jis kenbe pral paske li louvri sesyon tankou yon mil nan yo. Petèt pa yon mil. Petèt senk. Li journaux plis pase sa. Pwen an se yo, tout aksyon sa yo sourit, gen yon anpil nan yo. Ou ka li moute sou yo menm ki lòt yo, men yo, yo tout yon ti kras diferan, epi ou ka chwazi kèlkeswa sa ki yon sèl ou bezwen pou kèlkeswa sa ki objektif espesifik w ap eseye fè. 

Bagay nan pwochen mwen pral pale sou se Ajax. Ajax, mwen konnen nou pa t 'kouvri JavaScript nan kòm anpil pwofondè ane sa a, se konsa mwen jis pral pale de Ajax an jeneral pou yon minit. Ajax kanpe pou asenkron JavaScript ak XML. Li nan fondamantalman, pou egzanp, lè w ap sou Facebook ak li pouse ou yon notifikasyon, sa a, se paske Ajax ap kouri sou navigatè entènèt ou. Chak koup la segonn navigatè entènèt ou la aktyèlman ale nan serveurs Facebook a, mande yo, ou gen anyen nouvo pou m ', ak Lè sa a li rive tounen ba ou. Sa a pèmèt ou voye demann nan yon sèvè san yo pa aktyèlman gen chaje paj la. Se konsa, nòmalman, si w ap sèlman lè l sèvi avèk PHP ak baz done a, ou gen rafrechi paj an anvan ou ka jwenn nouvo enfòmasyon ki soti nan sèvè an. Men, lè l sèvi avèk Ajax, ou ka rale pou sa nouvo enfòmasyon pou yo toujou, oswa rale pou li lè ou klike sou yon bouton oswa yon bagay tankou sa. Se konsa, sa a pèmèt nou voye demann san yo pa rupture paj la, epi nou ka itilize swa JWENN oswa POST demann. 

Jwenn demann yo, pou egzanp, si ou pou fè pou Google.com ak fè q = egzamen an. Sa a ba yo yon tès rechèch. Epi sa a, yon demann jwenn paske li pase nan sa yo paramèt nan URL nan tèt li. Yon demann POST se kòm si w ap voye yo atravè post. Se tankou ou mete l 'nan yon lèt ak bato li koupe yo: men yo pa aktyèlman wè sa ki. Yo ap pa vizib nan URL la. Ou pa ka dirèkteman tape l 'nan; ou gen voye li prèske an kachèt. Li nan nan yon pòs. Men, lè l sèvi avèk jQuery, ou kapab fè JWENN ak apre demann anpil pi fasil pase nòmalman ou ta ka lè l sèvi avèk jis plenn JavaScript. Ou ka sijè rechèch APIs lè l sèvi avèk JWENN demann, epi ou ka tcheke tou pou enfòmasyon pou ouvri sesyon. Nan paj kap vini an, mwen te kreye sa a, ki mande, "Ki sa ki nan pou manje midi?" lè l sèvi avèk Harvard manje API a, se konsa kite a rale ke yo. Sa a se jis yon egzanp sou kouman ou ka itilize jQuery fè yon demann ale nan yon API epi pou yo jwenn enfòmasyon tounen soti nan li. Se konsa, nou vle wè meni an pou jodi a, e nou vle wè sa ki la pou manje midi. Isit la nan URL la yo kreye yon demann jwenn nan jQuery. ou itilize $ la. jwenn fonksyon. Agiman an premye se URL la, se konsa egzakteman sa w ap rekèt. Lè sa a, agiman nan pwochen se yon fonksyon ki ègzekutra lè demann lan jwenn se konplè. Se konsa, ou voye koupe kèk demann nan sèvè a, rete tann pou l 'bay tounen. Lè li 'tounen an, w ap ale nan pran kèk aksyon ak done yo ki nan tounen soti nan sèvè an. Se pou yo ale pi devan epi Kòd sa a kòm byen. Mwen pa t 'Kòd sa a swa, sou rezon. Isit la nan todo la. Premye a tout, se pou yo sèvi ak obligatwa a evènman Konsa, lè sa a se bouton bourade, nou voye sou yon demann jwenn. Men, lè ki jwenn retounen demann ak kèk done, nou pral ekri l 'nan sa a div ID info repa. Premye a tout, se pou yo chwazi ID a bouton manje. Lè li nan klike, nou vle li fè yon bagay. Se pou yo jis fè li yon fuction anonim, tankou anvan. Èske vlope sa yo aparèy òtopedik Curly, ak lè se bouton sa-a bourade, nou vle voye yon demann jwenn yo tcheke sa ki nan pou manje midi. Pou fè sa, nou ka jis tape nan $. Jwenn. Sa a se yon fonksyon jQuery, lè l sèvi avèk siy a an dola. Li pran yon koup la agiman. Yon sèl an premye se URL la, yon sèl la se dezyèm fonksyon an kalbak, fonksyon an ki rele lè sa demann aktyèlman tounen lakay la. Se pou yo jis bati URL la an premye. Nou ka jwenn li nan API a David ekri yo. Ale isit la, nou ka wè ke li nan food.cs50.net/api/1.3/menus, ak Lè sa a ou jis pase nan non yo nan paramèt yo ke ou ta renmen. Se konsa, paramèt 1 valè 1. Li sanble ke dat estanda, kòmanse dat, défaut jodi a si ou pa antre nan anyen, ak dat fen tou défaut jodi a si ou pa antre nan anyen. Sa a ki sa nou vle. Nou vle jis jwenn enfòmasyon an pou jodi an. 

Nou vle fòma a yo dwe nan JSON. Se jis abitrè; ou ka sèvi ak nenpòt ki fòm ke ou vle. Ou kapab sèvi ak CSV, men JSON se JavaScript Notasyon objè. Li trè fasil pou JavaScript a konprann ki sa sa vle di, epi nou ka enprime li pi fasil ki fason. Se konsa, kite a mande l 'nan JSON, ak manje midi demann kite a. Se konsa, manje = manje midi. Jis ekri sa ki URL, nou tounen isit la. Genyen meni. Paramèt an premye se pwodiksyon = JSON paske se sa nou vle, epi ou separe paramèt yo ak yon 'ak'. Paramèt la se dezyèm - Mwen pa sonje. Repa. Men, nou vle manje midi = repa. Ou ka fè tès sa a URL pa sezisman l 'nan navigatè ou a ak ale nan li. Li pral ba ou kèk pwodiksyon. Se jis nan yon pakèt moun sou bagay sa a, se pou manje midi. Li nan nan fòma sa a lèd. Nou vle enprime li sou paj nou an nan yon fòma pi byen. Se konsa, URL la ki kòrèk, kounye a nou jis bezwen ekri yon fonksyon yo rele tounen lè demann lan se siksè. Fonksyon sa a pral aktyèlman pran yon agiman. Li pral done. Done a se sa ki ap vin tounen soti nan demann lan jwenn apre yo fin demann lan jwenn fè. Nou ka fè aparèy òtopedik yo Curly; nan isit la nou ekri fonksyon an anonim ki ègzekutra, lè l sèvi avèk ki done lè nou jwenn enfòmasyon an tounen. Se konsa, done, lè nou tape nan sa a URL, sa a se sa done nan ale nan sanble. Li nan pral fè sa a fil gwo. Men, bagay la bon se, JavaScript ka analyzes li lè l sèvi avèk fonksyon an JSON.parse. Se konsa, kite a kreye yon varyab ki rele New done analyzes. Men, done analyzes se yon etalaj de objè yo. Chak objè gen enfòmasyon tankou - byen, kite a pran yon gade. Li te gen yon dat, manje yon, kategori, resèt yo, tout bagay sa a ak lòt. Se konsa, kite a jis enprime soti Non a pou chak yon sèl. Se pou yo répétèr sou etalaj la antye nan bagay ke nou jwenn tounen soti nan li, ak jis enprime soti chak yon sèl - enprime soti non an nan chak yon sèl. Sa a se yon pou bouk. 

JavaScript gen sa a sentaks itil kote ou ka kreye yon varyab ak bouk sou yon etalaj, ak var mwen se jis iterator a, se konsa olye pou yo gen fè var mwen = 0, mwen te mwens pase longè a, mwen + +, ou ka jis fè var mwen an parcouru done. Nan egzanp sa a, parcouru done (mwen) ap koresponn ak eleman aktyèl la nan etalaj la, objè a vrè. Epi nou vle jwenn non an soti nan li. Se konsa, kite a jis fè Non. Epi bagay la dènye se, nou ap ale nan gen kèk jQuery ankò. Aktyèlman ajoute li nan div a, sa a div info manje sa a, se kounye a vid. Se konsa, kite a chwazi sa. Nou pral sèvi ak jQuery ak chwazi manje ID div info, oswa ID info manje, regrèt. Nou vle kole sa a. Si nou te fè tès, pou egzanp, li ta jis recouvrir li chak fwa sèl. Se konsa, nou ka jis kole sa a. Eleman ki la kounye a nan etalaj la, nou pral jwenn non an soti nan li, epi n ap kole li nan fen a nan div an ID info repa. Lè sa a, jis fè li gade cleaner, nou pral tou kole yon ti repo liy se konsa li a pa tout sou yon sèl liy. Se konsa, si tout bagay ale byen, ki ta dwe bon - premye nan tout, nenpòt lè sa a se bouton klike, li pral voye sou yon demann jwenn sa a URL. Lè done a vini tounen soti nan li, li pral analyzes li, vire l 'nan JSON, bouk sou etalaj la tout antye ki reprezante ki done, ak Lè sa a kole non ak yon ti repo liy nan chak liy sa a nan ID info manje ki te deja vid. Se konsa, pral tounen nan paj sa a, nou pral rafrechi, klike sou, chèche konnen - li pa travay. Sa a malere. Lè sa a se kote debogaj vini pous Index.html, liy 1. Sa a ki enteresan. Tout dwa, byen, olye ke depanse tan ap fè sa a, mwen jis ale nan rale moute dosye a fè sa m 'genyen, ki se vèsyon an fin fèt. Mwen pa si sa ki diferans lan se, men nou ka jis louvri sa a moute olye. Lè nou ale nan Ajax a, ak sa a yo ta dwe travay kòrèkteman. Sa se sa ki te pou manje midi jodi a, nan pa gen lòd patikilye, ki gen quotes bò kote l ', se konsa li pa bèl la. Men,, evidamman, si ou te fè sa pou yon pwojè final la, ou ta fè l 'gade pi byen. Men, sa se sèlman yon egzanp senp nan ki jan ou fè demann lan ap resevwa. Men, si nou gade nan Kòd aktyèl la, mwen devine, mwen se trè asire w li la toujou bèl anpil menm bagay la. Oh, mwen bliye konvèti li nan yon fisèl, ki nan li. Pa gen, li la toujou pa ap travay. Kèlkeswa, isit la nan Kòd aktyèl la ranpli pou ki sa sa a ta dwe gade tankou, ak li fè sa menm bagay la kòm sa m 'jis aplike. Lè ou klike sou bouton an, li itilize JWENN JSON otomatikman analyzes done yo. Li pran done yo tounen soti nan li epi li pasan nan etalaj la tout antye ak simagri soti - nan tou sa a pou manje midi jodi a, non an nan li, ak jwen yon ti repo liy yo apre chak liy. Sa a ki jan ou sèvi ak fonksyon an jwenn. 

Ou kapab tou itilize POST, ki mwen pa t 'gen tan yo ekri moute yon egzanp pou li, men nou ka gade nan dokiman an. Si ou gade nan jquery.post, ou ka wè ke li nan prèske menm bagay la. Ou gen yon URL, men olye pou yo pase paramèt lè l sèvi avèk - jis mete yo nan fisèl la pou URL nan tèt li, ou gen yo pase nan sa a varyab done ki se fondamantalman yon etalaj, yon diksyonè ki kat paramèt nan valè. Ou pase ke nan, epi ki voye yo nan lè l sèvi avèk yon pòs. Men, yon fwa ou gen sa, lè sa a ou ka gen yon fonksyon siksè ki ègzekutra lè done yo la tounen. Sinon, li nan ekzakteman menm bagay la. Se konsa, lè l sèvi avèk POST, ou ta ka vle itilize POST, pou egzanp, si w gen yon fòm opinyon ou kite pèp modpas D 'nan li, epi voye sa yo modpas sou nan do-fen script ou a, yo tcheke nan baz done a si wi ou non ki itilizatè a valab oswa ou pa. Ou ka fè ke tout lè l sèvi avèk jQuery olye pou yo gen rafrechi paj an nan tout. Sa a ki jan mwen aplike nan blog la ke mwen te montre ou pi bonè. Si nou ale nan pòtal la fen epi louvri sesyon soti, ale soti, Log deyò pa travay. Oke, kite m 'jis louvri l' nan yon lòt fenèt. Isit la, gen yon modpas, epi mwen te ale nan tape nan yon bagay o aza. Li pa travay, men ou ka wè ke nou pa t ' gen aktyèlman yo rafrechi paj an nan tout. Kòd la, si ou vle gade nan li, se tout ki disponib nan isit la. Se konsa, kòd la mwen te ekri ane pase a nenpòt moman. Kòm ou ka wè isit la, nou ap voye yon demann POST. Mwen gen yon dosye rele login.php nan fen a tounen, ki chèk si modpas la se ki valid. Paramèt yo nou pase nan yo se modpas, trase D 'nan sa a, se nan bwat sa a D' kounye a. Men, lè done la tounen, nou tcheke. Si done a se fo, Lè sa a nou di kòrèk modpas, glise li, ak jis fè li disparèt apre sa. Sinon, nou chaje paj la admin. Lè sa a te tout fè lè l sèvi avèk JSON. Nan sa a liy anpil nan Kòd la, ou ka jis pase done yo nan fen a tounen, tcheke si li la kòrèk, tcheke si ou louvri sesyon an kòrèkteman, ak aktyèlman reponn li, Redireksyon moun lan nan paj ki kòrèk la oswa ou pa kite yo ouvri sesyon an epi di yo ke yo te gen yon modpas kòrèk. Se konsa, sa a, se yon egzanp sou kouman ou kapab itilize jQuery POST voye yon demann POST nan fen do ou, tcheke si yon moun nan louvri sesyon an kòrèkteman. 

Tout dwa, se konsa ke nan tout egzanp yo mwen te gen, ansanm ak tout bagay la mwen te vle kouvri. Sa yo se bagay sa yo pi gwo ki jQuery pèmèt ou fè: chwazi eleman, modifye yo lè l sèvi avèk Dom manipilasyon, ou ka ajoute efè, aktive bagay sa yo sou evènman sèten, epi tou li fè demann Ajax trè transparans ak byen fasil. Se konsa, di ou mèsi pou vini oswa l ap gade, epi si ou gen nenpòt kesyon, jis kite m 'konnen. Yeah? [Elèv] Retounen lè ou te montre, ou te gen JSON apre demann lan POST nan quotes, epi mwen te jis mande sa ki ki te fè sa. >> Yeah, mwen wè. Kesyon an te ke, nan egzanp lan mwen jis te montre, te gen JSON a mo nan site alantou an - Mwen pral jis rale l 'ankò - alantou fonksyon an POST. Mwen jis rale l 'moute nan montre. Se konsa, isit la nan demann sa a POST, ak gen nan sa a JSON nan site. Sa jis defini sa n ap tann pwodiksyon an yo dwe. Se konsa, si nou pase nan JSON kòm kalite a te espere done, li nan pa yon kondisyon, men si nou pase l 'nan, Lè sa a, done yo pral otomatikman parcouru kòm JSON. Se konsa, nou pa bezwen rele fonksyon an analyzes JSON sou li, li pral jis rive otomatikman. Men, si ou pran yon gade nan dokiman an pou POST, gen sa a varyab di ki kalite done, ki kalite done atann nan sèvè a. Li défaut nan yon devine entelijan ki ka sa ki mal, konsa ou ka kite li vid, men li jis ki kalite done nan kodaj ke w ap itilize, si li nan JSON oswa XML oswa yon lòt bagay. 

Nenpòt lòt kesyon? Tout dwa. Si w gen nenpòt lòt kesyon, santi yo lib yo voye yon imèl ba m ' nan vshekhawat@college.harvard.edu, ak glisad yo ak kòd yo ta dwe disponib sou entènèt trè byento. Bon chans ak pwojè final ou a, espere ke ou itilize jQuery. [CS50.TV]