[Powered by Google Translate] [Szeminárium: jQuery] [Vipul Shekhawat, a Harvard Egyetem] [Ez a CS50.] [CS50.TV] Ha a következő végig otthon, akkor valóban elérheti a diák Online megy, erre a linkre. Ez TjjRWj, a bit.ly. Azt is csak megy az URL-t közvetlenül amely cloud.cs50.net / ~ vshekhawat, ami az én nevem, és jQuery. Én nagyon javasoljuk, hogy kövesse végig, ha nézed otthon, és ha itt is, mert ez egy nagyon interaktív bemutatót. 

Tehát ma fogok beszélni, jQuery, és az első kérdés az, mi jQuery? Idén, tudom, hogy a srácok nem tartoznak JavaScript olyan részletesen, mint mi az elmúlt években. JavaScript, először is, csak a kliens oldali nyelv hogy használja a parancsfájlok és a kód minden felhasználó gépén. Szóval van egy szerver, amely a weboldalak az emberek, de érdemes csinálni dolgokat a saját gépen, kérik gépet küldeni kéréseket a szerver minden 30 másodperc, vagy valami ilyesmi. Megteheti, hogy a JavaScript. JQuery csak ad több funkció a tetején JavaScript hogy nem extra dolgokat az Ön számára. Ha megnézzük a tartalmát a tetején, amely leírja néhány dolgot, hogy te képes. Tehát összességében, jött létre 2006 januárjában. Először fogant az 2005 augusztusában. Ez már körülbelül egy pár éve, és ez tényleg része az új Web 2.0 mozgalom ez tette az interneten, fényes. Ez a leggyakrabban használt JavaScript könyvtár. Több mint 19,6 millió honlapok segítségével, és a használat még mindig növekszik szerint builtwith.com, amely, úgy tűnik, az elmúlt évben, nemrég folyamatosan növekszik meglehetősen lineárisan. Között a top 10 millió terület, még mindig - mintegy 40%-uk jelenleg is használja azt. Facebook használja, sok más honlapokon jelenleg használja. Akkor nézd meg a statisztikákat a saját, ha szeretne. És meg tudná mondani, ez legális, mert egy alapítvány és 13 igazgatósági tagok, együtt egy csapat 20 fő dolgozik, akik azt rendszeresen. Így nagyon széles körben elterjedt, hogy van egy. Org URL-t, akkor divatos, van spin-off a többi cucc, úgyhogy ez egy nagy dolog. 

Miért érdemes használni? JQuery nagyon könnyű. Ez azt jelenti, hogy nem egy nagy fájlt. Letöltheti A minified fájlt, ami nem a fehér tér és megjegyzéseket, és ez csak 32 kB. Így könnyű, hogy csak dobálják rá a weboldal és igaz, hogy már használhatja is. Ez is nagyon hatékonyan írva, így nem veszi fel a sok - ez nem lassítja le a honlapon sokat, ha használja. Ez lehetővé teszi, hogy végre a dolgok, amelyek korábban nem kivitelezhető. Vannak olyan szempontok funkcionalitás, mint létre animációkat, amelyek rendszerint lenne nagyon, nagyon nehéz csinálni. De jQuery ők valójában nagyon egyszerű. És van néhány dolog, hogy bosszantó, hogy nem, lehetséges JavaScript, mint küld egy POST kérés hanem, hogy küldjön egy kérést a szerver, akkor meg kell írni öt vagy hat, vagy hét sornyi kódot. Most már csak csinálni egy sort, egyetlen függvényhívás. Ez tényleg leegyszerűsíti a sok dolgot, amit csinálsz. És minden jó gyerek használja. Azzal, hogy értem én. Az én utolsó projekt tavaly, ami news.whrb.org, amely a rádióállomás, hoztam létre ezt a blogot amely otthont minden azt mutatja, hogy már kész, és az MP3 fájlokat a számukra. Lehet böngészni a múlt azt mutatja, és ez az egész történt a jQuery. Azt lehet mondani, Mindezek miatt animációk, lényegében. Tehát, ha van - ha egy új poszt, látod ezeket a kis slideDowns, ami mindezt a jQuery. És ez a fade -, hogy ilyen dolgok minden történik a jQuery, és nem kell állandóan újra az oldalt, hogy navigálni az oldalon. Egy másik jó dolog, ami készült jQuery ezt a bemutatót. Én ezzel a nyílt forráskódú dolgot nevezett scrolldeck, amikor valaki írt tetején jQuery. Ha valóban nézd meg a forrást, akkor láthatjuk, hogy a ők ezzel dollárjel; dollár jeleket használják jQuery, jelezve, hogy a funkció egy jQuery funkciót. Így ők meghatározó wrapper tetején jQuery , amely lehetővé teszi, hogy a bemutató, mint ez, és láthatjuk, hogy itt ők, beleértve az eredeti jQuery fájl ami az, amit akkor kell megadni, ha szeretné használni jQuery a saját honlapján. 

Megható az, hogy hogyan telepíteni? Tudod csak megy jQuery.com és töltse le a fájlt, add hozzá a webes könyvtár, és tartalmazza azt. Szóval, csak a tetején, a fej tag a HTML-fájl a fő HTML fájlt, csak azt, hogy a vonal kód a megfelelő verziót melyik verzióját jQuery használ. Akkor töltse le a haladó jQuery.com, kattintson a "Download jQuery", és már megvan. Ennyi. És valóban, akkor nézd meg, hogy néz ki. Ha rákattint a letölthető itt, jQuery ez. Ez csak egy nagy JavaScript-fájlt, amely az összes mágikus dolgokat az Ön számára. Ez az minified változat, amely nem olvasható egyáltalán. Azt is nézd meg a fejlesztői verzió, ami olvasható de még mindig nagyon-nagyon hosszú. Ez egy csomó dolog ott. Azt is linket a Google tárolt változatát. Tehát, hogy majd lehetővé teszik, hogy csak támaszkodnak a Google, hogy azt. Ők biztosítják minden változatát, rendelkezésre álljanak. Így valószínűleg számíthat a Google, hogy a fogadó az Ön számára. Vagy linket jQuery saját legújabb verziót. Nekik van egy URL-t, ami mindig frissíteni a legújabb verzióra. Ez jQuery-ig, és van egy probléma, hogy a amely szerint, ha a frissített jQuery és néhány korábbi funkcionalitás ők válik retrograded vagy elavult, lehet, hogy nem - akkor lehet kezdeni, hogy nem kap támogatott többé. Tehát, ha írsz egy website használ verzió 1.8.2, mire verzió 2.7 kijön egyes funkciók írtál nem működik már. Tehát jobb, hogy csak le kell tölteni a 32 kB fájlt, tedd a weboldal, és működni fog örökké. 

Én megyek előre, és elkezd beszélni az aktuális funkcionalitását jQuery. Az első dolog, választók. Ez az, amit jQuery eredetileg fogant, hogy a. És akkor kattintson a dokumentáció nézni A részletes dokumentáció választók én lesz, amely. Az ötlet mögött a választók, hogy akkor válassza a HTML elemek az oldalon. Az oldal elemei is azonosítók és osztályok és más azonosító szempontok őket. Van még - tetlen különböző megrendeléseket. Néhány alkalommal, amikor éppen ágyazott egymást. JQuery lehetővé teszi, hogy építeni egyszerű lekérdezések letölteni elemeket az oldalon. Akkor lehet manipulálni ezeket az elemeket a jQuery függvények amely a manipuláció részben mi lesz később. Meg lehet változtatni a HTML, a CSS-változás, akkor is élő és hozzá funkciók aktiválni bizonyos eseményeket. Így például, ha valami valaki rákattint, szeretnénk, hogy történjen valami, amit tehetünk, hogy a jQuery is. És van rengeteg módon válassza elemekkel. Legtöbbjük sosem használt, de az alap is, amely nagyon fontos. Az elem választó, például ha csak kiválasztja semmit hogy egy div - Én tulajdonképpen a kódot nyitva a prezentációt. Így például, itt van az első dia. Itt van egy div. Ha kiválasztod a divs az oldalon, akkor csak ad nekünk egy tömb összes divs, hogy létezik ez a fájl. Az ID szelektor segítségével kiválaszthatja valamit egy adott azonosító. Szóval, ha ez például ez a dolog már az ID "mi" és ha nem ez a # mi, hanem egy igazolványt, akkor csak vissza egy tömb, amelynek egy elemét, és ez az, hogy eleme az oldalon. Azt is össze választók így azzal, csak válassza ki a dolgokat azonosítókat, amelyek divs. Szóval igen. Csak válassza ki divs amelyek az ID. Az osztály csak használja egy pont, ez ugyanaz, mint a CSS. Leszármazott is működik, így ha van egy kis osztály és ez beágyazott elemei - így például a van néhány osztály és van egy horgony tag link egy másik oldalra, akkor használja ezt a szintaxist letölteni a link. Azt is megadhatjuk, több dolgot egyszerre, csak vesszővel elválasztva kell beírni, használja a választó szeretne, és akkor válassza ki mindet egyszerre, egyetlen tömbben. És akkor ott van még a nem választó, így kiválaszthatja az összes divs , amelyek nem rendelkeznek néhány speciális osztályban. És ez csak egy hasznos módja, hogy a bevezetést, hogyan működik ez a választás. Mutatok néhány konkrét példát a második. 

Advanced szelektorok - ez csak néhány példa. Több tucat ilyen, de ha azt szeretnénk, hogy kiválassza a Kép címkék belül néhány elemet, akkor csak ezt: kép. Ha szeretné, hogy válassza ki a páros elemek, például, ha van 20 ilyen, ki szeretné választani 0, 2, 4, 6 és így tovább, te: még, vagy akkor is csinálni: furcsa. Ezek a pszeudo szelektor, ami azt jelenti, hogy valójában számítási minden más elem nem csak megy, és kiválasztja mindet. Azt is - minden elem is speciális attribútumokat. Így például, class = központ is egy attribútum. Ehhez horgony tag, href, hypertext referencia, egy attribútum is. Így egy hasonlót, hogy a linkek egy adott oldalt, vagy csak - ez valóban általános. Megadhatja, hogy bármit olyan attribútum, amit szeretne. És akkor is, attribútum. Ha például akarta válassza ki az összes input elemet , amelyek a szó "pass", mint a neve is őket, ha egy oldal egy input text block ez az úgynevezett "password", hogy az lenne az egyik módja, hogy jelölje ki azt. És sok más. Akkor megy előre, és nézd meg a dokumentációt és nézd meg konkrét példákat, hogyan működik. 

A következő dolog az, DOM manipuláció. Miután kiválasztásához elemeket, akkor eldönthetjük, hogy ténylegesen dolgokat velük. Eddig még nem néztem, hogy minden, de ha megnézzük a dokumentációt, ott tényleg sok, amit tehet. Ezen a ponton, fogunk kiválasztásához elemek ezt a prezentációt és manipulálni őket a jQuery. Mivel ez megvalósítva jQuery, akkor férhetnek hozzá a jQuery könyvtár és tudjuk használni azokat funkciók a kódot. Az egyik hasznos dolog, amit lehet, hogy nem tud az a konzol. És a Google Chrome, amit én használok. Akkor nyomja meg alt parancs J vagy alt vezérlés J nyissa meg a konzolt. A Firefox Azt hiszem, ez parancs műszak K vagy vezérlő műszak K. A Safari kell menni néhány beállítást módosítani. Van egy link, ha szeretne csinálni, de azt ajánlom, hogy Chrome vagy Firefox. Szóval nyisd ki a konzolt, ez meg itt. Ez lehetővé teszi, hogy alapvetően csak bármit akarsz. Így csak írja hozzon létre egy nevű változó x, x = 5, lássuk, mi x + 2. Akkor is valami ilyesmit CS + Lássuk, x + 45, lesz CS50. Ha csak nem tipikus JavaScript dolgot. De akkor is csinálni jQuery itt. 

Tehát nézzük meg az első szempont itt. Fogunk létrehozni egy HTML nevű változó, ami egy string. Ez egy paragrafus benne, hogy hívják néhány új szöveget. Így van ez a HTML, ez valami új szöveget, a bekezdések. Most tényleg szeretné hozzáadni az oldalhoz. Én meg azt úgy, hogy a HTML e bekezdés ezt a címet itt, append azonosítója. Ha válassza a Hozzáfűzés azonosítót, majd hozzáfűzi, hogy az A HTML változó imént létrehozott, majd adjunk hozzá, hogy a HTML végén, rögtön a paragrafus. Tehát, ha ezt tesszük - választottuk e bekezdés és mi már úgynevezett append függvény a HTML változó Én csak hozzá, majd adjunk hozzá, hogy az új szöveg ott az oldalon. Azt is neve elé, ami azt jelenti, hogy fog menni, mielőtt, az elején ezt az elemet. Tehát van néhány új szöveget az elején, és utána. Tudok menni előre, és frissíteni, hogy megszabaduljon ez a cucc, amit most tett. De ez egy példa arra, hogyan lehet használni az előtag és mellékel módszerek manipulálni dolgokat az oldalon, adjunk hozzá egy kevés HTML. 

Azt is megváltoztathatja osztályok. Még ez a stílus fájl, amit létre ezt a győzelem osztály amely szöveg színe piros, a háttér színét és a szöveg árnyék. Úgy néz ki, undorító, de én valójában - E bekezdés osztálynak megfelelő azonosító. Szóval hozzá az osztály a győzelemhez. Én végre ezt a konzolt, és amely növeli az osztályban, és most úgy néz ki, undorító, mint várták. A CSS automatikusan kap alkalmazott az osztályok, hogy - ha van CSS egy osztály, akkor automatikusan kap alkalmazott ha megváltoztatja az osztály egy elem. Akkor csak eltávolítani a Remove Class. Tehát, ha van néhány előre definiált osztályok, mint a vörös vagy a kiemelt, és akkor szeretné alkalmazni ezeket az elemeket, nem kell, hogy minden a CSS stílus minden alkalommal. Tudod csak hozzá az osztály egy elem, és akkor automatikusan vált - akkor automatikusan keresni megfelelő az osztályban. Azt is távolítsa el a dolgokat, úgyhogy megyek, hogy kiválassza a divs az oldalon, és távolítsa el őket. Mit fog ez kinézni? Úgy fog kinézni, mint a semmi, így valójában semmi sem maradt. Előadásom elment. Tudom frissíteni, és hozza vissza, szerencsére, mert ez csak fut egyszerre, de ez egy példa eltávolítása, ha azt szeretnénk, hogy teljesen tönkre egy elemet ki az oldal. 

Azt is felülírhatja, és megyek, hogy válassza ki a bekezdések az oldalon és menjünk be, és helyére bármilyen szöveget, hogy van bennük csak a "tesztelés". Ha ezt megteszi, akkor cserélje ki minden bekezdés az oldal ezt a vizsgálatot. Aha. Mind helyére tesztelés. Szóval ez egy példa a hozzáférés a szöveget, és felülírja azt. Azt is adatokat nyerni, és ez nagyon klassz a beviteli mezők. Ha van egy beviteli mezőbe, hogy az emberek gépelés cucc, ember gépelés cucc bele, Itt válasszuk ki a bemenetet, bármelyik bemenet tag egy típusú szöveget. Ebben az esetben csak egy beviteli mezőbe az egész előadás, így akkor csak válassza ki az elsőt, majd hívjuk a Val függvényt. , Amely visszaadja az értéket, és egy beviteli mezőbe, az érték csak bármi történik is benne. Tehát, ha ezt tesszük, akkor csak vissza a húr dolgokat. És ha hívjuk újra írni több dolgot, akkor válik több dolgot. Ez is egy nagyszerű módja annak, hogy hozzáférést elemei beviteli mezőbe, majd ellenőrizze, ez egy érvényes e-mail cím, ez érvényes dátum, pl. Tudod csak letölteni dolgokat azonnal, az emberek gépelés, majd ellenőrizze, hogy az érvényes, küldje vissza a szerverre, bármit akarsz vele. És ez hogyan elérni mi van a dobozokban. 

Akkor is módosíthatja CSS közvetlenül, így ahelyett, hogy hozzá egy osztály, hogy van néhány előre meghatározott tulajdonságú, ha csak hozzá, amit CSS akarsz semmit. Szóval select test, ami az egész előadás, és színe a tulajdonság, hogy meghatározza, mi a színek a szöveg. Ha a változás, hogy piros, az összes szöveget az oldalon pirosra. Tehetünk valamit, mint a háttér színe kék, is vagyunk, ez gyönyörű. Meg tudod csinálni, amit akarsz ezzel. A CSS tulajdonság, akkor tényleg módosítják valami úgy néz ki, bármikor. A következő dolog hatásokat. Hatások alapvetően ugyanaz, mint módosítása CSS, de valójában nyújt némi extra animációt is. Tehát ahelyett, hogy csak a bemutató, vagy rejteget valamit, vagy megváltoztatja a színét, tudod valójában, hogy az animált. Itt van a dokumentáció, ha azt szeretnénk, hogy vessen egy pillantást a kiterjedt dokumentációt is. De én, hogy fedezze a legfontosabbak. Vannak a show, és tulajdonságok eltüntetése. Azonosító mutatása / elrejtése valóban megfelel az egész dobozt, így ha rejteni, akkor csak eltűnik. És meg tudom mutatni, hogy újra, ha azt szeretnénk, hogy jön vissza. És vissza. Ez valójában nem tűnik el, Én valójában nem távolítsa el az oldalról, csak állítsa be a CSS tulajdonság láthatóságának rejtett így nem lát többé. Van is csúszik fel és húzza le, amely lehetővé teszi, hogy ezt a hatást. Csúszik-ig eltűnik, és utána eltűnik akkor csúszik le, hogy jön vissza. És most vissza. Van még ebben elhalványulnak hatás, ami - elhalványulnak ID felel meg ezt a dobozt. Ha fakulnak ki, akkor majd lassan eltűnik. Én is azt elhalványulnak, és vissza fog térni. Azt is megteheti, hogy elhalványulnak, ami jellemző a fade funkció. Akkor lehet, hogy elhalványul a konkrét homály, amit akar. Tehát, ha azt elhalványulnak lassan 0,5, akkor az válik láthatóvá felét. Tudom, hogy ez megy a 0,1, visszafelé pedig az 1 annak érdekében, hogy teljes egészében látható újra. Ez csak egy animáció, amit tehetünk. 

Vannak még a kampós hatásokat. Szóval megyek ki a váltó azonosító, amely megfelel a dobozhoz, és hogy a div hívhatja toggle, ha ez látható, akkor láthatatlanná válik, ha ez nem látható, akkor újra megjelennek. Szóval most hívott ez Funkcióváltás kétszer, az első volt ugyanaz, mint elrejteni, a második hívás volt, ugyanaz, mint a show. És akkor is ezt a elhalványulnak váltó, amely nem ugyanaz a dolog, kivéve, hogy valóban elhalványul. És ugyanezt a slide válthat. Vannak láncolva hatása is, ami azt jelenti, Ha kiválaszt egy elemet, és csak hívni egy csomó animációs módszerek is, ha azt akarta, hogy elhalványul ki, majd tolja lefelé, majd elrejti, majd elhalványul, akkor nem őket sorban. Tehát eltűnt, visszajött - valamilyen oknál fogva, a bőrt nem történt meg. Próbáljuk ki. Igen, ez eltűnik, akkor csúszott el. És van sok más. Használhatja a animate függvény hogy saját animációk, amely meglehetősen összetett, de ez biztosítja az Ön számára végtelen bővíthetőség. Tudod, hogy bármilyen animációs akarsz. Ön is használja sorban sorban több animációk egy időben. Tehát, ha akar valamit, hogy repülni az egész oldalt, slide a jobb felső a bal alsó, meg tudod csinálni, hogy a és csak egy csomó intézkedést majd egymás után. 

A következő dolog, fogunk beszélni eseményekről. Events segítségével - eddig, most voltunk gépelés dolgokat a konzol és ez az egyik módja annak, hogy ez megvalósuljon, hanem a tényleges oldal, akkor nem lesz képes a hogy a felhasználó írja a dolgokat a konzolba. Azt akarod, hogy történjen automatikusan. Az, hogy kell használni, hogy az események be néhány bizonyos esemény történik. Meg tudja nézni a dokumentációt a részletekért. Tehát lássuk csak. Azt akarjuk megjeleníteni, illetve elrejteni a dobozt, de most ez a gomb nem csinál semmit, mert nem hajtotta végre, hogy még. Én megyek az aktuális HTML oldal. Itt a diát. Van egy div a diát. Ez az osztály a diát. Ott van a szöveg. Nos, itt van ez a doboz, és a doboz gombot. Hogyan tudjuk valójában, hogy ezt el? Először is, hadd írjon egy függvényt, ami a box ID eltűnik. Ez a szintaxis funtion, hívjuk csak azt hideTheBox. Nem vállal semmilyen érvet, mert nincsenek érvek kell venni. Tudjuk ki a box ID. Tehát a jQuery válassza, akkor válassza ki a box ID, és aztán csak eltüntetjük. Legyen inkább fakulnak ki. Ha mi ezt a funkciót az aktuális konzol, tudtuk meg ezt a funkciót, akkor hívni hideTheBox, és működik. De azt akarjuk, hogy megtörténjen a gomb megnyomása valójában. Ehhez azt kell használni egy esemény. Kötődik egy esemény bizonyos gombot, vagy valami akció történik, ki kell választanunk az elemet, hogy az esemény indítja - vagy indít az eseményt, sajnálom. 

Tehát először is, hadd válassza ki a fiókot button ID mert ez a gomb, és most, hogy a gomb, szeretnénk létrehozni egy animációt, amikor valaki rákattint. Szóval van ez a kattintás funkciójával. Ez lehetővé teszi, hogy kötni más funkciót is. Ez a függvény egy másik függvényt argumentumként tudjuk átadni a hideTheBox funkció és amikor erre a gombra kattint, a függvény automatikusan végrehajtja. Tehát ez működni fog, ha menteni ezt, én frissíteni, és - egy második, sajnálom. Hadd hozzam helyre ezt nagyon gyorsan. Oké. Ott vagyunk. Tehát most a doboz eltűnik, amikor kattintson a gombra. Azt is megváltoztathatja ezt csak fadeToggle, változás csak megjelenítéséhez vagy elrejtéséhez a dobozt, és ez is működik is, ha frissíteni. Tudjuk rejteni, azt is mutatni, és hogy továbbra is működni fog. A másik dolog, amit tehetünk az, hogy valójában nem kell meghatározni ezt a funkciót hideTheBox mielőtt hívja a kattintás funkciójával. Tehát ahelyett, hogy meghatározza a funkció és a hívás hideTheBox, mi csak fog hívni, ha ez a dolog kattint. Így tudjuk meg, hogy névtelenül itt, ami egy olyan funkció, amely JavaScript. Megadhatunk egy függvényt, normális, akkor azt mondjuk funkció hideTheBox érvekkel, hanem, azt csak azt nem működhet érvek indítsa el a zárójel, hogy meghatározza a funkciót, közel, hogy zárójel, majd csak meg a funkciót itt, az első és az utolsó zárójel zárójel amelyek megfelelnek az érveket a kattintás funkciót. Szóval halad ez a funkció, akkor másolja ezt a kódsort itt, és hogy nem pontosan ugyanaz a dolog. És most már nincs ez a véletlen fadeTheBox funkció hogy ül körül minden látható ok nélkül. A funkció került meghatározásra névtelenül, nem volt neve. Ez csak végre, amikor kattintson a mezőbe nyomógombot. Így frissítő egyszer, még egyszer, és akkor látom, hogy még mindig működik. És ez hogyan hozhat létre naptárbejegyzéseket. 

Van egy csomó különböző rendezvényeken, hogy tudjuk használni. Megyek vissza szeretne térni a konzol csak azt mutatják meg, hogy ezek a munka. Az azonosítót mindegyik felel meg minden egyes doboz. Tehát a doboz click ID, ez egy kulcs azonosítót, és ez egy mouse ID. Még egy dolog az, hogy ez a tevékenység a funkciót, és nem írja ki minden alkalommal, Igazából mentem előre, és meg ezt a műveletet a funkciót itt. Ez nem ugyanaz, mint a hideTheBox funkciót. Egyre ezt az opciót, és vagy elhalványul ki, vagy elhalványul be! És ezért képesek vagyunk használni itt. Tehát, ha rákattintunk a click ID, azt szeretnénk, hogy a doboz eltűnik és újra. Ez ugyanaz, mint a gombot, hogy mi volt az utolsó dia. Most azután hívjuk, hogy, akkor kattintson erre, és a doboz eltűnik, majd kattintson rá újra és újra megjelennek a doboz. Ez elég egyszerű. Kattintson duplán ugyanazt csinálja, kivéve igényel egy dupla kattintással. Tehát, ha kattintson rá egyszer, és kattintson ismét semmi nem fog történni, de ha duplán kattintva gyorsan, hogy eltűnjön. Ha duplán rákattintunk, akkor vissza fog térni. Szóval ez elég egyszerű. Billentyűzet bemenet is furcsa, én nem hiszem, hogy tényleg működik ebben a példában mert a gomb le, kulcs, és gombnyomás és más kulcsfontosságú intézkedéseket aktiválása nem számít, mit elemet kötik a. Például, ha én kötött gomb lefelé a test, vagy valami más teljesen, akkor még mindig be nem számít - ez nem jellemző. Nem kell, hogy rákattint erre, és nyomja meg a gombot, hogy bármi eltűnik. Ez lehet aktiválni függetlenül attól, milyen elem vagyok éppen be Tehát ezek valójában nem működik ebben a példában mert nem ismer meg, mint belépő bevitt a billentyűzet div. 

De ha megnézzük a egérműveletek, Az első a lebeg, és meg tudja csinálni néhány ilyen CSS. Ha a CSS, akkor létrehozhat úgy, hogy ha hover valamit, akkor a stílus változik. De a jQuery meg lehet változtatni a stílus más dolog is. Így például, fogunk hívni cselekvés, ha fölé viszi a div. Ez azt jelenti, ha fölé viszi, akkor a doboz eltűnik. Ha mozdulni tőle, a doboz újra megjelenik. Ha hívjuk ezt, és lebeg rajta, a doboz nem tűnik el, és amint haladunk el, jön vissza. Ha ezt nevezzük hover funkciót az egér azonosító, amely megfelel a mezőbe, majd ha fölé viszi a dobozt, akkor a doboz valóban eltűnik - ez is funky most, de - ha pedig tőle, akkor megjelenik. Most ez visszafelé valamilyen okból. Az egér meg és egér mozog funkciók némileg hasonló, de kicsit más. Egér meg csak akkor aktiválódik, amikor az egér belép a doboz, mint várták. Tehát, ha mozog bele, hogy eltűnjön. De ez nem fog újra megjelenik, ha mozdulni, akkor meg kell mozgatni vissza rá, hogy jöjjön vissza. Van még az egér mozog funkció, amely aktiválja a amikor az egér még jelen van a dobozban. Így majd csak folyamatosan megy, a fakulásnak, és ki. És ez valóban fakitermelés - úgy tűnik, ez csak a fakulásnak, és ki, de ez valójában fakitermelés sokkal több tevékenységek, mint ez, így amikor távolodunk akkor csak menj tovább, mert bejelentkezett mint ezren. Lehet, hogy nem ezer. Talán öt. Rögzíti több. A lényeg az, hogy az összes egér akciók, van egy csomó közülük. Lehet olvasni a másik is, de ezek mind kicsit más, és akkor vedd amelyiket szükséges , bármelyik konkrét célra akarsz csinálni. 

A következő dolog, fogok beszélni AJAX. AJAX, tudom, hogy nem terjed ki a JavaScript annyi mélységet az idén, úgyhogy csak fog beszélni AJAX általában egy percre. AJAX jelentése aszinkron JavaScript és XML. Ez alapvetően, például, amikor a Facebook-on, és tolja, a bejelentés hogy azért, mert AJAX fut a böngészőben. Minden pár másodpercig böngésző valójában fog Facebook szerverein, kérve őket, van valami új a számomra, majd jön vissza hozzád. Ez lehetővé teszi, hogy küldjön kéréseket a szerveren nélkül, hogy ténylegesen betölteni az oldalt. Tehát általában, ha csak a PHP és adatbázis, meg kell frissíteni az oldalt, mielőtt kap új információkat a szerverről. De az AJAX, akkor húzza, hogy az új információ folyamatosan, ne húzza rá, ha rákattint a gombra, vagy ilyesmi. Tehát ez lehetővé teszi számunkra, hogy küldjön kéréseket az oldal újratöltése nélkül, és tudjuk használni akár GET vagy POST kérések. 

GET kérés, például, ha Ön a Google.com és nem q = tesztet. Ez ad nekik egy lekérdezést teszt. És ez egy GET kérelmet, mivel ez átadva ezeket a paramétereket az URL-be is. A POST kérés, mint ha elküldi nekik postán. Mintha betette a levelet, és küldje el nekik, de valójában nem látja a tartalmát. Ők nem látható az URL-ben. Nem lehet közvetlenül írja azt, meg kell küldeni, hogy szinte titokban. Ez egy post. De a jQuery, meg tudod csinálni GET és POST kérelmek sokkal könnyebben, mint máskor is használ csak sima JavaScript. Akkor le tudja kérdezni API segítségével GET kéréseket, és akkor is ellenőrizni bejelentkezési adatokat. A következő oldalon, hoztam létre ezt, amely azt kérdezi: "Mi az ebéd?" a Harvard élelmiszer API, úgyhogy húzza, hogy fel. Ez csak egy példa arra, hogyan lehet használni jQuery, hogy csinál egy GET kérelmet egy API és kap információt vissza belőle. Ezért szeretnénk, hogy a menü a mai, és azt akarjuk, hogy mi az ebéd. Itt az URL-t, hogy hozzon létre egy GET kérés jQuery. használja a $. kap funkciót. Az első érv az URL-t, így pontosan mit lekérdezése. Aztán a következő érv egy olyan funkció, amely végrehajtja, ha a GET kérés befejeződött. Szóval küld ki néhány kérést a szervernek, várja, hogy jöjjön vissza. Ha nem jön vissza, akkor lesz, hogy bizonyos intézkedéseket az adatokat, hogy ez vissza a szerver. Menjünk előre, és kódolásához ezt is. Én nem kódolta ezt sem, a cél. Itt van a TODO. Először is, nézzük meg a rendezvény kötelező úgy, hogy ha ezt a gombot megnyomja, akkor küldje el a GET kérelmet. És amikor ez GET kérelmet visszatér néhány adatot, fogjuk írni, hogy ebbe a liszt info azonosító div. Először is, hadd válassza ki az élelmiszer-button ID. Ha valaki rákattint, azt akarjuk, hogy tegyen valamit. Nézzük csak, hogy ez egy névtelen fuction, mint korábban. Is csomagolja a zárójelek, és ha ezt a gombot megnyomja, szeretnénk küldeni a GET kérelmet hogy ellenőrizze, mi az ebéd. Ehhez, akkor csak írd a $. Kap. Ez egy jQuery funkció segítségével a dollár jel. Beletelik egy pár érv. Az első az URL-t, a második a callback függvény, a függvény hívják ha a kérelmet valóban visszajön. Nézzük csak építeni az URL első. Mi is kap ez a API David írta fel. Megy itt azt látjuk, hogy ez food.cs50.net/api/1.3/menus, és akkor csak át a nevét a paramétereket, amit szeretne. Tehát paraméter 1 értéke 1. Úgy néz ki, mint a hagyományos dátum, kezdési időpont, az alapértelmezett a mai Ha nem ír be semmit, és a befejező dátumot is alapértelmezett hogy ma, ha nem adja meg semmit. Ez az, amit mi akarunk. Azt akarjuk, hogy csak kap az információkat ma. 

Azt akarjuk, hogy a formátum a JSON. Ez csak önkényes, akkor bármilyen formában, amit akar. Használhatja CSV, de JSON JavaScript Object Notation. Nagyon könnyű a JavaScript megérteni, hogy mit jelent, és mi is nyomtassa ki könnyebben így. Szóval kérik a JSON, és hagyja, hogy kérését ebédet. Tehát étkezés = ebéd. Csak, hogy írjon ki az URL, megyünk vissza. Van menüket. Az első paraméter az output = JSON mert ez az, amit szeretnénk, és külön a paraméterek egy "és". A második paraméter - Nem emlékszem. Étkezés. És azt akarjuk, étkezés = ebéd. Meg lehet próbálni ezt URL írja be a böngésző, és fog is. Ez ad egy kis teljesítmény. Ez csak egy csomó dolog, hogy az ebéd. Ott van ez a csúnya formában. Azt akarjuk, hogy nyomtassa rá oldalunkat egy jobb formában. Tehát az URL helyes, most már csak meg kell írni egy függvényt hogy hívja vissza, amikor a kérés sikeres. Ez a funkció valóban vesz egy érvet. Ez lesz adatokat. Az adatok mi jön vissza a GET kérés után a GET kérés történik. Meg tudjuk csinálni a zárójelek, itt mi írjuk a névtelen függvény amely végrehajtja, használ, hogy adatokat, amikor megkapjuk az adatokat vissza. Így az adatok, ha gépelt ebben URL, ez az, ami az adatokat fog kinézni. Ez lesz a nagy string. De a jó dolog az, hogy JavaScript feldolgozni azt a JSON.parse funkciót. Tehát hozzunk létre egy új változót, parse adatokat. És parse adatok tömb tárgyakat. Minden objektum információt tartalmaz, mint - nos, vessünk egy pillantást. Van egy dátum, az étkezés, a kategória, recept, mindez egyéb dolgokat. Úgyhogy csak ki kell nyomtatni a nevét mindegyik. Nézzük hajtogat az egész sor dolog, hogy kapunk vissza belőle, és csak ki kell nyomtatni mindegyik - nyomtassa ki a nevét mindegyik. Ez a hurok. 

JavaScript ezt a hasznos szintaxis ahol lehet létrehozni egy változó, és hurkot egy tömb, és var i csak a bejáró, így ahelyett, hogy ezt var i = 0, Én kevésbé volt, mint a hossza, i + +, akkor csak nem var i elemzett adatokat. Ebben a példában elemzett adatok (i) felel meg az aktuális elem a tömb, az aktuális objektumot. És azt akarjuk, hogy a nevét belőle. Szóval tedd nevét. És az utolsó dolog, mi lesz, hogy néhány jQuery újra. Valójában hozzá a div, ez a liszt info div, ami jelenleg üres. Úgyhogy kijelöléséhez. Fogjuk használni jQuery, és válassza étkezés info div ID, vagy étkezés info azonosító, sajnálom. Szeretnénk hozzáfűzni ehhez. Ha nem teszt, például, akkor csak felülírni minden egyes alkalommal. Tehát csak hozzáfűzi ezt. Az aktuális elem a tömbben, akkor kap a nevét belőle, és mi hozzáfűzni, hogy a végén az étkezés info azonosító div. És akkor csak azért, hogy úgy tűnjön tisztább, mi is mellékel a sortörés, így ez még nem minden egy sorban. Tehát, ha minden jól megy, hogy legyen jó - Először is, ha erre a gombra kattint, akkor küldje el a GET kérést az URL. Ha az adatok visszajön belőle, akkor az azt feldolgozni, kapcsolja be JSON, hurok az egész tömböt képviselő, hogy az adatok, majd csatolja a nevét és a sortörés minden sor a kedvemet info ID ami korábban üres. Így megy vissza erre az oldalra, akkor frissíteni, Kattintson, hogy megtudja - ez nem működik. Ez sajnálatos. És ez az, ahol hibakeresés jön be Index.html, 1. sor. Ez érdekes. Rendben, hanem időt ezt, én csak megy, húzza fel a kész fájlt, hogy van, ami a kész változat. Nem tudom, mi a különbség, de csak megnyitni ezt fel helyette. És megyünk a AJAX, és ez megfelelően működik. Ez az, mi volt az ebéd ma, nem fontossági sorrendben, és idézőjelek, tehát ez nem a legszebb. De, természetesen, ha te ezt a végleges projekt akkor hogy jobban néz ki. De ez csak egy egyszerű példa arra, hogy te a GET kérelmet. És ha megnézzük a tényleges kódot, ezért úgy gondolom, biztos vagyok benne, ez még mindig nagyjából ugyanaz. Ja, elfelejtettem átalakítani, hogy egy string, ennyi. Nem, még mindig nem működik. Függetlenül attól, hogy itt van a tényleges kész kódot az, hogy ez mit kell kinéznie, és ez nem ugyanaz, mint amit most végre. Ha rákattint a gombra, akkor használja GET JSON automatikusan elemezni az adatokat. Tart az adatokat vissza, és végighalad az egész tömböt és kiírja az - amit az ebéd ma, annak nevét, és hozzáfűzi a sortörés minden sor után. Így használja a GET funkciót. 

Tudod is használ POST, amit nem volt időm hogy írjon ki egy példa erre, de nézd meg a dokumentációt. Ha megnézed jquery.post, akkor láthatjuk, hogy ez szinte ugyanaz. Van egy URL-t, hanem az elhaladó paramétereket - csak helyezzük el őket a string az URL is, akkor át kell adni az ezen adatok változó ez alapvetően egy tömb, a szótár, hogy a térképeket paramétereket értékeket. Át, hogy, és elküldi őket egy POST. És ha egyszer megvan, akkor lehet sikeres funkcióval hogy végrehajtja az adatok visszajön. Egyébként ez pontosan ugyanaz. Tehát a POST, érdemes használni POST, például, ha van egy beviteli űrlapot a többiek is be jelszavakat, és küldje el a jelszavakat a back-end script, hogy ellenőrizze az adatbázisban, hogy ez a felhasználó érvényes-e vagy sem. Megteheti, hogy a jQuery ahelyett, hogy frissíteni kell az oldalt egyáltalán. Így valósítottam meg a blog, hogy én mutattam korábban. Ha megy a végére portál és kijelentkezni, jelentkezzen ki, Kijelentkezés nem működik. Nos, hadd nyissa fel egy új ablakban. Itt van egy jelszót, és azt akartam, hogy írjon valami véletlen. Ez nem működik, de látható, hogy mi nem valójában az oldal frissítése egyáltalán. A kód, ha azt szeretnénk, hogy nézd meg, minden kapható itt. Így a kódot írtam tavaly valamikor. Mint látható itt, küldünk egy POST kérést. Van egy nevű fájlt login.php a hátsó végén, amely ellenőrzi, hogy a jelszó érvényes. A paraméterek átadjuk a jelszóval, leképezve a bemeneti, hogy van ez a beviteli mezőbe megadva. És ha az adatok visszajön, akkor ellenőrizze. Ha az adatok hamis, akkor azt mondjuk, rossz jelszó, tolja lefelé, és csak, hogy ez eltűnik után. Ellenkező esetben, töltse be az admin oldalon. És ez volt minden történt a JSON. Ebben a több sornyi kódot, akkor csak át az adatokat, hogy a háttérben, ellenőrizze, hogy ez a helyes, akkor ellenőrizze, hogy bejelentkezett a helyes, és valóban reagál rá, átirányítása az a személy, a megfelelő oldalra vagy nem engedi be őket, és azt mondta nekik, hogy volt egy rossz jelszót. Szóval ez egy példa arra, hogyan lehet használni jQuery POST küldeni POST kérés a háttérben, annak ellenőrzése, hogy valaki bejelentkezett helyesen. 

Rendben, ez a példa volt, és az összes dolgot akartam fedezni. Ezek azok a legfontosabb dolgok, jQuery lehetővé teszi, hogy: elemek kijelölése, módosíthatja őket a DOM manipuláció, felveheti hatásokat, aktiválja a dolgok bizonyos események és meg is tesszük AJAX kérések nagyon zökkenőmentesen és egyszerűen. Szóval köszönöm, hogy eljöttek és néz, és ha bármilyen kérdése van, csak szólj. Igen? [Diák] Vissza, amikor megmutatta, hogy van JSON után a POST kérést idézi, és én csak gondoltam, mit tett. >> Igen, látom. A kérdés az volt, hogy a példában csak azt mutatta, ott volt az a szó, JSON-ben idézőjelek közé a - Én csak húzza fel újra - az egész POST funkciót. Csak húzza felfelé mutatni. Tehát itt van ez a POST kérést, és itt van ez a JSON idézi. Hogy csak meghatározza, hogy mit várunk a kimenet. Tehát, ha átadjuk a JSON, mint a várt adat típusát, ez nem követelmény, de ha át azt, akkor az adatok automatikusan feldolgozni, mint JSON. Tehát nem kell hívni a JSON parse függvényt, akkor csak automatikusan megtörténik. És ha egy pillantást a dokumentáció POST, van az adatok típusú változó, a várt adat típusát a szerverről. Ez alapértelmezés szerint egy intelligens hiszem, hogy lehet, hogy tévedek, így üresen hagyja, de ez csak az adatok típusa a kódolás, hogy te vagy, hogy ez JSON vagy XML, vagy valami más. 

Van még kérdés? Rendben van. Ha bármilyen további kérdése van, nyugodtan írjon nekem A vshekhawat@college.harvard.edu, valamint a diák és a kódot kell elérhető online hamarosan. Sok sikert a végső projektek remélem használni jQuery. [CS50.TV]