1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminaras: JQuery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvardo universitetas]

3
00:00:04,790 --> 00:00:08,000
[Tai CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Jei po kartu namuose, jūs iš tikrųjų galite pasiekti savo skaidres lankosi

5
00:00:10,640 --> 00:00:13,310
, eikite į šią nuorodą.

6
00:00:13,310 --> 00:00:18,650
Tai TjjRWj, ant bit.ly.

7
00:00:18,650 --> 00:00:20,700
Taip pat galite tiesiog eiti į URL tiesiogiai

8
00:00:20,700 --> 00:00:27,300
kuris yra cloud.cs50.net / ~ vshekhawat, kuris yra mano vardas,

9
00:00:27,300 --> 00:00:32,409
ir jQuery.

10
00:00:32,409 --> 00:00:34,920
Aš labai rekomenduojame jums sekti kartu, jei jūs žiūrite namuose,

11
00:00:34,920 --> 00:00:40,650
ir jei jūs čia taip pat, nes tai gana interaktyvus pristatymas.

12
00:00:40,650 --> 00:00:43,160
>> Taigi, šiandien aš ruošiuosi kalbėti apie JQuery, ir pirmas klausimas,

13
00:00:43,160 --> 00:00:45,300
kas yra JQuery?

14
00:00:45,300 --> 00:00:47,090
Šiais metais, aš žinau, jūs vaikinai neapima "JavaScript"

15
00:00:47,090 --> 00:00:51,080
taip detaliai, kaip mes turime per pastaruosius metus.

16
00:00:51,080 --> 00:00:53,150
"JavaScript" yra, visų pirma, tik client-side kalba

17
00:00:53,150 --> 00:00:58,390
kad jūs naudojate paleisti scenarijus ir kodeksas kiekvieno vartotojo kompiuteryje.

18
00:00:58,390 --> 00:01:00,660
Taigi jūs turite serverį, kuris suteikia tinklalapius žmonėms,

19
00:01:00,660 --> 00:01:02,600
, bet jūs galbūt norėsite daryti stuff savo mašina,

20
00:01:02,600 --> 00:01:08,060
paprašyti jų mašina siųsti užklausas į serverį kas 30 sekundžių arba kažkas panašaus.

21
00:01:08,060 --> 00:01:10,420
Jūs galite padaryti, kad naudojant "JavaScript".

22
00:01:10,420 --> 00:01:13,190
JQuery tik suteikia daugiau funkcionalumo viršuje "JavaScript"

23
00:01:13,190 --> 00:01:15,680
kad nėra papildomų dalykų už jus.

24
00:01:15,680 --> 00:01:17,710
Jei pažvelgti į turinį ant viršaus,

25
00:01:17,710 --> 00:01:21,410
kuris apibūdina kai kurių dalykų, kad jums pavyko tai padaryti.

26
00:01:21,410 --> 00:01:23,500
Taigi, apskritai, jis buvo sukurtas 2006 metų sausį.

27
00:01:23,500 --> 00:01:26,560
Ji pirmą kartą buvo sumanyta 2005 metų rugpjūtį.

28
00:01:26,560 --> 00:01:31,370
Jis buvo maždaug už keletą metų, ir tai tikrai dalis naujosios Web 2.0 judėjimo

29
00:01:31,370 --> 00:01:34,330
tai padarė Interneto taip blizga.

30
00:01:34,330 --> 00:01:37,630
Tai plačiausiai naudojamas biblioteka JavaScript.

31
00:01:37,630 --> 00:01:41,450
Per 19,6 mln tinklapis yra nenaudoti ir naudojimas vis dar didėja

32
00:01:41,450 --> 00:01:45,640
pagal builtwith.com, kuris, matyt, per pastaruosius metus,

33
00:01:45,640 --> 00:01:49,710
ką tik buvo nuolat didėja gana tiesiškai.

34
00:01:49,710 --> 00:01:52,870
Tarp geriausių 10 milijonų svetainių, dar -

35
00:01:52,870 --> 00:01:55,180
apie 40% iš jų šiuo metu jį naudoti.

36
00:01:55,180 --> 00:01:58,540
"Facebook" naudoja ją, daug kitų svetainių, šiuo metu ja naudotis.

37
00:01:58,540 --> 00:02:01,540
Jūs galite peržvelgti tų apie savo statistiką, jei norite.

38
00:02:01,540 --> 00:02:05,820
Ir tu gali pasakyti, kad atėjo teisėtu, nes jis turi pagrindą ir 13 tarybos narių,

39
00:02:05,820 --> 00:02:11,910
kartu su 20 žmonių, kurie dirba su juo reguliariai komanda.

40
00:02:11,910 --> 00:02:16,110
Taigi tai labai plačiai naudojama, ji turi. Org URL, tai išgalvotas,

41
00:02:16,110 --> 00:02:21,660
ji turi papildoma nauda kitų dalykų, todėl baisi.

42
00:02:21,660 --> 00:02:24,510
>> Kodėl jūs turėtumėte jį naudoti? JQuery yra labai lengvas.

43
00:02:24,510 --> 00:02:27,270
Tai reiškia, kad tai ne didžiulis failas. Galite atsisiųsti

44
00:02:27,270 --> 00:02:31,540
minified failą, kuris yra be visų tarpą ir komentarus, ir tai tik 32 KB.

45
00:02:31,540 --> 00:02:33,600
Taigi tai lengva tiesiog išmesti į savo tinklalapį

46
00:02:33,600 --> 00:02:35,910
ir tiesiog pradėti jį naudoti.

47
00:02:35,910 --> 00:02:39,630
Taip pat labai efektyviai parašyta, todėl neužima daug -

48
00:02:39,630 --> 00:02:42,550
jis nelėtina jūsų svetainę daug, kai jūs jį naudoti.

49
00:02:42,550 --> 00:02:45,770
Jis leidžia jums įgyvendinti tai, kas anksčiau buvo neįmanoma.

50
00:02:45,770 --> 00:02:47,790
Yra keletas funkcijų aspektus,

51
00:02:47,790 --> 00:02:51,780
kaip sukurti animaciją, kad paprastai būtų labai, labai sunku padaryti.

52
00:02:51,780 --> 00:02:54,300
Tačiau JQuery jie iš tikrųjų labai paprasta.

53
00:02:54,300 --> 00:02:57,040
Ir yra keletas dalykų, kurie erzina daryti,

54
00:02:57,040 --> 00:02:59,610
galima JavaScript, pavyzdžiui, siųsti POST užklausą,

55
00:02:59,610 --> 00:03:02,190
bet nusiųsti prašymą į serverį, jūs turite parašyti

56
00:03:02,190 --> 00:03:04,320
penkių ar šešių ar septynių eilučių kodo.

57
00:03:04,320 --> 00:03:07,200
Dabar galite tiesiog daryti vienos eilutės kodą, vienu skambinimo funkcijos.

58
00:03:07,200 --> 00:03:11,790
Tai tikrai supaprastina stuff, kad jūs darote daug.

59
00:03:11,790 --> 00:03:15,950
Ir visi cool vaikai jį naudoti. Iki, kad aš turiu galvoje mane.

60
00:03:15,950 --> 00:03:19,270
Baigiamajame projekto praėjusiais metais, kuri yra news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
kuri yra radijo stoties, aš sukūriau šį dienoraštį

62
00:03:22,530 --> 00:03:29,750
kuriame vyksta visas rodo, kad mes padarėme ir MP3 failus už juos.

63
00:03:29,750 --> 00:03:32,070
Jūs galite naršyti per pastaruosius rodo,

64
00:03:32,070 --> 00:03:34,130
ir visa tai daroma naudojant JQuery. Galite pasakyti

65
00:03:34,130 --> 00:03:37,340
dėl visų šių animacija iš esmės.

66
00:03:37,340 --> 00:03:42,360
Taigi, jei turite - jei kuriate naują pranešimą,

67
00:03:42,360 --> 00:03:45,980
pamatysite šių mažai slideDowns; kad visa tai daroma naudojant JQuery.

68
00:03:45,980 --> 00:03:49,140
Ir tai išnyks - taip, kad daiktų rūšis yra viskas padaryta naudojant JQuery,

69
00:03:49,140 --> 00:03:52,720
ir jūs neturite nuolat perkraukite puslapį naršyti svetainėje.

70
00:03:52,720 --> 00:03:57,220
Kitas cool dalykas, kad pagaminti naudojant JQuery tai pateikimas.

71
00:03:57,220 --> 00:03:59,700
Aš naudoju atviro kodo dalykas vadinamas scrolldeck,

72
00:03:59,700 --> 00:04:03,250
kuris nors rašė ant JQuery.

73
00:04:03,250 --> 00:04:04,870
Jei jūs iš tikrųjų pažvelgti šaltinio, galite matyti, kad

74
00:04:04,870 --> 00:04:07,830
jie naudoja šį dolerio ženklas; dolerio ženklus

75
00:04:07,830 --> 00:04:12,110
naudojami JQuery, reiškia, kad funkcija yra JQuery funkcija.

76
00:04:12,110 --> 00:04:15,020
Taigi jie apibrėžti įvynioti ant JQuery

77
00:04:15,020 --> 00:04:18,570
, kuri leidžia jums padaryti pristatymą, kaip šis,

78
00:04:18,570 --> 00:04:21,200
ir jūs galite pamatyti, kad čia jie taip pat originalus JQuery failą,

79
00:04:21,200 --> 00:04:24,120
o tai, ką jūs turite būti, jei norite naudoti JQuery

80
00:04:24,120 --> 00:04:30,450
į savo interneto svetainėse.

81
00:04:30,450 --> 00:04:32,790
>> Kreipdamiesi apie tai, kaip jūs jį įdiegti?

82
00:04:32,790 --> 00:04:36,150
Jūs galite tiesiog eiti į jQuery.com ir atsisiųsti failą,

83
00:04:36,150 --> 00:04:38,320
pridėti jį prie žiniatinklio katalogą ir jį įtraukti.

84
00:04:38,320 --> 00:04:42,200
Taigi tik ant viršaus, į galvą tegus HTML failą

85
00:04:42,200 --> 00:04:45,400
jūsų pagrindinis HTML failą, tereikia, kad kodo eilutę

86
00:04:45,400 --> 00:04:49,490
su teisinga versija, kuri versija JQuery jūs naudojate.

87
00:04:49,490 --> 00:04:51,340
Jūs galite jį atsisiųsti, eikite į jQuery.com,

88
00:04:51,340 --> 00:04:55,130
spustelėkite "Atsisiųsti JQuery", ir jūs turite jį. Štai ir viskas.

89
00:04:55,130 --> 00:04:58,880
Ir iš tikrųjų, mes galime pažvelgti, kas atrodo išvaizdą.

90
00:04:58,880 --> 00:05:01,080
Jei paspausite ant parsisiųsti čia jQuery tai.

91
00:05:01,080 --> 00:05:05,260
Tai tiesiog vienas didelis failas JavaScript, kad atlieka visą magija stuff jums.

92
00:05:05,260 --> 00:05:09,270
Tai minified versija, kuri nėra įskaitomas ne visiems.

93
00:05:09,270 --> 00:05:13,180
Taip pat galite pažvelgti į vystymosi versiją, kuri yra skaitoma

94
00:05:13,180 --> 00:05:15,370
bet vis tiek labai, labai ilgas.

95
00:05:15,370 --> 00:05:17,980
Tai stuff ten daug.

96
00:05:17,980 --> 00:05:20,240
Jūs taip pat galite susieti su "Google" surengė versiją.

97
00:05:20,240 --> 00:05:23,820
Taigi, kad jums leis jums tiesiog remtis "Google" ją suteikti.

98
00:05:23,820 --> 00:05:29,310
Jie teikia kiekvieną jo versiją, kurią galima bet kuriuo metu.

99
00:05:29,310 --> 00:05:31,530
Taigi, jūs greičiausiai gali remtis Google priimančiosios tai už jus.

100
00:05:31,530 --> 00:05:33,270
Arba jūs galite įdėti nuorodą į JQuery savo naujausią versiją.

101
00:05:33,270 --> 00:05:36,400
Jie turi adresą, kuris visada atnaujinta iki naujausios versijos.

102
00:05:36,400 --> 00:05:40,850
Tai JQuery vėliau, ir ten viena problema su tuo,

103
00:05:40,850 --> 00:05:44,350
yra tai, kad jei atnaujinama JQuery ir kai kurie iš ankstesnės funkcijos

104
00:05:44,350 --> 00:05:47,250
jie tampa retrograded arba pasenusios,

105
00:05:47,250 --> 00:05:49,620
ji negali - jis gali pradėti ne gauti nebepalaikomi.

106
00:05:49,620 --> 00:05:52,940
Taigi, jei rašote svetainę naudojant versiją 1.8.2,

107
00:05:52,940 --> 00:05:55,000
iki to laiko, versija 2.7 ateina iš

108
00:05:55,000 --> 00:05:57,000
kai kurios funkcijos rašė nebeveikia.

109
00:05:57,000 --> 00:05:59,930
Taigi, tai geriau tiesiog atsisiųsti 32 KB failą,

110
00:05:59,930 --> 00:06:04,100
įdėti jį į savo tinklalapį, ir jis bus dirbti amžinai.

111
00:06:04,100 --> 00:06:07,450
>> Aš ruošiuosi eiti į priekį ir pradėti kalbėti apie tikrąjį funkcionalumą JQuery.

112
00:06:07,450 --> 00:06:13,090
Pirmas dalykas yra selektoriai. Tai, ką JQuery iš pradžių buvo siekiama suteikti.

113
00:06:13,090 --> 00:06:15,500
Ir jūs galite spustelėti ant dokumentų pažvelgti

114
00:06:15,500 --> 00:06:18,690
išsami dokumentacija selektoriai aš ruošiuosi danga.

115
00:06:18,690 --> 00:06:24,120
Už selektoriai idėja yra ta, kad jūs galite pasirinkti HTML elementų puslapyje.

116
00:06:24,120 --> 00:06:28,790
Puslapio elementai turi ID ir klases ir kitus identifikavimo aspektai, į kuriuos juos.

117
00:06:28,790 --> 00:06:30,500
Taip pat - they're įvairių užsakymus.

118
00:06:30,500 --> 00:06:32,570
Kai laiko jie įdėtos viduje tarpusavyje.

119
00:06:32,570 --> 00:06:38,120
JQuery leidžia jums sukurti paprastus klausimus, kad atkurtumėte elementus puslapyje.

120
00:06:38,120 --> 00:06:41,890
Tada galite manipuliuoti šiuos elementus naudojant jQuery funkcijas,

121
00:06:41,890 --> 00:06:43,990
kuris yra manipuliavimas skyriuje mes susisieksime vėliau.

122
00:06:43,990 --> 00:06:46,040
Galite keisti HTML, keisti CSS,

123
00:06:46,040 --> 00:06:50,500
taip pat galite animuoti ir pridėti funkcijų, kurios aktyvuoja tam tikrus įvykius.

124
00:06:50,500 --> 00:06:52,710
Taigi, pavyzdžiui, jeigu kažkas manimi paspaudėte, norite ką nors, kad taip atsitiktų,

125
00:06:52,710 --> 00:06:55,210
jūs galite padaryti, kad naudojant JQuery taip pat.

126
00:06:55,210 --> 00:06:57,380
Ir yra daugybė būdų, kaip pasirinkti elementus.

127
00:06:57,380 --> 00:07:00,310
Dauguma jų aš niekada nesinaudojo, tačiau yra pagrindiniai tie,

128
00:07:00,310 --> 00:07:02,340
kuris yra gana svarbus.

129
00:07:02,340 --> 00:07:05,750
Elementas selektorių, pavyzdžiui, jei jūs tiesiog pasirinkti nieko

130
00:07:05,750 --> 00:07:10,640
tai DIV - Aš iš tikrųjų turi kodą atviras šio skaidrių pristatymą.

131
00:07:10,640 --> 00:07:13,450
Taigi, pavyzdžiui, čia pirmą skaidrę.

132
00:07:13,450 --> 00:07:17,430
Čia mes turime div. Jei mes iš tikrųjų pasirinkti visus DIV-ų puslapyje,

133
00:07:17,430 --> 00:07:22,300
jis bus tiesiog suteikia mums visų DIV kad egzistuoja šio failo masyvo.

134
00:07:22,300 --> 00:07:27,040
ID selektorių leidžia pasirinkti nieko su tam tikru ID.

135
00:07:27,040 --> 00:07:32,230
Taigi, jei tai, pavyzdžiui, tai, ką turi ID "kas"

136
00:07:32,230 --> 00:07:37,160
ir jei mes tai su # ką vietoj tikru ID,

137
00:07:37,160 --> 00:07:42,920
tai tiesiog grąžina masyvą, kuris turi vieną elementą ir tai, kad šio puslapio elementas.

138
00:07:42,920 --> 00:07:45,490
Mes taip pat galime derinti selektoriai tokiu būdu, turintys

139
00:07:45,490 --> 00:07:48,260
pasirinkti tik dalykų su ID, kurie DIV-ų.

140
00:07:48,260 --> 00:07:51,810
Taigi, taip. Tik pasirinkite DIV-ų, kurie turi tą ID.

141
00:07:51,810 --> 00:07:55,260
Klasei, jūs tiesiog naudokite tašką, tai tas pats, kaip CSS.

142
00:07:55,260 --> 00:07:57,500
Palikuonis taip pat veikia, tad jei turite kokių nors klasę

143
00:07:57,500 --> 00:08:00,170
ir ji įdėtos elementai joje - Taigi, pavyzdžiui,

144
00:08:00,170 --> 00:08:03,260
yra keletas klasė ir ji turi inkaro tegus nuorodą į kitą puslapį,

145
00:08:03,260 --> 00:08:08,510
galite naudoti šią sintaksę gauti nuorodą.

146
00:08:08,510 --> 00:08:12,420
Taip pat galite pasirinkti keletą dalykų vienu metu, tiesiog atskirkite juos kableliais,

147
00:08:12,420 --> 00:08:17,360
naudoti bet selektorių, kurį norite, ir jums bus pasirinkti juos visus vienu metu, viename masyve.

148
00:08:17,360 --> 00:08:19,650
Ir tada ten taip pat nėra selektorių, todėl jūs galite pasirinkti visus Divs

149
00:08:19,650 --> 00:08:24,210
kad neturite tam tikrą klasę.

150
00:08:24,210 --> 00:08:28,790
Ir tai tik naudingas būdas gauti įvadas į tai, kaip šis pasirinkimas veikia.

151
00:08:28,790 --> 00:08:32,270
Aš jums parodysiu keletą konkrečių pavyzdžių sekundę.

152
00:08:32,270 --> 00:08:35,480
>> Išplėstinė selektoriai yra - tai tik keletas pavyzdžių.

153
00:08:35,480 --> 00:08:38,840
Yra daugybė jų, bet jei norite pasirinkti visus Nuotraukos žymos

154
00:08:38,840 --> 00:08:42,799
per kai kurių elementų, tada jums tiesiog daryti: įvaizdį.

155
00:08:42,799 --> 00:08:45,340
Jei norite pasirinkti net elementus, pavyzdžiui, jei yra 20 iš jų,

156
00:08:45,340 --> 00:08:48,290
norite pasirinkti 0, 2, 4, 6 ir tt,

157
00:08:48,290 --> 00:08:51,630
jums: net, arba galite padaryti: keista.

158
00:08:51,630 --> 00:08:55,470
Tai yra pseudo selektoriai, tai reiškia, kad jie iš tikrųjų apskaičiuoti

159
00:08:55,470 --> 00:09:00,960
kiekvienas kitas elementas, o ne tik ketina ir pasirinkti juos visus.

160
00:09:00,960 --> 00:09:05,510
Taip pat galite - kiekvienas elementas taip pat gali turėti specifines savybes.

161
00:09:05,510 --> 00:09:10,580
Taigi, pavyzdžiui, klasė = centras taip pat yra atributas.

162
00:09:10,580 --> 00:09:16,500
Dėl šios žymės saito href, hiperteksto nuoroda yra atributas, taip pat.

163
00:09:16,500 --> 00:09:21,150
Taigi galite pasirinkti kažką, kad nuorodos į konkretų puslapį arba tiesiog - tai tikrai bendri.

164
00:09:21,150 --> 00:09:25,410
Galite pasirinkti nieko su bet atributas, kurį norite.

165
00:09:25,410 --> 00:09:27,470
Ir tada, taip pat atributas yra.

166
00:09:27,470 --> 00:09:30,420
Jei, pavyzdžiui, norėjo pasirinkti visus įvesties elementai

167
00:09:30,420 --> 00:09:32,700
kurie turi žodį "pass" kaip jų vardu,

168
00:09:32,700 --> 00:09:37,560
jei puslapis turi įvesties teksto bloką

169
00:09:37,560 --> 00:09:41,050
tai vadinama "slaptažodis", kad būčiau vienas iš būdų, galite pasirinkti, kad.

170
00:09:41,050 --> 00:09:43,020
Ir yra daug daugiau. Jūs galite eiti į priekį ir ieškoti dokumentų

171
00:09:43,020 --> 00:09:46,950
ir pamatyti konkrečius pavyzdžius, kaip ji veikia.

172
00:09:46,950 --> 00:09:48,840
>> Kitas dalykas yra DOM manipuliacijos.

173
00:09:48,840 --> 00:09:52,500
Kai mes pasirinkti elementus, mes norime iš tikrųjų stuff su jais.

174
00:09:52,500 --> 00:09:55,500
Iki šiol mes ne pažvelgė, kad ne visi, bet jei pažvelgti į dokumentus,

175
00:09:55,500 --> 00:09:57,950
ten tikrai daug, kad mes galime padaryti.

176
00:09:57,950 --> 00:10:02,900
Šiuo metu mes ketiname pasirinkti elementus, šį pristatymą

177
00:10:02,900 --> 00:10:04,890
ir manipuliuoti juos naudojant JQuery.

178
00:10:04,890 --> 00:10:08,290
Kadangi tai yra įgyvendinama naudojant JQuery, mes turime prieigą prie jQuery biblioteką,

179
00:10:08,290 --> 00:10:13,580
ir mes galime naudoti šias funkcijas šiuo kodu.

180
00:10:13,580 --> 00:10:16,200
Vienas naudingas dalykas, kad jūs negalite žinoti apie tai konsolė.

181
00:10:16,200 --> 00:10:19,340
Ir "Google Chrome" yra tai, ką aš naudoju. Galite paspausti alt komandų J

182
00:10:19,340 --> 00:10:21,720
arba AltControl J atidaryti konsolę.

183
00:10:21,720 --> 00:10:26,130
"Firefox" Manau, kad komandų Shift K ar kontrolės Shift K.

184
00:10:26,130 --> 00:10:28,880
Safari jūs turite eiti pakeisti kai kuriuos nustatymus.

185
00:10:28,880 --> 00:10:35,460
Yra nuoroda, jei norite tai padaryti, bet aš rekomenduoju gauti Chrome "arba" Firefox ".

186
00:10:35,460 --> 00:10:37,750
Taigi galime atverti konsolę, tai čia.

187
00:10:37,750 --> 00:10:41,170
Jis leidžia jums iš esmės tiesiog daryti ką tik nori.

188
00:10:41,170 --> 00:10:45,100
Taigi, galite tiesiog įveskite sukurti kintamąjį pavadinimu x,

189
00:10:45,100 --> 00:10:49,200
x = 5, pažiūrėkime, ką X + 2.

190
00:10:49,200 --> 00:10:57,670
Jūs netgi galite padaryti kažką panašaus CS + pažiūrėkime, X + 45, tai bus CS50.

191
00:10:57,670 --> 00:11:00,530
Jūs galite tiesiog padaryti kai kurių tipiškų JavaScript stuff.

192
00:11:00,530 --> 00:11:02,730
Bet taip pat galite padaryti JQuery čia.

193
00:11:02,730 --> 00:11:06,200
>> Taigi pažvelkime į šio pirmojo aspekto čia.

194
00:11:06,200 --> 00:11:09,500
Mes ketiname sukurti kintamąjį vadinamą HTML, kuri yra eilutė.

195
00:11:09,500 --> 00:11:15,890
Ji pastraipos žymę jame, tai vadinama kai naują tekstą.

196
00:11:15,890 --> 00:11:19,420
Taigi, mes turime šį HTML, tai kai naujas tekstas, paragrafe žymes.

197
00:11:19,420 --> 00:11:21,800
Dabar mes iš tikrųjų nori jį pridėti prie puslapio.

198
00:11:21,800 --> 00:11:28,310
Aš jį taip, kad už šioje dalyje, HTML, šis pavadinimas čia yra pridėkite vardą.

199
00:11:28,310 --> 00:11:32,320
Jei mes pasirinkti papildymo ID ir tada pridėti jį

200
00:11:32,320 --> 00:11:34,560
HTML kintamasis aš ką tik sukūrėte,

201
00:11:34,560 --> 00:11:40,370
tai pridės, kad HTML pabaigoje, iš karto po šio straipsnio žyma.

202
00:11:40,370 --> 00:11:43,730
Taigi, jei mes tai darome - mes išrinkome šią dalį,

203
00:11:43,730 --> 00:11:47,590
ir mes vadinamas papildymo funkciją su HTML kintamojo Aš ką tik pridėjo,

204
00:11:47,590 --> 00:11:50,960
tai pridės, kad naują tekstą tiesiai ten puslapyje.

205
00:11:50,960 --> 00:11:54,970
Mes taip pat galime pridėkite iki keliu ženklas, kuris reiškia, kad jis eis, tuo šio elemento pradžioje.

206
00:11:54,970 --> 00:11:58,290
Taigi yra keletas naujų teksto pradžioje ir vėliau.

207
00:11:58,290 --> 00:12:01,660
Aš galiu eiti į priekį ir atnaujinkite atsikratyti šio stuff Aš ką tik padaryta.

208
00:12:01,660 --> 00:12:05,280
Bet tai, kaip galite naudoti Dėti pavyzdys ir pridėti metodus

209
00:12:05,280 --> 00:12:08,910
manipuliuoti stuff puslapyje, pridėti šiek tiek HTML.

210
00:12:08,910 --> 00:12:11,080
>> Taip pat galite keisti klases.

211
00:12:11,080 --> 00:12:14,970
Atgal į šio stiliaus failą, aš sukūriau šį win klasės

212
00:12:14,970 --> 00:12:19,990
kad turi Teksto spalva raudona, šiek tiek fono spalvą ir teksto šešėlis.

213
00:12:19,990 --> 00:12:23,810
Jis atrodo šlykštus, bet aš iš tikrųjų galite -

214
00:12:23,810 --> 00:12:26,410
Ši dalis atitinka klasės ID.

215
00:12:26,410 --> 00:12:29,860
Taigi aš galiu pridėti, kad laimėti klasę.

216
00:12:29,860 --> 00:12:31,870
Galiu atlikti tai konsolės

217
00:12:31,870 --> 00:12:35,480
ir kad bus pridėti šią klasę, o dabar atrodo šlykštus, kaip tikėtasi.

218
00:12:35,480 --> 00:12:39,680
CSS automatiškai gauna kreipėsi į klases, kad jūs -

219
00:12:39,680 --> 00:12:42,680
jei yra CSS klasę, ji automatiškai bus taikomas

220
00:12:42,680 --> 00:12:44,680
jei jūs pakeisite elemento klasę.

221
00:12:44,680 --> 00:12:49,230
Tada mes galime tiesiog ištrinti jį naudojant Pašalinti klasę.

222
00:12:49,230 --> 00:12:53,690
Taigi, jei turite kokių nors iš anksto klases, pavyzdžiui, raudonos arba Pažymėję

223
00:12:53,690 --> 00:12:55,990
ir tada jūs norite taikyti tiems elementams,

224
00:12:55,990 --> 00:12:58,230
Jūs neturite daryti viską CSS Styling kiekvieną kartą.

225
00:12:58,230 --> 00:13:01,510
Jūs galite tiesiog pridėti klasės elementas, ir tada ji automatiškai taps -

226
00:13:01,510 --> 00:13:05,580
ji bus automatiškai ieškoti tinkamų šiai klasei.

227
00:13:05,580 --> 00:13:07,900
Mes taip pat galime pašalinti dalykų, kad aš ruošiuosi pasirinkti visus Divs

228
00:13:07,900 --> 00:13:10,830
puslapyje ir pašalinti jas.

229
00:13:10,830 --> 00:13:13,990
Kas tai atrodys?

230
00:13:13,990 --> 00:13:16,170
Tai atrodys nieko, todėl ten tikrai nieko kairėje.

231
00:13:16,170 --> 00:13:18,170
Mano pristatymas dingo.

232
00:13:18,170 --> 00:13:21,290
Galiu atnaujinti ir priima jį atgal, laimei,

233
00:13:21,290 --> 00:13:24,420
nes jis tiesiog veikia vienu metu,

234
00:13:24,420 --> 00:13:29,460
bet tai pašalinti Pavyzdžiui, jei norite visiškai sunaikinti off puslapio elementas.

235
00:13:29,460 --> 00:13:33,180
>> Taip pat galite perrašyti, ir aš ruošiuosi pasirinkti visus šio straipsnio žodžius puslapyje

236
00:13:33,180 --> 00:13:36,850
ir eiti jų viduje ir pakeisti bet kokį kitą tekstą, jie turi juos

237
00:13:36,850 --> 00:13:39,690
tik su žodžiu "bandymai".

238
00:13:39,690 --> 00:13:46,520
Jei tai padarysite, jums pakeisti kiekvieną dalį į puslapį su šiuo bandymai.

239
00:13:46,520 --> 00:13:49,150
Yep. Jie visi pakeisti bandymų.

240
00:13:49,150 --> 00:13:53,270
Štai prieiti tekstą ir perrašyti jį pavyzdys.

241
00:13:53,270 --> 00:13:57,490
Taip pat galite gauti informaciją, ir tai yra tikrai cool įvesties langelius.

242
00:13:57,490 --> 00:14:00,470
Jei turite įvesties langelį, kad žmonės rašomą įbrukti,

243
00:14:00,470 --> 00:14:03,880
žmonės rašyti stuff į jį,

244
00:14:03,880 --> 00:14:09,030
Čia mes pasirinkti įvestį, koks indėlis tegus su teksto tipo.

245
00:14:09,030 --> 00:14:13,800
Šiuo atveju yra tik vienas įėjimas langelį visam pristatymui,

246
00:14:13,800 --> 00:14:17,260
todėl mes tiesiog pasirinkite pirmąjį, ir tada mes vadiname VAL funkciją ant jo.

247
00:14:17,260 --> 00:14:19,570
Tai grąžina reikšmę, o įvesties lange

248
00:14:19,570 --> 00:14:24,330
vertė yra tik kas beatsitiktų būti viduje.

249
00:14:24,330 --> 00:14:31,880
Taigi, jei mes tai darome, tai tiesiog grąžina eilutę stuff.

250
00:14:31,880 --> 00:14:36,860
Ir jei mes jį vadiname vėl rašyti daugiau daiktų, jis virsta daugiau stuff.

251
00:14:36,860 --> 00:14:40,760
Štai vienas puikus būdas pasiekti elementus įvesties lange ir tada patikrinkite,

252
00:14:40,760 --> 00:14:45,060
tai galiojantis elektroninio pašto adresas, tai yra neteisinga data, pvz.

253
00:14:45,060 --> 00:14:49,600
Jūs galite tiesiog gauti dalykų iš karto, nes žmonės jį rinkdami,

254
00:14:49,600 --> 00:14:54,830
ir tada patikrinkite, ar jis galioja, siųsti jį atgal į serverį, daryti viską, ką nori su juo.

255
00:14:54,830 --> 00:14:57,720
Ir tai, kaip jūs gauti, kas viduje tas dėžes.

256
00:14:57,720 --> 00:15:00,090
>> Taip pat galite pakeisti CSS tiesiogiai, todėl vietoj pridedant

257
00:15:00,090 --> 00:15:02,510
klasė, kuri turi tam tikrų iš anksto nustatytų savybių,

258
00:15:02,510 --> 00:15:08,120
galite tiesiog pridėti norimą CSS nieko.

259
00:15:08,120 --> 00:15:10,350
Taigi leiskite pasirinkite kūnas, kuris yra visą pateiktį,

260
00:15:10,350 --> 00:15:14,370
ir spalva yra turto, kuris apibrėžia, ką spalvos tekstas.

261
00:15:14,370 --> 00:15:19,420
Jei mes jį pakeisti į raudoną, visi į puslapio tekstas bus paversti į raudoną.

262
00:15:19,420 --> 00:15:26,310
Mes galime padaryti kažką panašaus fone mėlynos spalvos,

263
00:15:26,310 --> 00:15:30,680
ten mes einame, tai gražus.

264
00:15:30,680 --> 00:15:33,840
Jūs galite padaryti viską, ką nori su šiuo klausimu.

265
00:15:33,840 --> 00:15:39,250
Naudojant CSS turto, jums tikrai gali pakeisti tai, kaip kas nors atrodo bet kuriuo metu.

266
00:15:39,250 --> 00:15:41,630
Kitas dalykas yra poveikis.

267
00:15:41,630 --> 00:15:45,710
Poveikis yra iš esmės tas pats, kaip pakeisti CSS,

268
00:15:45,710 --> 00:15:48,870
tačiau jie faktiškai teikia papildomų animaciją jį.

269
00:15:48,870 --> 00:15:53,380
Taigi vietoj to, kad tiesiog parodyčiau arba kažką slepia arba pakeisti spalvą,

270
00:15:53,380 --> 00:15:56,130
jūs iš tikrųjų galite padaryti animacinis.

271
00:15:56,130 --> 00:16:00,760
Štai dokumentus, jei norite pažvelgti į išsamiais paaiškinimais už jį.

272
00:16:00,760 --> 00:16:04,760
Bet aš ruošiuosi padengti pagrindines tie.

273
00:16:04,760 --> 00:16:12,030
Yra rodyti ir slėpti savybės.

274
00:16:12,030 --> 00:16:14,510
Rodyti / slėpti ID tikrųjų atitinka šį visą lange

275
00:16:14,510 --> 00:16:18,190
todėl, jei aš jį paslėpti, ji tiesiog išnyksta.

276
00:16:18,190 --> 00:16:24,210
Ir aš galiu parodyti jį dar kartą, jei aš noriu, kad jis ateis atgal.

277
00:16:24,210 --> 00:16:26,340
Ir tai atgal. Tai iš tikrųjų nebuvo išnyksta,

278
00:16:26,340 --> 00:16:30,670
Aš ne iš tikrųjų pašalinti jį iš puslapio, aš tiesiog nustatyti CSS nuosavybė matomumą paslėptas

279
00:16:30,670 --> 00:16:34,030
todėl jūs negalite pamatyti it anymore.

280
00:16:34,030 --> 00:16:39,250
Yra taip pat skaidrę aukštyn ir stumkite žemyn, kuri leidžia jums turėti šį poveikį.

281
00:16:39,250 --> 00:16:47,050
Tai skaidres iki išnyks, o po to dingsta

282
00:16:47,050 --> 00:16:53,210
galite pastumti jį žemyn, kad jis ateis atgal. Ir dabar tai atgal.

283
00:16:53,210 --> 00:16:57,650
Taip pat tai išnyks poveikis, kuris - išnyks ID atitinka šį bloką.

284
00:16:57,650 --> 00:17:01,200
Jei aš išnyks jį, tada jis bus pamažu išnyksta.

285
00:17:01,200 --> 00:17:04,490
Taip pat galiu išnyks jį, ir jis ateis atgal.

286
00:17:04,490 --> 00:17:08,930
Taip pat galite padaryti Fade To, kuris yra būdingas išnyks funkcija.

287
00:17:08,930 --> 00:17:12,589
Jūs galite turėti tai išnyks su kokia nors konkrečia neskaidrumo, kad jūs norite.

288
00:17:12,589 --> 00:17:16,869
Taigi, jei jūs išnyks jį lėtai 0,5, tai tapsite pusė matomas.

289
00:17:16,869 --> 00:17:22,630
Aš galiu padaryti, tai eiti į 0,1, ir atgal į 1, kad jis visiškai matomas dar kartą.

290
00:17:22,630 --> 00:17:24,760
Tai tik dar vienas animacija, jūs galite padaryti.

291
00:17:24,760 --> 00:17:26,750
>> Taip pat yra perjungimo poveikis.

292
00:17:26,750 --> 00:17:33,410
Taigi, aš ruošiuosi pasirinkti perjungimo ID, kuris atitinka šiame langelyje,

293
00:17:33,410 --> 00:17:38,970
ir tą div galite skambinti perjungti, jei tai matoma ji taps nematomas,

294
00:17:38,970 --> 00:17:42,320
jei jis nematomas jis taps vėl matomu.

295
00:17:42,320 --> 00:17:44,440
Taigi aš tiesiog pavadino perjungimo funkciją du kartus; Pirmasis buvo

296
00:17:44,440 --> 00:17:48,380
tas pats, kaip paslėpti, antrasis kvietimas buvo tas pats, kaip šou.

297
00:17:48,380 --> 00:17:53,510
Ir jūs taip pat gali tai padaryti su išnyks perjungimo,

298
00:17:53,510 --> 00:17:55,730
kurie daro tą patį, tik kad ji iš tikrųjų išsisklaido.

299
00:17:55,730 --> 00:17:59,410
Ir tas pats su skaidrę perjungti.

300
00:17:59,410 --> 00:18:01,460
Yra grandinės poveikis, taip pat, o tai reiškia,

301
00:18:01,460 --> 00:18:05,520
jei pasirinksite elementą ir tik skambinti animacijos metodų krūva ant jo,

302
00:18:05,520 --> 00:18:07,400
jei norite, kad ji išnyks, tada slinkite žemyn,

303
00:18:07,400 --> 00:18:11,040
ir tada paslėpti ir tada išnyks, jis darys juos iš eilės.

304
00:18:11,040 --> 00:18:24,920
Taigi dingo, grįžo - kažkodėl Slėpti neatsitiko.

305
00:18:24,920 --> 00:18:30,030
Pabandykime jį. Taip, kad jis numirė ir tada jis slydo toli.

306
00:18:30,030 --> 00:18:32,230
Ir yra daug daugiau. Galite naudoti animate funkciją

307
00:18:32,230 --> 00:18:35,370
sukurti savo animaciją, kuris yra gana sudėtingas,

308
00:18:35,370 --> 00:18:38,790
tačiau ji suteikia jums begalinės įtempis.

309
00:18:38,790 --> 00:18:40,630
Jūs galite padaryti bet animacija rūšies jūs norite.

310
00:18:40,630 --> 00:18:44,230
Taip pat galite naudoti eilės į eilę kelis animacija metu.

311
00:18:44,230 --> 00:18:47,340
Taigi, jei norite ką nors skristi virš puslapio

312
00:18:47,340 --> 00:18:49,860
Pristatymas nuo viršutiniame dešiniajame į apatinį kairįjį, galite tai padaryti,

313
00:18:49,860 --> 00:18:55,240
ir tiesiog tam tikrus veiksmus vienas po kito vyksta krūva.

314
00:18:55,240 --> 00:18:57,490
>> Kitas dalykas, mes ketiname kalbėti apie tai įvykių.

315
00:18:57,490 --> 00:19:02,090
Renginiai leidžia jums - Kol kas mes ką tik buvo įvedę daiktus į konsolės

316
00:19:02,090 --> 00:19:04,870
ir tai yra vienas iš būdų, kad tai įvyktų,

317
00:19:04,870 --> 00:19:08,020
bet dėl ​​faktinio puslapyje, jūs nesiruošia galėtų

318
00:19:08,020 --> 00:19:10,020
padaryti Vartotojo tipas dalykų, į konsolę.

319
00:19:10,020 --> 00:19:12,050
Norite dalykų atsitikti automatiškai.

320
00:19:12,050 --> 00:19:18,060
Norėdami, kad jums reikia naudoti įvykius, kurie aktyvuoja dėl kai tam tikras įvykis vyksta.

321
00:19:18,060 --> 00:19:21,340
Galite patikrinti už visą informaciją dokumentaciją.

322
00:19:21,340 --> 00:19:24,030
Taigi pažiūrėkime. Mes norime slėpti arba rodyti langelį,

323
00:19:24,030 --> 00:19:29,340
bet dabar šis mygtukas nieko nedaro, nes aš ne jį įgyvendinti dar.

324
00:19:29,340 --> 00:19:35,420
Aš ruošiuosi eiti į faktinę puslapio HTML.

325
00:19:35,420 --> 00:19:38,560
Štai skaidrę. Yra ir skaidrių DIV.

326
00:19:38,560 --> 00:19:41,230
Ji turi skaidrę klasę.

327
00:19:41,230 --> 00:19:46,890
Yra tekstas. Dabar, yra šis langelis ir langelis mygtuką.

328
00:19:46,890 --> 00:19:52,900
Kaip mes iš tikrųjų tai dingsta?

329
00:19:52,900 --> 00:19:58,250
Pirmiausia, galime parašyti funkciją, kuri leidžia imtuvo ID išnyksta.

330
00:19:58,250 --> 00:20:01,820
Tai už funtion sintaksė, galime tik jį vadiname hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Ji neatsižvelgia jokių argumentų, nes nėra argumentų, kurių turi būti imtasi.

332
00:20:06,130 --> 00:20:08,950
Mes galime pasirinkti langelį ID.

333
00:20:08,950 --> 00:20:15,020
Taigi, naudojant JQuery pasirinkti, mes galime pasirinkti imtuvo ID,

334
00:20:15,020 --> 00:20:17,700
ir tada tiesiog padaryti jį išnyksta.

335
00:20:17,700 --> 00:20:20,690
Padarykime tai išnyks.

336
00:20:20,690 --> 00:20:27,390
Jei mes bėgo šią funkciją, faktinis konsolės

337
00:20:27,390 --> 00:20:33,380
mes galime apibrėžti šią funkciją, galime skambinti hideTheBox, ir ji veikia.

338
00:20:33,380 --> 00:20:36,650
Bet mes norime, kad jis įvyktų, kai mygtukas yra iš tikrųjų štampuoto.

339
00:20:36,650 --> 00:20:40,950
Norėdami tai padaryti, mes turime naudoti renginį.

340
00:20:40,950 --> 00:20:45,500
Norėdami susieti renginį kai kurių konkrečių mygtuką arba tam tikrų veiksmų vyksta,

341
00:20:45,500 --> 00:20:50,040
mes turime pasirinkti elementą, kad renginys bus sukelti -

342
00:20:50,040 --> 00:20:52,650
ar kad sukels renginį, atsiprašau.

343
00:20:52,650 --> 00:20:57,220
>> Taigi, visų pirma, tegul pasirinkite langelį mygtuką ID

344
00:20:57,220 --> 00:20:59,610
nes tai mygtukas, o dabar už tą mygtuką,

345
00:20:59,610 --> 00:21:02,750
mes norime sukurti animaciją, kai jis paspaudžiamas.

346
00:21:02,750 --> 00:21:05,040
Taigi, čia yra tai spustelėkite funkcija.

347
00:21:05,040 --> 00:21:08,470
Jis leidžia jums įpareigoti kitą funkciją į jį.

348
00:21:08,470 --> 00:21:12,320
Ši funkcija žengia dar vieną funkciją kaip argumentą

349
00:21:12,320 --> 00:21:14,310
mes galime pereiti į hideTheBox funkcija,

350
00:21:14,310 --> 00:21:20,950
ir kai šis mygtukas paspaudžiamas, kad funkcija bus automatiškai įvykdyti.

351
00:21:20,950 --> 00:21:24,850
Taigi tai veiks, jei mes taupome tai, aš atnaujinti,

352
00:21:24,850 --> 00:21:33,460
ir - vieną sekundę, aš atsiprašau.

353
00:21:33,460 --> 00:21:44,770
Leiskite man išspręsti šią problemą labai greitai.

354
00:21:44,770 --> 00:21:50,680
Gerai. Čia mes eiti. Taigi dabar langas nyksta kai mes paspauskite mygtuką.

355
00:21:50,680 --> 00:21:55,470
Mes taip pat galime tai pakeisti tiesiog fadeToggle,

356
00:21:55,470 --> 00:22:00,020
pakeisti jį tiesiog paslėpti ar rodyti langelį,

357
00:22:00,020 --> 00:22:03,850
ir tai taip pat veiks taip pat, jei mes atnaujinti.

358
00:22:03,850 --> 00:22:08,550
Mes galime ją slėpti, mes taip pat gali parodyti, ir kad toliau dirbs.

359
00:22:08,550 --> 00:22:12,210
Kitas dalykas, mes galime padaryti, tai mes ne iš tikrųjų turėti apibrėžti šį hideTheBox funkciją

360
00:22:12,210 --> 00:22:15,050
Prieš mes vadiname spustelėkite funkciją.

361
00:22:15,050 --> 00:22:17,640
Taigi vietoj apibrėžti funkciją ir raginama hideTheBox,

362
00:22:17,640 --> 00:22:20,310
mes tik ketinate skambinti, jei šis dalykas yra paspaudėte.

363
00:22:20,310 --> 00:22:22,310
Taigi, mes galime apibrėžti tai anonimiškai čia

364
00:22:22,310 --> 00:22:25,070
kuris yra požymis, kad "JavaScript".

365
00:22:25,070 --> 00:22:29,720
Galite nustatyti funkciją; paprastai, sakytume funkcija hideTheBox

366
00:22:29,720 --> 00:22:34,490
su argumentais, bet vietoj to, mes galime tik pasakyti, veikia jokių argumentų,

367
00:22:34,490 --> 00:22:36,870
pradėti garbanotas petnešomis apibrėžti funkciją,

368
00:22:36,870 --> 00:22:40,780
uždaryti šią garbanotais petnešomis, ir tada tiesiog apibrėžti funkciją čia

369
00:22:40,780 --> 00:22:45,130
per pirmą skliaustuose ir paskutinis skliaustuose

370
00:22:45,130 --> 00:22:47,860
kurios atitinka paspaudimo funkcija argumentais.

371
00:22:47,860 --> 00:22:53,320
Taigi, mes perduoti šią funkciją, galime nukopijuoti šį kodo eilutę čia,

372
00:22:53,320 --> 00:22:55,450
ir kad bus padaryti tą patį dalyką.

373
00:22:55,450 --> 00:22:57,290
Ir dabar mes neturime šio atsitiktinių fadeTheBox funkciją

374
00:22:57,290 --> 00:22:59,960
, kuris sėdi be aiškios priežasties.

375
00:22:59,960 --> 00:23:02,070
Funkcija buvo apibrėžta anonimiškai, ji neturi vardą.

376
00:23:02,070 --> 00:23:08,060
Jis tik vykdyti kai mes paspauskite ant dėžutės mygtuką.

377
00:23:08,060 --> 00:23:12,180
Taigi gaivus dar kartą, dar kartą, ir jūs galite pamatyti, kad jis vis dar veikia.

378
00:23:12,180 --> 00:23:16,700
Ir tai, kaip jums sukurti įvykius.

379
00:23:16,700 --> 00:23:19,190
>> Yra daug įvairių renginių, kad mes galime naudoti daug.

380
00:23:19,190 --> 00:23:23,540
Aš ruošiuosi pereiti į naudojant konsolę tiesiog parodyti jums, kaip tai darbas.

381
00:23:23,540 --> 00:23:28,210
Už kiekvieną iš jų identifikatoriai atitinka kiekvieną dėžutę.

382
00:23:28,210 --> 00:23:33,020
Taigi šis langelis spustelėkite vardą, tai vienas raktas ID ir tai vienas pelės vardą.

383
00:23:33,020 --> 00:23:36,120
Dar vienas dalykas yra tai, kad ten tai veiksmas funkcija;, o ne rašyti jį kiekvieną kartą,

384
00:23:36,120 --> 00:23:41,610
Aš iš tikrųjų nuėjo į priekį ir apibrėžti šio veiksmo funkciją čia.

385
00:23:41,610 --> 00:23:46,860
Tai nėra tas pats kaip hideTheBox funkcija.

386
00:23:46,860 --> 00:23:51,340
Ji gauna šį langelį, ir arba išnyksta it out ar blunka jį in

387
00:23:51,340 --> 00:23:54,110
Ir štai kodėl mes galime jį naudoti čia.

388
00:23:54,110 --> 00:24:00,350
Taigi, jei mes paspauskite ant šio paspaudimą ID, mes norime, kad langas išnyks arba pasikartoti.

389
00:24:00,350 --> 00:24:03,610
Tai tas pats, kaip mygtuką, kad mes turėjome paskutinės skaidrės.

390
00:24:03,610 --> 00:24:07,450
Dabar, kai mes tai vadiname, mes galime paspausti tai ir langas išnyks,

391
00:24:07,450 --> 00:24:10,160
tada spustelėkite jį dar kartą ir langas vėl atsiras.

392
00:24:10,160 --> 00:24:12,480
Tai gana paprasta. Dukart spustelėkite daro tą patį,

393
00:24:12,480 --> 00:24:15,660
išskyrus todėl yra reikalingas dvigubas spragtelėjimas.

394
00:24:15,660 --> 00:24:19,030
Taigi, jei paspausite ant jos vieną kartą ir spustelėkite jį dar kartą nieko nenutiks,

395
00:24:19,030 --> 00:24:21,140
bet jei jūs dukart spustelėkite greitai, ji išnyks.

396
00:24:21,140 --> 00:24:23,310
Jei dukart spustelėkite dar kartą, jis ateis atgal.

397
00:24:23,310 --> 00:24:25,250
Taigi, tai gana paprasta.

398
00:24:25,250 --> 00:24:31,170
Klaviatūrosįvestis rūšies keista, aš nemanau, kad ji iš tikrųjų veikia šiame pavyzdyje

399
00:24:31,170 --> 00:24:37,670
nes raktas žemyn, mygtuką aukštyn ir spauda ir kiti pagrindiniai veiksmai

400
00:24:37,670 --> 00:24:47,190
įjungti nesvarbu, ką elementas tu suriši ją.

401
00:24:47,190 --> 00:24:51,410
Pavyzdžiui, net jei aš laikytis klavišą žemyn į kūną arba kažkas visiškai

402
00:24:51,410 --> 00:24:55,950
tada jis vis dar įjungti, nesvarbu - tai ne konkretus.

403
00:24:55,950 --> 00:25:00,190
Aš neturiu būti spaudžiant ant ir paspauskite klavišą, kad padaryti nieko nebeliks.

404
00:25:00,190 --> 00:25:04,470
Tai būtų aktyvuota, nepriklausomai nuo to, ką elementas Aš šiuo in

405
00:25:04,470 --> 00:25:06,880
Taigi tai ne iš tikrųjų dirbti šiame pavyzdyje

406
00:25:06,880 --> 00:25:13,180
nes ji nepripažįsta mane kaip patekti indėlį į klaviatūros įvesties div.

407
00:25:13,180 --> 00:25:15,740
>> Bet jei pažvelgti į pelės veiksmus,

408
00:25:15,740 --> 00:25:19,620
Pirmasis yra nemenka, o tai gali daryti kai tai naudojant CSS.

409
00:25:19,620 --> 00:25:24,280
Jei naudojate CSS, galite ją sukurti taip, kad jei jūs Pakimba virš kažko,

410
00:25:24,280 --> 00:25:28,940
tada jos stiliaus pokyčiai.

411
00:25:28,940 --> 00:25:32,170
Tačiau naudojant JQuery galite pakeisti kitų dalykų, stilius taip pat.

412
00:25:32,170 --> 00:25:37,120
Taigi, pavyzdžiui, mes ketiname skambinti veiksmų, jei mes užveskite pelės žymeklį ant šios div.

413
00:25:37,120 --> 00:25:39,660
Tai reiškia, jei mes užveskite pelės žymeklį ant jo, tada langas išnyks.

414
00:25:39,660 --> 00:25:42,430
Jei mes tolti nuo jo, langas vėl atsiras.

415
00:25:42,430 --> 00:25:45,090
Jei mes vadiname tai ir užveskite pelės žymeklį ant jo, langas išnyks,

416
00:25:45,090 --> 00:25:47,050
ir kuo greičiau mes tolti, jis grįžta.

417
00:25:47,050 --> 00:25:49,750
Jei mes tai vadiname hover funkciją pelės ID,

418
00:25:49,750 --> 00:25:54,380
kuris atitinka šiame langelyje, tada, jei mes užveskite pelės žymeklį ant lango

419
00:25:54,380 --> 00:26:00,440
tada langas bus iš tikrųjų dingsta - jis yra madingas dabar, bet -

420
00:26:00,440 --> 00:26:06,310
jei mes tolti nuo jo, jis vėl atsiras. Dabar tai atgal dėl kokios nors priežasties.

421
00:26:06,310 --> 00:26:12,720
Pelės įveskite ir pelės perkelti savo veiklą yra šiek tiek panašūs, tačiau šiek tiek skiriasi.

422
00:26:12,720 --> 00:26:16,470
Pelės įvesti tik aktyvuoja kai pelės patenka į langelį, kaip ir tikėtasi.

423
00:26:16,470 --> 00:26:19,210
Taigi, jei jums judėti į jį, jis išnyks.

424
00:26:19,210 --> 00:26:23,210
Bet tai nebus vėl atsiras, kai tolti; jūs turite perkelti atgal ant jo už jį grįžti.

425
00:26:23,210 --> 00:26:25,590
Taip pat pelės judėti funkciją, kuri bus aktyvuoti

426
00:26:25,590 --> 00:26:29,300
kai pelė yra net nedalyvavo lauke.

427
00:26:29,300 --> 00:26:32,430
Taigi tai bus tiesiog nuolat vyksta, išblukimo ir išeina.

428
00:26:32,430 --> 00:26:35,660
Ir tai iš tikrųjų prisijungti - atrodo, kad tai tik išblukimo ir išeina,

429
00:26:35,660 --> 00:26:39,140
bet tai iš tikrųjų prisijungti daug daugiau veiksmų, nei tai,

430
00:26:39,140 --> 00:26:43,550
todėl, kai jūs tolti jis bus tik nesustoti, nes jis prisijungęs kaip jų tūkstančio.

431
00:26:43,550 --> 00:26:46,620
Gal ir ne tūkstančiai. Gal penki.

432
00:26:46,620 --> 00:26:50,200
Jis prisijungia daugiau nei tai.

433
00:26:50,200 --> 00:26:53,280
Esmė ta, kad visos pelės veiksmai, yra jų daug.

434
00:26:53,280 --> 00:26:55,480
Jūs galite perskaityti apie kitų, bet jie visi šiek tiek skiriasi,

435
00:26:55,480 --> 00:26:57,700
ir jūs galite pasiimti ta, kurią reikia

436
00:26:57,700 --> 00:27:02,130
kokiai konkrečiam tikslui bandote daryti.

437
00:27:02,130 --> 00:27:05,060
>> Kitas dalykas, aš ruošiuosi kalbėti apie AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, aš žinau, mes neapėmė JavaScript tiek gylio šiais metais,

439
00:27:09,340 --> 00:27:11,770
todėl aš tiesiog norėčiau pakalbėti apie AJAX apskritai už minutę.

440
00:27:11,770 --> 00:27:15,210
AJAX reiškia Asynchronous JavaScript ir XML.

441
00:27:15,210 --> 00:27:19,030
Tai iš esmės, pavyzdžiui, kai esate "Facebook" ir verčia jums pranešimą

442
00:27:19,030 --> 00:27:23,060
tai todėl, kad AJAX veikia jūsų naršyklėje.

443
00:27:23,060 --> 00:27:25,800
Kiekvienas kelias sekundes jūsų naršyklė tikrai

444
00:27:25,800 --> 00:27:29,420
ketina Facebook "serverius, prašydama, jūs turite nieko naujo man,

445
00:27:29,420 --> 00:27:31,980
ir tada ji ateina su Jumis.

446
00:27:31,980 --> 00:27:36,320
Tai leidžia jums siųsti užklausas į serverį

447
00:27:36,320 --> 00:27:38,660
be realiai įkelti puslapį.

448
00:27:38,660 --> 00:27:42,040
Taigi paprastai, jei jūs tik naudojant PHP ir duomenų bazės,

449
00:27:42,040 --> 00:27:45,480
jūs turite atnaujinti puslapį, kad galėtumėte gauti naują informaciją iš serverio.

450
00:27:45,480 --> 00:27:48,770
Tačiau naudojant AJAX, galite traukti tą naują informaciją nuolat,

451
00:27:48,770 --> 00:27:52,250
arba patraukite jį, kai paspausite mygtuką ar ko nors panašaus.

452
00:27:52,250 --> 00:27:56,140
Taigi tai leidžia mums siųsti prašymus neperkraunant puslapio,

453
00:27:56,140 --> 00:27:58,130
ir mes galime naudoti arba GET arba POST užklausų.

454
00:27:58,130 --> 00:28:05,370
>> GET prašymai, pavyzdžiui, jei jums į Google.com

455
00:28:05,370 --> 00:28:10,900
ir daryti q = testą. Tai jiems užklausą testą.

456
00:28:10,900 --> 00:28:15,890
Ir tai prašymą GET, nes jis yra išlaikęs tuos parametrus į URL pati.

457
00:28:15,890 --> 00:28:19,250
PO prašymas yra tarsi jūs siunčiate juos elektroniniu paštu.

458
00:28:19,250 --> 00:28:22,500
Tai, kaip jūs įdėti jį į laišką ir išsiųsti jį į juos,

459
00:28:22,500 --> 00:28:25,140
bet jie iš tikrųjų matyti turinį. Jie nėra matomi URL.

460
00:28:25,140 --> 00:28:31,040
Jūs negalite tiesiogiai įveskite jį, jūs turite nusiųsti jį beveik slapta.

461
00:28:31,040 --> 00:28:33,880
Tai įraše.

462
00:28:33,880 --> 00:28:38,660
Tačiau naudojant JQuery, galite tai padaryti GET ir POST užklausų

463
00:28:38,660 --> 00:28:42,740
daug lengviau, nei jūs paprastai gali naudoti tik paprastą "JavaScript".

464
00:28:42,740 --> 00:28:50,140
Jūs galite užklausti API naudojant GET užklausų, taip pat galite patikrinti prisijungimo informaciją.

465
00:28:50,140 --> 00:28:54,400
Kitame puslapyje, aš sukūriau tai, kuris klausia: "Kas pietums?"

466
00:28:54,400 --> 00:28:58,230
naudojant Harvardo maisto API, todėl galime traukti, kad iki.

467
00:28:58,230 --> 00:29:01,840
Tai yra tik, kaip jūs galite naudoti JQuery daryti GET užklausą API pavyzdys

468
00:29:01,840 --> 00:29:04,200
ir gauti informaciją atgal iš jo.

469
00:29:04,200 --> 00:29:07,090
Taigi, mes norime matyti meniu šiandien,

470
00:29:07,090 --> 00:29:10,560
ir mes norime pamatyti, kas pietums.

471
00:29:10,560 --> 00:29:16,500
Štai URL sukurti GET užklausą JQuery.

472
00:29:16,500 --> 00:29:18,600
naudoti $. gauti funkciją.

473
00:29:18,600 --> 00:29:22,290
Pirmasis argumentas yra URL, todėl, ką jūs užklausų.

474
00:29:22,290 --> 00:29:27,200
Tada kitas argumentas yra funkcija, kuri vykdo kai prašymą GET yra baigtas.

475
00:29:27,200 --> 00:29:29,980
Taigi jūs išlydėti kai prašymą į serverį, palaukite, kol ateis atgal.

476
00:29:29,980 --> 00:29:33,770
Kai jis grįžta, jūs ketinate imtis tam tikrų veiksmų su duomenimis, nugarą iš serverio.

477
00:29:33,770 --> 00:29:37,520
Eikime į priekį ir koduoti tai taip pat.

478
00:29:37,520 --> 00:29:42,110
Aš ne koduoti tai arba, tikslas.

479
00:29:42,110 --> 00:29:46,660
Štai TODO. Pirmiausia, galime naudoti įvykio privalomas

480
00:29:46,660 --> 00:29:50,820
kad kai šį mygtuką, mes išsiųsti GET užklausą.

481
00:29:50,820 --> 00:29:53,410
Ir kai tai GET užklausos grįžta su kai kurių duomenų,

482
00:29:53,410 --> 00:29:57,290
mes ketiname rašyti į šį miltų info ID div.

483
00:29:57,290 --> 00:30:02,860
Pirmiausia, galime pasirinkti maisto mygtuką ID.

484
00:30:02,860 --> 00:30:07,320
Kai jis paspaudžiamas, mes norime, kad ji kažką daryti.

485
00:30:07,320 --> 00:30:11,930
Leiskite tik kad jis anoniminis Funkcija, kaip ir anksčiau.

486
00:30:11,930 --> 00:30:15,550
Galite wrap tuos vingiuotus skliaustus,

487
00:30:15,550 --> 00:30:18,530
o kai šį mygtuką, mes norime siųsti GET užklausą

488
00:30:18,530 --> 00:30:20,750
patikrinti, kas yra pietums.

489
00:30:20,750 --> 00:30:24,970
Norėdami tai padaryti, mes galime tiesiog įveskite $. Gauti.

490
00:30:24,970 --> 00:30:28,850
Tai JQuery funkcija, naudojant dolerio ženklas.

491
00:30:28,850 --> 00:30:31,430
Tai užtrunka daug argumentų pora. Pirmasis yra URL

492
00:30:31,430 --> 00:30:34,450
Antrasis yra atgalinio ryšio funkcija, funkcija, kuri vadinama

493
00:30:34,450 --> 00:30:37,740
kai šis prašymas iš tikrųjų grįžta.

494
00:30:37,740 --> 00:30:39,890
Tegul tik sukurti URL pirmas.

495
00:30:39,890 --> 00:30:44,650
Mes galime gauti iš API Dovydas parašė viršų.

496
00:30:44,650 --> 00:30:51,360
Ėjimas čia matome, kad tai food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
ir tada tiesiog praeiti atsižvelgiant į parametrus, kuriuos norite vardais.

498
00:30:54,140 --> 00:30:57,760
Taigi 1 parametras yra vertė 1.

499
00:30:57,760 --> 00:31:00,910
Atrodo standarto leidimo data, pradžios datą, nutylėjimą šiandien

500
00:31:00,910 --> 00:31:03,110
jei jums nereikia įvesti nieko, dieną ir baigiasi taip pat pagal nutylėjimą

501
00:31:03,910 --> 00:31:05,930
iki šiandien, jei jūs neturite įvesti nieko.

502
00:31:05,930 --> 00:31:10,790
Štai ką mes norime. Mes norime tik gauti už šiandienos informaciją.

503
00:31:10,790 --> 00:31:12,950
>> Mes norime, kad formatas būtų JSON.

504
00:31:12,950 --> 00:31:15,570
Tai tik savavališkai, galite naudoti bet kokia forma, kad jūs norite.

505
00:31:15,570 --> 00:31:18,950
Galite naudoti CSV, tačiau JSON yra JavaScript objektas žymėjimas.

506
00:31:18,950 --> 00:31:24,150
Tai labai lengva JavaScript suprasti, ką tai reiškia,

507
00:31:24,150 --> 00:31:27,110
ir mes galime atspausdinti jį lengviau, kad taip.

508
00:31:27,110 --> 00:31:30,490
Taigi, galime prašyti, kad JSON, ir tegul prašymas pietūs.

509
00:31:30,490 --> 00:31:37,660
Taigi miltai = pietūs. Tiesiog rašyti iki šį URL, mes grįžti čia.

510
00:31:37,660 --> 00:31:41,290
Yra meniu. Pirmasis parametras yra išėjimas = JSON

511
00:31:41,290 --> 00:31:44,640
nes tai, ką norime, ir jūs atskirti parametrus su "ir".

512
00:31:44,640 --> 00:31:48,940
Antrasis parametras yra - nepamenu.

513
00:31:48,940 --> 00:31:52,170
Valgio. Ir mes norime valgio = pietūs.

514
00:31:52,170 --> 00:31:57,390
Galite išbandyti šį adresą įvesdami jį į savo naršyklę ir eiti į jį.

515
00:31:57,390 --> 00:32:03,120
Jis duos jums kažkokią išvestį. Tai tiesiog stuff krūva tai pietums.

516
00:32:03,120 --> 00:32:10,410
Tai šiame negraži formatu. Mes norime spausdinti ant mūsų puslapyje geriau formatu.

517
00:32:10,410 --> 00:32:12,580
Taigi URL yra teisingas, dabar mes tiesiog reikia parašyti funkciją

518
00:32:12,580 --> 00:32:18,300
paskambinti, kai prašymas yra sėkminga.

519
00:32:18,300 --> 00:32:20,430
Ši funkcija bus iš tikrųjų imtis argumentas. Tai bus duomenys.

520
00:32:20,430 --> 00:32:25,650
Duomenys, kas grįžta iš GET užklausos po prašymą GET daroma.

521
00:32:25,650 --> 00:32:28,860
Mes galime padaryti garbanotas petnešos; čia mes rašome anoniminę funkciją

522
00:32:28,860 --> 00:32:33,900
kad vykdo, naudojant tuos duomenis, kai mes gauname informaciją atgal.

523
00:32:33,900 --> 00:32:37,840
Taigi, duomenimis, kai mes įvedėte šį URL,

524
00:32:37,840 --> 00:32:41,540
tai, ką duomenys ketina atrodyti. Tai bus šis didžiulis eilutė.

525
00:32:41,540 --> 00:32:48,610
Bet geras dalykas yra, "JavaScript" gali apdoroti jį naudojant JSON.parse funkciją.

526
00:32:48,610 --> 00:32:54,950
Taigi, galime sukurti naują kintamąjį vadinamą parse duomenys.

527
00:32:54,950 --> 00:32:57,060
Ir parse duomenys objektų masyvo.

528
00:32:57,060 --> 00:33:04,200
Kiekvienas objektas yra informacijos, tokios kaip - gerai, tegul pažvelgti.

529
00:33:04,200 --> 00:33:08,980
Ji datą, valgį, kategoriją, receptas, visa tai kitų dalykų.

530
00:33:08,980 --> 00:33:10,860
Taigi galime tiesiog atsispausdinti kiekvieno užsakymo vardą.

531
00:33:10,860 --> 00:33:13,790
Leiskite pakartoti per visą įvairių dalykų, kad mes grįžti iš jo,

532
00:33:13,790 --> 00:33:17,570
ir tiesiog atsispausdinti kiekvieną iš jų - atsispausdinti kiekvieno jų pavadinimą.

533
00:33:17,570 --> 00:33:22,670
Tai už linijos.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript turi šią naudingą sintaksę, kur Jūs galite sukurti kintamąjį ir užsilenkti masyvo,

535
00:33:26,030 --> 00:33:30,150
ir varas i tiesiog iteratorius, todėl vietoj to, kad daryti var i = 0,

536
00:33:30,150 --> 00:33:40,290
man buvo mažesnis nei ilgio, i + +, galite tiesiog padaryti var i ir apdoroti duomenis.

537
00:33:40,290 --> 00:33:47,060
Šiame pavyzdyje, apdoroti duomenis (i) bus atitikti esamą elementą

538
00:33:47,060 --> 00:33:49,850
masyvo, tikrasis objektas.

539
00:33:49,850 --> 00:33:51,720
Ir mes norime gauti vardą iš jo.

540
00:33:51,720 --> 00:33:54,170
Taigi galime tiesiog pavadinimas.

541
00:33:54,170 --> 00:33:57,000
Ir paskutinis dalykas yra, mes ketiname turėti tam tikrą JQuery dar kartą.

542
00:33:57,000 --> 00:34:02,660
Tiesą sakant įtraukti jį į div Šis patiekalas informacija div tai šiuo metu tuščias.

543
00:34:02,660 --> 00:34:05,430
Taigi galime pasirinkti, kad.

544
00:34:05,430 --> 00:34:13,870
Mes naudojame JQuery ir pasirinkite valgio info div ID, ar rupiniai info ID, atsiprašau.

545
00:34:13,870 --> 00:34:16,580
Mes norime pridėti į tai.

546
00:34:16,580 --> 00:34:21,030
Jei mes padarė testus, pavyzdžiui, jis būtų tiesiog perrašyti kiekvieną kartą.

547
00:34:21,030 --> 00:34:29,190
Taigi, mes galime tik pridėti tai.

548
00:34:29,190 --> 00:34:31,889
Dabartinis elementas masyve, mes gauti vardą iš jo,

549
00:34:31,889 --> 00:34:38,159
ir mes pridėti jį į miltus info ID div pabaigos.

550
00:34:38,159 --> 00:34:40,120
Ir tada tik, kad ji atrodytų švaresnis,

551
00:34:40,120 --> 00:34:51,550
mes taip pat pridėti eilutės lūžį, kad tai dar ne viskas vienoje eilutėje.

552
00:34:51,550 --> 00:34:55,280
Taigi, jei viskas vyks gerai, kad turėtų būti gerai -

553
00:34:55,280 --> 00:34:57,220
visų pirma, kai šis mygtukas paspaudžiamas,

554
00:34:57,220 --> 00:35:00,070
ji bus išsiųsti prašymą GET į šį URL.

555
00:35:00,070 --> 00:35:02,500
Kai duomenys gaunami atgal iš jo, jis bus išanalizuoti jį,

556
00:35:02,500 --> 00:35:06,950
įjunkite jį į JSON, linijos per visą masyvą atstovaujanti, kad duomenys,

557
00:35:06,950 --> 00:35:10,310
ir tada pridėkite pavadinimą ir eilutės lūžį

558
00:35:10,310 --> 00:35:16,500
į kiekvieną šio valgio info ID, kuris anksčiau buvo tuščia linija.

559
00:35:16,500 --> 00:35:18,910
Taigi grįžtame į šį puslapį, mes atnaujinti,

560
00:35:18,910 --> 00:35:23,690
spustelėkite, sužinoti - jis neveikia. Tai gaila.

561
00:35:23,690 --> 00:35:25,830
Ir tai yra, kai derinimo Įgijusi

562
00:35:25,830 --> 00:35:30,070
Index.html linija 1.

563
00:35:30,070 --> 00:35:57,210
Tai įdomu.

564
00:35:57,210 --> 00:35:59,720
Gerai, gerai, o ne praleisti laiką darai tai, aš tik ketina

565
00:35:59,720 --> 00:36:07,070
atsigriebti padaryti failą, kad aš, kuris yra baigtas versija.

566
00:36:07,070 --> 00:36:13,710
Aš nesu įsitikinęs, ką skirtumas yra, bet mes galime tiesiog atidaryti tai padaryti vietoj.

567
00:36:13,710 --> 00:36:19,740
Ir mes einame į AJAX, ir tai turėtų veikti.

568
00:36:19,740 --> 00:36:21,730
Tai, kas buvo pietums šiandien

569
00:36:21,730 --> 00:36:24,870
ne pirma tvarka, su kabutėmis aplink jį, todėl tai nėra gražiausia.

570
00:36:24,870 --> 00:36:27,090
Bet, žinoma, jei jūs darote tai, kad galutinė projekto

571
00:36:27,090 --> 00:36:30,120
jums, kad ji atrodytų geriau.

572
00:36:30,120 --> 00:36:32,530
Bet tai tik paprastas pavyzdys, kaip jūs darote GET užklausą.

573
00:36:32,530 --> 00:36:34,580
O jei pažvelgsime į faktinį kodą, spėju, aš esu gana įsitikinęs,

574
00:36:34,580 --> 00:36:39,690
jis vis dar gana daug pats.

575
00:36:39,690 --> 00:37:04,990
Oi, aš pamiršau jį konvertuoti į eilutę, kad viskas.

576
00:37:04,990 --> 00:37:07,920
Ne, jis vis dar neveikia. Nepaisant to, čia yra tikrasis baigtas kodas

577
00:37:07,920 --> 00:37:10,300
už ką tai turėtų atrodyti,

578
00:37:10,300 --> 00:37:16,400
ir jis tą patį, kaip ką tik įgyvendinti.

579
00:37:16,400 --> 00:37:22,760
Kai paspausite mygtuką, ji naudoja GET JSON automatiškai apdoroti duomenis.

580
00:37:22,760 --> 00:37:29,190
Ji mano duomenis atgal iš jo ir kilpos per visą masyvas

581
00:37:29,190 --> 00:37:32,770
ir spausdina The - viską, kas pietums šiandien, jo pavadinimas,

582
00:37:32,770 --> 00:37:38,020
ir prideda eilutės po linija.

583
00:37:38,020 --> 00:37:41,100
Štai kaip jūs naudojate GET funkcija.

584
00:37:41,100 --> 00:37:44,040
>> Taip pat galite naudoti POST, kurį aš neturėjau laiko

585
00:37:44,040 --> 00:37:47,940
rašyti sukurti už tai pavyzdys, bet mes galime pažvelgti į dokumentus.

586
00:37:47,940 --> 00:37:53,220
Jei pažvelgti jquery.post,

587
00:37:53,220 --> 00:37:55,510
galite matyti, kad tai beveik tas pats.

588
00:37:55,510 --> 00:38:01,650
Jūs turite URL, tačiau vietoj perdavimo parametrus naudojant -

589
00:38:01,650 --> 00:38:03,990
tiesiog išleisti jas už pats URL eilutę,

590
00:38:03,990 --> 00:38:06,300
jūs turite pereiti per šį duomenų kintamojo

591
00:38:06,300 --> 00:38:11,990
kad iš esmės yra masyvas, žodynas, kad žemėlapiai parametrų vertes.

592
00:38:11,990 --> 00:38:17,690
Jums perduoti, kad ir kad siunčia juos naudojant POST.

593
00:38:17,690 --> 00:38:20,790
Ir kai jūs turite, tuomet jūs galite turėti sėkmės funkciją

594
00:38:20,790 --> 00:38:23,930
kad vykdo kai duomenys grįžta.

595
00:38:23,930 --> 00:38:26,430
Priešingu atveju, tai lygiai tas pats. Taigi, naudojant POST,

596
00:38:26,430 --> 00:38:29,970
jūs galbūt norėsite naudoti POST, pavyzdžiui, jei turite įvesties formą

597
00:38:29,970 --> 00:38:35,780
tegul žmonės įvesties slaptažodžius į jį, ir siųsti tuos slaptažodžius nuo

598
00:38:35,780 --> 00:38:41,850
savo back-end scenarijų, patikrinti duomenų bazėje, ar tas vartotojas yra galioja, ar ne.

599
00:38:41,850 --> 00:38:46,700
Jūs galite padaryti, kad visi naudoja JQuery vietoj to, kad atnaujinti puslapį ne visiems.

600
00:38:46,700 --> 00:38:52,160
Štai kaip aš įgyvendinama dienoraštį, kad jums rodžiau anksčiau.

601
00:38:52,160 --> 00:38:59,530
Jei mes einame į galutinio portalą ir išsiregistruoti, išsiregistruoti,

602
00:38:59,530 --> 00:39:02,600
Atsijungti neveikia.

603
00:39:02,600 --> 00:39:13,360
Na, leiskite man tiesiog atidarykite jį naujame lange.

604
00:39:13,360 --> 00:39:16,580
Čia yra slaptažodis, ir aš buvau ketinate įvesti kažką atsitiktinai.

605
00:39:16,580 --> 00:39:18,590
Ji neveikia, bet jūs galite pamatyti, kad mes ne

606
00:39:18,590 --> 00:39:20,840
iš tikrųjų turi atnaujinti puslapį ne visiems.

607
00:39:20,840 --> 00:39:24,610
Kodas, jei norite žiūrėti į jį,

608
00:39:24,610 --> 00:39:37,460
yra visiems prieinama čia.

609
00:39:37,460 --> 00:39:45,680
Taigi kodą parašiau pernai kažkada.

610
00:39:45,680 --> 00:39:47,790
Kaip matote čia, mes siųsti POST užklausą.

611
00:39:47,790 --> 00:39:50,400
Turiu failą pavadinimu login.php ant galinės pabaigoje,

612
00:39:50,400 --> 00:39:53,860
kuri patikrina, ar slaptažodis yra neteisingas.

613
00:39:53,860 --> 00:39:56,000
Parametrai mes pereiname į slaptažodžiu, susietas su

614
00:39:56,000 --> 00:40:00,030
įvesties tai šiame įvesties langelį dabar.

615
00:40:00,030 --> 00:40:04,110
Ir kai duomenys gaunami atgal, mes tikriname.

616
00:40:04,110 --> 00:40:07,680
Jeigu duomenys yra klaidinga, tada mes sakome neteisingą slaptažodį, stumkite jį žemyn,

617
00:40:07,680 --> 00:40:09,580
ir tik kad jis išnyksta po to.

618
00:40:09,580 --> 00:40:12,320
Priešingu atveju, mes įkelti admin puslapyje.

619
00:40:12,320 --> 00:40:15,080
Ir tai buvo daroma naudojant JSON.

620
00:40:15,080 --> 00:40:18,510
Be to daug eilučių kodo, galite tiesiog perduoti duomenis nugaros pabaigoje,

621
00:40:18,510 --> 00:40:21,020
patikrinti, ar tai teisinga, pasitikrinti, ar teisingai prisijungęs,

622
00:40:21,020 --> 00:40:24,200
ir iš tikrųjų į jį atsakyti, nukreipti asmenį į teisingą puslapį

623
00:40:24,200 --> 00:40:29,760
ar ne leisti jiems prisijungti ir pasakoja jiems, kad jie turėjo neteisingą slaptažodį.

624
00:40:29,760 --> 00:40:33,040
Štai, kaip galite naudoti JQuery POST pavyzdys

625
00:40:33,040 --> 00:40:37,010
siųsti POST prašymą savo nugaros pabaigoje,

626
00:40:37,010 --> 00:40:42,400
tikrinti, ar kažkas teisingai prisijungęs.

627
00:40:42,400 --> 00:40:44,820
>> Gerai, kad yra visi pavyzdžiai turėjau, ir visi stuff aš norėjau padengti.

628
00:40:44,820 --> 00:40:47,110
Tai yra pagrindiniai dalykai, kurie JQuery leidžia jums padaryti:

629
00:40:47,110 --> 00:40:52,640
pasirinkite elementus, juos modifikuoti, naudojant DOM manipuliacijos,

630
00:40:52,640 --> 00:40:56,340
galite pridėti efektų, įjungti dalykus dėl tam tikrų įvykių,

631
00:40:56,340 --> 00:41:00,430
ir taip pat padaryti AJAX prašymus labai sklandžiai ir lengvai.

632
00:41:00,430 --> 00:41:02,840
Taigi ačiū, kad atvykote ar žiūrėti,

633
00:41:02,840 --> 00:41:06,230
ir jei turite kokių nors klausimų, tik leiskite man žinoti. Taip?

634
00:41:06,230 --> 00:41:12,730
[Studentų] Atgal kada parodė, jūs turėjote JSON po POST kabučių,

635
00:41:12,730 --> 00:41:15,170
ir man buvo tiesiog įdomu, kas tai padarė.

636
00:41:15,170 --> 00:41:20,070
>> Taip, matau. Klausimas buvo, kad, pavyzdžiui, aš tik parodė,

637
00:41:20,070 --> 00:41:25,790
ten buvo žodis JSON į kabutes aplink -

638
00:41:25,790 --> 00:41:31,690
Aš tiesiog ištraukite jį vėl - apie POST funkcija.

639
00:41:31,690 --> 00:41:43,320
Aš tiesiog traukdami jį parodyti.

640
00:41:43,320 --> 00:41:46,890
Taigi čia This Post prašymas, ir ten tai į kabutes JSON.

641
00:41:46,890 --> 00:41:50,280
Tai tiesiog apibrėžia, ką mes tikisi produkcija būti.

642
00:41:50,280 --> 00:41:54,070
Taigi, jei mes pereiname JSON kaip tikimasi duomenų tipo,

643
00:41:54,070 --> 00:41:56,070
tai nėra reikalavimas, bet jei mes pereiname jį,

644
00:41:56,070 --> 00:41:58,590
tada duomenys bus automatiškai apdoroti kaip JSON.

645
00:41:58,590 --> 00:42:00,600
Taigi mes neturime skambinti JSON analiz s funkcija ant jo,

646
00:42:00,600 --> 00:42:02,620
jis bus tiesiog atsitikti automatiškai.

647
00:42:02,620 --> 00:42:05,150
O jei pažvelgti į "post dokumentų išvaizdą,

648
00:42:05,150 --> 00:42:09,850
yra šio duomenų tipo kintamasis, duomenų, kurių tikimasi iš serverio tipą.

649
00:42:09,850 --> 00:42:12,660
Pagal nutylėjimą jis protingas spėti, kad gali būti negerai,

650
00:42:12,660 --> 00:42:15,520
todėl jūs galite palikti jį tuščią, bet tai tik duomenų tipas

651
00:42:15,520 --> 00:42:21,680
kodavimo, kad jūs naudojate, ar tai JSON ar XML ar kažkas kita.

652
00:42:21,680 --> 00:42:25,280
>> Visi kiti klausimai?

653
00:42:25,280 --> 00:42:27,300
Gerai. Jei turite kokių nors klausimų, nedvejodami rašykite man

654
00:42:27,300 --> 00:42:30,830
ne vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
ir skaidres ir kodas turi būti prieinama internete gana greitai.

656
00:42:34,860 --> 00:42:42,810
Sėkmės su jūsų galutinis projektų, tikimės, kad jums naudoti JQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]