[Powered by Google Translate] [Seminaar: jQuery] [Vipul Shekhawat, Harvard Universiteit] [Hierdie is CS50.] [CS50.TV] As jy die volgende saam by die huis, jy kan eintlik toegang tot my skyfies aanlyn deur te gaan na hierdie skakel. Dit is TjjRWj, op bit.ly. Jy kan ook net na die URL direk, wat cloud.cs50.net / ~ vshekhawat, wat is my naam, en jQuery. Ek raai u aan om te volg saam as jy kyk by die huis, en as jy hier is, ook, want dit is 'n mooi interaktiewe aanbieding. 

So vandag is ek gaan om te praat oor jQuery, en die eerste vraag is, Wat is jQuery? Hierdie jaar het ek weet julle nie bedek het JavaScript in soveel detail as wat ons in die afgelope jaar. JavaScript is, die eerste van alles, net 'n kliënt-kant taal wat jy gebruik skrifte en kode uit te voer op elke gebruiker se rekenaar. So jy het 'n bediener wat bied web bladsye aan mense, maar jy mag dalk wil om dinge te doen op hul masjien, vra hulle masjien versoeke te stuur na jou bediener elke 30 sekondes of iets soos dit. Jy kan dit doen met behulp van JavaScript. JQuery bied net meer funksies op die top van JavaScript wat nie ekstra goed vir jou. As jy kyk na die inhoud op die top, wat beskryf 'n paar van die dinge wat jy kan doen. So algehele, was dit geskep het in Januarie 2006. Dit is die eerste keer swanger geword van in Augustus 2005. Dit is al vir 'n paar jaar, en dit is regtig deel van die nuwe Web 2.0 beweging wat is gemaak op die Internet so blink. Dit is die mees algemeen gebruik word JavaScript-biblioteek. Meer as 19,6 miljoen, webwerwe is om dit te gebruik, en die gebruik is nog steeds volgens builtwith.com, wat blykbaar, oor die afgelope jaar, het net voortdurend toenemende redelik lineêr. Onder die top 10 miljoen webwerwe, is daar steeds - sowat 40% van hulle is op die oomblik wat dit gebruik. Facebook gebruik nie, baie ander webwerwe wat tans gebruik. Jy kan kyk na die statistieke op jou eie, as jy wil. En jy kan dit wettig vertel, want dit het 'n fondament en 13 raadslede, saam met 'n span van 20 mense wat werk op dit op 'n gereelde basis. So dit is baie wyd gebruik word, het dit 'n org URL., Dit is fancy, dit het spin-offs vir ander dinge, so dit is 'n groot deal. 

Hoekom moet jy dit gebruik? JQuery is baie lig. Dit beteken dat dit nie 'n groot lêer. Jy kan dit aflaai die minified lêer, wat sonder al die wit spasie en kommentaar, en dit is slegs 32 KG. So is dit maklik om net te gooi op jou web bladsy en net om dit te gebruik. Dit is ook baie effektief geskryf is, sodat dit nie neem 'n baie van - dit nie stadiger jou webwerf veel as jy dit gebruik. Dit kan jy implementeer dinge wat voorheen nie realiseerbaar. Daar is 'n paar aspekte van die funksies, soos die skep van animasies, wat normaalweg sou baie, baie moeilik om te doen. Maar in jQuery hulle is eintlik baie eenvoudig. En daar is 'n paar dinge wat irriterende te doen, moontlik in JavaScript, soos die stuur van die POST versoek, maar 'n versoek om 'n bediener te stuur, jy het om te skryf vyf of ses of sewe reëls van die kode. Nou kan jy doen dit net in 'n enkele lyn van kode, in 'n enkele funksie oproep. Wat vereenvoudig regtig 'n baie van die dinge wat jy doen. En al die cool kinders is wat dit gebruik. Teen daardie, ek bedoel my. In my finale projek verlede jaar, wat news.whrb.org, Dit is vir die radiostasie, het ek hierdie blog wat as gasheer van al die programme wat ons gedoen het en die MP3-lêers vir hulle. Jy kan blaai deur die verlede shows, en dit is alles gedoen met behulp van jQuery. Jy kan jou vertel gevolg van al hierdie animasie, wese. So as jy - as jy 'n nuwe pos, jy sien hierdie klein slideDowns; dit is al gedoen met behulp van jQuery. En dit vervaag - so dat die soort dinge is al gedoen met behulp van jQuery, en jy het nie om voortdurend die bladsy te herlaai om die webwerf te navigeer. Nog 'n cool ding wat gemaak is met behulp van jQuery is hierdie aanbieding. Ek is die gebruik van hierdie open source ding genaamd scrolldeck, wat iemand geskryf het op die top van jQuery. As jy eintlik kyk na die bron, kan jy sien dat hulle is die gebruik van hierdie dollar teken, dollar tekens gebruik word in jQuery om aan te dui dat 'n funksie is 'n jQuery funksie. So hulle definisie van 'n wrapper op die top van jQuery wat u toelaat om 'n aanbieding te maak soos hierdie, en jy kan sien dat hier is hulle die oorspronklike jQuery lêer is, insluitend en dit is wat jy het om te sluit as wil jQuery te gebruik in jou eie webtuistes. 

Raak op dat, hoe jy dit installeer? Jy kan net gaan na jQuery.com en die aflaai van die lêer, voeg dit by 'n web gids en sluit dit. Dus net bo-op, in die kop tag van jou HTML-lêer van jou hoof HTML-lêer, net dat die lyn van die kode met die korrekte weergawe vir watter weergawe van jQuery wat jy gebruik. Jy kan dit aflaai deur te gaan na jQuery.com, kliek "aflaai jQuery," en jy het dit. Dit is dit. En eintlik, kan ons 'n blik op hoe dit lyk. As jy op laai hier, jQuery is dit. Dis net een groot JavaScript lêer wat doen al die magic dinge vir jou. Dit is die minified weergawe, wat is nie leesbaar nie. Jy kan ook kyk na die ontwikkeling weergawe, wat is leesbaar maar nog steeds baie, baie lang. Dit is 'n baie dinge in daar. Jy kan ook 'n skakel na Google se gasheer weergawe van dit. Sodat sal toelaat dat jy net staatmaak op Google om dit te voorsien. Hulle bied elke weergawe van dit, te alle tye beskikbaar. So jy kan waarskynlik staatmaak op Google dit aan te bied vir jou. Of jy kan 'n skakel na jQuery se eie jongste weergawe. Hulle het 'n URL wat altyd opgedateer na die nuutste weergawe. Dit is jQuery-jongste, en daar is 'n probleem met dit, wat is dat indien die opgedateer jQuery en 'n paar van die vorige funksie hulle word retrograded of afgekeur, Dit mag dalk nie - dit kan begin om nie meer te ondersteun. So as jy 'n webwerf met behulp van weergawe 1.8.2, teen die tyd weergawe 2.7 uitkom sommige van die funksies wat jy geskryf het nie meer werk nie. Dus is dit beter om net die aflaai van die 32 k lêer, sit dit op jou web bladsy, en dit sal vir ewig te werk. 

Ek gaan om voort te gaan en begin praat oor die werklike funksie van jQuery. Die eerste ding is keurders. Dit is wat jQuery is aanvanklik swanger te voorsien. En jy kan op dokumentasie om te kyk na die gedetailleerde dokumentasie vir die keurders ek gaan word oor. Die idee agter die keurders is dat jy HTML-elemente op 'n bladsy kan kies. Elemente op 'n bladsy het ID's en klasse en ander identifisering van aspekte aan hulle. Daar is ook - they're in verskillende ordes. Sommige van die tyd wat hulle in mekaar nes is. JQuery kan jy eenvoudig navrae wat herwin elemente van die bladsy op te rig. Dan kan jy manipuleer hierdie elemente met behulp van jQuery funksies, wat is die manipulasie artikel ons sal kry om later. Jy kan dit verander die HTML, verander die CSS, jy kan ook lewendig en voeg funksies wat aktiveer op sekere gebeure. So, byvoorbeeld, as daar iets is gekliek het, wil jy iets om te gebeur, wat jy kan doen met behulp van jQuery as well. En daar is 'n groot aantal van maniere elemente te kies. Die meeste van hulle het ek nog nooit gebruik nie, maar daar is die basiese kinders, wat is redelik belangrik. Die element selector, byvoorbeeld, as jy net kies enigiets dit is 'n div - Ek het eintlik die kode oop vir hierdie skyfievertoning. So, byvoorbeeld, hier is die eerste skyfie. Hier het ons 'n div. As ons eintlik kies al die divs op die bladsy, dit sal net vir ons 'n verskeidenheid van al die divs wat bestaan ​​in hierdie lêer. Die ID selector kan jy kies iets met 'n gegewe ID. So as dit, byvoorbeeld, hierdie ding het die ID "wat," en as ons dit gedoen het met # wat in plaas van 'n paar ID, sou dit net weer 'n skikking wat 'n enkele element en dit is dat element van die bladsy. Ons kan ook kombineer keurders op hierdie manier deur met net kies dinge met ID's wat divs. So ja. Net kies divs dat daardie ID. Vir die klas gebruik jy net 'n dot, dit is dieselfde ding as CSS. Afstammeling werk ook, so as jy 'n klas en dit het nes elemente binne dit - so, byvoorbeeld, daar is 'n paar klas en dit het 'n anker tag om te skakel na 'n ander bladsy, jy kan hierdie sintaksis gebruik om die skakel te haal. Jy kan ook kies verskeie dinge op een slag, net skei dit met kommas, gebruik om enige selector jy wil, en jy sal kies almal van hulle in 'n keer, in 'n enkele skikking. En dan is daar ook die nie selector, sodat jy kan kies al divs wat nie 'n spesifieke klas. En dit is net 'n nuttige manier om 'n inleiding tot hoe hierdie seleksie werk. Ek sal jou wys 'n paar konkrete voorbeelde in 'n sekonde. 

Gevorderde keurders is - dit is net 'n paar voorbeelde. Daar is dosyne van hierdie, maar as jy wil al die beeld tags te kies binne 'n paar element, dan kan jy net doen: image. As jy wil hê dat die ewe elemente te kies, byvoorbeeld, indien daar is 20 van hulle, jy wil 0, 2, 4, 6 en so aan om te kies, jy doen: selfs, of jy kan dit ook doen: vreemd. Dit is pseudo-keurders, wat beteken dat hulle eintlik bereken elke ander element eerder as om net te gaan en die kies van almal van hulle. Jy kan ook - elke element kan ook spesifieke eienskappe. So, byvoorbeeld, klas = sentrum is ook 'n kenmerk. Vir hierdie ankertag, href, hiperteks verwysing, is 'n kenmerk ook. So jy kan kies iets wat skakels na 'n spesifieke bladsy of net - dit is werklik die algemeen. Jy kan kies om enigiets met 'n kenmerk wat jy wil. En dan is ook die eienskap bevat. As jy, byvoorbeeld, wou al die insette elemente te kies wat die woord "pass", soos die naam van hulle, Indien 'n bladsy 'n intree teks blok Dit is genoem "wagwoord", wat sou 'n manier wat jy kan kies wat wees. En daar is nog baie meer. Jy kan voort te gaan en kyk na die dokumentasie en kyk spesifieke voorbeelde van hoe dit werk. 

Die volgende ding is DOM manipulasie. Nadat ons kies elemente, sal ons wil eintlik doen dinge saam met hulle. Tot dusver het ons nie gekyk dat almal, maar as jy kyk na die dokumentasie, daar is regtig 'n baie wat ons kan doen. Op hierdie punt, ons gaan elemente op hierdie aanbieding te kies en manipuleer hulle met behulp van jQuery. Want dit is geïmplementeer met behulp van jQuery, ons het toegang tot die jQuery biblioteek, en ons kan gebruik om daardie funksies binne hierdie kode. Een nuttige ding wat jy dalk nie weet oor die konsole. En Google Chrome is wat ek gebruik. Jy kan druk alt opdrag J of alt beheer J die konsole te open. In Firefox ek dink dit se opdrag verskuiwing K of beheer verskuiwing K. In Safari jy het om te gaan 'n paar instellings verander. Daar is 'n skakel as jy wil om dit te doen nie, maar ek raai om Chrome of Firefox. So laat ons oop te maak die konsole, dit is hier. Dit laat jou toe om basies te doen net wat jy wil. Sodat jy kan tik net in 'n veranderlike genaamd x, x = 5, laat ons sien wat x + 2 is. Jy kan selfs iets soos CS + Kom ons kyk, x + 45, wat sal wees CS50. Jy kan nie net doen 'n tipiese JavaScript dinge. Maar jy kan dit ook doen jQuery in hier. 

So laat ons kyk na hierdie eerste aspek hier. Ons gaan 'n veranderlike genoem HTML, wat 'n string te skep. Dit het 'n paragraaf merker in dit, wat 'n paar nuwe teks genoem. So ons het hierdie HTML, dit is 'n nuwe teks, in paragraaf tags. Nou is ons eintlik wil dit toe te voeg aan die bladsy. Ek het dit opgerig sodat die HTML vir hierdie paragraaf, hierdie titel hier, is append ID. As ons kies append ID en dan voeg by dit die HTML veranderlike Ek het net geskep is, dit sal die HTML voeg aan die einde, net ná hierdie paragraaf tag. So as ons dit doen - wat ons gekies het hierdie paragraaf, en ons het genoem die append funksie met die HTML veranderlike Ek het net bygevoeg, dit sal die nuwe teks reg daar byvoeg op die bladsy. Ons kan ook plaas jou, wat beteken dat dit sal voor die tyd nie, aan die begin van daardie element. So is daar 'n paar nuwe teks aan die begin en daarna. Ek kan voort te gaan en versterk om ontslae te raak van hierdie dinge wat ek nou net gedoen het. Maar dit is 'n voorbeeld van hoe jy die plaas jou gebruik en voeg metodes dinge op die bladsy te manipuleer, voeg 'n paar HTML. 

Jy kan ook klasse. Terug in hierdie styl lêer, het ek hierdie vir die oorwinning klas wat teks kleur rooi, 'n agtergrond kleur, en 'n teks skaduwee. Dit lyk afskuwelik, maar ek kan eintlik - hierdie paragraaf stem ooreen met die klas ID. So ek kan byvoeg om die klas vir die oorwinning. Ek kan voer dit in die troos, en wat sal verseker dat die klas voeg, en nou lyk dit afskuwelike, as wat verwag is. Die CSS outomaties kry toegepas op die klasse wat jy - As daar is CSS vir 'n klas, is dit outomaties kry toegepas as jy verander die klas van 'n element. Dan kan ons net verwyder dit met behulp verwyder klas. So as jy 'n paar gedefinieerde klasse soos rooi of uitgelig, en dan sal jy wil hê dat die toe te pas elemente, jy hoef nie al die CSS styling elke keer te doen. Jy kan voeg net die klas aan 'n element, en dan sal dit outomaties - dit sal outomaties soek vir die betrokke klas. Ons kan ook verwyder dinge, so ek gaan al die divs te kies op die bladsy en verwyder hulle. Wat is dit gaan lyk? Dit gaan lyk soos niks nie, so daar is eintlik niks oor nie. My aanbieding is weg. Ek kan verfris en bring dit terug, gelukkig, want dit is net die bestuur van 'n keer, maar dit is 'n voorbeeld van die verwydering, as jy wil om heeltemal vernietig 'n element van die bladsy af. 

Jy kan ook oorskryf, en ek gaan al die paragraaf tags te kies op die bladsy en gaan binne-in hulle en vervang alle teks wat hulle het in hulle met net die woord "toets." As jy dit doen, sal jy elke paragraaf te vervang op die bladsy met hierdie toets. Yep. Hulle is almal vervang met die toets. So dit is 'n voorbeeld van die toegang tot die teks en vervang dit. Jy kan ook inligting te bekom, en dit is werklik 'n koel vir die insette bokse. As jy 'n inset boks wat mense dinge tik in, mense tik dinge in dit, Hier het ons kies die insette, enige insette tag met 'n tipe van die teks. In hierdie geval is, is daar net een insette boks in die hele aanbieding so ons sal net kies die eerste een, en dan praat ons van die val funksie op dit. Dit gee die waarde, en vir 'n bydrae boks, die waarde is net wat gebeur om te wees daarin. So as ons dit doen, dit gee net die string dinge. En as ons noem dit weer na die skryf van meer dinge, dit blyk in meer dinge. Dit is 'n goeie manier elemente van 'n inset boks om toegang te verkry, en dan kyk, is dit 'n geldige e-pos adres, is dit 'n geldige datum, byvoorbeeld. Jy kan nie net haal dinge onmiddellik as mense tik, en dan kyk of dit geldig is, stuur dit terug na 'n bediener, enigiets doen wat jy wil met dit. En dit is hoe jy toegang tot dit wat binne die bokse. 

Jy kan ook CSS direk aan te pas, so in plaas van die toevoeging van 'n klas wat 'n paar gedefinieerde eienskappe, jy kan net byvoeg wat CSS jy wil nie. So laat kies liggaam, wat die hele aanbieding, en die kleur is die eiendom wat bepaal wat die kleure van die teks is. As ons dit verander na rooi, sal al die teks in die bladsy te draai na rooi. Ons kan so iets doen agtergrond blou, Daar het ons gaan nie, dit is pragtig. Jy kan enigiets doen wat jy wil met hierdie. Die gebruik van die CSS eiendom, kan jy regtig verander hoe iets lyk op enige tyd. Die volgende ding is effekte. Effekte is basies dieselfde as die wysiging van die CSS, maar hulle eintlik bied 'n paar ekstra animasie om dit te. So in plaas van net vertoon of steek iets of die verandering van die kleur, jy kan eintlik maak dit geanimeerde. Hier is die dokumentasie, as jy 'n blik op die uitgebreide dokumentasie vir dit. Maar ek gaan die belangrikste is om te dek. Daar is op die show en verberg eienskappe. Wys / verberg ID eintlik stem ooreen met hierdie hele boks, so as ek dit wegsteek, sal dit net verdwyn. En ek kan sien dit weer as ek wil om dit terug te kom. En dit is terug. Dit het eintlik nie verdwyn nie, Ek het eintlik nie verwyder dit van die bladsy, ek het net soos die CSS eiendom van sigbaarheid te versteek sodat jy kan nie sien dat dit nie meer nie. Daar is ook gly op en gly; wat u toelaat om hierdie effek te hê. Dit gly up om te verdwyn, en nadat dit verdwyn jy kan gly dit af te maak dit terug te kom. En nou is dit terug. Daar is ook hierdie vervaag effek, wat - vervaag ID ooreenstem met die boks. As ek vervaag dit uit, dan sal dit stadig verdwyn. Ek kan ook vervaag dit in, en dit sal terug kom. Jy kan ook vervaag na, wat spesifiek vir die vervaag funksie. Jy kan dit vervaag tot 'n spesifieke dekking wat jy wil. So as jy vervaag dit stadig tot 0,5, sal dit 'n halwe sigbaar. Ek kan dit na 0,1, en terug na 1 te maak dit ten volle weer sigbaar. Dit is net nog 'n animasie wat jy kan doen. 

Daar is ook die skakel-effekte. So ek gaan die skakel ID, wat ooreenstem met die boks te kies, en op daardie div jy kan bel skakel, as dit is sigbaar sal dit raak onsigbare, As dit is onsigbare sal dit weer sigbaar. So het ek net noem hierdie skakel funksie twee keer, die eerste een was dieselfde as die vel, die tweede oproep is dieselfde ding as 'n show. En jy kan dit ook doen met 'n vervaag skakel, wat nie dieselfde ding nie, behalwe dit eintlik vervaag. En dieselfde ding met die skyfie skakel. Daar is vasgeketting effekte so goed, wat beteken as jy kies 'n element en net noem 'n klomp van die animasie metodes op dit, As jy wil om dit te vervaag, dan gly, en dan weg te steek en dan vervaag in, sal dit doen in 'n ry. So verdwyn, kom terug - vir een of ander rede, die vel het nie gebeur nie. Kom ons probeer om dit uit. Ja, so is dit vervaag uit en dan is dit gly weg. En daar is nog baie meer. Jy kan gebruik om die lewende funksie jou eie animasies te skep, wat redelik kompleks, maar dit bied jou met 'n oneindige rekbaarheid. Jy kan enige vorm van animasie jy wil. Jy kan ook gebruik om tou te ry staan ​​verskeie animasies op 'n tyd. So as jy wil iets om te vlieg oor die bladsy, skyfie uit die top reg aan die onderkant links, kan jy dit doen, en net 'n klomp van die optrede gaan die een na die ander. 

Die volgende ding wat ons gaan om te praat nie, is gebeure. Gebeure toelaat om - so ver, ons het net tik dinge in die konsole en dit is een manier om dit te laat gebeur, maar op 'n werklike bladsy, jy gaan nie in staat wees om maak die gebruiker soort dinge in die konsole. Jy wil dinge vanself gebeur nie. Vir wat, jy hoef gebeure wat aktiveer op 'n sekere gebeurtenis gebeur om te gebruik. Jy kan kyk om die dokumentasie vir die volledige besonderhede. So laat ons sien. Ons wil hê om weg te steek of te wys die boks, maar nou hierdie knoppie dit nie doen nie, want ek het dit nie te implementeer nie. Ek gaan om te gaan na die werklike HTML bladsy. Hier is die skyfie. Daar is 'n div vir die skyfie. Dit het die klas van gly. Daar is die teks. Nou, daar is dié boks en die boks knoppie. Hoe sou ons eintlik maak dit verdwyn? Eerste van alles, laat ons skryf 'n funksie wat maak die boks ID verdwyn. Dit is die sintaksis vir funksie voor, kom ons noem dit net hideTheBox. Dit neem nie enige argumente, want daar is geen argumente wat geneem moet word. Ons kan kies die boks ID. So gebruik die jQuery kies, kan ons kies box ID, en dan maak dit net verdwyn. Kom ons maak dit vervaag. Indien ons hierdie funksie in die werklike troos, Ons kan hierdie funksie definieer; ons kan noem hideTheBox, en dit werk. Maar ons wil dit gebeur wanneer die knoppie eintlik gedruk. Om dit te doen, het ons 'n geleentheid om te gebruik. 'N geleentheid om te bind aan 'n spesifieke knoppie of 'n aksie gebeur, ons het die element wat die geval sal sneller te kies - of wat die geval aktiveer, jammer. 

So eerste van alles, laat ons kies die boks knoppie ID want dit is die knoppie, en nou, vir die knoppie, Ons wil 'n animasie te skep wanneer dit gebruik. So is daar hierdie kliek funksie. Dit laat jou toe om 'n ander funksie om dit te bind. Hierdie funksie neem 'n ander funksie as 'n argument ons kan slaag in die hideTheBox funksie, en wanneer hierdie knoppie gekliek word, daardie funksie sal outomaties voer. So dit sal werk as ons red nie, ek sal verfris, en - 'n sekonde, ek is jammer. Laat my los dit regtig vinnig. Okay. Daar gaan ons. So nou die boks is verdwyn wanneer ons op die knoppie klik. Ons kan ook verander om dit te net fadeToggle, verander dit net om weg te steek of te wys die boks, en dit sal ook te werk, as ons verfris. Ons kan dit weg te steek, kan ons ook wys, en dat ons sal voortgaan om te werk. Nog 'n ding wat ons kan doen is, het ons nie eintlik hierdie hideTheBox funksie te definieer voordat ons die klik-funksie. So in plaas van die definisie van die funksie en roeping hideTheBox, ons net gaan om dit te noem as hierdie woord word gebruik. So kan ons dit definieer anoniem in hier, Dit is 'n funksie wat JavaScript het. Jy kan 'n funksie te definieer; gewoonlik, sou ons funksie hideTheBox sê met argumente, maar in plaas daarvan, kan ons net sê funksioneer geen argumente, begin met die krullerige stut die funksie te definieer, naby dat krullerige stut, en dan net definieer die funksie in hier, binne die eerste hakies en die laaste hakies wat ooreenstem met die argumente van die klik-funksie. So ons is verby in hierdie funksie, kan ons hierdie reël van die kode hier kopieer, en wat sal doen presies dieselfde ding. En nou het ons nie hierdie ewekansige fadeTheBox funksie wat rondsit vir geen oënskynlike rede. Die funksie is gedefinieer anoniem, beteken dit nie 'n naam. Dit sal nie net uit te voer wanneer ons kliek op die blokkie knoppie. So verfrissende een maal, een keer, en jy kan sien dat dit nog steeds werk. En dit is hoe jy skep geleenthede. 

Daar is 'n baie verskillende gebeure wat ons kan gebruik. Ek gaan om terug te skakel na die gebruik van die konsole om net te wys hoe om hierdie werk. Die ID's vir elk van hierdie ooreenstem met elke boks. So hierdie boks is kliek ID, hierdie een is die sleutel ID, en hierdie een is die muis ID. Nog 'n ding is dat daar hierdie aksie funksie eerder as om te tik dit uit elke keer, Ek het eintlik gegaan en gedefinieer hierdie aksie funksie hier. Dit doen dieselfde ding as die hideTheBox funksie. Dit raak hierdie boks en óf vervaag dit uit of vervaag dit in En dit is hoekom ons in staat is om dit hier te gebruik. So as ons op hierdie kliek ID, ons wil maak die boks verdwyn of weer verskyn. Dit is dieselfde ding as die knoppie wat ons gehad het in die laaste skuif. En nadat ons noem dit, kan ons op hierdie en die boks sal verdwyn, kliek dan op dit weer en die boks sal terugkom. Dit is redelik eenvoudig. Dubbel kliek nie dieselfde ding, behalwe dit verg 'n dubbel kliek. So, as jy klik op dit vir eens en klik op dit weer niks sal gebeur nie, Maar as jy vinnig dubbel kliek, sal dit verdwyn. As jy dubbel kliek weer, sal dit terug te kom. So dit is redelik eenvoudig. Sleutelbord insette is nogal vreemd, ek dink nie dat dit eintlik werk in hierdie voorbeeld omdat die sleutel af, sleutel en die sleutel pers en ander belangrike stappe aktiveer nie saak wat element bind jou om dit te. Byvoorbeeld, selfs as ek gebind sleutel tot liggaam of iets anders heeltemal, dan sou dit nog steeds aktiveer maak nie saak nie - dit is nie spesifiek. Ek het nie te klik op dit en druk 'n sleutel om enigiets verdwyn. Dit sou, ongeag van wat element Ek is tans in geaktiveer So hierdie nie eintlik nie werk nie in hierdie voorbeeld omdat dit nie my herken as die aangaan insette in die sleutelbordinsetkeuses DIV. 

Maar as jy kyk na die muis na die gebeure, Die eerste een is hang, en dit kan 'n paar van hierdie gebruik van CSS. As jy gebruik CSS, kan jy dit so dat as jy hover oor iets, dan is sy styl verander. Maar met behulp van jQuery kan jy die style van die ander dinge as goed. So, byvoorbeeld, gaan ons aksie te roep as ons sweef oor hierdie DIV. Dit beteken dat as ons muis oor dit, dan is die boks sal verdwyn. As ons weg te beweeg van dit, sal die boks weer verskyn. As ons noem dit en muis oor dit, het die dosie verdwyn, en so gou as ons weg te beweeg, kom dit terug. As ons noem dit hover funksie op die muis ID, wat ooreenstem met die boks, dan as ons sweef oor die boks, dan die boks sal eintlik verdwyn - dit is wat funky nou nie, maar - as ons weg te beweeg van dit, sal dit weer verskyn. Nou is dit terug vir een of ander rede. Die muis betree en muis beweeg funksies is ietwat soortgelyke, maar effens anders. Muis tik net aktiveer wanneer die muis gaan die boks, as wat verwag is. So as jy beweeg in dit, sal dit verdwyn. Maar dit sal nie weer verskyn wanneer jy beweeg weg; jy het om terug te beweeg op dit, want dit om terug te kom. Daar is ook die muis beweeg funksie, wat aktiveer wanneer die muis is selfs teenwoordig in die boks. So dit sal net aanhou, vervaag in en uit. En dit is eintlik te meld nie - dit lyk soos dit is net vervaag in en uit, maar dit is eintlik te meld 'n baie meer stappe as dit nie, So wanneer jy weg beweeg sal dit hou net gaan, want dit aangemeld soos 'n duisend van hulle. Miskien nie 'n duisend. Miskien vyf. Dit meld meer as dit. Die punt is, al die muis na die gebeure, is daar 'n klomp van hulle. Jy kan lees oor die ander mense, maar hulle is almal effens anders, en jy kan kies watter een jy nodig vir watter spesifieke doel wat jy probeer om te doen. 

Die volgende ding wat ek gaan om te praat nie, is Ajax. AJAX, ek weet ons het nie dek JavaScript in soveel diepte van hierdie jaar, so ek is net gaan om te praat oor Ajax in die algemeen vir 'n minuut. AJAX staan ​​vir Asynchronous JavaScript en XML. Dit is basies, byvoorbeeld, wanneer jy op Facebook en dit stoot jy 'n kennisgewing, dit is omdat AJAX loop op jou webblaaier. Elke paar sekondes jou webblaaier eintlik gaan na Facebook se bedieners, vra hulle, het jy iets nuuts vir my, en dan kom dit terug na jou. Dit laat jou versoeke te stuur na 'n bediener om sonder om die bladsy te laai. So normaalweg, as jy net met behulp van PHP en 'n databasis, jy het die bladsy te verfris voordat jy nuwe inligting kan kry van die bediener. Maar met behulp van AJAX, kan jy trek vir die nuwe inligting voortdurend, of trek vir dit wanneer jy op 'n knoppie of iets soos dit. So dit laat ons versoeke te stuur sonder herlaai die bladsy en ons kan gebruik om óf kry of POS versoeke. 

GET versoeke is, byvoorbeeld, as jy aan te Google.com en doen q = toets. Dit is vir hulle 'n navraag toets. En dit is 'n GET-versoek, want dit is verby in die parameters in die URL self. 'N Post versoek is asof jy stuur hulle deur die pos. Dit is soos jy dit gestel het in 'n brief en stuur dit af aan hulle, maar hulle het nie eintlik sien die inhoud. Hulle is nie sigbaar in die URL. Jy kan nie direk tik dit in, jy het om dit te byna geheim stuur. Dit is in 'n post. Maar met behulp van jQuery, kan jy kry en versoeke POS baie makliker as wat jy normaalweg sou gebruik net plain JavaScript. U kan navraag APIs gebruik versoeke, en jy kan ook gaan vir login inligting. Op die volgende bladsy, Ek het hierdie, wat vra, "Wat is vir middagete?" gebruik van die Harvard kos API, so laat dat tot trek. Dit is net 'n voorbeeld van hoe jy kan gebruik jQuery 'n GET-versoek te doen om 'n API en kry inligting van dit. So wil ons die spyskaart te sien vir vandag, en ons wil om te sien wat vir middagete. Hier is die URL n GET-versoek in jQuery te skep. jy gebruik om die $. kry funksie. Die eerste argument is die URL, so presies wat jy bevraagteken. Toe het die volgende argument is 'n funksie wat voer wanneer die AOO-versoek is voltooi. So jy stuur af 'n paar versoek aan die bediener, wag vir dit om terug te kom. Wanneer dit terug kom nie, jy gaan 'n paar aksie te neem met die data wat terug van die bediener. Kom ons gaan voort en kode Hierdie as well. Ek het nie kode Hierdie óf, met 'n doel. Hier is die TODO. Eerste van alles, laat ons gebruik die geleentheid bindend sodat wanneer die knoppie gedruk word, stuur ons af 'n GET-versoek. En toe wat kry versoek terug met 'n paar data, ons gaan om dit te skryf in hierdie maaltyd info ID DIV. Eerste van alles, laat ons kies die kos knoppie ID. Wanneer dit gebruik het, het ons dit wil hê om iets te doen. Kom ons maak dit 'n anonieme fuction, soos voorheen. Kan toedraai diegene krulhakies, en wanneer dit gedruk word, ons wil 'n AOO-versoek te stuur om te kyk wat is vir middagete. Om dit te doen, ons kan net tik in $. Kry. Dit is 'n jQuery funksie, met behulp van die dollar teken. Dit neem 'n paar van die argumente. Die eerste een is die URL, die tweede een is die callback funksie, die funksie wat genoem wanneer dit versoek eintlik terugkeer. Kom ons bou die URL eerste. Ons kan dit kry van die API wat Dawid geskryf het. Gaan hier, kan ons sien dat dit food.cs50.net/api/1.3/menus, en dan sal jy net slaag in die name van die parameters wat jy wil. So parameter 1 is waarde 1. Dit lyk soos 'n standaard datum, begin datum, verstek na vandag as jy nie doen nie, en die einde datum ook gebreke vandag as jy nie ingaan nie. Dit is wat ons wil hê. Ons wil net die inligting vir vandag. 

Ons wil hê dat die formaat te wees in into. Dit is net arbitrêre, jy kan enige vorm wat jy wil gebruik. Jy kan gebruik CSV, maar into is JavaScript Object notasie. Dit is baie maklik vir JavaScript om te verstaan ​​wat dit beteken, en ons kan druk dit makliker dat die pad. So laat ons vra dit in into, en laat se versoek middagete. So ete = middagete. Net om te skryf dat die URL, gaan ons terug hier. Daar's. Die eerste parameter is uitset = into want dit is wat ons wil, en jy skei die parameters met 'n "en." Die tweede parameter is - ek onthou nie. Maaltyd. En ons wil ete = middagete. Jy kan hierdie URL toets deur te tik dit in jou leser en gaan om dit te. Dit gee jou 'n paar uitset. Dit is net 'n klomp van die dinge wat vir middagete. Dit is in hierdie lelike formaat. Ons wil om dit te druk op ons bladsy in 'n beter formaat. So het die URL korrek is, nou het ons net nodig het om 'n funksie te skryf terug te roep wanneer die versoek suksesvol is. Hierdie funksie sal eintlik neem om 'n argument. Dit sal data. Die data is wat kom terug van die AOO-versoek na die AOO versoek gedoen word. Ons kan dit doen die krulhakies; hier skryf ons die anonieme funksie wat voer, met behulp van die data wanneer ons die inligting terug. So data, wanneer ons getik in die URL, dit is wat die data gaan lyk. Dit gaan hierdie groot string wees. Maar die goeie ding is, kan JavaScript ontleed dit deur die gebruik van die JSON.parse funksie. So laat ons 'n nuwe veranderlike genoem parse data. En parse data is 'n verskeidenheid van voorwerpe. Elke voorwerp bevat inligting soos - goed, kom ons neem 'n blik. Dit het 'n datum, 'n ete, kategorie, resep, al hierdie ander dinge. So laat ons net die druk van die naam vir elkeen. Kom ons Itereer oor die hele spektrum van dinge wat ons terug te kry uit dit, en net uit te druk elke een - die druk van die naam van elkeen. Dit is 'n lus vir. 

JavaScript het hierdie nuttige sintaksis waar jy kan 'n veranderlike en loop oor 'n skikking te skep, en var i is net die Iterator, so in plaas van om var i = 0 te doen, Ek was minder as die lengte, i + +, kan jy net doen var i in ontleed data. In hierdie voorbeeld, sal ontleed data (i) stem ooreen met die huidige element van die skikking, die werklike voorwerp. En ons wil die naam te kry uit dit uit. So laat ons net naam. En die laaste ding is, gaan ons 'n paar jQuery te weer. Eintlik voeg dit by die DIV, hierdie maaltyd inligting div dit is tans leeg. So laat kies nie. Ons sal jQuery en kies ete inligting div ID, of maaltyd info ID gebruik nie, jammer. Ons wil by te voeg by hierdie. As ons dit toets, byvoorbeeld, sou dit net oor skryf dit elke keer. So kan ons net voeg nie. Die huidige element in die skikking, sal ons die naam kry uit dit, en ons sal bygevoeg aan die einde van die maaltyd info ID DIV. En dan net om te maak dat dit lyk skoner, Ons sal ook voeg 'n lyn breek sodat dit is nie almal op een lyn. Dus, as alles goed gaan, moet dit goed wees om - eerste van alles, wanneer hierdie knoppie gekliek word, dit sal stuur af 'n GET-versoek na hierdie URL. Wanneer die data terug te kom van dit, sal dit ontleed dit, draai dit in into, loop oor die hele skikking dat die data, en dan voeg die naam en 'n lyn breek na elke lyn in hierdie maaltyd info ID wat voorheen leeg. So gaan terug na hierdie bladsy, sal ons verfris, kliek, uit te vind - dit werk nie. Dit is jammer. En dit is waar debugging kom in Index.html, lyn 1. Dit is interessant. Alle reg, goed, eerder as spandeer tyd om dit te doen, is ek net gaan trek die gedoen lêer dat ek, wat die voltooide weergawe. Ek is nie seker wat die verskil is, maar ons kan net oop hierdie up plaas. En ons gaan na die AJAX, en dit moet korrek werk nie. Dit is wat was vir middagete vandag in geen spesifieke volgorde, met aanhalings rondom dit, so dit is nie die mooiste. Maar, natuurlik, as jy is om dit te doen vir 'n finale projek jy sou dit beter lyk. Maar dit is net 'n eenvoudige voorbeeld van hoe jy dit doen die AOO-versoek. En as ons kyk na die werklike kode, ek vermoed, ek is redelik seker dit is nog steeds pretty much dieselfde. O, ek het vergeet om dit te omskep in 'n string, dit is dit. Nee, dit is nog steeds nie werk nie. Ongeag, hier is die werklike voltooi kode vir wat dit moet lyk, en dit nie dieselfde ding as wat ek nou net geïmplementeer word. As jy kliek op die knoppie, is dit gebruik KRY into om outomaties die data ontleed nie. Dit neem die data terug van dit en sirkelroetes deur die hele reeks en afdrukke uit die - wat ook al is vir middagete vandag, die naam van hulle, en voeg 'n lyn breek na elke lyn. Dit is hoe jy die AOO-funksie. 

Jy kan ook gebruik POST, wat ek nie tyd gehad het om om te skryf aan 'n voorbeeld vir dit nie, maar ons kan kyk na die dokumentasie. As jy kyk na jquery.post, jy kan sien dat dit amper dieselfde ding. Jy het 'n URL, maar in plaas van om parameters gebruik - net om hulle in die tou vir die URL self, jy het om te slaag in die data veranderlike Dit is basies 'n skikking, 'n woordeboek wat kaarte parameters waardes. Jy slaag wat in en wat hulle stuur in die gebruik van 'n boodskap. En as jy, dan kan jy 'n sukses funksie wat voer wanneer die data kom terug. Andersins, is dit presies dieselfde. So gebruik POST, jy dalk wil pos te gebruik, byvoorbeeld, as jy 'n bydrae vorm jy laat mense insette wagwoorde in dit, en stuur die wagwoorde af aan jou back-end script, om te kyk in die databasis of die gebruiker geldig is of nie. Jy kan dit doen al met behulp van jQuery in plaas van om die bladsy te alle verfris. Dit is hoe ek geïmplementeer in die blog dat ek jou gewys het vroeër. As ons na die einde portaal en meld, meld, Meld uit nie werk nie. Wel, laat my net oop te maak in 'n nuwe venster. Hier is daar 'n wagwoord, en ek gaan om te tik in iets lukraak. Dit werk nie, maar jy kan sien dat ons nie eintlik het die bladsy te alle verfris. Die kode, as jy wil om te kyk na dit, is almal beskikbaar in hier. So die kode ek verlede jaar geskryf het iewers. Soos jy hier kan sien, is ons die stuur van die POST versoek. Ek het 'n lêer genaamd login.php in die agterkant, wat tjeks indien die wagwoord geldig is. Die parameters wat ons slaag in is vergeet, gekarteer te die insette wat in hierdie insette box tans. En wanneer die data terug te kom, ons gaan. As die data vals is, dan sê ons verkeerde wagwoord, gly dit af, en maak dit net verdwyn na daardie. Anders, ons laai die admin bladsy. En dit is al gedoen met behulp van into. In hierdie baie reëls van die kode, kan jy net verby die inligting aan die agterkant, kyk of dit korrek is, kyk of jy aangemeld is korrek, en eintlik daarop te reageer, redirecting die persoon na die korrekte bladsy of nie te laat aanteken en vertel hulle dat hulle moes 'n verkeerde wagwoord. So dit is 'n voorbeeld van hoe jy jQuery NA gebruik 'n POST versoek te stuur aan jou agterkant, seker te maak of iemand se aangemeld korrek. 

Alle reg, so dit is al die voorbeelde wat ek gehad het, en al die dinge wat ek wou te dek. Dit is die groot dinge wat jQuery toelaat om te doen: kies elemente, verander hulle met behulp van DOM manipulasie, jy effekte kan byvoeg, aktiveer dinge op sekere gebeure, en doen ook AJAX versoeke baie moeiteloos en maklik. So dankie vir die kom of kyk, en as jy enige vrae het, laat my net weet. Ja? [Studente] Terug wanneer jy het, jy het into na die POST versoek in aanhalingstekens, en ek het net gewonder wat dit gedoen het. >> Ja, ek sien. Die vraag was dat, in die voorbeeld wat ek het net, daar was die woord into in aanhalingstekens rondom die - Ek sal net trek dit weer - rondom die NA funksie. Ek is net trek dit om te wys. So hier is hierdie pos versoek, en daar is hierdie into in aanhalingstekens. Wat bepaal presies wat ons verwag om die uitset te wees. So as ons slaag in into as die verwagte data tipe, dit is nie 'n vereiste nie, maar as ons slaag dit in, dan is die data sal outomaties ontleed word as into. So ons het nie die into parse funksie te roep nie, dit sal net outomaties gebeur nie. En as jy 'n blik op die dokumentasie vir die post, daar is hierdie data tipe veranderlike, die tipe data wat verwag word van die bediener. Die standaard waarde is 'n intelligente raaiskoot wat verkeerd kan wees, sodat jy kan laat dit leeg, maar dit is net die tipe van data in die kodering wat jy gebruik, of dit nou into of XML of iets anders. 

Enige ander vrae? Alle regte. As jy enige ander vrae het, voel vry om my te e-pos by vshekhawat@college.harvard.edu, en die skyfies en kode moet aanlyn beskikbaar wees redelik gou. Sterkte met jou finale projekte, hoop jy gebruik jQuery. [CS50.TV]