[Powered by Google Translate] [Seminārs: jQuery] [Vipul Shekhawat, Harvard University] [Tas ir CS50.] [CS50.TV] Ja jūs esat pēc gar mājās, jūs faktiski var piekļūt saviem slaidiem tiešsaistē , dodoties uz šo saiti. Tas ir TjjRWj, uz bit.ly. Jūs varat arī vienkārši doties uz URL tieši, kas ir cloud.cs50.net / ~ vshekhawat, kas ir mans vārds, un jQuery. Es ļoti iesakām jums sekot līdzi, ja jūs skatītos mājās, un, ja tu esi šeit, arī, jo tas ir diezgan interaktīva prezentācija. 

Tātad, šodien es esmu gatavojas runāt par jQuery, un pirmais jautājums ir, kas ir jQuery? Šogad, es zinu, ka jūs guys nav ietvertas JavaScript tik daudz sīkāk, kā mēs esam iepriekšējos gados. JavaScript ir, pirmkārt, vienkārši klienta puses valoda ka jūs izmantojat, lai palaistu skriptus un kodu uz katra lietotāja datorā. Tātad jums ir serveris, kas nodrošina mājas lapas, lai cilvēki, bet jūs varētu vēlēties darīt stuff par to mašīnu, lūdz to aparātu, lai nosūtītu pieprasījumus uz jūsu serveri ik pēc 30 sekundēm, vai kaut kas tamlīdzīgs. Jūs varat darīt, ka, izmantojot JavaScript. JQuery tikai nodrošina lielāku funkcionalitāti virsū JavaScript kas dara papildu stuff jums. Ja paskatās saturu uz augšu, , kas raksturo dažas no stuff, ka jūs varētu darīt. Tātad kopumā, tas tika izveidots 2006.gada janvārī. Tas pirmo reizi tika ieņemts no 2005.gada augustā. Tas ir apmēram uz pāris gadiem, un tas ir patiešām daļa no jaunā Web 2.0 kustība kas ir izgatavoti interneta tik spīdīgs. Tā ir visplašāk izmantotais JavaScript bibliotēka. Vairāk nekā 19,6 miljonu tīmekļa vietnes, izmantojot to, un izmantošana joprojām pieaug saskaņā ar builtwith.com, kas, acīmredzot, pēdējā gada laikā, tikko ir nepārtraukti pieaug diezgan lineāri. Starp top 10 miljoniem vietu, tur ir vēl - aptuveni 40% no tiem pašlaik to izmanto. Facebook to izmanto, daudz citas mājas lapas pašlaik to izmantot. Jūs varat ielūkoties tiem par savu statistiku, ja vēlaties. Un jūs varētu pateikt, tas ir legit, jo tas ir pamats, un 13 valdes locekļi, kopā ar komandu 20 cilvēku, kas strādā par to regulāri. Tātad, tas ir ļoti plaši izmantots, tā ir. Org URL, tas ir iedomātā, tas ir spin-off par citām lietām, tāpēc tas ir liels darījumu. 

Kādēļ Jums vajadzētu izmantot to? JQuery ir ļoti viegla. Tas nozīmē, ka tas nav milzīgs fails. Jūs varat lejupielādēt the minified fails, kas bez visām atstarpēm un komentārus, un tas ir tikai 32 kB. Tātad, tas ir viegli vienkārši mētāties uz jūsu mājas lapā un tikai, lai sāktu to lietot. Tas ir arī ļoti efektīvi rakstīts, tāpēc tas nav aizņem daudz - tas nav palēnināt jūsu mājas lapā ir daudz, ja jūs to izmantot. Tas ļauj īstenot lietas, kas iepriekš bija neiespējama. Ir daži funkcionalitāti aspekti, piemēram, izveidojot animācijas, kas parasti būtu ļoti, ļoti grūti to darīt. Bet jQuery viņi tiešām ir ļoti vienkārši. Un tur ir dažas lietas, kas ir kaitinošas, ko darīt, iespējams, JavaScript, piemēram, nosūtot POST pieprasījumu, bet nosūtīt pieprasījumu uz serveri, jums ir rakstīt piecas vai sešas vai septiņas rindiņas kodu. Tagad jūs varat vienkārši darīt to vienā rindā kodu, vienā funkciju zvanu. Tas patiešām vienkāršo daudz sīkumi, ka jūs darāt. Un visi cool kids izmanto to. Ar šo, es domāju mani. Manā pēdējā projekta pagājušajā gadā, kas ir news.whrb.org, kas ir radio stacijas, es izveidojis šo blogu kas rīko visu rāda, ka mēs esam darīts, un MP3 failus uz tām. Jūs varat pārlūkot pagātnes liecina, un tas viss ir darīts, izmantojot jQuery. Jūs varat pateikt jo visiem šiem animāciju, būtībā. Tātad, ja jums ir - ja jūs izveidotu jaunu ziņu, jūs redzat šos maz slideDowns, tas viss ir darīts, izmantojot jQuery. Un tas izbalināt - tā, ka stuff veida tiek viss darīts, izmantojot jQuery, un jums nav pastāvīgi pārlādēt lapu, lai virzītos vietnē. Vēl viens atdzist lieta, kas ir veikti, izmantojot jQuery ir šī prezentācija. Es esmu, izmantojot šo atvērtā koda lieta, ko sauc scrolldeck, ko kāds rakstīja virsū jQuery. Ja jūs tiešām paskatās avota, jūs varat redzēt, ka viņi izmanto šo dolāra zīmi; dolāra zīmes izmanto jQuery, lai apzīmētu, ka funkcija ir jQuery funkcija. Tātad viņi definējot iesaiņojuma virsū jQuery , kas ļauj jums veikt prezentāciju, piemēram, tas, un jūs varat redzēt, ka šeit viņi arī sākotnējo jQuery failu, kas ir tas, kas jums ir jāiekļauj, ja vēlaties izmantot jQuery jūsu pašu mājas lapas. 

Pieskaroties uz to, kā jūs instalēt to? Jūs varat vienkārši doties uz jQuery.com un lejupielādēt failu, pievienojiet to, lai interneta katalogs un iekļaut to. Tātad tikai uz augšu, jo galvas tagu jūsu HTML failu Jūsu galvenais HTML failu, vienkārši ir, ka rindiņu kodu ar pareizo versiju, par kuru versiju jQuery jūs izmantojat. Jūs varat lejupielādēt to, dodoties uz jQuery.com, noklikšķiniet uz "download jQuery", un jūs esat ieguvuši to. Viss. Un patiesībā, mēs varam apskatīt, kā tas izskatās. Ja jūs noklikšķiniet uz lejupielādēt šeit, jQuery tas ir. Tas ir tikai viens liels JavaScript fails, kas dara visu burvju stuff jums. Tas ir minified variants, kas ir ne salasāms vispār. Jūs varat arī apskatīt attīstības versiju, kas ir lasāma bet joprojām ir ļoti, ļoti ilgstošs. Tas ir daudz stuff tur. Jūs varat arī saites uz Google hosted versiju. Tātad, kas jums ļauj jums, lai tikai paļauties uz Google, lai nodrošinātu to. Tie nodrošina katru versiju par to, kas ir pieejams visu laiku. Tātad, jūs varat droši paļauties uz Google uzņemt to you. Vai arī jūs varat saistīt ar jQuery pašu jaunāko versiju. Viņi ir URL, kas vienmēr ir atjaunināta ar jaunāko versiju. Tas ir jQuery jaunākais, un tur ir viena problēma ar to, ka , kas ir tāds, ka tad, ja atjaunošana jQuery un daži no iepriekšējā funkcionalitāti viņi kļūst retrograded vai novecojis, tā nevar - tas var sākt, lai nesaņemtu atbalstīta vairs. Tātad, ja jūs rakstīt mājas lapā, izmantojot versija 1.8.2, līdz tam laikam, versiju 2.7 nāk no dažas funkcijas jūs rakstījāt nedarbojas vairs. Tātad, tas ir labāk, lai tikai lejupielādēt 32 Kb failu, ielieciet to savā mājas lapā, un tas būs darbs visiem laikiem. 

Es iešu uz priekšu un sākt runāt par faktisko funkcionalitāti jQuery. Pirmā lieta ir pārslēdzējiem. Tas ir tas, ko jQuery bija sākotnēji iecerēts, lai nodrošinātu. Un jūs varat noklikšķināt uz dokumentāciju, lai apskatīt sīki izstrādātu dokumentāciju par šķirotāja es esmu būs segums. Aiz šķirotāja ideja ir, ka jūs varat izvēlēties HTML elementus lapā. Elementi lapā ir ID un nodarbības un citus identifikācijas aspekti uz tiem. Pastāv arī - tās ir bez dažādos pasūtījumus. Kādu laiku viņi ligzdotu iekšpusē viens otru. JQuery ļauj jums izveidot vienkāršus jautājumus, kas ielādētu elementus no lapas. Tad jūs varat manipulēt šos elementus, izmantojot jQuery funkcijas, kas ir manipulācija sadaļa, mēs sāksim vēlāk. Jūs varat mainīt HTML, mainīt CSS, Jūs varat arī animēt un pievienot funkcijas, kas aktivizē par dažiem notikumiem. Tātad, piemēram, ja kaut kas ir noklikšķinājuši, jūs vēlaties, lai kaut ko, jūs varat darīt, ka, izmantojot jQuery, kā arī. Un tur ir ļoti daudz veidi, lai izvēlētos elementus. Lielākā daļa no viņiem es nekad neesmu lietojis, bet ir pamata tie, kas ir diezgan svarīgi. Elements atlasītāju, piemēram, ja jūs vienkārši izvēloties kaut ko ka ir div - man tiešām ir kods atvērts šai prezentāciju. Tātad, piemēram, šeit ir pirmais slide. Šeit mums ir div. Ja mēs patiešām izvēlētos visus divs lapā, tas būs tikai dod mums masīvs visu divs, kas pastāv šajā lietā. ID selektors ļauj izvēlēties kaut ko ar norādīto ID. Tātad, ja tas, piemēram, šī lieta ir ID ", ko," un, ja mēs to darījām ar # kāda nevis daži ID, tas būtu tikai atgriezties masīvu, kas ir kā atsevišķs elements, un ka ir tas, ka elements of the page. Mēs varam arī kombinēt pārslēdzējiem šādā veidā, ņemot tikai izvēlēties lietas ar ID, kas ir divs. Tātad yeah. Izvēlēties tikai divs, kas ir šo ID. Klasei jūs vienkārši izmantot punktu, tas ir tas pats, CSS. Pēcnācējs arī strādā, tādēļ, ja Jums ir dažas klases un tas ir nested elementus tās iekšienē - tā, piemēram, ir dažas klases, un tas ir enkura tagu saiti uz citu lapu, Jūs varat izmantot šo sintaksi, lai ielādētu saiti. Jūs varat izvēlēties arī vairākas lietas uzreiz, vienkārši atdalīt ar komatiem, izmantot jebkuru selektoru vēlaties, un jums būs izvēlēties tos visus uzreiz, vienā masīvā. Un tad tur arī nav atlasītāju, lai jūs varētu izvēlēties visus divs ka nav kāda īpaša klasē. Un tas ir tikai noderīgs veids, kā iegūt ieskatu par to, kā šī izvēle darbojas. Es jums parādīs dažus konkrētus piemērus sekundē. 

Advanced selektori ir - tie ir tikai daži piemēri. Ir desmitiem no tiem, bet, ja jūs vēlaties, lai atlasītu visus attēlu tagus ietvaros kādu elementu, tad jūs vienkārši darīt: attēlu. Ja jūs vēlaties, lai izvēlētos pat elementus, piemēram, ja ir 20 no tiem, Jūs vēlaties, lai izvēlētos 0, 2, 4, 6 un tā tālāk, jums: pat, vai arī jūs varat darīt: dīvaini. Tie ir pseido pārslēdzējiem, kas nozīmē, ka tās faktiski aprēķinātu katru otro elementu, nevis tikai iet, un izvēloties tos visus. Jūs varat arī - katrs elements var būt arī īpašas atribūtus. Tātad, piemēram, klase = centrs ir arī atribūts. Par šo enkura taga, href, hiperteksta atsauce, ir atribūts arī. Tātad, jūs varat izvēlēties kaut ko, kas saites uz konkrētu lapu vai vienkārši - tas ir ļoti vispārīgs. Jūs varat izvēlēties kaut ko ar kādu atribūtu, ko vēlaties. Un tad arī raksturlielums satur. Ja jūs, piemēram, vēlas, lai atlasītu visus ievades elementi , kas ir ietverts vārds "ieskaitīts" kā nosaukums no tiem, ja lapa ir ievades teksta bloku kas ir sauc par "parole", ka gribētu būt viens veids, kā jūs varētu izvēlēties to. Un tur ir daudz vairāk. Jūs varat iet uz priekšu un apskatīt dokumentācijā un redzēt konkrētus piemērus par to, kā tā darbojas. 

Nākamā lieta ir DOM manipulācijas. Pēc tam, kad mēs izvēlētos elementus, mēs vēlamies, lai faktiski darīt stuff ar tiem. Līdz šim mēs neesam paskatījās, ka vispār, bet, ja paskatās dokumentāciju, tur ir tiešām daudz, ka mēs varētu darīt. Šajā brīdī, mēs ejam, lai izvēlētos elementus šajā prezentācijā un manipulēt ar viņiem, izmantojot jQuery. Tā kā šis ir realizēts, izmantojot jQuery, mums ir pieeja jQuery bibliotēku, un mēs varam izmantot šīs funkcijas ar šo kodu. Viena noderīga lieta, kas jums nevar zināt par to ir konsole. Un Google Chrome ir tas, ko es esmu, izmantojot. Jūs varat nospiest alt komandu J vai alt kontroles J, lai atvērtu konsoli. Firefox Es domāju, ka ir komandas Shift K vai kontroles maiņu K. Safari jums ir jāiet mainīt dažus iestatījumus. Tur ir saite, ja vēlaties to darīt, bet es ieteiktu iegūt Chrome vai Firefox. Tātad, pieņemsim atvērt konsoli, tas ir uz leju šeit. Tas ļauj jums, lai būtībā vienkārši darīt kaut ko vēlaties. Tātad jūs varat vienkārši ierakstiet izveidot mainīgo sauc x, x = 5, pieņemsim redzēt, kas x + 2 ir. Jūs pat varat darīt kaut ko līdzīgu CS + pieņemsim redzēt, x + 45, kas būs CS50. Jūs varat vienkārši darīt dažas tipiskas JavaScript sīkumi. Bet jūs varat arī darīt jQuery šeit. 

Tātad, pieņemsim apskatīt šo pirmo aspektu šeit. Mēs ejam, lai izveidotu mainīgo sauc HTML, kas ir virkne. Tas ir punkts tag tajā, ka sauc kādu jaunu tekstu. Tātad mums ir šī HTML, tas ir dažas jaunas tekstu, kas rindkopas. Tagad mēs vēlamies, lai pievienotu to lapu. Es noteikt to uz augšu tā, ka šajā punktā HTML, šī sadaļa šeit ir pievienošana ID. Ja mēs izvēlamies pievienošanas ID, un pēc tam pievienot to HTML mainīgo Es tikko izveidoju, tā piebilst, ka HTML beigās, uzreiz pēc šī punkta tagu. Tātad, ja mēs to darām, ka - mēs izvēlējāmies šo punktu, un mēs esam sauc pievienošanas funkcija ar HTML mainīgā Es tikko pievienotās, tā piebilst, ka jaunu tekstu turpat lapā. Mēs var arī prepend, kas nozīmē, ka tas iet pirms, sākumā minētā elementa. Tātad ir dažas jaunas teksta sākumā un pēc tam. Es varu iet uz priekšu un atsvaidzināt, lai atbrīvotos no šī stuff es tikko darīts. Bet tas ir piemērs tam, kā jūs varat izmantot prepend un pievieno metodes manipulēt sīkumi lapā, pievienot dažas HTML. 

Jūs varat arī mainīt nodarbības. Atpakaļ šī stila lietas, es esmu izveidojis šo par win klasei kas ir teksta sarkano krāsu, dažas fona krāsu un teksta ēna. Tas izskatās pretīgs, bet es varu tiešām - Šī daļa atbilst klases ID. Lai es varētu pievienot klasi win. Es varu izpildīt šo konsole, un kas būs pievienot šo klasi, un tagad tas izskatās pretīgs, kā gaidīts. CSS automātiski tiek piemērots klasēm, kas jums - ja tur ir CSS klases, tas automātiski tiek piemērots ja maināt klases elementa. Tad mēs varam tikai noņemt to, izmantojot noņemt klasē. Tātad, ja jums ir kādas iepriekš klasēm, piemēram, sarkana vai iezīmēts, un tad jūs vēlaties pieteikties tiem elementiem, jums nav darīt visu CSS ieveidošanas katru reizi. Jūs varat vienkārši pievienot klasi uz elementu, un tad tas automātiski kļūs - tas automātiski meklēt piemērotas šai kategorijai. Mēs varam arī noņemt lietas, tāpēc es esmu gatavojas, lai atlasītu visus divs lapā un tos novērstu. Kas ir tas, ka gatavojas izskatās? Tas notiek, lai izskatās nekas, tāpēc tur tiešām nekas pa kreisi. Mana prezentācija ir pagājis. Es varu atsvaidzināt un dot to atpakaļ, par laimi, tāpēc, ka tas ir tikai darbojas vienu reizi, bet tas ir piemērs, kā novērst, ja jūs vēlaties, lai pilnīgi iznīcinātu elementu off lapā. 

Jūs varat arī pārrakstīt, un es esmu gatavojas, lai atlasītu visu rindkopu tagus lapā un iet iekšā tiem, un aizstāt neatkarīgi tekstu viņi ir ar tiem tikai ar vārdu "pārbaude". Ja jūs to izdarītu, jums ir aizstāt katru punktu uz lapas ar šo testu. Yep. Viņi visi aizstāts ar testēšanu. Tātad tas ir piemērs, kā piekļūt tekstu un pārrakstīt to. Jūs varat arī iegūt informāciju, un tas ir patiešām atdzist ievades lodziņos. Ja jums ir ievades lodziņā, ka cilvēki rakstāt stuff, cilvēki ir rakstīt sīkumi tajā, Šeit mēs izvēlamies ievadi, jebkuru ievades tag ar veida tekstu. Šajā gadījumā, tur ir tikai viens ievades lodziņš visā prezentācijas, tāpēc mēs vienkārši izvēlieties pirmo vienu, un tad mēs saucam val funkcijas par to. , Kas atgriež vērtību, un uz ievades lodziņā, vērtība ir tikai neatkarīgi notiek, ir tā iekšpusē. Tātad, ja mēs to darām, tas tikai atgriež virkni sīkumi. Un, ja mēs to saucam atkal pēc rakstīšanas vairāk stuff, tas pārvēršas vairāk stuff. Tas ir viens lielisks veids, kā piekļūt elementus ievades lodziņā, un pēc tam pārbaudiet, tas ir derīga e-pasta adrese, tas ir derīgs datums, piem. Jūs varat vienkārši paņemt sīkumi uzreiz, jo cilvēki ir rakstīt to, un pēc tam pārbaudiet, vai tas ir derīgs, nosūtīt to atpakaļ uz serveri, darīt kaut ko vēlaties ar to. Un tas, kā jūs varat piekļūt, kas ir iekšā tās kastes. 

Jūs varat arī mainīt CSS tieši, tā vietā, pievienojot klase, kas ir dažas iepriekš īpašības, jūs varat vienkārši pievienot neatkarīgi CSS jūs vēlaties kaut ko. Tātad, pieņemsim izvēlēties struktūra, kas ir visa prezentācija, un krāsa ir īpašums, kas nosaka to, ko krāsas teksts ir. Ja mēs mainīt to uz sarkanu, visi šajā lapā teksts kļūs sarkans. Mēs varam kaut ko darīt, piemēram, fona krāsu zila, tur mēs ejam, tas ir skaisti. Jūs varat darīt kaut ko vēlaties ar to. Izmantojot CSS īpašuma, jūs tiešām var mainīt to, kā kaut kas izskatās jebkurā laikā. Nākamā lieta, ir sekas. Ietekme ir būtībā tas pats, modificējot CSS, bet viņi faktiski sniedz dažas papildu animāciju, lai to. Tātad, nevis tikai parādot vai slēpjas kaut vai mainot krāsu, Jūs faktiski var padarīt animācijas. Lūk dokumentāciju, ja jūs vēlaties veikt apskatīt plašu dokumentāciju par to. Bet es esmu gatavojas segt galvenās ones. Ir parādīt un paslēpt īpašības. Rādīt / slēpt ID faktiski atbilst šo visu lodziņā, tāpēc, ja es slēpt to, tas vienkārši pazudīs. Un es varu parādīt to vēlreiz, ja es gribu, lai tā nāk atpakaļ. Un tas ir atpakaļ. Tas nav faktiski pazūd, Man nav faktiski izņemt no lapas, es tikko noteikts CSS īpašums redzamību slēptās tāpēc jūs nevarat redzēt vairs. Tur ir arī slaidu uz augšu un leju, kas ļauj jums, lai šo efektu. Tā slaidi līdz izzūd, un pēc tam pazūd Jūs varat bīdiet to uz leju, lai tā atgriezties. Un tagad tas ir atpakaļ. Tur ir arī tas izbalināt sekas, kas - fade ID atbilst šajā lodziņā. Ja es fade to ārā, tad tas būs lēnām izzūd. Es varu arī izbalināt to, un tas nāks atpakaļ. Jūs varat arī darīt izbalināt ar, kas ir raksturīgi izbalināt funkciju. Jūs varat to izbalināt uz kādu konkrētu necaurredzamību, kuru vēlaties. Tātad, ja jūs izbalināt lēnām līdz 0,5, tas būs kļuvis pusi redzamas. Es varu darīt to iet uz 0,1, un atpakaļ uz 1 lai tas būtu pilnībā redzami no jauna. Tas ir tikai vēl viens animācijas, ka jūs varat darīt. 

Ir arī pārslēgšanas sekas. Tāpēc es esmu gatavojas, lai izvēlētos pārslēgšanas ID, kas atbilst šo lodziņu, un par šo div jūs varat zvanīt pārslēgšanas, ja tas ir redzams tas kļūs neredzams, ja tas ir neredzams, tas kļūs redzams atkal. Tāpēc es tikai sauc šo pārslēgšanas funkciju divreiz, pirmais bija tas pats, kas slēpt, otrais zvans ir tas pats, kā šovs. Un jūs varat arī darīt to ar izbalināt pārslēgšanas, kas nav tas pats, izņemot tā faktiski zūd. Un tas pats ar slaidu pārslēgšanas. Ir virknes sekas, kā arī, kas nozīmē, ja izvēlaties elements un tikai zvanu ķekars animācijas metodes par to, ja jūs vēlaties, lai izbalināt out, tad slaidu uz leju, un pēc tam slēpt un pēc tam izbalināt, tas darīs tos pēc kārtas. Tātad pazuda, atnāca atpakaļ - kādu iemeslu dēļ, tad paslēpt nenotika. Let 's to izmēģinātu. Jā, tā tas izbalējis, un tad slīdot uz leju prom. Un tur ir daudz vairāk. Jūs varat izmantot animēt funkciju , lai izveidotu savu animācijas, kas ir diezgan sarežģīts, bet tā nodrošina jūs ar bezgalīgu paplašināšanas. Jūs varat veikt jebkāda veida animāciju, kuru vēlaties. Jūs varat izmantot arī rindā, lai rindā līdz vairākiem animācijas laikā. Tātad, ja jūs vēlaties kaut ko lidot pāri lapā, slaidu no augšējā labajā stūrī uz apakšējā kreisajā pusē, jūs varat darīt, ka, un vienkārši ir ķekars rīcībām, kas viens pēc otra. 

Nākamā lieta, mēs nokļūsim līdz runāt par ir notikumi. Notikumi ļauj jums - līdz šim mēs esam tikko rakstīt lietas vērā konsole un tas ir viens no veidiem, lai tas notiktu, bet gan uz faktisko lapu, jūs neesat gatavojas, lai varētu padarīt lietotāja tipa lietas vērā konsole. Jūs vēlaties, lai lietas notiktu automātiski. Šim, jums ir nepieciešams, lai izmantotu pasākumus, kas aktivizē uz kādu konkrētu notikumu notiek. Jūs varat pārbaudīt dokumentāciju attiecībā uz pilnīgu informāciju. Tātad, pieņemsim redzēt. Mēs vēlamies, lai paslēptu vai rādītu lodziņu, bet tagad šī poga nedara neko, jo man nav īstenot vēl. Es iešu uz faktisko HTML lapu. Šeit ir slaids. Tur uz slaida div. Tā ir klasi slaida. Tur ir teksts. Tagad tur ir šis lodziņā un kaste pogu. Kā mēs faktiski padara šo pazūd? Pirmkārt, pieņemsim uzrakstīt funkciju, kas padara kaste ID pazūd. Tas ir sintakse funtion, pieņemsim tikai sauc to hideTheBox. Tā nepieņem nekādus argumentus, jo nav argumentu, kas jāveic. Mēs varam izvēlēties lodziņā ID. Tātad, izmantojot jQuery izvēlēties, mēs varam izvēlēties kaste ID, un tad tikai padarītu to izzūd. Lai tas fade out. Ja mums bija šo funkciju faktisko konsole, mēs varētu definēt šo funkciju, mēs varam zvanīt hideTheBox, un tā darbojas. Bet mēs vēlamies, lai tas notiktu, ja poga ir faktiski nospiests. Lai to izdarītu, mums ir jāizmanto notikumu. Saistīt notikumu, lai kādu konkrētu pogu vai kādu darbību, kas notiek, mums ir, lai izvēlētos elementu, ka pasākums būs iedarbinātu - vai kas liks notikums, piedodiet. 

Tātad, pirmkārt, pieņemsim izvēlieties box pogu ID jo tas ir poga, un tagad, par šo pogu, mēs vēlamies izveidot animāciju, kad tas ir uzklikšķināt. Tātad tur ir tas klikšķis funkcija. Tas ļauj jums, lai uzliktu citu funkciju uz to. Šī funkcija pieņem citu funkciju kā argumentu mēs var iet uz hideTheBox funkciju, un kad šī poga ir noklikšķinājuši, ka funkcija automātiski izpildīt. Tātad, tas darbosies, ja mēs saglabājam to, es atsvaidzināt, un - vienu sekundi, es esmu sorry. Ļaujiet man noteikt šo tiešām ātri. Labi. Tur mēs ejam. Tātad tagad kaste ir izzūd, kad mēs noklikšķiniet uz pogas. Mēs varam arī mainīt to tikai fadeToggle, mainīt to tikai, lai paslēptu vai parādītu lodziņu, un tas arī strādās arī, ja mēs atsvaidzināt. Mēs varam paslēpt to, mēs varam arī parādīt to, un turpinās strādāt. Vēl viena lieta, ko mēs varam darīt, ir, mums nav tiešām ir definēt šo hideTheBox funkciju Pirms mēs saucam par klikšķi funkciju. Tā vietā, lai definētu funkciju un aicinot hideTheBox, mēs esam tikai gatavojas, lai izsauktu to, ja šī lieta ir uzklikšķināt. Tātad, mēs varam definēt anonīmi šeit, kas ir iezīme, ka JavaScript ir. Jūs varat definēt funkciju, parasti mēs teiktu funkciju hideTheBox ar argumentiem, bet tā vietā, mēs varam tikai teikt darboties nekādus argumentus, sākt cirtaini lencēm, lai definētu funkciju, aizvērt šo cirtaini lencēm, un tad tikai definēt funkciju šeit, pirmajā iekavās un pēdējā iekavām kas atbilst ar klikšķi funkcijas argumentiem. Tāpēc mēs esam iet šo funkciju, mēs varam kopēt šo līniju kodu tieši šeit, un kas darīs tieši to pašu. Un tagad mums nav šīs izlases fadeTheBox funkciju kas sēž bez redzama iemesla. Funkcija ir definēta anonīmi, tai nav vārdu. Tas būs tikai izpildīt, kad mēs noklikšķiniet uz kastes pogas. Tik atsvaidzinoša vēlreiz, vēl vienu reizi, un jūs varat redzēt, ka tas joprojām darbojas. Un tas, kā jūs izveidot notikumus. 

Ir dažādi notikumi, ko mēs varam izmantot daudz. Es esmu gatavojas, lai pārslēgtos atpakaļ, izmantojot konsole, lai tikai parādītu, kā tie strādā. Par katru no šiem ID atbilst katrā kastē. Tātad šī kaste ir klikšķis ID, šī ir atslēga ID, un šī ir pele ID. Vēl viena lieta ir, ka tur ir šī rīcība funkcija, nevis ierakstot to ārā katru reizi, Es faktiski devās uz priekšu un kas definēta šo darbību funkciju leju šeit. Tas nav tas pats, kā hideTheBox funkciju. Tas izpaužas šo lodziņu, un vai nu zūd to ārā vai zūd to iekšā Un tas ir iemesls, kāpēc mēs esam spējīgi to izmantot šeit. Tātad, ja mēs noklikšķiniet uz šo klikšķi ID, mēs vēlamies, lai lodziņā pazūd vai atkal parādās. Tas ir tas pats, pogas, kas mums bija pēdējā slaida. Tagad, kad mēs to saucam, ka mēs varam noklikšķiniet uz šo un kaste izzudīs, pēc tam noklikšķiniet uz to vēlreiz, un logs atkal parādās. Tas ir diezgan vienkārši. Dubultklikšķi nav tas pats, izņemot, tas prasa dubultu klikšķi. Tātad, ja jūs noklikšķiniet uz tā vienu reizi, un noklikšķiniet uz tā atkal nekas nenotiks, bet, ja jūs dubultklikšķi ātri, tas pazudīs. Ja jūs dubultklikšķi atkal, tas nāks atpakaļ. Tātad tas ir diezgan vienkārši. Tastatūru ir sava veida dīvaini, es nedomāju, ka tas tiešām darbojas šajā piemērā jo galvenais leju, taustiņu uz augšu un nospiežot taustiņu un citas galvenās darbības aktivizēt vienalga, ko elements, jums saistīt to. Piemēram, pat tad, ja man saistās taustiņu uz leju, lai iestādei vai kaut kas cits pilnīgi, tad tā tomēr aktivizēt vienalga - tas nav īpašs. Man nav jābūt noklikšķinot uz šo un nospiediet taustiņu, lai padarītu kaut ko izzūd. Būtu aktivizēta neatkarīgi no tā, ko elements es esmu šobrīd iekšā Tātad tie nav faktiski strādā šajā piemērā tāpēc, ka tā neatzīst mani, kā ienāk ieguldījumu tastatūras ievades div. 

Bet, ja paskatās peli darbībām, pirmais ir lidināties, un to var darīt kaut ko no tā, izmantojot CSS. Ja jūs izmantojat CSS, jūs varat to izveidot tā, ka, ja jūs lidināties pār kaut ko, tad tās stila izmaiņas. Bet izmantojot jQuery jūs varat mainīt stilu citas lietas, kā arī. Tā, piemēram, mēs ejam, lai izsauktu rīcību, ja mēs lidināties virs šīs div. Tas nozīmē, ja mēs lidināties pār to, tad lodziņā pazudīs. Ja mēs virzāmies prom no tā, kaste atkal parādīsies. Ja mēs to saucam, un lidināties pār to, kaste tas pazūd, un tiklīdz mēs virzāmies prom, tas nāk atpakaļ. Ja mēs saucam lidināties funkciju peles ID, kas atbilst šo lodziņu, tad, ja mēs lidināties virs kastes, tad kaste tiešām pazudīs - tas ir bailīgs tieši tagad, bet - ja mēs virzāmies prom no tā, tas atkal parādīsies. Labais tagad tas ir atpakaļ kāda iemesla dēļ. Pele ieiet un peles pārvietot funkcijas ir nedaudz līdzīgs, bet nedaudz atšķiras. Pele ievadīt tikai aktivizēts, kad pele ieiet kastē, kā plānots. Tātad, ja jūs pārvietot uz to, tas būs izzūd. Bet tas nebūs atkal parādīties, kad jūs pārvietot prom, jums ir, lai pārvietotos atpakaļ uz to, lai tā atgriezties. Pastāv arī peles kustības funkcija, kas aktivizēs kad pele ir pat klāt kastē. Tātad tas būs tikai glabāt uz notiekošo, izgaist iekšā un ārā. Un tas ir faktiski mežizstrāde - šķiet, tāpat kā tas ir vienkārši izgaist iekšā un ārā, bet tas ir faktiski piesakoties daudz vairāk darbību, nekā tas, Tātad, kad jūs attālināties tas būs tikai glabāt notiek tāpēc, ka pieteicies kā tūkstotis no tiem. Varbūt ne tūkstošus. Varbūt pieci. Tas logs vairāk. Punkts ir, visas peles darbību, tur ir daudz no tiem. Jūs varat lasīt līdzi citiem uzņēmumiem, bet tie visi ir nedaudz atšķirīgs, un jūs varat izvēlēties to, kas jums nepieciešams lai atkarībā no konkrētam mērķim jūs mēģināt darīt. 

Nākamā lieta, es esmu gatavojas runāt par ir AJAX. AJAX, es zinu, ka mēs nesedza JavaScript tik daudz dziļums šogad, tāpēc es esmu tikai gatavojas runāt par AJAX kopumā par minūti. AJAX stendi Asynchronous JavaScript un XML. Tas ir būtībā, piemēram, kad jūs esat par Facebook, un tas liek jums paziņojumu, tas ir tāpēc, AJAX darbojas savā interneta pārlūkprogrammā. Ik pēc pāris sekundēm jūsu interneta pārlūkprogramma ir faktiski dodas uz Facebook serveriem, lūdzot viņiem, jums ir kaut ko jaunu par mani, un tad tas nāk atpakaļ uz jums. Tas ļauj jums nosūtīt pieprasījumus uz serveri bez faktiski ielādēt lapu. Tātad normāli, ja jūs tikai, izmantojot PHP un datubāzes, Jums ir, lai atsvaidzinātu lapu, pirms jūs varat saņemt jaunu informāciju no servera. Bet izmantojot AJAX, jūs varat pull šo jauno informāciju pastāvīgi, vai pull par to, kad jūs noklikšķiniet uz pogas vai, piemēram, ka neko. Tātad tas ļauj mums nosūtīt pieprasījumu bez pārkraušanas lapu, un mēs varam izmantot vai nu GET vai POST pieprasījumus. 

GET pieprasījumu, ir, piemēram, ja jūs, lai uz Google.com un darīt q = testu. Tas ir dodot viņiem vaicājumu testu. Un tas ir GET pieprasījumu, jo tas iet šajos parametros uz URL pati. POST pieprasījums ir kā tad, ja jūs nosūtot tos pa pastu. Tas ir tāpat kā jūs nodot to vēstuli un nosūtīt to off uz tiem, bet tie nav faktiski redzēt saturu. Viņi nav redzams URL. Jūs nevarat tieši ierakstīt to, jums ir, lai to nosūtītu gandrīz slepeni. Tas ir post. Bet izmantojot jQuery, jūs varat darīt, GET un POST pieprasījumus daudz vieglāk, nekā jūs parasti var izmantot tikai plain JavaScript. Jūs varat vaicājumu API, izmantojot GET pieprasījumus, un jūs varat arī pārbaudīt pieteikšanās informāciju. Uz nākamo lapu, es izveidojis to, ko jautā: "Kas būs pusdienās?" izmantojot Harvard pārtikas API, tāpēc pieņemsim pull, ka līdz. Tas ir tikai piemērs, kā jūs varat izmantot jQuery darīt GET pieprasījumu uz API un saņemt informāciju atpakaļ no tā. Tāpēc mēs vēlamies redzēt izvēlni šodien, un mēs gribam, lai redzētu, kas ir par pusdienām. Lūk URL, lai izveidotu GET pieprasījumu jQuery. Jūs lietojat $. get funkciju. Pirmais arguments ir URL, lai tieši to, ko jūs esat vaicājumiem. Tad nākamais arguments ir funkcija, kas izpilda tad, kad GET pieprasījums ir pabeigta. Tātad jums nosūtīt off daži pieprasījumu uz serveri, gaidīt, lai tā nāk atpakaļ. Kad tas nāk atpakaļ, jūs gatavojas veikt kādu darbību ar datiem, kas ir atpakaļ no servera. Iesim uz priekšu un kodētu to kā labi. Man nav kodu, vai nu, uz mērķi. Lūk TODO. Pirmkārt, pieņemsim izmantot notikuma saistošs tā, ka tad, kad šī poga tiek nospiesta, mēs nosūtām off GET pieprasījumu. Un, kad tas GET pieprasījumu atgriežas ar dažiem datiem, mēs ejam, lai rakstīt to šajā maltīti info ID div. Pirmkārt, pieņemsim izvēlēties pārtikas pogu ID. Kad tas ir uzklikšķināt, mēs gribam, lai kaut ko darīt. Pieņemsim tikai padarītu to anonīmu fuction, kā iepriekš. Varat wrap šos cirtaini bikšturi, un, kad šī poga tiek nospiesta, mēs vēlamies, lai nosūtītu GET pieprasījumu lai pārbaudītu to, kas ir par pusdienām. Lai to izdarītu, mēs varam vienkārši ierakstiet $. Saņemt. Tas ir jQuery funkcija, izmantojot dolāra zīmi. Tas aizņem pāris argumentus. Pirmais ir URL, otrs ir atzvanīšanas funkcija, funkcija, kas saucas ja šis lūgums faktiski atgriežas. Let 's vienkārši veidot URL pirmās. Mēs varam iegūt no API, ka Dāvids rakstīja augšu. Dodoties šeit, mēs varam redzēt, ka tas ir food.cs50.net/api/1.3/menus, un tad jūs vienkārši iet kas par parametriem, kas jūs vēlētos nosaukumiem. Tātad parametrs 1 ir vērtība 1. Izskatās, ka standarta datumu, sākuma datumu, noklusējumus līdz mūsdienām ja jums nav ievadīt kaut ko, un beigu datumu arī noklusējumus lai šodien, ja jūs neienāk neko. Tas, ko mēs gribam. Mēs vēlamies, lai tikai iegūt informāciju par šodienu. 

Mēs vēlamies formāts būt JSON. Tas ir tikai patvaļīgi, jūs varat izmantot jebkuru formu, kuru vēlaties. Jūs varat izmantot, CSV, bet JSON ir JavaScript Object notāciju. Tas ir ļoti viegli JavaScript lai saprastu, ko tas nozīmē, un mēs varam izdrukāt daudz vieglāk, ka veidā. Tātad, pieņemsim to pieprasa JSON, un pieņemsim pieprasījums pusdienas. Tātad milti = pusdienas. Vienkārši rakstīt šo URL, mēs ejam atpakaļ šeit. Tur ir izvēlnes. Pirmais parametrs ir izeja = JSON jo tas, ko mēs vēlamies, un jūs atsevišķi parametrus, ar 'un. " Otrais parametrs ir - es neatceros. Maltīti. Un mēs gribam maltīti = pusdienas. Jūs varat pārbaudīt šo vietrādi URL, ierakstot to savā pārlūkprogrammā, un iet uz to. Tas dos jums dažas produkciju. Tas ir tikai ķekars sīkumi, kas ir par pusdienām. Tas ir šajā neglīts formātā. Mēs vēlamies, lai izdrukātu to uz mūsu lapu labāku formātā. Tātad URL ir pareizs, tagad mums ir nepieciešams, lai rakstītu funkciju atzvanīt, kad pieprasījums ir veiksmīga. Šī funkcija tiks faktiski veikt arguments. Tas būs dati. Dati ir tas, kas nāk atpakaļ no GET pieprasījumu pēc GET pieprasījums tiek darīts. Mēs varam darīt cirtaini bikšturi, jo šeit mēs rakstīt anonīmu funkciju kas izpilda, izmantojot šos datus, kad mēs saņemam informāciju atpakaļ. Tātad datiem, kad mēs drukāti šo URL, tas ir tas, dati ir gatavojas izskatās. Tas būs šo milzīgo virkne. Bet laba lieta ir, JavaScript var apstrādāt to, izmantojot JSON.parse funkciju. Tātad, pieņemsim izveidot jaunu mainīgo sauc izanalizēt datus. Un apstrādāt datu masīvs objektiem. Katrs objekts satur informāciju, piemēram, - labi, pieņemsim to apskatīt. Tas ir datums, ar maltīti, kategoriju, recepte, visu šo citi sīkumi. Tāpēc pieņemsim tikai izdrukāt nosaukumu katram vienu. Pieņemsim atkārtot visā masīvs sīkumi, ka mēs saņemam atpakaļ no tā, un vienkārši izdrukāt katrs - izdrukā vārdu katra vienu. Tas ir uz cilpas. 

JavaScript ir šo noderīgi sintakse, kur jūs varat izveidot mainīgo un cilpas pār masīva, un var i ir tikai iteratora, tāpēc tā vietā, lai darīt, var i = 0, man bija mazāk nekā garumu, i + +, jūs varat darīt, var i ar parsēt datus. Šajā piemērā, parsēt dati (i), kas atbilst uz pašreizējo elementa masīva, faktisko objekts. Un mēs gribam, lai saņemtu vārdu no tā. Tāpēc pieņemsim tikai darīt nosaukums. Un pēdējā lieta ir, mēs ejam, lai ir dažas jQuery vēlreiz. Faktiski pievienot to div, šo maltīti info div, kas ir tukšs. Tātad, pieņemsim, izvēlieties to. Mēs izmantosim jQuery un izvēlieties maltīti info div ID, vai miltus Info ID, sorry. Mēs vēlamies pievienot šim. Ja mēs tests, piemēram, tas būtu vienkārši pārrakstīt to katru reizi. Tātad, mēs varam vienkārši pievienot šo. Pašreizējā elements masīva, mēs iegūt vārdu no tā, un mēs pievienot to līdz beigām maltīti info ID div. Un tad tikai, lai tas izskatās tīrāka, mēs arī pievienot rindiņas pārtraukumu, lai tas vēl nav viss vienā rindiņā. Tātad, ja viss noritēs labi, ka būtu labi - pirmkārt, ja šī poga ir noklikšķinājuši, tā nosūtīs pie GET pieprasījumu uz šo URL. Ja dati nāk atpakaļ no tā, tas būs izanalizēt to, pārvērst to JSON, cilpa pāri visai masīvs, kas pārstāv šos datus, un pēc tam pievienot vārdu un rindiņas pārtraukumu uz katru līnijas šajā maltīti info ID, kas iepriekš bija tukšs. Tā iet atpakaļ uz šo lapu, mēs atsvaidzināt, klikšķis, uzzināt - tas nedarbojas. Tas ir žēl. Un tas ir, ja debugging nāk collas Index.html, līnija 1. Tas ir interesanti. Labi, labi, nevis tērēt laiku darot to, es esmu tikai gatavojas uzvilkt darīts failu, kas man ir, kas ir pabeigta versija. Es neesmu pārliecināts, kāda atšķirība ir, bet mēs varam tikai atvērt šo augšu vietā. Un mēs ejam uz AJAX, un tam vajadzētu strādāt pareizi. Tas ir tas, kas bija pusdienas šodien, jo nav īpaši secībā, ar pēdiņām ap to, tāpēc tas nav prettiest. Bet, protams, ja jūs darāt to, lai gala projektu, Jūs varētu darīt to izskatīties labāk. Bet tas ir tikai vienkāršs piemērs tam, kā jūs darīt GET pieprasījumu. Un, ja mēs skatāmies faktisko kodu, es esmu guessing, es esmu diezgan pārliecināts, ka tas joprojām ir diezgan daudz to pašu. Ak, es aizmirsu, lai pārvērstu to par virkni, tas arī viss. Nē, tas joprojām nedarbojas. Neatkarīgi, šeit ir faktiski pabeigta kodu par to, kas tas izskatās, un tas nav tas pats, kā tas, ko es tikko īstenots. Kad jūs noklikšķiniet uz pogas, tā izmanto GET JSON, lai automātiski apstrādāt datus. Tā ņem datus atpakaļ no tā un cilpas cauri visai masīvs un izdrukas, ka ir - kāda ir pusdienās šodien, nosaukumu no tā, un pievieno līnijas pārtraukumu pēc katra līnija. Tas ir, kā jūs izmantojat GET funkciju. 

Jūs varat arī izmantot POST, kas man nav laika rakstīt piemēru par to, taču mēs varam apskatīt dokumentus. Ja paskatās jquery.post, Jūs varat redzēt, ka tas ir gandrīz tas pats. Jums ir URL, bet tā vietā iet parametrus, izmantojot - tikai liekot tos virknes URL pati, Jums jānokārto šajā datu mainīgā ka būtībā masīvs, vārdnīcu, kas kartes parametru vērtībām. Jums iet, ka, un nosūta tos, izmantojot POST. Un, kad jums ir, ka, tad jums var būt veiksmes funkcija ka izpilda tad, kad dati nāk atpakaļ. Pretējā gadījumā, tas ir tieši tas pats. Tātad, izmantojot POST, jūs varētu vēlēties izmantot POST, piemēram, ja jums ir ievades forma jūs ļaujiet cilvēkiem ievades paroles tajā, kā arī nosūtīt tās paroles off Jūsu back-end skriptu, lai pārbaudītu datu bāzē, vai šis lietotājs ir derīgs vai nav. Jūs varat darīt, ka visi izmanto jQuery tā vietā, lai atsvaidzinātu lapu vispār. Tas ir, kā es īstenota blogā, ka es parādīja jums agrāk. Ja mēs ejam uz gala portālā un atteiktos, atteiktos, Iziet nedarbojas. Nu, ļaujiet man vienkārši atvērt to jaunā logā. Šeit ir parole, un es biju gatavojas rakstīt kaut ko izlases. Tas nedarbojas, bet jūs varat redzēt, ka mēs neesam faktiski ir, lai atsvaidzinātu lapu vispār. Kodu, ja jūs vēlaties skatīties uz to, ir viss pieejams šeit. Tāpēc kodu es uzrakstīju pagājušajā gadā dažkārt. Kā jūs varat redzēt šeit, mēs esam nosūtot POST pieprasījumu. Man ir failu ar nosaukumu login.php uz muguras beigās, kas pārbauda, ​​ja parole ir derīga. Parametri, mēs caurlaide ir parole, plānots ievades, kas ir šajā ievades lodziņā pašlaik. Un, kad dati nāk atpakaļ, mēs pārbaudām. Ja dati ir nepatiesi, tad mēs sakām nepareizu paroli, bīdiet to uz leju, un tikai padarītu to izzūd pēc tam. Pretējā gadījumā, mēs slodze admin lapu. Un tas viss bija darīts, izmantojot JSON. Šajā Daudzos rindiņas kodu, jūs varat nodot datus atpakaļ beigām, pārbaudīt, vai tas ir pareizi, pārbaudiet, vai jums ir pieteicies pareizi, un faktiski reaģēt uz to, novirzot personu uz pareizo lapu vai neļaujot tiem ieiet, un stāsta, ka viņiem bijusi nepareiza parole. Tātad tas ir piemērs tam, kā jūs varētu izmantot jQuery POST nosūtīt POST pieprasījumu, lai jūsu atpakaļ beigām, pārbaudot, vai kāds ir pieteicies pareizi. 

Labi, tā ka visi piemēri man bija, un visi sīkumi, es gribēju, lai segtu. Tie ir galvenās lietas, kas jQuery ļauj jums darīt: atlasīt elementus, mainīt tos, izmantojot DOM manipulācijām, Jūs varat pievienot efektus, aktivizējiet lietas par konkrētiem notikumiem, un arī darīt AJAX pieprasījumus ļoti nemanāmi un viegli. Tātad, paldies par ierašanos vai skatoties, un, ja jums ir kādi jautājumi, tikai ļaujiet man zināt. Yeah? [Studentu] Atpakaļ, kad parādīja, jums bija JSON pēc POST pieprasījuma citātus, un man bija tikai jautājums, ko tas darīja. >> Jā, es redzu. Jautājums bija, ka, piemēram, es tikko parādīja, tur bija vārds JSON pēdiņās ap - Es ņemšu tikai atkal izvelciet to - ap POST funkciju. Es esmu tikai velkot to uz augšu, lai parādītu. Tātad, šeit ir tas POST pieprasījums, un tur tas ir pēdiņās JSON. Ka tikai nosaka, ko mēs sagaidām, lai produkcija būtu. Tātad, ja mēs pāriet JSON kā paredzamo datu tipu, tas nav, bet, ja mēs caurlaide to, tad dati tiks automātiski parsēt kā JSON. Tāpēc mums nav, lai izsauktu JSON parsēt funkciju par to, tas būs tikai notikt automātiski. Un, ja jūs to apskatīt dokumentāciju POST, ir šī datu tipa mainīgais, datu veidu gaidīt no servera. Tā noklusējuma viedo uzminēt, kas var būt nepareizi, lai jūs varat atstāt to tukšu, bet tas ir tikai datu veidu kodēšanas, ka jūs izmantojat, vai tas ir JSON vai XML, vai kaut kas cits. 

Jebkādi citi jautājumi? Labi. Ja jums ir kādi citi jautājumi, lūdzu, rakstiet man pie vshekhawat@college.harvard.edu, un slaidi un kodi būtu pieejami tiešsaistē diezgan drīz. Good luck ar savu gala projektiem, ceru, ka jūs izmantojat jQuery. [CS50.TV]