1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminar: Jquery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

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

4
00:00:08,000 --> 00:00:10,640
Hvis du følger sammen derhjemme, kan du faktisk få adgang til mine dias online

5
00:00:10,640 --> 00:00:13,310
ved at gå til dette link.

6
00:00:13,310 --> 00:00:18,650
Det er TjjRWj på bit.ly.

7
00:00:18,650 --> 00:00:20,700
Du kan også bare gå til webadressen direkte

8
00:00:20,700 --> 00:00:27,300
som er cloud.cs50.net / ~ vshekhawat, som er mit navn,

9
00:00:27,300 --> 00:00:32,409
og jquery.

10
00:00:32,409 --> 00:00:34,920
Jeg stærkt opfordre dig til at følge med, hvis du ser derhjemme,

11
00:00:34,920 --> 00:00:40,650
og hvis du er her, også fordi det er en temmelig interaktiv præsentation.

12
00:00:40,650 --> 00:00:43,160
>> Så i dag jeg har tænkt mig at tale om jQuery, og det første spørgsmål er,

13
00:00:43,160 --> 00:00:45,300
hvad er jQuery?

14
00:00:45,300 --> 00:00:47,090
Dette år, jeg kender jer ikke har dækket JavaScript

15
00:00:47,090 --> 00:00:51,080
i så mange detaljer som vi har i de forløbne år.

16
00:00:51,080 --> 00:00:53,150
JavaScript er først og fremmest, bare en klient-side sprog

17
00:00:53,150 --> 00:00:58,390
som du bruger til at køre scripts og kode på hver brugers maskine.

18
00:00:58,390 --> 00:01:00,660
Så du har en server, der giver web-sider til folk,

19
00:01:00,660 --> 00:01:02,600
men du måske ønsker at gøre ting på deres maskine,

20
00:01:02,600 --> 00:01:08,060
spørge deres maskine til at sende anmodninger til din server hvert 30. sekund eller noget lignende.

21
00:01:08,060 --> 00:01:10,420
Du kan gøre det ved hjælp af JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery bare giver mere funktionalitet på toppen af ​​JavaScript

23
00:01:13,190 --> 00:01:15,680
der gør ekstra ting for dig.

24
00:01:15,680 --> 00:01:17,710
Hvis man ser på indholdet på toppen,

25
00:01:17,710 --> 00:01:21,410
der beskriver nogle af de ting, du er i stand til at gøre.

26
00:01:21,410 --> 00:01:23,500
Så samlet var det skabt i januar 2006.

27
00:01:23,500 --> 00:01:26,560
Det blev først udtænkt i august 2005.

28
00:01:26,560 --> 00:01:31,370
Det har været rundt i et par år, og det er virkelig en del af den nye Web 2.0 bevægelsen

29
00:01:31,370 --> 00:01:34,330
der er lavet internettet, så skinnende.

30
00:01:34,330 --> 00:01:37,630
Det er den mest udbredte JavaScript bibliotek.

31
00:01:37,630 --> 00:01:41,450
Over 19,6 mio hjemmesider bruger det, og brugen er stadig stigende

32
00:01:41,450 --> 00:01:45,640
ifølge builtwith.com, som tilsyneladende i det seneste år,

33
00:01:45,640 --> 00:01:49,710
har netop været konstant stigende nogenlunde lineært.

34
00:01:49,710 --> 00:01:52,870
Blandt de øverste 10 millioner sites, er der stadig -

35
00:01:52,870 --> 00:01:55,180
omkring 40% af dem er i øjeblikket bruger det.

36
00:01:55,180 --> 00:01:58,540
Facebook bruger det, masser af andre hjemmesider i øjeblikket bruger det.

37
00:01:58,540 --> 00:02:01,540
Du kan se på denne statistik på din egen, hvis du gerne vil.

38
00:02:01,540 --> 00:02:05,820
Og du kan fortælle det er legit, fordi det har et fundament og 13 bestyrelsesmedlemmer,

39
00:02:05,820 --> 00:02:11,910
sammen med et team på 20 personer, der arbejder på det på en regelmæssig basis.

40
00:02:11,910 --> 00:02:16,110
Så det er meget udbredt, det har en. Org URL, det er fancy,

41
00:02:16,110 --> 00:02:21,660
det har sidegevinster for andre ting, så det er en big deal.

42
00:02:21,660 --> 00:02:24,510
>> Hvorfor skal du bruge det? JQuery er meget let.

43
00:02:24,510 --> 00:02:27,270
Det betyder, at det ikke er en enorm fil. Du kan downloade

44
00:02:27,270 --> 00:02:31,540
Den minified fil, som er uden alle de hvide rum og kommentarer og det er kun 32 kB.

45
00:02:31,540 --> 00:02:33,600
Så det er nemt at bare smide på din webside

46
00:02:33,600 --> 00:02:35,910
og bare for at begynde at bruge det.

47
00:02:35,910 --> 00:02:39,630
Det er også meget effektivt skrevet, så det ikke tager en masse -

48
00:02:39,630 --> 00:02:42,550
det ikke sinke din hjemmeside meget, når du bruger den.

49
00:02:42,550 --> 00:02:45,770
Det lader dig gennemføre ting, som tidligere var umuligt.

50
00:02:45,770 --> 00:02:47,790
Der er nogle aspekter af funktionalitet,

51
00:02:47,790 --> 00:02:51,780
som at skabe animationer, normalt det ville være meget, meget vanskeligt at gøre.

52
00:02:51,780 --> 00:02:54,300
Men i jQuery de er faktisk meget simpelt.

53
00:02:54,300 --> 00:02:57,040
Og der er nogle ting, der er irriterende at gøre,

54
00:02:57,040 --> 00:02:59,610
muligt i JavaScript, som at sende en POST anmodning

55
00:02:59,610 --> 00:03:02,190
men at sende en anmodning til en server, er du nødt til at skrive

56
00:03:02,190 --> 00:03:04,320
fem eller seks eller syv linjer kode.

57
00:03:04,320 --> 00:03:07,200
Nu kan du bare gøre det i et enkelt linje kode i en enkelt funktion opkald.

58
00:03:07,200 --> 00:03:11,790
Det er virkelig forenkler en masse af de ting, du laver.

59
00:03:11,790 --> 00:03:15,950
Og alle de seje børn bruger det. Dermed mener jeg mig.

60
00:03:15,950 --> 00:03:19,270
I mit afgangsprojekt sidste år, hvilket er news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
som er for radiostationen, Jeg har oprettet denne blog

62
00:03:22,530 --> 00:03:29,750
der er vært alle de viser, at vi har gjort, og de MP3 filer til dem.

63
00:03:29,750 --> 00:03:32,070
Du kan bladre gennem de seneste shows,

64
00:03:32,070 --> 00:03:34,130
og det hele gøres ved hjælp jQuery. Du kan fortælle

65
00:03:34,130 --> 00:03:37,340
på grund af alle disse animationer. væsentlige

66
00:03:37,340 --> 00:03:42,360
Så hvis du har - hvis du opretter et nyt indlæg,

67
00:03:42,360 --> 00:03:45,980
du ser disse små slideDowns, det er alle gjort ved hjælp jQuery.

68
00:03:45,980 --> 00:03:49,140
Og dette fade - så den slags ting er alle gjort ved hjælp af jQuery,

69
00:03:49,140 --> 00:03:52,720
og du behøver ikke konstant at genindlæse siden for at navigere rundt på webstedet.

70
00:03:52,720 --> 00:03:57,220
En anden cool ting, der er lavet ved hjælp af jQuery er denne præsentation.

71
00:03:57,220 --> 00:03:59,700
Jeg bruger denne open source ting kaldet scrolldeck,

72
00:03:59,700 --> 00:04:03,250
som nogen skrev på toppen af ​​jQuery.

73
00:04:03,250 --> 00:04:04,870
Hvis du rent faktisk ser på kilde, kan du se, at

74
00:04:04,870 --> 00:04:07,830
de bruger denne dollartegn; dollartegn

75
00:04:07,830 --> 00:04:12,110
anvendes i jQuery at betyde, at en funktion er en jQuery funktion.

76
00:04:12,110 --> 00:04:15,020
Så de definerer en wrapper på toppen af ​​jQuery

77
00:04:15,020 --> 00:04:18,570
der giver dig mulighed for at lave en præsentation som dette,

78
00:04:18,570 --> 00:04:21,200
og du kan se, at de her er inklusive originalen jQuery-fil,

79
00:04:21,200 --> 00:04:24,120
hvilket er, hvad du bliver nødt til at inkludere, hvis ønsker at bruge jQuery

80
00:04:24,120 --> 00:04:30,450
i dine egne websites.

81
00:04:30,450 --> 00:04:32,790
>> Berøring på det, hvordan kan du installere det?

82
00:04:32,790 --> 00:04:36,150
Du kan bare gå til jQuery.com og downloade filen,

83
00:04:36,150 --> 00:04:38,320
føje det til en web-bibliotek og medtage det.

84
00:04:38,320 --> 00:04:42,200
Så bare på toppen, i hovedet tag i din HTML-fil

85
00:04:42,200 --> 00:04:45,400
af dine vigtigste HTML-fil, har netop linje kode

86
00:04:45,400 --> 00:04:49,490
med den korrekte version til hvilken version af jQuery, du bruger.

87
00:04:49,490 --> 00:04:51,340
Du kan downloade det ved at gå til jQuery.com,

88
00:04:51,340 --> 00:04:55,130
klik på "Download jQuery", og du har fået det. Det er det.

89
00:04:55,130 --> 00:04:58,880
Og faktisk kan vi tage et kig på, hvad det ligner.

90
00:04:58,880 --> 00:05:01,080
Hvis du klikker på download her, jQuery er dette.

91
00:05:01,080 --> 00:05:05,260
Det er bare én stor JavaScript-fil, der gør alle de magiske ting for dig.

92
00:05:05,260 --> 00:05:09,270
Dette er den minified version, som ikke kan læses overhovedet.

93
00:05:09,270 --> 00:05:13,180
Du kan også se på udviklingen version, som kan læses

94
00:05:13,180 --> 00:05:15,370
men stadig meget, meget langvarig.

95
00:05:15,370 --> 00:05:17,980
Det er en masse ting derinde.

96
00:05:17,980 --> 00:05:20,240
Du kan også linke til Googles hostede version af det.

97
00:05:20,240 --> 00:05:23,820
Så der vil tillade dig at bare stole på Google til at give det.

98
00:05:23,820 --> 00:05:29,310
De giver hver version af det, tilgængelig på alle tidspunkter.

99
00:05:29,310 --> 00:05:31,530
Så du kan sikkert stole på Google til at være vært for det for dig.

100
00:05:31,530 --> 00:05:33,270
Eller du kan linke til jQuery egen nyeste version.

101
00:05:33,270 --> 00:05:36,400
De har en webadresse, der er altid opdateret til den nyeste version.

102
00:05:36,400 --> 00:05:40,850
Det er jQuery-nyeste, og der er et problem med det,

103
00:05:40,850 --> 00:05:44,350
hvilket er, at hvis den opdaterede jQuery og nogle af de tidligere funktionalitet

104
00:05:44,350 --> 00:05:47,250
de havde bliver retrograderet eller frarådet,

105
00:05:47,250 --> 00:05:49,620
det kan ikke - det kan begynde at ikke blive understøttet længere.

106
00:05:49,620 --> 00:05:52,940
Så hvis du skriver en hjemmeside bruger version 1.8.2,

107
00:05:52,940 --> 00:05:55,000
af den tid version 2.7 kommer ud

108
00:05:55,000 --> 00:05:57,000
nogle af de funktioner, du skrev ikke arbejde mere.

109
00:05:57,000 --> 00:05:59,930
Så det er bedre bare at hente den 32 kB-fil,

110
00:05:59,930 --> 00:06:04,100
sætte det på din webside, og det vil arbejde for evigt.

111
00:06:04,100 --> 00:06:07,450
>> Jeg har tænkt mig at gå videre og begynde at tale om den faktiske funktionalitet jQuery.

112
00:06:07,450 --> 00:06:13,090
Den første ting er selektorer. Dette er, hvad jQuery blev oprindeligt udtænkt til at give.

113
00:06:13,090 --> 00:06:15,500
Og du kan klikke på dokumentation for at se på

114
00:06:15,500 --> 00:06:18,690
den detaljerede dokumentation for selektorer jeg har tænkt mig at være der dækker.

115
00:06:18,690 --> 00:06:24,120
Ideen bag selektorer er, at du kan vælge HTML-elementer på en side.

116
00:06:24,120 --> 00:06:28,790
Elementer på en side har ID'er og klasser og andre identificerende aspekter til dem.

117
00:06:28,790 --> 00:06:30,500
Der er også - De er ude i forskellige ordrer.

118
00:06:30,500 --> 00:06:32,570
Noget af tiden, de er indlejret i hinanden.

119
00:06:32,570 --> 00:06:38,120
JQuery tillader dig at konstruere simple forespørgsler, der henter elementer fra siden.

120
00:06:38,120 --> 00:06:41,890
Derefter kan du manipulere disse elementer ved hjælp af jQuery funktioner,

121
00:06:41,890 --> 00:06:43,990
hvilket er manipulation afsnit vil vi komme til senere.

122
00:06:43,990 --> 00:06:46,040
Du kan ændre HTML, ændre CSS,

123
00:06:46,040 --> 00:06:50,500
kan du også animere og føje funktioner, der aktiverer på bestemte begivenheder.

124
00:06:50,500 --> 00:06:52,710
Så for eksempel, hvis noget er klikket, du vil have noget til at ske,

125
00:06:52,710 --> 00:06:55,210
du kan gøre det ved hjælp jQuery så godt.

126
00:06:55,210 --> 00:06:57,380
Og der er et stort antal måder at vælge elementer.

127
00:06:57,380 --> 00:07:00,310
De fleste af dem har jeg aldrig brugt, men der er de basale,

128
00:07:00,310 --> 00:07:02,340
som er ret vigtigt.

129
00:07:02,340 --> 00:07:05,750
Elementet selector, for eksempel, hvis du bare vælger noget

130
00:07:05,750 --> 00:07:10,640
, der er en div - Jeg har faktisk koden åben for dette dias præsentation.

131
00:07:10,640 --> 00:07:13,450
Så for eksempel, er her den første dias.

132
00:07:13,450 --> 00:07:17,430
Her har vi en div. Hvis vi rent faktisk vælge alle divs på siden,

133
00:07:17,430 --> 00:07:22,300
det vil bare give os en bred vifte af alle de divs, der findes i denne fil.

134
00:07:22,300 --> 00:07:27,040
ID-vælgeren kan du vælge noget med en given id.

135
00:07:27,040 --> 00:07:32,230
Så hvis dette, for eksempel, har denne ting ID "hvad,"

136
00:07:32,230 --> 00:07:37,160
og hvis vi gjorde det med # hvad i stedet for noget ID,

137
00:07:37,160 --> 00:07:42,920
det ville blot returnere et array, der har et enkelt element, og det er dette element på siden.

138
00:07:42,920 --> 00:07:45,490
Vi kan også kombinere selektorer denne måde ved at have

139
00:07:45,490 --> 00:07:48,260
kun vælge ting med ID'er, der er divs.

140
00:07:48,260 --> 00:07:51,810
Så ja. Vælg kun divs, der har det id.

141
00:07:51,810 --> 00:07:55,260
For klasse du bare bruge en prik, det er det samme som CSS.

142
00:07:55,260 --> 00:07:57,500
Efterkommer virker også, så hvis du har nogle klasse

143
00:07:57,500 --> 00:08:00,170
og det har indlejret elementer inden det - så, for eksempel,

144
00:08:00,170 --> 00:08:03,260
der er nogle klasse, og det har en ankerkode at linke til en anden side,

145
00:08:03,260 --> 00:08:08,510
kan du bruge denne syntaks til at hente linket.

146
00:08:08,510 --> 00:08:12,420
Du kan også vælge flere ting på én gang, bare adskille dem med kommaer,

147
00:08:12,420 --> 00:08:17,360
bruge nogen selector du gerne vil, og du vil vælge dem alle på én gang, i et enkelt array.

148
00:08:17,360 --> 00:08:19,650
Og så er der også en ikke selector, så du kan vælge alle divs

149
00:08:19,650 --> 00:08:24,210
der ikke har nogle specifikke klasse.

150
00:08:24,210 --> 00:08:28,790
Og det er kun en hjælpsom måde at få en introduktion til, hvordan dette valg virker.

151
00:08:28,790 --> 00:08:32,270
Jeg vil vise nogle konkrete eksempler i et sekund.

152
00:08:32,270 --> 00:08:35,480
>> Avancerede vælgere er - disse er blot nogle få eksempler.

153
00:08:35,480 --> 00:08:38,840
Der er snesevis af disse, men hvis du ønsker at vælge alle billedet tags

154
00:08:38,840 --> 00:08:42,799
inden et element, så du bare gøre: image.

155
00:08:42,799 --> 00:08:45,340
Hvis du ønsker at vælge de lige elementer, for eksempel, hvis der er 20 af dem,

156
00:08:45,340 --> 00:08:48,290
du ønsker at vælge 0, 2, 4, 6 og så videre,

157
00:08:48,290 --> 00:08:51,630
du gør: selv, eller du kan også gøre: ulige.

158
00:08:51,630 --> 00:08:55,470
Disse er pseudo selektorer, hvilket betyder, at de rent faktisk beregne

159
00:08:55,470 --> 00:09:00,960
hver andet element i stedet for bare at gå og vælge dem alle.

160
00:09:00,960 --> 00:09:05,510
Du kan også - hvert element kan også have specifikke egenskaber.

161
00:09:05,510 --> 00:09:10,580
Så for eksempel, er class = centret også en attribut.

162
00:09:10,580 --> 00:09:16,500
Til denne ankerkode, hypertekst reference, href er en attribut også.

163
00:09:16,500 --> 00:09:21,150
Så du kan vælge noget, der linker til en bestemt side eller bare - det er virkelig generelt.

164
00:09:21,150 --> 00:09:25,410
Du kan vælge noget med nogen attribut, som du gerne vil.

165
00:09:25,410 --> 00:09:27,470
Og så også, attribut indeholder.

166
00:09:27,470 --> 00:09:30,420
Hvis du for eksempel ønskede at vælge alle input elementer

167
00:09:30,420 --> 00:09:32,700
der har ordet "pass" som navnet på dem,

168
00:09:32,700 --> 00:09:37,560
hvis en side har en indgang tekstblok

169
00:09:37,560 --> 00:09:41,050
der hedder "password", der ville være en måde du kan vælge det.

170
00:09:41,050 --> 00:09:43,020
Og der er mange flere. Du kan gå videre og se på dokumentationen

171
00:09:43,020 --> 00:09:46,950
og se konkrete eksempler på, hvordan det fungerer.

172
00:09:46,950 --> 00:09:48,840
>> Den næste ting er DOM manipulation.

173
00:09:48,840 --> 00:09:52,500
Efter at vi vælger elementer, vil vi ønsker rent faktisk at gøre ting med dem.

174
00:09:52,500 --> 00:09:55,500
Hidtil har vi ikke kigget på det på alle, men hvis man ser på den dokumentation,

175
00:09:55,500 --> 00:09:57,950
der er virkelig en masse, vi kunne gøre.

176
00:09:57,950 --> 00:10:02,900
På dette tidspunkt, vi kommer til at vælge elementer på denne præsentation

177
00:10:02,900 --> 00:10:04,890
og manipulere dem ved hjælp jQuery.

178
00:10:04,890 --> 00:10:08,290
Da dette er gennemført ved hjælp jQuery, har vi adgang til jQuery bibliotek,

179
00:10:08,290 --> 00:10:13,580
og vi kan bruge disse funktioner inden for denne kode.

180
00:10:13,580 --> 00:10:16,200
En nyttig ting, som du måske ikke kender, er konsollen.

181
00:10:16,200 --> 00:10:19,340
Og Google Chrome er, hvad jeg bruger. Du kan trykke alt kommando J

182
00:10:19,340 --> 00:10:21,720
eller alt kontrol J for at åbne konsollen.

183
00:10:21,720 --> 00:10:26,130
I Firefox Jeg tror det er kommando skift K eller kontrol shift K.

184
00:10:26,130 --> 00:10:28,880
I Safari skal du gå ændre nogle indstillinger.

185
00:10:28,880 --> 00:10:35,460
Der er et link, hvis du gerne vil gøre det, men jeg anbefale at få Chrome eller Firefox.

186
00:10:35,460 --> 00:10:37,750
Så lad os åbne op for konsollen, det er hernede.

187
00:10:37,750 --> 00:10:41,170
Det giver dig mulighed for at dybest set bare at gøre noget, du ønsker.

188
00:10:41,170 --> 00:10:45,100
Så du kan bare skrive oprette en variabel kaldet x,

189
00:10:45,100 --> 00:10:49,200
x = 5, så lad os se, hvad x + 2 er.

190
00:10:49,200 --> 00:10:57,670
Du kan endda gøre noget som CS + Lad os se, x + 45, som vil være CS50.

191
00:10:57,670 --> 00:11:00,530
Du kan bare gøre nogle typiske JavaScript stuff.

192
00:11:00,530 --> 00:11:02,730
Men du kan også gøre jQuery herinde.

193
00:11:02,730 --> 00:11:06,200
>> Så lad os se på dette første aspekt her.

194
00:11:06,200 --> 00:11:09,500
Vi kommer til at oprette en variabel kaldet HTML, hvilket er en streng.

195
00:11:09,500 --> 00:11:15,890
Det har et stykke tag i det, der kaldes nogle nye tekst.

196
00:11:15,890 --> 00:11:19,420
Så vi har denne HTML, det er nogle nye tekst i afsnit tags.

197
00:11:19,420 --> 00:11:21,800
Nu er vi faktisk ønsker at tilføje det til siden.

198
00:11:21,800 --> 00:11:28,310
Jeg sætte den op, så den HTML for dette stykke, denne titel her, er append id.

199
00:11:28,310 --> 00:11:32,320
Hvis vi vælger append id og derefter knytter til det

200
00:11:32,320 --> 00:11:34,560
HTML variabel jeg lige har oprettet,

201
00:11:34,560 --> 00:11:40,370
det vil tilføje, at HTML i slutningen, lige efter dette stykke tag.

202
00:11:40,370 --> 00:11:43,730
Så hvis vi gør det - vi valgte dette stykke,

203
00:11:43,730 --> 00:11:47,590
og vi har kaldt append funktion med HTML variabel jeg lige har tilføjet,

204
00:11:47,590 --> 00:11:50,960
det vil tilføje, at ny tekst lige der på siden.

205
00:11:50,960 --> 00:11:54,970
Vi kan også tilføjes i begyndelsen, hvilket betyder, at det vil gå, før i begyndelsen af ​​dette element.

206
00:11:54,970 --> 00:11:58,290
Så der er nogle nye tekst fra starten og bagefter.

207
00:11:58,290 --> 00:12:01,660
Jeg kan gå videre og opdatere for at slippe af med denne ting, jeg lige har gjort.

208
00:12:01,660 --> 00:12:05,280
Men det er et eksempel på, hvordan du kan bruge prepend og tilføj metoder

209
00:12:05,280 --> 00:12:08,910
at manipulere ting på siden, tilføje nogle HTML.

210
00:12:08,910 --> 00:12:11,080
>> Du kan også ændre klasser.

211
00:12:11,080 --> 00:12:14,970
Tilbage i denne stil-fil, har jeg oprettet dette for at vinde klassen

212
00:12:14,970 --> 00:12:19,990
der har tekst farven rød, nogle baggrundsfarve og en tekst skygge.

213
00:12:19,990 --> 00:12:23,810
Det ser hæsligt, men jeg kan faktisk -

214
00:12:23,810 --> 00:12:26,410
dette stykke svarer til klasse-id.

215
00:12:26,410 --> 00:12:29,860
Så jeg kan tilføje klassen for at vinde.

216
00:12:29,860 --> 00:12:31,870
Jeg kan udføre dette i konsollen,

217
00:12:31,870 --> 00:12:35,480
og det vil føje denne klasse, og nu ser det hæslige, som forventet.

218
00:12:35,480 --> 00:12:39,680
CSS automatisk bliver anvendt på de klasser, som du -

219
00:12:39,680 --> 00:12:42,680
hvis der er CSS for en klasse, er det automatisk bliver anvendt

220
00:12:42,680 --> 00:12:44,680
hvis du ændrer den klasse af et element.

221
00:12:44,680 --> 00:12:49,230
Så kan vi bare fjerne den ved hjælp af remove klasse.

222
00:12:49,230 --> 00:12:53,690
Så hvis du har nogle foruddefinerede klasser som rød eller fremhævet,

223
00:12:53,690 --> 00:12:55,990
og så du ønsker at anvende dem på elementer,

224
00:12:55,990 --> 00:12:58,230
du behøver ikke at gøre alle de CSS styling hver gang.

225
00:12:58,230 --> 00:13:01,510
Du kan bare tilføje klasse til et element, og så vil det automatisk blive -

226
00:13:01,510 --> 00:13:05,580
det vil automatisk søge passende for denne klasse.

227
00:13:05,580 --> 00:13:07,900
Vi kan også fjerne ting, så jeg har tænkt mig at vælge alle divs

228
00:13:07,900 --> 00:13:10,830
på siden og fjerne dem.

229
00:13:10,830 --> 00:13:13,990
Hvad der kommer til at se ud?

230
00:13:13,990 --> 00:13:16,170
Det kommer til at ligne ingenting, så der er faktisk ikke noget til venstre.

231
00:13:16,170 --> 00:13:18,170
Min præsentation er væk.

232
00:13:18,170 --> 00:13:21,290
Jeg kan opdatere og bringe den tilbage, heldigvis,

233
00:13:21,290 --> 00:13:24,420
fordi det bare kører én gang,

234
00:13:24,420 --> 00:13:29,460
men det er et eksempel på at fjerne, hvis du ønsker helt at ødelægge et element uden for siden.

235
00:13:29,460 --> 00:13:33,180
>> Du kan også overskrive, og jeg har tænkt mig at vælge alle afsnit tags på siden

236
00:13:33,180 --> 00:13:36,850
og gå ind i dem og erstatte den tekst, de har i dem

237
00:13:36,850 --> 00:13:39,690
med blot ordet "test."

238
00:13:39,690 --> 00:13:46,520
Hvis du gør dette, vil du erstatte alle afsnit på siden med denne test.

239
00:13:46,520 --> 00:13:49,150
Yep. De er alle erstattet med test.

240
00:13:49,150 --> 00:13:53,270
Så det er et eksempel på, at få adgang til teksten og overskrive det.

241
00:13:53,270 --> 00:13:57,490
Du kan også hente oplysninger, og det er virkelig cool for input bokse.

242
00:13:57,490 --> 00:14:00,470
Hvis du har en tekstboks, som folk skriver ting ind,

243
00:14:00,470 --> 00:14:03,880
folk skriver ting ind i det,

244
00:14:03,880 --> 00:14:09,030
Her vælger vi input, enhver input-tag med en type tekst.

245
00:14:09,030 --> 00:14:13,800
I dette tilfælde er der kun én indgang kasse i hele præsentationen,

246
00:14:13,800 --> 00:14:17,260
så vi bare vælge den første, og så kalder vi den val-funktionen på det.

247
00:14:17,260 --> 00:14:19,570
Der returnerer værdien, og for en input box,

248
00:14:19,570 --> 00:14:24,330
værdien er bare uanset hvad der sker for at være inde i det.

249
00:14:24,330 --> 00:14:31,880
Så hvis vi gør det, det bare returnerer strengen stuff.

250
00:14:31,880 --> 00:14:36,860
Og hvis vi kalder det igen efter at skrive flere ting, det bliver til flere ting.

251
00:14:36,860 --> 00:14:40,760
Det er en fantastisk måde at få adgang til dele af en input box, og derefter kontrollere,

252
00:14:40,760 --> 00:14:45,060
er dette en gyldig e-mail-adresse, er dette en gyldig dato, for eksempel.

253
00:14:45,060 --> 00:14:49,600
Du kan bare hente ting øjeblikkeligt som folk er at skrive det,

254
00:14:49,600 --> 00:14:54,830
og derefter kontrollere, om det er gyldigt, sende det tilbage til en server, skal du gøre noget, du vil med det.

255
00:14:54,830 --> 00:14:57,720
Og det er hvordan du får adgang til, hvad der er indeni disse bokse.

256
00:14:57,720 --> 00:15:00,090
>> Du kan også ændre CSS direkte, så i stedet for at tilsætte

257
00:15:00,090 --> 00:15:02,510
en klasse, der har nogle foruddefinerede egenskaber,

258
00:15:02,510 --> 00:15:08,120
kan du bare tilføje uanset CSS du vil noget.

259
00:15:08,120 --> 00:15:10,350
Så lad os vælge kroppen, hvilket er hele præsentationen,

260
00:15:10,350 --> 00:15:14,370
og farve er den egenskab, der definerer, hvad farverne teksten er.

261
00:15:14,370 --> 00:15:19,420
Hvis vi ændrer det til rød, vil al tekst på siden henvende sig til rød.

262
00:15:19,420 --> 00:15:26,310
Vi kan gøre noget som baggrundsfarve blå,

263
00:15:26,310 --> 00:15:30,680
der går vi, det er smukt.

264
00:15:30,680 --> 00:15:33,840
Du kan gøre hvad du vil med dette.

265
00:15:33,840 --> 00:15:39,250
Ved hjælp af CSS ejendom, kan du virkelig ændre, hvordan noget ser på noget tidspunkt.

266
00:15:39,250 --> 00:15:41,630
Den næste ting er effekter.

267
00:15:41,630 --> 00:15:45,710
Effekter er dybest set det samme som at ændre CSS,

268
00:15:45,710 --> 00:15:48,870
men de faktisk giver nogle ekstra animation til det.

269
00:15:48,870 --> 00:15:53,380
Så i stedet for bare at vise eller skjule noget eller ændre farven,

270
00:15:53,380 --> 00:15:56,130
du kan faktisk gøre det animeret.

271
00:15:56,130 --> 00:16:00,760
Her er dokumentationen, hvis du ønsker at tage et kig på den omfattende dokumentation for det.

272
00:16:00,760 --> 00:16:04,760
Men jeg har tænkt mig at dække de vigtigste.

273
00:16:04,760 --> 00:16:12,030
Der er vise og skjule egenskaber.

274
00:16:12,030 --> 00:16:14,510
Vis / skjul ID reelt svarer til hele denne boks,

275
00:16:14,510 --> 00:16:18,190
så hvis jeg skjule det, vil det bare forsvinde.

276
00:16:18,190 --> 00:16:24,210
Og jeg kan vise det igen, hvis jeg ønsker at gøre det komme tilbage.

277
00:16:24,210 --> 00:16:26,340
Og det er tilbage. Det gjorde faktisk ikke forsvinder,

278
00:16:26,340 --> 00:16:30,670
Jeg har faktisk ikke fjerne den fra siden, jeg bare indstille CSS egenskaben af ​​sigtbarhed til skjulte

279
00:16:30,670 --> 00:16:34,030
så du kan ikke se den mere.

280
00:16:34,030 --> 00:16:39,250
Der er også glide op og glide ned, der tillader dig at have denne virkning.

281
00:16:39,250 --> 00:16:47,050
Det glider op at forsvinde, og efter det forsvinder

282
00:16:47,050 --> 00:16:53,210
du kan skubbe den ned for at gøre det komme tilbage. Og nu er det tilbage.

283
00:16:53,210 --> 00:16:57,650
Der er også denne fade effekt, som - fade ID svarer til den boks.

284
00:16:57,650 --> 00:17:01,200
Hvis jeg fade det ud, så det vil langsomt forsvinde.

285
00:17:01,200 --> 00:17:04,490
Jeg kan også falme det i, og det vil komme tilbage.

286
00:17:04,490 --> 00:17:08,930
Du kan også gøre fade til, hvilket er specifik for fade-funktionen.

287
00:17:08,930 --> 00:17:12,589
Du kan have det fade til nogen specifik opacitet, du ønsker.

288
00:17:12,589 --> 00:17:16,869
Så hvis du fade det langsomt til 0,5, vil det blive halvt synligt.

289
00:17:16,869 --> 00:17:22,630
Jeg kan gøre det gå til .1, og tilbage til 1 for at gøre det fuldt synlige igen.

290
00:17:22,630 --> 00:17:24,760
Det er bare en anden animation, du kan gøre.

291
00:17:24,760 --> 00:17:26,750
>> Der er også den toggle effekter.

292
00:17:26,750 --> 00:17:33,410
Så jeg har tænkt mig at vælge den toggle-id, som svarer til denne boks,

293
00:17:33,410 --> 00:17:38,970
og på den div du kan ringe toggle, hvis det er synligt det bliver usynlige,

294
00:17:38,970 --> 00:17:42,320
hvis det er usynligt det bliver synlige igen.

295
00:17:42,320 --> 00:17:44,440
Så jeg bare kaldte denne skiftefunktion to gange, den første var

296
00:17:44,440 --> 00:17:48,380
det samme som skjul, det andet opkald var den samme som et show.

297
00:17:48,380 --> 00:17:53,510
Og du kan også gøre dette med en fade toggle,

298
00:17:53,510 --> 00:17:55,730
der gør det samme, bortset fra det faktisk svinder.

299
00:17:55,730 --> 00:17:59,410
Og samme med slide skifte.

300
00:17:59,410 --> 00:18:01,460
Der er lænket effekter samt, hvilket betyder

301
00:18:01,460 --> 00:18:05,520
hvis du vælger et element, og bare kalde en flok animation metoder på det,

302
00:18:05,520 --> 00:18:07,400
hvis du ønskede det at fade ud, så glide ned,

303
00:18:07,400 --> 00:18:11,040
og derefter skjule, og derefter fade ind, vil det gøre dem i træk.

304
00:18:11,040 --> 00:18:24,920
Så forsvandt, kom tilbage - for nogle grund, har skindet ikke ske.

305
00:18:24,920 --> 00:18:30,030
Lad os prøve det. Yeah, så det falmede ud, og så er det gled væk.

306
00:18:30,030 --> 00:18:32,230
Og der er masser mere. Du kan bruge animere funktionen

307
00:18:32,230 --> 00:18:35,370
at lave dine egne animationer, som er forholdsvis komplekse,

308
00:18:35,370 --> 00:18:38,790
men det giver dig uendelige udvidelsesmuligheder.

309
00:18:38,790 --> 00:18:40,630
Du kan lave alle slags animation, du ønsker.

310
00:18:40,630 --> 00:18:44,230
Du kan også bruge kø kø flere animationer på et tidspunkt.

311
00:18:44,230 --> 00:18:47,340
Så hvis du vil have noget at flyve på tværs af siden,

312
00:18:47,340 --> 00:18:49,860
dias fra øverste højre til nederste venstre, kan du gøre det,

313
00:18:49,860 --> 00:18:55,240
og bare have en masse projekter, der går den ene efter den anden.

314
00:18:55,240 --> 00:18:57,490
>> Den næste ting, vi kommer til at tale om, er arrangementer.

315
00:18:57,490 --> 00:19:02,090
Arrangementer giver dig - så langt har vi lige været at skrive ting i konsollen

316
00:19:02,090 --> 00:19:04,870
og det er en måde at gøre dette ske,

317
00:19:04,870 --> 00:19:08,020
men på en egentlig side, er du ikke vil være i stand til

318
00:19:08,020 --> 00:19:10,020
gøre brugeren type ting i konsollen.

319
00:19:10,020 --> 00:19:12,050
Du vil have tingene til at ske automatisk.

320
00:19:12,050 --> 00:19:18,060
Til det, skal du bruge hændelser, der aktiverer på nogle bestemt begivenhed sker.

321
00:19:18,060 --> 00:19:21,340
Du kan kontrollere dokumentationen for de fulde detaljer.

322
00:19:21,340 --> 00:19:24,030
Så lad os se. Vi ønsker at skjule eller vise kassen,

323
00:19:24,030 --> 00:19:29,340
men lige nu er denne knap ikke gøre noget, fordi jeg ikke gennemføre det endnu.

324
00:19:29,340 --> 00:19:35,420
Jeg har tænkt mig at gå til den faktiske HTML-side.

325
00:19:35,420 --> 00:19:38,560
Her er diaset. Der er en div for diaset.

326
00:19:38,560 --> 00:19:41,230
Det har den klasse af dias.

327
00:19:41,230 --> 00:19:46,890
Der er i teksten. Nu er der denne boks og boksen knappen.

328
00:19:46,890 --> 00:19:52,900
Hvordan skulle vi faktisk gøre det forsvinde?

329
00:19:52,900 --> 00:19:58,250
Først og fremmest, lad os skrive en funktion, der gør boksen id forsvinde.

330
00:19:58,250 --> 00:20:01,820
Dette er syntaksen for funtion, lad os bare kalde det hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Det tager ikke nogen argumenter, fordi der er ingen argumenter, der skal træffes.

332
00:20:06,130 --> 00:20:08,950
Vi kan markere feltet id.

333
00:20:08,950 --> 00:20:15,020
Så ved hjælp af jQuery vælger, kan vi vælge box-id,

334
00:20:15,020 --> 00:20:17,700
og så bare gøre det forsvinde.

335
00:20:17,700 --> 00:20:20,690
Lad os gøre det fade ud.

336
00:20:20,690 --> 00:20:27,390
Hvis vi kørte denne funktion i selve konsollen,

337
00:20:27,390 --> 00:20:33,380
vi kunne definere denne funktion, vi kan kalde hideTheBox, og det virker.

338
00:20:33,380 --> 00:20:36,650
Men vi ønsker at det skal ske, når knappen er faktisk trykkes.

339
00:20:36,650 --> 00:20:40,950
At gøre det, vi er nødt til at bruge en begivenhed.

340
00:20:40,950 --> 00:20:45,500
At binde en begivenhed til nogle specifikke knap eller en handling sker,

341
00:20:45,500 --> 00:20:50,040
vi er nødt til at vælge det element, at begivenheden vil udløse -

342
00:20:50,040 --> 00:20:52,650
eller der vil udløse tilfælde, undskyld.

343
00:20:52,650 --> 00:20:57,220
>> Så først og fremmest, lad os markere feltet knappen ID

344
00:20:57,220 --> 00:20:59,610
fordi det er den knap, og nu, for den knap,

345
00:20:59,610 --> 00:21:02,750
Vi ønsker at skabe en animation, når der klikkes.

346
00:21:02,750 --> 00:21:05,040
Så der er denne klik-funktion.

347
00:21:05,040 --> 00:21:08,470
Det giver dig mulighed for at binde en anden funktion til det.

348
00:21:08,470 --> 00:21:12,320
Denne funktion tager en anden funktion som et argument

349
00:21:12,320 --> 00:21:14,310
vi kan passere i hideTheBox funktion,

350
00:21:14,310 --> 00:21:20,950
og når der klikkes på knappen, vil denne funktion automatisk udføre.

351
00:21:20,950 --> 00:21:24,850
Så dette vil fungere, hvis vi gemme dette, vil jeg opdatere,

352
00:21:24,850 --> 00:21:33,460
og - et sekund, jeg er ked af det.

353
00:21:33,460 --> 00:21:44,770
Lad mig ordne det virkelig hurtigt.

354
00:21:44,770 --> 00:21:50,680
Okay. Der går vi. Så nu kassen er ved at forsvinde, når vi klikker på knappen.

355
00:21:50,680 --> 00:21:55,470
Vi kan også ændre dette til bare fadeToggle,

356
00:21:55,470 --> 00:22:00,020
ændre det bare for at skjule eller vise kassen,

357
00:22:00,020 --> 00:22:03,850
og dette vil også arbejde for, hvis vi opdatere.

358
00:22:03,850 --> 00:22:08,550
Vi kan skjule det, kan vi også vise det, og det vil fortsætte med at arbejde.

359
00:22:08,550 --> 00:22:12,210
En anden ting, vi kan gøre, er, at vi ikke faktisk nødt til at definere denne hideTheBox funktion

360
00:22:12,210 --> 00:22:15,050
før vi kalder klikfunktion.

361
00:22:15,050 --> 00:22:17,640
Så i stedet for at definere funktionen og kalder hideTheBox,

362
00:22:17,640 --> 00:22:20,310
vi kun kommer til at kalde det, hvis denne ting er klikket på.

363
00:22:20,310 --> 00:22:22,310
Så vi kan definere det anonymt i her,

364
00:22:22,310 --> 00:22:25,070
hvilket er en funktion, JavaScript har.

365
00:22:25,070 --> 00:22:29,720
Du kan definere en funktion, der normalt, ville vi sige funktion hideTheBox

366
00:22:29,720 --> 00:22:34,490
med argumenter, men i stedet kan vi bare sige fungere nogen argumenter,

367
00:22:34,490 --> 00:22:36,870
starte klammeparentes at definere funktionen,

368
00:22:36,870 --> 00:22:40,780
tæt, at klammeparentes, og så bare definere funktionen på her,

369
00:22:40,780 --> 00:22:45,130
inden for den første parentes og sidste parentes

370
00:22:45,130 --> 00:22:47,860
der svarer til de argumenter klikfunktion.

371
00:22:47,860 --> 00:22:53,320
Så vi passerer i denne funktion, kan vi kopiere denne linje kode lige her,

372
00:22:53,320 --> 00:22:55,450
og det vil gøre præcis det samme.

373
00:22:55,450 --> 00:22:57,290
Og nu har vi ikke denne tilfældige fadeTheBox funktion

374
00:22:57,290 --> 00:22:59,960
der sidder rundt uden nogen åbenbar grund.

375
00:22:59,960 --> 00:23:02,070
Funktionen blev defineret anonymt, betyder det ikke noget navn.

376
00:23:02,070 --> 00:23:08,060
Det vil kun udføres, når vi klikker på boksen knappen.

377
00:23:08,060 --> 00:23:12,180
Så forfriskende en gang mere, en gang mere, og du kan se, at det stadig virker.

378
00:23:12,180 --> 00:23:16,700
Og det er hvordan du opretter begivenheder.

379
00:23:16,700 --> 00:23:19,190
>> Der er en masse forskellige begivenheder, som vi kan bruge.

380
00:23:19,190 --> 00:23:23,540
Jeg har tænkt mig at skifte tilbage til at bruge konsollen til bare vise dig, hvordan disse arbejde.

381
00:23:23,540 --> 00:23:28,210
De ID'er for hver af disse svarer til hver kasse.

382
00:23:28,210 --> 00:23:33,020
Så denne boks er click-id, denne ene er nøgle-ID, og ​​dette ene er mus-id.

383
00:23:33,020 --> 00:23:36,120
En ting mere er, at der er denne handling funktion, men snarere end at skrive det ud hver gang,

384
00:23:36,120 --> 00:23:41,610
Jeg gik faktisk videre og definerede denne handling funktion hernede.

385
00:23:41,610 --> 00:23:46,860
Det gør det samme som hideTheBox funktion.

386
00:23:46,860 --> 00:23:51,340
Det bliver dette felt og enten fade den ud eller svinder det i.

387
00:23:51,340 --> 00:23:54,110
Og det er derfor, vi er i stand til at bruge det her.

388
00:23:54,110 --> 00:24:00,350
Så hvis vi klikker på dette klik-id, vi ønsker at gøre kassen forsvinde eller genopstå.

389
00:24:00,350 --> 00:24:03,610
Det er det samme som den knap, vi havde i det sidste dias.

390
00:24:03,610 --> 00:24:07,450
Nu efter vi kalder det, kan vi klikke på dette og boksen forsvinder,

391
00:24:07,450 --> 00:24:10,160
klik derefter på det igen, og boksen vises igen.

392
00:24:10,160 --> 00:24:12,480
Det er temmelig simpelt. Dobbeltklik gør de samme ting,

393
00:24:12,480 --> 00:24:15,660
bortset fra at det kræver et dobbeltklik.

394
00:24:15,660 --> 00:24:19,030
Så hvis du klikker på det en gang, og klik på det igen intet vil ske,

395
00:24:19,030 --> 00:24:21,140
men hvis du dobbeltklikker på hurtigt, vil det forsvinde.

396
00:24:21,140 --> 00:24:23,310
Hvis du dobbeltklikker på igen, vil det komme tilbage.

397
00:24:23,310 --> 00:24:25,250
Så det er ret simpelt.

398
00:24:25,250 --> 00:24:31,170
Tastaturinput er lidt underligt, jeg tror ikke, det rent faktisk virker i dette eksempel

399
00:24:31,170 --> 00:24:37,670
fordi nøglen ned, key op og tastetryk og andre nøgleaktioner

400
00:24:37,670 --> 00:24:47,190
aktivere ligegyldigt hvad element, du binde det til.

401
00:24:47,190 --> 00:24:51,410
For eksempel, selv om jeg er bundet nede på legeme eller noget helt andet,

402
00:24:51,410 --> 00:24:55,950
så ville det stadig aktivere ligegyldigt - det er ikke specifikke.

403
00:24:55,950 --> 00:25:00,190
Jeg behøver ikke at blive klikke på dette, og trykke på en tast for at gøre noget forsvinde.

404
00:25:00,190 --> 00:25:04,470
Det vil blive aktiveret, uanset hvilken element Jeg er i øjeblikket i.

405
00:25:04,470 --> 00:25:06,880
Så disse faktisk ikke arbejde i dette eksempel

406
00:25:06,880 --> 00:25:13,180
fordi den ikke genkende mig som at indtaste input til tastaturet input div.

407
00:25:13,180 --> 00:25:15,740
>> Men hvis man ser på musehandlinger,

408
00:25:15,740 --> 00:25:19,620
den første er hover, og det kan gøre nogle af dette ved hjælp af CSS.

409
00:25:19,620 --> 00:25:24,280
Hvis du bruger CSS, kan du oprette det, så hvis du svæver over noget,

410
00:25:24,280 --> 00:25:28,940
derefter sin stil ændringer.

411
00:25:28,940 --> 00:25:32,170
Men ved hjælp af jQuery kan du ændre typografier af andre ting også.

412
00:25:32,170 --> 00:25:37,120
Så for eksempel, vi vil kalde ind, hvis vi svæver over denne div.

413
00:25:37,120 --> 00:25:39,660
Det betyder, at hvis vi svæve over det, så kassen forsvinder.

414
00:25:39,660 --> 00:25:42,430
Hvis vi flytter væk fra det, vil kassen dukke op igen.

415
00:25:42,430 --> 00:25:45,090
Hvis vi kalder dette og svæve over det, er kassen forsvinder,

416
00:25:45,090 --> 00:25:47,050
og så snart vi bevæger væk, det kommer tilbage.

417
00:25:47,050 --> 00:25:49,750
Hvis vi kalder denne hover funktion på musen id,

418
00:25:49,750 --> 00:25:54,380
som svarer til denne boks, så hvis vi svæve over feltet,

419
00:25:54,380 --> 00:26:00,440
derefter boksen rent faktisk vil forsvinde - det er at være funky lige nu, men -

420
00:26:00,440 --> 00:26:06,310
hvis vi bevæge os væk fra det, vil det dukke op igen. Lige nu er det tilbageskridt for nogle grund.

421
00:26:06,310 --> 00:26:12,720
Musen ind og musen flytte funktioner er noget lignende, men lidt anderledes.

422
00:26:12,720 --> 00:26:16,470
Mus kun indtaste aktiveres når musen går ind i boksen, som forventet.

423
00:26:16,470 --> 00:26:19,210
Så hvis du flytter ind i det, vil den forsvinde.

424
00:26:19,210 --> 00:26:23,210
Men det vil ikke igen, når du bevæger dig væk, og du bliver nødt til at flytte tilbage på det for det at komme tilbage.

425
00:26:23,210 --> 00:26:25,590
Der er også musen flytte funktionen, hvilket vil aktivere

426
00:26:25,590 --> 00:26:29,300
når musen er endog til stede i feltet.

427
00:26:29,300 --> 00:26:32,430
Så det vil bare holde på at gå, fading ind og ud.

428
00:26:32,430 --> 00:26:35,660
Og det er faktisk logger - det virker som det bare er fading ind og ud,

429
00:26:35,660 --> 00:26:39,140
men det er faktisk logge en masse flere handlinger end dette,

430
00:26:39,140 --> 00:26:43,550
så når du bevæger dig væk det vil bare holde i gang, fordi det er logget som en tusind af dem.

431
00:26:43,550 --> 00:26:46,620
Måske ikke et tusind. Måske fem.

432
00:26:46,620 --> 00:26:50,200
Den logger mere end det.

433
00:26:50,200 --> 00:26:53,280
Pointen er, at alle musehandlinger, der er en masse af dem.

434
00:26:53,280 --> 00:26:55,480
Du kan læse op på de andre dem, men de er alle lidt anderledes,

435
00:26:55,480 --> 00:26:57,700
og du kan vælge den, du har brug for

436
00:26:57,700 --> 00:27:02,130
for alt efter hvilken specifikke formål, du forsøger at gøre.

437
00:27:02,130 --> 00:27:05,060
>> Det næste jeg har tænkt mig at tale om, er AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, jeg ved, vi ikke dækker JavaScript i så meget dybde i år,

439
00:27:09,340 --> 00:27:11,770
så jeg bare at tale om AJAX i almindelighed for et minut.

440
00:27:11,770 --> 00:27:15,210
AJAX står for Asynchronous JavaScript og XML.

441
00:27:15,210 --> 00:27:19,030
Det er dybest set, for eksempel, når du er på Facebook, og det skubber dig en meddelelse,

442
00:27:19,030 --> 00:27:23,060
det er fordi AJAX kører på din web browser.

443
00:27:23,060 --> 00:27:25,800
Hvert par sekunder din web browser er faktisk

444
00:27:25,800 --> 00:27:29,420
gå til Facebooks servere, spørge dem, har du noget nyt for mig,

445
00:27:29,420 --> 00:27:31,980
og så kommer det tilbage til dig.

446
00:27:31,980 --> 00:27:36,320
Dette giver dig mulighed for at sende anmodninger til en server

447
00:27:36,320 --> 00:27:38,660
uden egentlig at skulle indlæse siden.

448
00:27:38,660 --> 00:27:42,040
Så normalt, hvis du bare bruger PHP og en database,

449
00:27:42,040 --> 00:27:45,480
du nødt til at opdatere siden, før du kan få nye oplysninger fra serveren.

450
00:27:45,480 --> 00:27:48,770
Men ved hjælp af AJAX, kan du trække for at nye oplysninger hele tiden,

451
00:27:48,770 --> 00:27:52,250
eller trække for det, når du klikker på en knap eller sådan noget.

452
00:27:52,250 --> 00:27:56,140
Så dette giver os mulighed for at sende anmodninger uden at genindlæse siden,

453
00:27:56,140 --> 00:27:58,130
og vi kan bruge enten GET eller POST forespørgsler.

454
00:27:58,130 --> 00:28:05,370
>> GET anmodning er, for eksempel, hvis du til Google.com

455
00:28:05,370 --> 00:28:10,900
og do q = test. Der er givet dem en forespørgsel test.

456
00:28:10,900 --> 00:28:15,890
Og det er en GET anmodning, fordi den går i disse parametre i URL selv.

457
00:28:15,890 --> 00:28:19,250
En POST anmodning, som hvis du sender dem via posten.

458
00:28:19,250 --> 00:28:22,500
Det er ligesom du sætter det i et brev og sende det ud til dem,

459
00:28:22,500 --> 00:28:25,140
men de faktisk ikke se indholdet. De er ikke synlige i URL'en.

460
00:28:25,140 --> 00:28:31,040
Du kan ikke direkte skrive det i, du er nødt til at sende det næsten hemmeligt.

461
00:28:31,040 --> 00:28:33,880
Det er i et indlæg.

462
00:28:33,880 --> 00:28:38,660
Men ved hjælp af jQuery, kan du gøre GET og POST forespørgsler

463
00:28:38,660 --> 00:28:42,740
meget lettere end du normalt kan bruge bare JavaScript.

464
00:28:42,740 --> 00:28:50,140
Du kan forespørge API'er ved hjælp GET-forespørgsler, og du kan også tjekke for login-oplysninger.

465
00:28:50,140 --> 00:28:54,400
På næste side, skabte jeg dette, som spørger, "Hvad er der til frokost?"

466
00:28:54,400 --> 00:28:58,230
ved hjælp af Harvard mad API, så lad os trække det op.

467
00:28:58,230 --> 00:29:01,840
Dette er blot et eksempel på, hvordan du kan bruge jQuery til at gøre en GET anmodning til en API

468
00:29:01,840 --> 00:29:04,200
og få information tilbage fra det.

469
00:29:04,200 --> 00:29:07,090
Så vi ønsker at se menuen for i dag,

470
00:29:07,090 --> 00:29:10,560
og vi ønsker at se, hvad der er til frokost.

471
00:29:10,560 --> 00:29:16,500
Her er den URL til at oprette en GET anmodning jQuery.

472
00:29:16,500 --> 00:29:18,600
du bruger $. få funktion.

473
00:29:18,600 --> 00:29:22,290
Det første argument er den webadresse, så præcis, hvad du forespørger.

474
00:29:22,290 --> 00:29:27,200
Så næste argument er en funktion, der udfører når GET anmodning er fuldført.

475
00:29:27,200 --> 00:29:29,980
Så du sender fra nogle anmodning til serveren, vente på at komme tilbage.

476
00:29:29,980 --> 00:29:33,770
Når det kommer tilbage, er du nødt til at træffe nogle foranstaltninger med de data, der er tilbage fra serveren.

477
00:29:33,770 --> 00:29:37,520
Lad os gå videre og kode det så godt.

478
00:29:37,520 --> 00:29:42,110
Jeg har ikke kode det heller på formålet.

479
00:29:42,110 --> 00:29:46,660
Her er TODO. Først og fremmest, lad os bruge begivenheden binding

480
00:29:46,660 --> 00:29:50,820
så når trykkes på denne knap, sender vi fra en GET anmodning.

481
00:29:50,820 --> 00:29:53,410
Og når den GET anmodning returnerer med nogle data,

482
00:29:53,410 --> 00:29:57,290
vi kommer til at skrive det ind i dette måltid info id div.

483
00:29:57,290 --> 00:30:02,860
Først og fremmest, lad os vælge den mad knappen id.

484
00:30:02,860 --> 00:30:07,320
Når der klikkes på, vi vil have det til at gøre noget.

485
00:30:07,320 --> 00:30:11,930
Lad os bare gøre det en anonym fuction, som før.

486
00:30:11,930 --> 00:30:15,550
Kan pakke dem krøllede parenteser,

487
00:30:15,550 --> 00:30:18,530
og når dette trykkes på knappen, vi ønsker at sende en GET forespørgsel

488
00:30:18,530 --> 00:30:20,750
at kontrollere, hvad der er til frokost.

489
00:30:20,750 --> 00:30:24,970
For at gøre det, kan vi bare skrive $. Får.

490
00:30:24,970 --> 00:30:28,850
Dette er en jQuery funktion, ved hjælp af dollartegn.

491
00:30:28,850 --> 00:30:31,430
Det tager et par argumenter. Den første er den webadresse,

492
00:30:31,430 --> 00:30:34,450
den anden er den callback funktion, den funktion, der hedder

493
00:30:34,450 --> 00:30:37,740
når anmodningen faktisk vender tilbage.

494
00:30:37,740 --> 00:30:39,890
Lad os bare bygge URL'en først.

495
00:30:39,890 --> 00:30:44,650
Vi kan få det fra API, skrev David op.

496
00:30:44,650 --> 00:30:51,360
Går her, kan vi se, at det er food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
og så skal du bare passere i navnene på de parametre, som du ønsker.

498
00:30:54,140 --> 00:30:57,760
Så parameter 1 er værdien 1.

499
00:30:57,760 --> 00:31:00,910
Det ligner standard dato, start dato, defaults til i dag

500
00:31:00,910 --> 00:31:03,110
Hvis du ikke indtaster noget, og slutdato også defaults

501
00:31:03,910 --> 00:31:05,930
til i dag, hvis du ikke indtaster noget.

502
00:31:05,930 --> 00:31:10,790
Det er, hvad vi ønsker. Vi ønsker bare at få oplysninger for i dag.

503
00:31:10,790 --> 00:31:12,950
>> Vi ønsker, at formatet til at være i JSON.

504
00:31:12,950 --> 00:31:15,570
Det er bare vilkårlig; du kan bruge enhver form, du ønsker.

505
00:31:15,570 --> 00:31:18,950
Du kan bruge CSV, men JSON er JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
Det er meget nemt for JavaScript at forstå, hvad det betyder,

507
00:31:24,150 --> 00:31:27,110
og vi kan printe det ud lettere på den måde.

508
00:31:27,110 --> 00:31:30,490
Så lad os bede den i JSON, og lad anmodning frokost.

509
00:31:30,490 --> 00:31:37,660
Så måltid = frokost. Blot at skrive denne webadresse, vi gå tilbage her.

510
00:31:37,660 --> 00:31:41,290
Der er menuer. Den første parameter er output = JSON

511
00:31:41,290 --> 00:31:44,640
fordi det er hvad vi vil, og du adskille parametrene med et "og".

512
00:31:44,640 --> 00:31:48,940
Den anden parameter er - jeg kan ikke huske.

513
00:31:48,940 --> 00:31:52,170
Måltid. Og vi vil måltid = frokost.

514
00:31:52,170 --> 00:31:57,390
Du kan teste denne URL ved at skrive det ind i din browser og gå til det.

515
00:31:57,390 --> 00:32:03,120
Det vil give dig nogle output. Det er bare en masse ting, der er til frokost.

516
00:32:03,120 --> 00:32:10,410
Det er i denne grimme format. Vi ønsker at udskrive det på vores side i en bedre format.

517
00:32:10,410 --> 00:32:12,580
Så URL'en er korrekt, nu skal vi bare nødt til at skrive en funktion

518
00:32:12,580 --> 00:32:18,300
at ringe tilbage, når anmodningen er vellykket.

519
00:32:18,300 --> 00:32:20,430
Denne funktion vil faktisk tage et argument. Det vil være data.

520
00:32:20,430 --> 00:32:25,650
Dataene er, hvad der kommer tilbage fra GET forespørgsel efter GET anmodning er færdig.

521
00:32:25,650 --> 00:32:28,860
Vi kan gøre de krøllede parenteser, her skriver vi den anonyme funktion

522
00:32:28,860 --> 00:32:33,900
som henretter ved hjælp at data, når vi får de oplysninger tilbage.

523
00:32:33,900 --> 00:32:37,840
Så data, når vi har skrevet i denne URL

524
00:32:37,840 --> 00:32:41,540
dette er, hvad de data, der kommer til at se ud. Det kommer til at være denne enorme streng.

525
00:32:41,540 --> 00:32:48,610
Men den gode ting er, kan JavaScript parse den ved hjælp af JSON.parse funktion.

526
00:32:48,610 --> 00:32:54,950
Så lad os oprette en ny variabel kaldet fortolkningsfejl data.

527
00:32:54,950 --> 00:32:57,060
Og fortolkningsfejl data er en vifte af objekter.

528
00:32:57,060 --> 00:33:04,200
Hvert objekt indeholder oplysninger såsom - ja, lad os tage et kig.

529
00:33:04,200 --> 00:33:08,980
Det har en dato, et måltid, kategori, opskrift, alt det andre ting.

530
00:33:08,980 --> 00:33:10,860
Så lad os bare udskrive navnet for hver enkelt.

531
00:33:10,860 --> 00:33:13,790
Lad os gentage over hele vifte af ting, som vi får tilbage fra det,

532
00:33:13,790 --> 00:33:17,570
og bare udskrive hver enkelt - udskrive navnet på hver enkelt.

533
00:33:17,570 --> 00:33:22,670
Dette er en for-løkke.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript har det nyttigt syntaks, hvor du kan oprette en variabel og løkken over et array,

535
00:33:26,030 --> 00:33:30,150
og var i er bare iterator, så i stedet for at skulle gøre var i = 0,

536
00:33:30,150 --> 00:33:40,290
Jeg var mindre end længden, jeg + +, kan du bare gøre VaR i i parsede data.

537
00:33:40,290 --> 00:33:47,060
I dette eksempel vil parsede data (i) svarer til det aktuelle element

538
00:33:47,060 --> 00:33:49,850
af matrixen. den faktiske objekt

539
00:33:49,850 --> 00:33:51,720
Og vi ønsker at få navnet ud af det.

540
00:33:51,720 --> 00:33:54,170
Så lad os bare gøre navn.

541
00:33:54,170 --> 00:33:57,000
Og den sidste ting er, vi kommer til at have nogle jQuery igen.

542
00:33:57,000 --> 00:34:02,660
Faktisk tilføje det til div, dette måltid info div, der er tom.

543
00:34:02,660 --> 00:34:05,430
Så lad os vælge denne.

544
00:34:05,430 --> 00:34:13,870
Vi bruger jQuery og vælg måltid info div id, eller et måltid info id, undskyld.

545
00:34:13,870 --> 00:34:16,580
Vi ønsker at føje til dette.

546
00:34:16,580 --> 00:34:21,030
Hvis vi gjorde test, for eksempel, ville det bare overskrive det hver eneste gang.

547
00:34:21,030 --> 00:34:29,190
Så vi kan bare tilføje dette.

548
00:34:29,190 --> 00:34:31,889
Den aktuelle element i array, vil vi få navnet ud af det,

549
00:34:31,889 --> 00:34:38,159
og vi vil tilføje det til slutningen af ​​måltidet info ID div.

550
00:34:38,159 --> 00:34:40,120
Og så bare for at gøre det ser renere,

551
00:34:40,120 --> 00:34:51,550
Vi vil også tilføje et linjeskift, så det ikke er alt på én linje.

552
00:34:51,550 --> 00:34:55,280
Så hvis alt går vel, skal der være god til at -

553
00:34:55,280 --> 00:34:57,220
først og fremmest, når det klikkes på knappen,

554
00:34:57,220 --> 00:35:00,070
det vil sende fra en GET anmodning til denne webadresse.

555
00:35:00,070 --> 00:35:02,500
Når data kommer tilbage fra det, vil det parse den,

556
00:35:02,500 --> 00:35:06,950
gøre det til JSON, loop over hele matrix, der repræsenterer disse data,

557
00:35:06,950 --> 00:35:10,310
og derefter føje navn og et linjeskift

558
00:35:10,310 --> 00:35:16,500
til hver linje i dette måltid info id, som tidligere var tom.

559
00:35:16,500 --> 00:35:18,910
Så gå tilbage til denne side, vil vi opdatere,

560
00:35:18,910 --> 00:35:23,690
klik, finde ud af - det virker ikke. Det er uheldigt.

561
00:35:23,690 --> 00:35:25,830
Og det er her debugging kommer ind

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

563
00:35:30,070 --> 00:35:57,210
Det er interessant.

564
00:35:57,210 --> 00:35:59,720
Okay, godt, frem for at bruge tid på at gøre det, jeg er bare at gå til

565
00:35:59,720 --> 00:36:07,070
trække op gjort fil, som jeg har, der er den færdig udgave.

566
00:36:07,070 --> 00:36:13,710
Jeg er ikke sikker på, hvad forskellen er, men vi kan bare åbne denne op i stedet.

567
00:36:13,710 --> 00:36:19,740
Og vi går til AJAX, og det skulle fungere korrekt.

568
00:36:19,740 --> 00:36:21,730
Det er, hvad der var til frokost i dag,

569
00:36:21,730 --> 00:36:24,870
i nogen bestemt rækkefølge, med anførselstegn omkring det, så det er ikke den kønneste.

570
00:36:24,870 --> 00:36:27,090
Men, selvfølgelig, hvis du gør dette for et afgangsprojekt,

571
00:36:27,090 --> 00:36:30,120
du ville gøre det se bedre ud.

572
00:36:30,120 --> 00:36:32,530
Men det er bare et enkelt eksempel på, hvordan du gør GET anmodning.

573
00:36:32,530 --> 00:36:34,580
Og hvis vi ser på den konkrete kode, jeg gætte, jeg er temmelig sikker

574
00:36:34,580 --> 00:36:39,690
det er stadig temmelig meget det samme.

575
00:36:39,690 --> 00:37:04,990
Åh, jeg glemte at konvertere den til en streng, det er det.

576
00:37:04,990 --> 00:37:07,920
Nej, det er stadig ikke fungerer. Uanset, her er den egentlige afsluttede koden

577
00:37:07,920 --> 00:37:10,300
for hvad det skal se ud,

578
00:37:10,300 --> 00:37:16,400
og det gør det samme som det, jeg netop gennemført.

579
00:37:16,400 --> 00:37:22,760
Når du klikker på knappen, det bruger GET JSON til automatisk parse data.

580
00:37:22,760 --> 00:37:29,190
Det tager data tilbage fra det, og løkker gennem hele rækken

581
00:37:29,190 --> 00:37:32,770
og udskriver det - hvad er til frokost i dag, navnet på den,

582
00:37:32,770 --> 00:37:38,020
og tilføjer et linjeskift efter hver linje.

583
00:37:38,020 --> 00:37:41,100
Det er hvordan du bruger GET funktion.

584
00:37:41,100 --> 00:37:44,040
>> Du kan også bruge POST, som jeg ikke har tid

585
00:37:44,040 --> 00:37:47,940
at skrive et eksempel for det, men vi kan se på dokumentationen.

586
00:37:47,940 --> 00:37:53,220
Hvis man ser på jquery.post,

587
00:37:53,220 --> 00:37:55,510
kan du se, at det er næsten det samme.

588
00:37:55,510 --> 00:38:01,650
Du har en URL, men i stedet for at passere parametre ved hjælp af -

589
00:38:01,650 --> 00:38:03,990
bare at sætte dem i streng for selve URL'en,

590
00:38:03,990 --> 00:38:06,300
du er nødt til at passere i denne datavariabel

591
00:38:06,300 --> 00:38:11,990
der er dybest set et array, en ordbog, der knytter til værdier.

592
00:38:11,990 --> 00:38:17,690
Du passerer det i, og det sender dem i at bruge en POST.

593
00:38:17,690 --> 00:38:20,790
Og når du har det, så kan du have en succes-funktion

594
00:38:20,790 --> 00:38:23,930
der udfører, når data kommer tilbage.

595
00:38:23,930 --> 00:38:26,430
Ellers er det nøjagtig det samme. Så ved hjælp af POST,

596
00:38:26,430 --> 00:38:29,970
du måske ønsker at bruge POST, for eksempel, hvis du har et input formular

597
00:38:29,970 --> 00:38:35,780
du lader folk input passwords ind i det, og sende disse passwords off

598
00:38:35,780 --> 00:38:41,850
til din back-end script, for at kontrollere i databasen, om den pågældende bruger er gyldig eller ej.

599
00:38:41,850 --> 00:38:46,700
Du kan gøre det alle bruger jQuery stedet for at skulle opdatere siden overhovedet.

600
00:38:46,700 --> 00:38:52,160
Det er hvordan jeg implementeret i den blog, jeg viste dig tidligere.

601
00:38:52,160 --> 00:38:59,530
Hvis vi går til slutningen portalen og logge ud, logge ud,

602
00:38:59,530 --> 00:39:02,600
Log ud virker ikke.

603
00:39:02,600 --> 00:39:13,360
Nå, lad mig bare åbne det op i et nyt vindue.

604
00:39:13,360 --> 00:39:16,580
Her er der en adgangskode, og jeg skulle til at skrive i noget tilfældigt.

605
00:39:16,580 --> 00:39:18,590
Det virker ikke, men du kan se, at vi ikke

606
00:39:18,590 --> 00:39:20,840
faktisk nødt til at opdatere siden på alle.

607
00:39:20,840 --> 00:39:24,610
Koden, hvis du ønsker at se på det,

608
00:39:24,610 --> 00:39:37,460
er alle tilgængelige her.

609
00:39:37,460 --> 00:39:45,680
Så den kode jeg skrev sidste år engang.

610
00:39:45,680 --> 00:39:47,790
Som du kan se her, sender vi en POST anmodning.

611
00:39:47,790 --> 00:39:50,400
Jeg har en fil kaldet login.php i bagenden,

612
00:39:50,400 --> 00:39:53,860
som kontrollerer, hvis adgangskoden er gyldig.

613
00:39:53,860 --> 00:39:56,000
De parametre, vi passerer i, er password, kortlagt til

614
00:39:56,000 --> 00:40:00,030
input, der er i denne indgang boks øjeblikket.

615
00:40:00,030 --> 00:40:04,110
Og når data kommer tilbage, vi kontrollere.

616
00:40:04,110 --> 00:40:07,680
Hvis dataene er falsk, så siger vi forkert adgangskode, skub det ned,

617
00:40:07,680 --> 00:40:09,580
og bare gøre det forsvinder efter det.

618
00:40:09,580 --> 00:40:12,320
Ellers, vi indlæse admin siden.

619
00:40:12,320 --> 00:40:15,080
Og dette blev alle gjort ved hjælp JSON.

620
00:40:15,080 --> 00:40:18,510
I dette mange linjer kode, kan du bare videregive dataene til bagenden,

621
00:40:18,510 --> 00:40:21,020
kontrollere, om det er korrekt, tjek, om du er logget ind korrekt,

622
00:40:21,020 --> 00:40:24,200
og faktisk svare på det, omdirigere den person til den rigtige side

623
00:40:24,200 --> 00:40:29,760
eller ikke lade dem logge ind og fortælle dem, at de havde en forkert adgangskode.

624
00:40:29,760 --> 00:40:33,040
Så det er et eksempel på, hvordan du kan bruge jQuery POST

625
00:40:33,040 --> 00:40:37,010
til at sende en POST anmodning til din ryg ende,

626
00:40:37,010 --> 00:40:42,400
kontrollere, om nogen har logget ind korrekt.

627
00:40:42,400 --> 00:40:44,820
>> Okay, så det er alle de eksempler, jeg har haft, og alle de ting jeg ønskede at dække.

628
00:40:44,820 --> 00:40:47,110
Det er de store ting, der jQuery tillader dig at gøre:

629
00:40:47,110 --> 00:40:52,640
vælge elementer, ændre dem ved hjælp af DOM manipulation,

630
00:40:52,640 --> 00:40:56,340
du kan tilføje effekter, aktivere ting på visse begivenheder,

631
00:40:56,340 --> 00:41:00,430
og også gøre AJAX anmodninger meget problemfrit og nemt.

632
00:41:00,430 --> 00:41:02,840
Så tak for at komme eller ser,

633
00:41:02,840 --> 00:41:06,230
og hvis du har spørgsmål, bare lad mig det vide. Ja?

634
00:41:06,230 --> 00:41:12,730
[Studerende] Tilbage når du viste, at du havde JSON efter at POST anmodning i anførselstegn,

635
00:41:12,730 --> 00:41:15,170
og jeg var bare undrende hvad der gjorde.

636
00:41:15,170 --> 00:41:20,070
>> Ja, jeg ser. Spørgsmålet var, at i eksemplet jeg bare viste,

637
00:41:20,070 --> 00:41:25,790
Der var ordet JSON i anførselstegn omkring -

638
00:41:25,790 --> 00:41:31,690
Jeg vil bare trække den op igen - omkring POST funktion.

639
00:41:31,690 --> 00:41:43,320
Jeg er bare at trække den op for at vise.

640
00:41:43,320 --> 00:41:46,890
Så her er det POST anmodning, og der er denne JSON i anførselstegn.

641
00:41:46,890 --> 00:41:50,280
Der bare definerer, hvad vi forventer output at være.

642
00:41:50,280 --> 00:41:54,070
Så hvis vi passerer i JSON den forventede datatype,

643
00:41:54,070 --> 00:41:56,070
Det er ikke et krav, men hvis vi passerer det i,

644
00:41:56,070 --> 00:41:58,590
så data automatisk blive fortolket som JSON.

645
00:41:58,590 --> 00:42:00,600
Så vi behøver ikke at kalde JSON parse funktionen på det,

646
00:42:00,600 --> 00:42:02,620
det vil bare ske automatisk.

647
00:42:02,620 --> 00:42:05,150
Og hvis du tager et kig på dokumentationen for POST,

648
00:42:05,150 --> 00:42:09,850
der er denne datatype variabel, den type data forventes fra serveren.

649
00:42:09,850 --> 00:42:12,660
Det som standard være en intelligent gæt, som kan være forkert,

650
00:42:12,660 --> 00:42:15,520
så du kan lade det stå tomt, men det er bare den type data

651
00:42:15,520 --> 00:42:21,680
i kodning, du bruger, uanset om det er JSON eller XML eller noget andet.

652
00:42:21,680 --> 00:42:25,280
>> Andre spørgsmål?

653
00:42:25,280 --> 00:42:27,300
Ok. Hvis du har andre spørgsmål, er du velkommen til at kontakte mig

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

655
00:42:30,830 --> 00:42:34,860
og dias og kode bør være tilgængelige online meget snart.

656
00:42:34,860 --> 00:42:42,810
Held og lykke med dine afgangsprojekter, håber du bruger jQuery.

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