[Powered by Google Translate] [Seminar: jQuery] [Vipul Shekhawat, Universitatea Harvard] [Aceasta este CS50.] [CS50.TV] Dacă sunteți în urma de-a lungul la domiciliu, puteți accesa de fapt, diapozitive mele on-line de a merge la acest link. Este TjjRWj, pe bit.ly. De asemenea, poti sa te duci doar la URL-ul direct, care este cloud.cs50.net / ~ vshekhawat, care este numele meu, și jQuery. Am foarte recomandăm să urmați de-a lungul, dacă te uiți de la domiciliu, si daca esti aici, de asemenea, că aceasta este o prezentare destul de interactiv. 

Așa că astăzi am de gând să fie vorba despre jQuery, iar prima întrebare este, Ce este jQuery? În acest an, eu știu voi nu s-au acoperit JavaScript în cât mai multe detalii avem în ultimii ani. JavaScript este, în primul rând, doar un limbaj client-side pe care le utilizați pentru a rula script-uri și cod pe calculatorul fiecarui utilizator. Deci, aveți un server care oferă pagini de web la oameni, dar s-ar putea dori să facă lucruri pe masina lor, cere masina lor de a trimite cereri la server la fiecare 30 de secunde sau ceva de genul asta. Puteți face acest lucru cu ajutorul JavaScript. JQuery oferă doar o funcționalitate mai pe sus de activarea JavaScript- care face lucruri în plus pentru tine. Dacă te uiți la conținutul de pe partea de sus, care descrie unele din lucrurile pe care sunteți în stare să facă. Deci, în general, a fost creat în ianuarie 2006. Acesta a fost primul conceput în august 2005. A fost în jur de câțiva ani, și este într-adevăr o parte din noii mișcări Web 2.0 care a făcut Internet, astfel strălucitor. Este biblioteca JavaScript cele mai utilizate pe scară largă. Peste 19.6 milioane site-uri sunt folosind-o, iar utilizarea este în continuă creștere potrivit builtwith.com, care, se pare, în ultimul an, tocmai a fost în continuă creștere destul de liniar. Printre primele 10 de milioane de site-uri, există încă - aproximativ 40% dintre acestea sunt în prezent folosind. Facebook foloseste, o mulțime de alte site-uri se utilizează în prezent. Poti sa te uiti la aceste statistici pe cont propriu, dacă doriți. Și ai putea spune că este legal, deoarece are o fundație și 13 membri ai consiliului de administrație, împreună cu o echipă de 20 de oameni care lucrează pe ea în mod regulat. Deci, este utilizat pe scară foarte largă, ea are un URL org., E fantezie, ea are de spin-off-uri pentru alte lucruri, asa ca este o afacere mare. 

De ce ar trebui să-l folosească? JQuery este foarte ușor. Asta înseamnă că nu este un fișier imens. Puteți descărca fișierul minified, care este, fără tot spațiul alb și comentarii, și este doar 32 kB. Deci, este ușor să arunci pe pagina dvs. web și doar a începe să utilizați-l. Este, de asemenea, scris foarte eficient, astfel încât să nu ia o mulțime de - nu încetini site-ul dvs. mult atunci când este utilizat. Acesta vă permite să pună în aplicare lucruri care au fost imposibil anterior. Există unele aspecte ale funcționalității, cum ar fi crearea de animații, care in mod normal ar fi foarte, foarte dificil de a face. Dar în jQuery ele sunt de fapt foarte simplu. Și există unele lucruri care sunt enervant de a face, posibil în JavaScript, cum ar fi trimiterea unei cereri POST, dar pentru a trimite o cerere de la un server, va trebui să scrie cinci sau șase sau șapte linii de cod. Acum o poti face doar într-o singură linie de cod, într-un apel de funcție unică. Care simplifică într-adevăr o mulțime de lucruri pe care le faci. Și toți copiii se răcească îl folosesc. Prin aceasta, mă refer la mine. În proiectul meu final de anul trecut, care este news.whrb.org, care este pentru postul de radio, am creat acest blog care găzduiește toate spectacolele pe care le-am făcut și fișiere MP3 pentru ei. Puteți naviga prin spectacole trecut, si totul se face folosind jQuery. Puteți să spuneți din cauza tuturor acestor animații, în esență. Deci, dacă aveți - dacă creați un nou mesaj, veți vedea aceste slideDowns mici, care sa terminat cu jQuery. Și acest lucru se estompeze - pentru ca astfel de lucruri se tot face folosind jQuery, și nu trebuie să reîncărcați constant pagina pentru a naviga pe site-ul. Un alt lucru misto care a făcut folosind jQuery este aceasta prezentare. Sunt folosind acest lucru open source numit scrolldeck, care cineva a scris pe partea de sus a jQuery. Dacă te uiți de fapt la sursă, se poate vedea că ei folosesc acest semn dolar, semne dolar sunt utilizate în jQuery pentru a semnifica faptul că o funcție este o funcție jQuery. Deci, acestea sunt definirea unui înveliș pe partea de sus a jQuery care vă permite să facă o prezentare ca aceasta, și puteți vedea că aici ei, inclusiv fișierul jQuery inițial, care este ceea ce va trebui să includă, dacă doriți să utilizați jQuery în propriile site-uri web. 

Referindu-se la faptul că, cum a face tu-l instalați? Puteți merge doar la jQuery.com și descărca fișierul, adăugați-l la un director web și să o includă. Deci, doar pe partea de sus, în tag-ul cap de fișier HTML din principal de fișiere HTML, trebuie doar ca linie de cod cu versiunea corectă pentru ce versiune de jQuery pe care îl utilizați. Îl puteți descărca de a merge la jQuery.com, faceți clic pe "Download jQuery," și le-ați luat. Asta e tot. Și, de fapt, putem arunca o privire la ceea ce pare. Dacă faceți clic pe descărca de aici, jQuery este aceasta. Este doar un mare dosar de activarea JavaScript care face toate lucrurile magice pentru tine. Aceasta este versiunea minified, care nu poate fi citită deloc. Poti sa te uiti, de asemenea, la versiunea de dezvoltare, care este ușor de citit dar încă foarte, foarte lung. Este o mulțime de lucruri acolo. Puteți, de asemenea, link-ul la versiunea Google a găzduit de ea. Deci, care va permite să se bazeze doar pe Google să le furnizeze. Ele oferă fiecare versiune a acestuia, disponibile în orice moment. Astfel încât vă puteți baza, probabil, pe Google pentru a găzdui pentru tine. Sau puteți lega la propria ultima versiune jQuery lui. Ei au un URL care este mereu actualizat la cea mai recentă versiune. Este jQuery-recente, și există o problemă cu asta, care este faptul că, dacă jQuery actualizate și o parte din funcționalitatea precedent ei au retrogradat sau devine învechită, ea nu poate - poate începe să nu se mai susținut. Deci, dacă ați scrie un site web folosind versiunea 1.8.2, de Versiunea 2.7 vine unele dintre funcțiile pe care le-a scris nu mai funcționează. Deci, este mai bine pentru a descărca doar fișierul kB 32, pune-l pe pagina dvs. de web, și va funcționa pentru totdeauna. 

Am de gând să merg mai departe și începem să vorbim despre funcționalitatea reală de jQuery. Primul lucru este selectoare. Aceasta este ceea ce jQuery a fost inițial conceput pentru a oferi. Și puteți să faceți clic pe documentația sa se uite la documentatie detaliata pentru selectorii am de gând să se acopere. Ideea din spatele selectori este că puteți selecta elemente HTML de pe o pagină. Elementele de pe o pagina au ID-uri și clase și alte aspecte de identificare a acestora. Există, de asemenea - ele? Esti la diferite comenzi. O parte din timp ei imbricată reciproc. JQuery vă permite de a construi interogări simple, care prelua elemente de pe paginile. Apoi, puteți manipula aceste elemente utilizarea funcțiilor jQuery, care este secțiunea de manipulare vom ajunge la mai târziu. Aveți posibilitatea să modificați HTML, schimba CSS, De asemenea, puteți anima și adăuga funcții care activează pe anumite evenimente. Deci, de exemplu, în cazul în care se face clic ceva, vrei ceva să se întâmple, puteți face acest lucru folosind jQuery, de asemenea. Și există un număr foarte mare de moduri de a selecta elemente. Cele mai multe dintre ele nu am folosit, dar sunt cele de bază, care sunt destul de importante. Selectorul Elementul, de exemplu, dacă sunteți selectarea doar ceva că este un div - de fapt, am codul deschis pentru această prezentare de diapozitive. Deci, de exemplu, aici e primul diapozitiv. Aici avem un div. Dacă vom selecta de fapt, toate divs pe pagina, va da-ne o serie de toate divs care există în acest fișier. Selectorul de identitate vă permite să selectați ceva cu o anumită identitate. Deci, dacă acest lucru, de exemplu, acest lucru are ID-ul "ceea ce," și dacă am făcut acest lucru cu # ce în loc de un act de identitate, va reveni doar o matrice care are un singur element și anume faptul că elementul a paginii. Putem combina, de asemenea, selectoare acest mod de a avea doar selectați lucrurile cu ID-urile care sunt divs. Deci, da. Selectați doar divs care au ca ID-ul. Pentru clasa a utiliza doar un punct, e același lucru ca și CSS. Descendent, de asemenea, funcționează, deci, dacă aveți ceva de clasă și le-a imbricate elemente din ea - astfel, de exemplu, există o anumită clasă și are o etichetă ancoră pentru a lega la o altă pagină, puteți utiliza această sintaxă pentru a prelua legătura. Puteți selecta, de asemenea, mai multe lucruri în același timp, doar le separa prin virgule, folosiți selectorul doriți, și vă va selecta toate dintr-o dată, într-un singur tablou. Și apoi există, de asemenea, nu selectorul, astfel încât să puteți selecta toate divs care nu au unele clase specifice. Si acesta este doar un mod util de a obține o introducere la modul în care funcționează această selecție. Voi arăta câteva exemple concrete într-un al doilea. 

Selectoare avansate sunt - acestea sunt doar câteva exemple. Există zeci de acestea, dar dacă doriți să selectați toate etichetele imagine în termen de un element, atunci ai făcut: imagine. Dacă doriți să selectați elementele chiar, de exemplu, în cazul în care există 20 dintre ele, doriți să selectați 0, 2, 4, 6 și așa mai departe, faci: chiar, sau puteți face, de asemenea: ciudat. Acestea sunt selectori pseudo, ceea ce înseamnă că le calcula de fapt, orice alt element, mai degrabă decât doar merge și selectarea toate dintre ele. Puteți, de asemenea, - fiecare element poate avea, de asemenea, atribute specifice. Astfel, de exemplu, clasa = centru este, de asemenea, un atribut. Pentru această etichetă ancoră, href, hipertext trimitere, este un atribut de asemenea. Astfel, puteți alege ceva care se leagă la o anumită pagină sau pur și simplu - este foarte generală. Puteți alege orice cu orice atribut pe care doriți. Și apoi, de asemenea, atribut conține. Dacă, de exemplu, a vrut pentru a selecta toate elementele de intrare care au cuvântul "recupereze" ca numele lor, Dacă o pagină are un bloc de introducere a textului care se numește "parola", care ar fi o modalitate de ai putea selecta. Și acolo sunt mult mai multe. Puteți merge mai departe si uita-te la documentația și a vedea exemple specifice de modul în care funcționează. 

Următorul lucru este DOM manipulare. Dupa ce am selectați elemente, vom dori să facem de fapt, lucruri cu ei. Până acum nu ne-am uitat la asta deloc, dar dacă te uiți la documentația, există într-adevăr o mulțime pe care le-ar putea face. În acest moment, vom selecta elementele de pe această prezentare și manipula-le folosind jQuery. Deoarece acest lucru este implementat folosind jQuery, avem acces la biblioteca jQuery, și putem folosi aceste funcții în cadrul acestui cod. Un lucru util pe care poate nu știți despre este consola. Și Google Chrome este ceea ce eu sunt, folosind. Puteți apăsa ALT comanda J sau ALT de control J pentru a deschide consola. În Firefox Cred că e comanda schimbare K sau Shift Control K. În Safari trebuie să te duci modifica unele setări. Există o legătură, dacă doriți să-l fac, dar am recomanda obtinerea Chrome sau Firefox. Deci, haideți să deschidem consola, e aici. Acesta vă permite practic să faci doar ce vrei tu. Astfel încât să puteți pur și simplu tastați în a crea o variabilă numită x, x = 5, să vedem ce x + 2 este. Puteți face chiar ceva de genul CS + Să vedem, x + 45, care va fi CS50. Puteți face doar unele chestii tipice JavaScript. Dar puteți face, de asemenea, jQuery aici. 

Deci, să ne uităm la acest prim aspect aici. Vom crea o variabilă numit HTML, care este un șir. Ea are o etichetă paragraf în ea, asta se numește un text nou. Deci avem acest cod HTML, este un text nou, în tag-uri paragraf. Acum, am de fapt, doresc să-l adăugați la pagina. Am stabilit astfel încât HTML pentru prezentul alineat, această titlu aici, este de adăugare ID. Dacă vom selecta adăugați ID-ul și apoi adăugați-l la variabila HTML-am creat, se va adăuga că HTML la sfârșitul anului, imediat după acest tag-ul paragraf. Deci, dacă facem asta - am ales acest alineat, și am sunat la funcția de adăugare cu variabila HTML-am adăugat doar, se va adăuga că noul text chiar acolo, pe pagina. Putem adauge, de asemenea, ceea ce înseamnă că va merge înainte, la începutul acestui element. Deci, nu este un text nou de la început și după aceea. Eu pot merge mai departe și reîmprospăta pentru a scăpa de lucrurile astea eu doar am facut. Dar asta e un exemplu de modul în care puteți folosi pune prefix și adăugați metode pentru a manipula lucruri pe pagina, adăuga unele HTML. 

Puteți schimba, de asemenea, cursuri. Înapoi în acest dosar stil, am creat aceasta pentru clasa victorie care are roșu textul de culoare, unele de culoare de fundal, și o umbră de text. Se pare hidos, dar pot, de fapt - prezentul alineat corespunde cu ID-ul de clasă. Deci, eu pot adăuga clasa pentru victorie. Pot executa acest lucru în consolă, și că va adăuga această clasă, iar acum se pare hidos, cum era de așteptat. CSS automat se aplică la clasele pe care le - dacă există CSS pentru o clasă, se aplică automat dacă vă schimbați clasa a unui element. Atunci putem elimina doar prin clasa elimina. Deci, dacă aveți unele clase predefinite, cum ar fi rosu sau a subliniat, și apoi doriți să se aplice celor de elemente, nu trebuie să facă toate CSS fiecare dată. Puteți adăuga doar clasa de la un element, iar apoi acesta va deveni în mod automat - se va căuta în mod automat adecvat pentru această clasă. Putem elimina, de asemenea lucruri, așa că am de gând pentru a selecta toate divs pe pagina si a le elimina. Ce se că va arata? O să arate ca nimic, deci nu e de fapt nimic stânga. Prezentarea mea este plecat. Eu pot reîmprospăta și aduceți-l înapoi, din fericire, pentru că doar rulează o dată, dar asta e un exemplu de eliminare, dacă doriți pentru a distruge complet un element de pe pagină. 

Puteți suprascrie, de asemenea, și am de gând pentru a selecta toate etichetele alineat pe pagina și du-te în interiorul acestora și înlocui orice text pe care le au în ele cu doar cuvântul "de testare." Dacă faceți acest lucru, veți înlocui fiecare paragraf pe pagina cu această testare. Yep. Toate acestea sunt înlocuite cu testarea. Deci, asta e un exemplu de accesare a textului și de a suprascrie-l. Puteți prelua, de asemenea, informații, iar acest lucru este foarte misto pentru cutii de intrare. Dacă aveți o casetă de intrare care oamenii sunt tastarea lucruri în, oamenii sunt tastarea chestii în ea, aici vom selecta de intrare, orice etichetă de intrare, cu un tip de text. În acest caz, nu există decât o singură cutie de intrare în întreaga prezentare, asa ca vom alege doar primul, iar apoi vom apela funcția val pe ea. Care returnează o valoare, și pentru o caseta de intrare, valoarea este doar ceea ce se întâmplă să fie în interiorul acestuia. Deci, dacă am face acest lucru, ci doar întoarce lucrurile șir. Și dacă l-am numi din nou, după ce a scris mai multe lucruri, se transformă în mai multe lucruri. Aceasta este o modalitate foarte bună de a accesa elemente de o cutie de intrare, și apoi verificați, este aceasta o adresa de email valida, este aceasta o dată valabil, de exemplu. Puteți prelua doar lucruri instantaneu ca oamenii sunt de scris, și apoi verificați dacă este valabil, trimite-l inapoi la un server, face tot ce vrei cu ea. Și asta este modul în care accesați ce este în interiorul acestor cutii. 

De asemenea, puteți modifica CSS direct, astfel încât în ​​loc de a adăuga o clasă care are unele proprietăți predefinite, puteți adăuga doar ce CSS vrei sa ceva. Deci, haideți corp select, care este întreaga prezentare, și culoarea este proprietatea care definește ceea ce culori textul este. Dacă am schimba la rosu, tot textul din pagină se va transforma în roșu. Putem face ceva de genul fundal albastru culoare, acolo mergem, e frumos. Puteți face orice vrei cu asta. Folosind proprietatea CSS, puteți modifica cu adevărat modul în care ceva se uită la orice moment. Următorul lucru este efecte. Efectele sunt în esență același lucru ca și modificarea CSS, dar ele oferă de fapt o animație în plus să-l. Deci, în loc de doar arata sau ascunde ceva sau schimbarea culorii, puteți face de fapt animat. Iată documentația, dacă doriți să luați o privire la documentație extinsă pentru ea. Dar am de gând să acopere cele mai importante. Există afișa și a ascunde proprietăți. Arata / ascunde ID-ul de fapt corespunde la toată această casetă, Deci, dacă l-am ascuns, ea va dispărea pur și simplu. Și eu pot arăta din nou, dacă vreau să fac să vină înapoi. Și sa întors. Acesta nu a dispărut de fapt, Nu am de fapt, scoateți-l din pagina, am stabilit doar proprietatea CSS de vizibilitate a ascuns astfel încât să nu-l mai văd. Există, de asemenea, glisați în sus și glisați în jos, care vă permite să aibă acest efect. Alunecă până să dispară, iar după ce dispare aveți posibilitatea să glisați-l în jos pentru a face să vină înapoi. Și acum e înapoi. Există, de asemenea, acest efect se estompeze, care - ID decolorare corespunde această casetă. Dacă l-am dispărea, atunci va dispărea încet. Pot, de asemenea, se estompeze în, și ea va veni înapoi. Puteți face, de asemenea, se estompeze a, care este specific pentru funcția estompeze. Puteți să-l dispărea la orice opacitate specifice pe care le doriți. Deci, dacă se estompeze încet la 0.5, va deveni jumătate vizibil. Eu pot face să meargă la 0.1, și înapoi la 1 pentru a face pe deplin vizibil din nou. Asta e doar o animație pe care le puteți face. 

Există, de asemenea, efectele de comutare. Așa că am de gând pentru a selecta ID-ul de comutare, care corespunde la această casetă, și pe care div le puteți apela de comutare, în cazul în care este vizibil va deveni invizibil, daca e invizibil va deveni din nou vizibil. Așa că am sunat această funcție de comutare de două ori, prima a fost același lucru ca și pielea, al doilea apel a fost același lucru ca un spectacol. Și puteți face acest lucru cu o comutare decolorare, care face același lucru, doar că de fapt dispare. Și același lucru cu slide comuta. Există efecte înlănțuite, precum și, ceea ce înseamnă dacă selectați un element și numi doar o grămadă de metode de animație pe ea, dacă ai vrut să se estompeze, apoi glisați în jos, și apoi ascunde și apoi dispărea în, ea le va face într-un rând. Deci a dispărut, s-au întors - pentru un motiv oarecare, pielea nu sa întâmplat. Să-l încercați. Da, așa este stins și apoi a alunecat departe. Și există o mulțime mai mult. Puteți folosi funcția animate pentru a crea propriile animații, care este destul de complex, dar vă oferă cu extensibilitate infinit. Puteți face orice fel de animație pe care doriți. Puteți folosi, de asemenea coadă să stea la cozi mai multe animații la un moment dat. Deci, dacă vrei ceva pentru a acoperi întreaga pagină, cadru din dreapta sus la stânga jos, puteți face acest lucru, și au doar o grămadă de acțiuni care merg una după alta. 

Următorul lucru pe care am de gând să vorbesc despre este de evenimente. Evenimente vă permite - până acum, am fost doar tastând lucrurile în consolă și că este o modalitate de a face acest lucru, dar pe o pagină reală, nu vei fi capabil să face tip de lucruri de utilizator în consolă. Vrei ca lucrurile să se întâmple în mod automat. Pentru că, trebuie să utilizați evenimentele care activează pe un anumit eveniment se întâmplă. Puteți verifica documentația pentru detalii complete. Deci, haideți să vedem. Vrem pentru a ascunde sau a afișa caseta, dar acum acest buton nu face nimic pentru că nu am pune în aplicare încă. Am de gând să merg la pagina HTML real. Aici e diapozitiv. Există un div pentru diapozitiv. Ea are clasa de diapozitiv. Exista textul. Acum, există această casetă și butonul de box. Cum ne-ar face de fapt acest lucru sa dispara? Mai întâi de toate, haideți să scrie o funcție care face ID-ul cutie dispar. Aceasta este sintaxa pentru funtion, hai să hideTheBox sun. Aceasta nu ia nici un argument, pentru că nu există argumente să fie luate. Putem selecta ID caseta. Deci, folosind jQuery selectați, putem selecta ID cutie, și apoi chiar a face să dispară. Să fie fade out. Dacă am fugit această funcție în consola real, am putea defini această funcție, putem numi hideTheBox, și funcționează. Dar vrem să se întâmple atunci când butonul este apăsat, de fapt. Pentru a face acest lucru, trebuie să folosim un eveniment. Pentru a lega un eveniment la un buton specific sau ceva se întâmplă acțiune, avem de a selecta elementul care evenimentul se va declanșa - sau că va declanșa eveniment, îmi pare rău. 

Deci, în primul rând, să selectați butonul ID cutie pentru că e butonul, și acum, pentru că butonul, ne-o dorim pentru a crea o animație atunci când se face clic. Deci, există această funcție clic. Acesta vă permite de a lega o altă funcție de aceasta. Această funcție are altă funcție ca un argument putem trece în funcția hideTheBox, și ori de câte ori acest buton este apasat, ca functia va executa în mod automat. Deci, acest lucru va funcționa dacă vom salva, voi actualiza, și - o secundă, îmi pare rău. Să-mi repari asta foarte repede. Bine. Acolo mergem. Deci, acum caseta dispare atunci când faceți clic pe butonul. Putem schimba, de asemenea, acest lucru doar pentru a fadeToggle, schimba doar pentru a ascunde sau a afișa caseta, și acest lucru va lucra, de asemenea, de asemenea, dacă vom reîmprospăta. Ne putem ascunde, putem, de asemenea, arăta, și că va continua să lucreze. Un alt lucru pe care îl putem face este, nu avem de fapt, pentru a defini această funcție hideTheBox înainte de a apela funcția clic. Deci, în loc de definire a funcției și de asteptare hideTheBox, suntem doar de gând să-l sun dacă acest lucru se face clic. Deci, putem defini anonim aici, care este o caracteristică care are JavaScript. Puteți defini o funcție, în mod normal, ne-ar spune funcție hideTheBox cu argumente, dar în schimb, putem spune doar funcționa fără nici un argument, începe bretele cret pentru a defini funcția, aproape că bretele cret, iar apoi definiți funcția de aici, în prima paranteză și ultima paranteză care corespund la argumentele funcției clic. Deci, suntem trece în această funcție, putem copia această linie de cod chiar aici, și că va face exact acelasi lucru. Și acum nu avem această funcție fadeTheBox aleatorie care este ședinței în jurul valorii pentru nici un motiv aparent. Funcția a fost definit anonim, aceasta nu are un nume. Acesta va executa doar atunci când am clic pe butonul cutie. Deci răcoritoare o dată mai mult, o dată mai mult, și puteți vedea că încă mai funcționează. Și asta este modul în care creați evenimente. 

Există o mulțime de diferite evenimente pe care le putem folosi. Mă duc pentru a reveni la folosind consola de pe care tocmai ați arăta modul în care aceste lucru. ID-urile pentru fiecare dintre acestea corespund fiecare cutie. Deci, această casetă este să faceți clic ID-ul, acesta este ID-ul cheie, iar acesta este ID-ul mouse-ului. Un lucru mai mult este faptul că nu există această funcție acțiune, mai degrabă decât să tastați-l de fiecare dată, De fapt, am mers mai departe și a definit această funcție acțiune aici. Ea face același lucru ca și funcția hideTheBox. Ea devine această casetă și fie se stinge-l afară sau cade-l inch Și de aceea suntem capabili să-l folosească aici. Deci, dacă am faceți clic pe această faceți clic pe ID-ul, vrem să facem caseta dispar sau reapar. Este același lucru ca și butonul pe care am avut-o în ultimul diapozitiv. Acum, după ce numim, care, putem faceți clic pe aceasta și caseta va dispărea, apoi faceți clic pe el din nou și cutia va reaparea. Asta e destul de simplu. Dublu clic pe face același lucru, cu excepția este nevoie de un dublu clic. Deci, dacă faceți clic pe o dată și faceți clic pe acesta din nou, nimic nu se va întâmpla, dar dacă faceți dublu clic rapid, va dispărea. Dacă faceți dublu clic din nou, el va veni înapoi. Așa că e destul de simplu. Tastatură de intrare este un fel de ciudat, eu nu cred că de fapt funcționează în acest exemplu deoarece cheia în jos, în sus tasta și apăsați tasta și alte acțiuni-cheie activa indiferent de ceea ce elementul pe care-l leaga de. De exemplu, chiar dacă am legat cheia în jos pentru a corpului sau altceva complet, atunci s-ar activa în continuare, indiferent de - nu este specific. Nu trebuie să fie făcând clic pe acest și apăsați o tastă pentru a face nimic dispară. Ar fi activat, indiferent de ceea ce elementul Eu sunt în prezent inch Deci, acestea nu funcționează de fapt, în acest exemplu pentru că nu mă recunoaște ca intrarea de intrare în div tastatură. 

Dar daca te uiti la acțiunile mouse-ul, primul este plana, și se poate face o parte din aceasta folosind CSS. Dacă utilizați CSS, puteți crea, astfel că, dacă treceți peste ceva, apoi sale modificări de stil. Dar folosind jQuery puteți schimba stilurile de alte lucruri, de asemenea. Deci, de exemplu, vom apela acțiune dacă treceți peste această div. Asta înseamnă că dacă ne treceți peste ea, apoi caseta va dispărea. Dacă ne îndepărtăm de ea, caseta va reaparea. Dacă noi numim acest lucru și treceți peste el, caseta nu dispare, și de îndată ce ne îndepărtăm, vine înapoi. Dacă noi numim această funcție Hover pe ID-ul mouse-ului, care corespunde pentru această casetă, apoi, dacă am hover peste caseta, apoi caseta va disparea de fapt - el fiind funky, chiar acum, dar - dacă ne îndepărtăm de ea, ea va reapărea. Acum e invers pentru un motiv oarecare. Mouse-ul intra și funcțiile mutați mouse sunt oarecum similare, dar ușor diferit. Mouse-ul intra doar activeaza atunci cand mouse-ul intra in cutie, cum era de așteptat. Deci, dacă vă mutați în ea, ea va dispărea. Dar nu va reapare atunci când mutați departe, va trebui să se mute înapoi pe ea pentru ca aceasta să vină înapoi. Există, de asemenea, funcția de mișcare mouse-ul, care va activa ori de câte ori mouse-ul este chiar prezentă în cutie. Așa că va păstra doar pe merge, decolorare și în afară. Și este de fapt logare - se pare ca e doar decolorare și în afară, dar este de fapt logare mult mai multe acțiuni decât aceasta, Deci, atunci când vă îndepărtați-l va ține doar merge pentru că logat ca o mie de ei. Poate nu o mie. Poate cinci. Aceasta jurnalele de mai mult decât atât. Ideea este, toate acțiunile mouse-ul, există o mulțime de ei. Puteți citi pe celelalte, dar toate sunt ușor diferite, și puteți alege în funcție de care ai nevoie pentru oricare scop specific ce încerci să faci. 

Următorul lucru pe care am de gând să vorbesc despre este AJAX. AJAX, știu că nu am acoperi JavaScript în măsura în profunzime acest an, așa că eu sunt doar de gând să vorbesc despre AJAX, în general, pentru un minut. AJAX vine de la Asynchronous JavaScript și XML. Este practic, de exemplu, atunci cand esti pe Facebook și-l va impinge o notificare, asta pentru ca AJAX se execută pe browser-ul web. La fiecare două secunde, browser-ul web, de fapt, merge la serverele Facebook, cerându-le, ai ceva nou pentru mine, și apoi se întoarce la tine. Acest lucru vă permite să trimiteți cereri de la un server fără a avea de fapt pentru a încărca pagina. Deci, în mod normal, dacă sunteți doar folosind PHP și o bază de date, aveți pentru a reîmprospăta pagina înainte de a putea obține informații noi de la server. Dar folosind AJAX, puteți trage pentru că informații noi în mod constant, sau trage pentru el atunci când faceți clic pe un buton sau ceva de genul asta. Deci, acest lucru ne permite să trimiteți cereri fără a reîncărca pagina, și putem folosi fie GET sau POST cereri. 

Cererile GET sunt, de exemplu, dacă vă la Google.com și de a face q = test. Care-i da un test de interogare. Și că este o cerere Da, deoarece se trece în acești parametri în URL-ul în sine. O solicitare POST este ca daca esti le trimit prin poștă. E ca si cum l-ai pus într-o scrisoare și nava-l la ei, dar ei nu văd de fapt, conținutul. Ei nu sunt vizibile în adresa URL. Nu puteți să-l tastați direct în, trebuie să-l trimită aproape secret. Este într-un mesaj. Dar folosind jQuery, puteți face GET si POST cereri mult mai ușor decât în ​​mod normal, ai putea folosind doar JavaScript simplu. Puteți interoga API-uri folosind Cererile GET, și puteți verifica, de asemenea, pentru informațiile de conectare. Pe pagina următoare, am creat aceasta, care întreabă, "Ce e pentru masa de prânz?" folosind Harvard alimente API, asa ca hai sa trage asta. Acesta este doar un exemplu de modul în care puteți folosi jQuery pentru a face o cerere de a ajunge la un API și a obține informații înapoi la ea. Așa că vrem să vedem meniul pentru ziua de azi, și vrem să vedem ceea ce este pentru masa de prânz. Aici e URL-ul pentru a crea o cerere intra in jQuery. utilizați $. obține funcția. Primul argument este URL-ul, deci exact ceea ce interogarea. Apoi, următorul argument este o funcție care execută atunci când cererea GET este completă. Deci, va trimite pe unii cerere la server, așteptați pentru ca aceasta să vină înapoi. When it se întoarce, vei va lua ceva acțiune datele care înapoi la server. Să mergem mai departe și codul aceasta, de asemenea. Nu am codul asta, fie, în scop. Aici e TODO. Mai întâi de toate, haideți să utilizați obligatoriu eveniment astfel încât atunci când acest buton este apăsat, ne trimit o cerere GET. Și în momentul în care cererea GET întoarce cu unele date, am de gând să-l scrie în această masă informații ID-ul div. Mai întâi de toate, să selectați butonul ID alimente. Atunci când se face clic, vrem să facem ceva. Să fac o fuction anonim, la fel ca înainte. Poate încheia aceste acolade, și atunci când acest buton este apăsat, dorim să trimită o cerere Da pentru a verifica ceea ce este pentru masa de prânz. Pentru a face acest lucru, putem doar să tastați $. Obține. Aceasta este o funcție jQuery, folosind semnul $. Este nevoie de o pereche de argumente. Prima este URL-ul, al doilea este funcția de apel invers, funcție care se numește în momentul în care cererea se întoarce de fapt. Să construim doar URL-ul primul. O putem lua de la API că David a scris sus. Mergând aici, putem vedea că e food.cs50.net/api/1.3/menus, și atunci trebuie doar să treacă în numele parametrilor care le-ar dori. Deci parametrul 1 este valoarea 1. Se pare ca data standardul, începe data, implicit azi Dacă nu se introduce nimic, și data de sfârșit și implicite pentru ziua de azi, dacă nu introduceți nimic. Asta e ceea ce ne dorim. Vrem doar pentru a obține informații pentru ziua de azi. 

Vrem ca formatul să fie în JSON. Asta e doar arbitrar, se poate folosi orice formă pe care doriți. Puteți folosi CSV, dar JSON este JavaScript Object Notation. Este foarte usor de JavaScript pentru a înțelege ce înseamnă, și putem imprima mai ușor așa. Deci, haideți să-l solicita în JSON, și cererea de prânz hai. Deci, masa = masa de pranz. Doar pentru a scrie că URL-ul, ne întoarcem aici. Există meniuri. Primul parametru este de ieșire = JSON pentru că asta e ceea ce ne dorim, și să separați parametrii cu o "și." Al doilea parametru este - Nu-mi amintesc. Masa. Și vrem masa = masa de pranz. Puteți testa acest URL tastând-o în browser-ul dvs. și să-l. Acesta vă va oferi o ieșire. E doar o grămadă de lucruri care-i pentru masa de prânz. Este scris în acest format urât. Vrem să-l imprima pe pagina noastră într-un format mai bun. Deci, URL-ul este corect, acum trebuie doar să scrie o funcție pentru a apela înapoi, atunci când cererea este de succes. Această funcție va avea de fapt un argument. Acesta va fi de date. Date este ceea ce se întoarce de la cererea GET după ce cererea GET se face. Putem face acolade, aici vom scrie functia anonim care execută, folosind ca date atunci când vom obține informații înapoi. Astfel de date, atunci când am scris în această adresă URL, aceasta este ceea ce date va arata. O să fie în acest șir imens. Dar un lucru bun este, JavaScript poate analiza prin utilizarea funcției JSON.parse. Deci, haideți să creeze o nouă variabilă numită de date analiza. Și date analiza este o serie de obiecte. Fiecare obiect conține informații, cum ar fi - de asemenea, să aruncăm o privire. Ea are o data, o masă, categorie, reteta, toate aceste alte lucruri. Așa că hai so imprima numele pentru fiecare. Să repeta pe întreaga gamă de lucruri pe care le primim înapoi de la ea, și doar imprima fiecare - imprima numele fiecăruia. Acesta este un pentru buclă. 

JavaScript are această sintaxă util în cazul în care puteți crea o variabilă și buclă pe o matrice, și var eu este doar iterator, astfel încât în ​​loc de a avea de a face var i = 0, Am fost mai mică decât lungimea, i + +, puteți face doar var i în date parsate. În acest exemplu, datele parsate.Toate (i) va corespunde elementului curent de matrice, obiectul real. Și vrem să obțineți numele din ea. Deci, hai să facem nume. Și ultimul lucru este, vom avea din nou un jQuery. De fapt adauga la div, aceasta masa informații div care este în prezent gol. Deci, haideți să selectați asta. Vom folosi masa informații div ID-ul jQuery și selectați, sau informatii masa ID, îmi pare rău. Vrem să adăugați la acest lucru. Dacă am făcut testul, de exemplu, s-ar suprascrie doar de fiecare dată singur. Deci, putem adăuga pur și simplu acest lucru. Elementul curent în matrice, vom obține numele de ea, și vom adăuga la sfârșitul ID-ul info masa div. Și apoi doar pentru a face să arate mai curat, vom adăuga, de asemenea, un sfârșit de linie, astfel că nu e totul pe o singură linie. Deci, dacă totul merge bine, că ar trebui să fie bun la - În primul rând, ori de câte ori acest buton este apasat, se va trimite de pe o cerere a ajunge la această adresă URL. În cazul în care datele se întoarce de la ea, o voi analiza, transforma într-JSON, bucla peste tot array care reprezinta aceste date, și apoi adăugați numele și un sfârșit de linie pentru fiecare linie în această masă informatii ID, care a fost anterior gol. Deci, merge înapoi la această pagină, vom actualiza, clic, afla - nu funcționează. Asta e nefericit. Și acest lucru este în cazul în depanare vine inch Index.html, linia 1. E interesant. Bine, bine, mai degrabă decât petrece timp face acest lucru, eu sunt doar de gând să trageți în sus dosar făcut că am, care este versiunea finalizat. Nu sunt sigur în ce constă diferența, dar putem deschide doar asta în schimb. Și mergem la AJAX, iar acest lucru ar trebui să funcționeze corect. Asta este ceea ce a fost azi la prânz, în nici o ordine anume, cu citate din jurul ei, așa că nu e cea mai frumoasa. Dar, evident, dacă faci acest lucru pentru un proiect final, v-ar face să arate mai bine. Dar asta e doar un simplu exemplu de cum să faci cerere Da. Și dacă ne uităm la codul actual, bănuiesc, eu sunt destul de sigur este încă destul de mult la fel. Oh, am uitat să-l transforma într-un șir, care este. Nu, nu este încă de lucru. Indiferent, aici e codul actual, completat de ce acest lucru ar trebui să arate, și-l face același lucru ca ceea ce am pus în aplicare. Când faceți clic pe butonul, se foloseste GET JSON pentru a analiza datele în mod automat. Este nevoie de date înapoi la ea și buclele prin toată gama și imprimă - orice e pentru masa de prânz astăzi, numele de ea, și adaugă un sfârșit de linie după fiecare linie. Asta e modul în care utilizați funcția GET. 

Puteți folosi, de asemenea, POST, pe care nu am avut timp pentru a scrie un exemplu pentru ea, dar ne putem uita la documentația. Dacă te uiți la jquery.post, puteți vedea că este aproape același lucru. Ai un URL, dar în loc de a trece parametri folosind - doar punerea lor în șirul de URL-ul în sine, va trebui să treacă în această variabilă de date care este de fapt un tablou, un dicționar care hărți parametrii la valorile. Tu treci că în, și care le trimite în ajutorul unui POST. Și odată ce ați că, atunci puteți avea o funcție de succes care execută atunci când datele se întoarce. În caz contrar, e exact la fel. Deci, folosind POST, este posibil să doriți să utilizați POST, de exemplu, dacă aveți o formă de intrare te lasa oamenii parole de intrare în ea, și trimite aceste parole pe pentru a script-ul de back-end, pentru a verifica în baza de date dacă acel utilizator este valid sau nu. Puteți face că tot cu ajutorul jQuery în loc de a avea pentru a actualiza pagina, la toate. Asta e modul în care am implementat în blog-ul pe care v-am arătat mai devreme. Dacă vom merge la portalul final și să ieșiți, log out, Log out nu funcționează. Ei bine, lăsați-mă să deschideți-l într-o fereastră nouă. Aici există o parolă, și am fost de gând să tastați în ceva aleatoriu. Ea nu funcționează, dar puteți vedea că nu am făcut de fapt, pentru a actualiza pagina, la toate. Codul, dacă vrei să te uiți la ea, toate acestea sunt disponibile aici. Deci, codul am scris anul trecut cândva. După cum puteți vedea aici, vom trimite o cerere POST. Am un fișier numit login.php în partea din spate, care verifică dacă parola este valabil. Parametrii trecem la o parolă, mapate la de intrare care este în această casetă de intrare în prezent. Și atunci când datele se întoarce, vom verifica. În cazul în care datele este falsă, atunci spunem parolă incorectă, glisați în jos, și chiar face să dispară după aceea. În caz contrar, vom încărca pagina de admin. Și acest lucru a fost făcut cu ajutorul JSON. În această multe linii de cod, se poate trece doar datele la capătul din spate, verificați dacă este corect, verificați dacă ați conectat în mod corect, și de fapt, răspunde la ea, redirecționarea persoana la pagina corectă sau nu permițându-le să vă autentificați și spunându-le că au o parolă incorectă. Deci, asta e un exemplu de cum ai putea folosi POST jQuery pentru a trimite o cerere POST pentru partea ta din spate, verificarea dacă cineva a conectat corect. 

În regulă, deci asta e tot exemplele le-am avut, și toate lucrurile pe care am vrut să le acopere. Acestea sunt cele mai importante lucruri pe care jQuery vă permite să faceți: selectați elemente, modifica-le folosind DOM manipulare, Puteți adăuga efecte, activa lucrurile pe anumite evenimente, și de a face, de asemenea, cereri AJAX, foarte perfect și ușor. Deci, vă mulțumesc că ați venit sau vizionarea, și dacă aveți orice întrebări, doar să-mi spuneți. Da? [Student] Înapoi atunci ai arătat, ai avut JSON după solicitarea POST în ghilimele, și mă întrebam despre ce a făcut. >> Da, văd. Întrebarea a fost că, în exemplul am arătat, acolo a fost JSON cuvântul în ghilimele - Voi trage doar l din nou - în jurul funcției de POST. Eu doar l trăgând în sus pentru a arăta. Deci, aici e solicitare POST, și nu există acest JSON în ghilimele. Asta doar definește ceea ce ne asteptam de ieșire să fie. Deci, dacă am întâmpla în JSON ca tipul de date, nu este o cerință, dar dacă am trece la, apoi datele vor fi analizat în mod automat ca JSON. Deci, noi nu trebuie să apela funcția parse JSON pe ea, se va întâmpla doar în mod automat. Și, dacă aruncăm o privire la documentația pentru POST, nu există acest tip de date variabile, tipul de date așteptate de la serverul. Implicit este o presupunere inteligent care poate fi greșit, astfel încât să puteți lăsa gol, dar e doar tipul de date în codificare pe care îl utilizați, fie că este vorba JSON sau XML sau altceva. 

Orice alte întrebări? Bine. Dacă aveți orice alte întrebări, nu ezitați să mi e-mail la vshekhawat@college.harvard.edu, și diapozitive și cod ar trebui să fie disponibile on-line destul de repede. Mult noroc cu proiectele finale, sper să folosiți jQuery. [CS50.TV]