1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [研讨会：JQUERY]

2
00:00:02,690 --> 00:00:04,790
[VIPUL谢卡瓦特，哈佛大学]

3
00:00:04,790 --> 00:00:08,000
[这是CS50。] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
如果你在家，你可以在线访问我的幻灯片

5
00:00:10,640 --> 00:00:13,310
通过此链接。

6
00:00:13,310 --> 00:00:18,650
这是的TjjRWj，在bit.ly.上

7
00:00:18,650 --> 00:00:20,700
你也可以直接去到URL，

8
00:00:20,700 --> 00:00:27,300
这是cloud.cs50.net /〜vshekhawat的，这是我的名字，

9
00:00:27,300 --> 00:00:32,409
和jQuery。

10
00:00:32,409 --> 00:00:34,920
我强烈鼓励你跟随，如果你在家里看，

11
00:00:34,920 --> 00:00:40,650
如果你在这里，还因为这是一个漂亮的互动演示。

12
00:00:40,650 --> 00:00:43,160
>> 所以，今天我将要谈论的jQuery，第一个问题是，

13
00:00:43,160 --> 00:00:45,300
jQuery的是什么？

14
00:00:45,300 --> 00:00:47,090
这一年，我知道你们有没有覆盖的JavaScript

15
00:00:47,090 --> 00:00:51,080
在尽可能多的细节，正如我们在过去几年。

16
00:00:51,080 --> 00:00:53,150
JavaScript是，首先，只是一个客户端语言

17
00:00:53,150 --> 00:00:58,390
您使用每个用户的机器上运行脚本和代码。

18
00:00:58,390 --> 00:01:00,660
因此，你有一台服务器，提供网页的人，

19
00:01:00,660 --> 00:01:02,600
但你可能要在他们的机器上做的东西，

20
00:01:02,600 --> 00:01:08,060
问他们的机器将请求发送到您的服务器每隔30秒或类似的东西。

21
00:01:08,060 --> 00:01:10,420
做到这一点，您可以使用JavaScript。

22
00:01:10,420 --> 00:01:13,190
jQuery只是提供了更多的功能之上的JavaScript

23
00:01:13,190 --> 00:01:15,680
为你做一些额外的东西。

24
00:01:15,680 --> 00:01:17,710
如果你看的内容之上，

25
00:01:17,710 --> 00:01:21,410
介绍了一些的东西，你是能够做到的。

26
00:01:21,410 --> 00:01:23,500
所以，总体来说，它创建于2006年1月。

27
00:01:23,500 --> 00:01:26,560
它的最初设想是在2005年8月。

28
00:01:26,560 --> 00:01:31,370
这是几年，它是真正的新的Web 2.0运动的一部分

29
00:01:31,370 --> 00:01:34,330
这使得互联网如此闪亮。

30
00:01:34,330 --> 00:01:37,630
这是使用最广泛的JavaScript库。

31
00:01:37,630 --> 00:01:41,450
超过19.6万个网站正在使用它，和使用仍在增加

32
00:01:41,450 --> 00:01:45,640
根据到builtwith.com，其中，很显然，在过去的一年中，

33
00:01:45,640 --> 00:01:49,710
刚刚被不断增加的相当线性。

34
00:01:49,710 --> 00:01:52,870
其中排名前10万的网站，还是有 - 

35
00:01:52,870 --> 00:01:55,180
其中约40％目前正在使用它。

36
00:01:55,180 --> 00:01:58,540
Facebook的使用，目前大量的其他网站使用它。

37
00:01:58,540 --> 00:02:01,540
你可以看一下那些在自己的统计，如果你想。

38
00:02:01,540 --> 00:02:05,820
你可以告诉它是合法的，因为它有一个基础和13名董事会成员，

39
00:02:05,820 --> 00:02:11,910
随着一队20人的定期工作。

40
00:02:11,910 --> 00:02:16,110
因此，它的使用非常广泛，它有一个组织网址，它的花哨，

41
00:02:16,110 --> 00:02:21,660
它具有分拆其他的东西，所以这是一个大问题。

42
00:02:21,660 --> 00:02:24,510
>> 你为什么要使用它呢？ jQuery是非常轻巧。

43
00:02:24,510 --> 00:02:27,270
这意味着它不是一个巨大的文件。您可以下载

44
00:02:27,270 --> 00:02:31,540
压缩后的文件，这是没有空白和注释，这是只有32 KB。

45
00:02:31,540 --> 00:02:33,600
所以很容易只是折腾到您的网页

46
00:02:33,600 --> 00:02:35,910
刚刚开始使用它。

47
00:02:35,910 --> 00:02:39,630
这也是写得非常有效，所以它不会占用很多 - 

48
00:02:39,630 --> 00:02:42,550
它不会减慢你的网站多，当你使用它。

49
00:02:42,550 --> 00:02:45,770
它可以让你实现这在以前是不可行的事情。

50
00:02:45,770 --> 00:02:47,790
还有一些方面的功能，

51
00:02:47,790 --> 00:02:51,780
像创建动画，通常将是非常，非常难以做到。

52
00:02:51,780 --> 00:02:54,300
但在jQuery中，他们其实很简单。

53
00:02:54,300 --> 00:02:57,040
也有一些事情是恼人做的，

54
00:02:57,040 --> 00:02:59,610
在JavaScript中，可能像发送POST请求，

55
00:02:59,610 --> 00:03:02,190
但发送请求到服务器，你必须写

56
00:03:02,190 --> 00:03:04,320
五，六，七行代码。

57
00:03:04,320 --> 00:03:07,200
现在你可以做一个单一的代码行，在一个单一的函数调用。

58
00:03:07,200 --> 00:03:11,790
这确实简化了很多的东西，你这样做。

59
00:03:11,790 --> 00:03:15,950
所有时尚的年轻人正在使用它。 ，我的意思是我。

60
00:03:15,950 --> 00:03:19,270
在我最后的项目，这是去年news.whrb.org

61
00:03:19,270 --> 00:03:22,530
这是电台，我创建了这个博客

62
00:03:22,530 --> 00:03:29,750
它承载了我们所做的所有的节目和MP3文件。

63
00:03:29,750 --> 00:03:32,070
您可以浏览过往，

64
00:03:32,070 --> 00:03:34,130
这一切都做使用jQuery。你可以告诉

65
00:03:34,130 --> 00:03:37,340
由于所有这些动画，基本上。

66
00:03:37,340 --> 00:03:42,360
所以如果你有 - 如果你创建一个新的职位，

67
00:03:42,360 --> 00:03:45,980
你看到这些小slideDowns使用jQuery，一切都做。

68
00:03:45,980 --> 00:03:49,140
这个褪色效果 - 所以那种东西是所有使用jQuery，

69
00:03:49,140 --> 00:03:52,720
你不必不断刷新页面来浏览网站。

70
00:03:52,720 --> 00:03:57,220
使用jQuery的另一个很酷的事情是这样的演示文稿。

71
00:03:57,220 --> 00:03:59,700
我使用这个开源的事情称为scrolldeck的，

72
00:03:59,700 --> 00:04:03,250
有人写jQuery的顶部。

73
00:04:03,250 --> 00:04:04,870
如果你真的看看源代码，你可以看到，

74
00:04:04,870 --> 00:04:07,830
他们使用的是美元符号美元符号

75
00:04:07,830 --> 00:04:12,110
使用jQuery来表示一个函数是一个jQuery功能。

76
00:04:12,110 --> 00:04:15,020
因此，他们的jQuery上定义一个包装

77
00:04:15,020 --> 00:04:18,570
允许你这样做一个介绍，

78
00:04:18,570 --> 00:04:21,200
你可以看到，在这里，他们包括原来的jQuery文件，

79
00:04:21,200 --> 00:04:24,120
这是什么你就必须包括如果想使用jQuery

80
00:04:24,120 --> 00:04:30,450
在您自己的网站。

81
00:04:30,450 --> 00:04:32,790
>> 在谈到上，你怎么安装呢？

82
00:04:32,790 --> 00:04:36,150
你可以去jQuery.com和下载文件，

83
00:04:36,150 --> 00:04:38,320
它添加到Web目录，包括它。

84
00:04:38,320 --> 00:04:42,200
因此，只要在上面，在你的HTML文件的头部标签

85
00:04:42,200 --> 00:04:45,400
你的主要的HTML文件，就是有行代码

86
00:04:45,400 --> 00:04:49,490
您使用的是哪个版本的jQuery正确的版本。

87
00:04:49,490 --> 00:04:51,340
您可以下载它通过去jQuery.com，

88
00:04:51,340 --> 00:04:55,130
点击“下载jQuery的，”你已经有了。就是这样。

89
00:04:55,130 --> 00:04:58,880
而实际上，我们可以一起来看看它是什么样子。

90
00:04:58,880 --> 00:05:01,080
如果您点击这里下载，jQuery是这一点。

91
00:05:01,080 --> 00:05:05,260
它只是一个大的JavaScript文件，它为你的所有魔法的东西。

92
00:05:05,260 --> 00:05:09,270
这是缩小的版本，这是无法读取。

93
00:05:09,270 --> 00:05:13,180
您还可以在开发版本，这是可读

94
00:05:13,180 --> 00:05:15,370
但还是非常非常漫长的。

95
00:05:15,370 --> 00:05:17,980
这是一个很大的东西在里面。

96
00:05:17,980 --> 00:05:20,240
您还可以链接到谷歌的托管版本。

97
00:05:20,240 --> 00:05:23,820
所以这会允许你仅仅依靠谷歌提供。

98
00:05:23,820 --> 00:05:29,310
他们提供的每一个版本，它在任何时候都可用。

99
00:05:29,310 --> 00:05:31,530
所以，你或许可以依靠谷歌为你主持。

100
00:05:31,530 --> 00:05:33,270
或者你可以连结到jQuery的自己的最新版本。

101
00:05:33,270 --> 00:05:36,400
他们有一个网址，总是更新到最新版本。

102
00:05:36,400 --> 00:05:40,850
这是jQuery的最新，并与有一个问题，

103
00:05:40,850 --> 00:05:44,350
这是，如果更新的jQuery和一些先前的功能

104
00:05:44,350 --> 00:05:47,250
他们变得退或过时，

105
00:05:47,250 --> 00:05:49,620
它可能不是 - 它可能会开始没有得到支持了。

106
00:05:49,620 --> 00:05:52,940
所以，如果你写一个网站使用1.8.2版本，

107
00:05:52,940 --> 00:05:55,000
时间版本2.7出来

108
00:05:55,000 --> 00:05:57,000
你写的一些功能不工作了。

109
00:05:57,000 --> 00:05:59,930
因此，最好只下载32 KB的文件，

110
00:05:59,930 --> 00:06:04,100
把它放在你的网页，它会永远工作。

111
00:06:04,100 --> 00:06:07,450
>> 我要继续前进，并开始谈论jQuery的实际功能。

112
00:06:07,450 --> 00:06:13,090
的第一件事就是选择器。这是什么jQuery提供最初设想。

113
00:06:13,090 --> 00:06:15,500
你也可以点击文档看

114
00:06:15,500 --> 00:06:18,690
选择我将要覆盖的详细文档。

115
00:06:18,690 --> 00:06:24,120
选择器背后的想法是，你可以选择HTML页面上的元素。

116
00:06:24,120 --> 00:06:28,790
页面上元素的ID和类和其他识别方面。

117
00:06:28,790 --> 00:06:30,500
还有 - 他们在不同的订单。

118
00:06:30,500 --> 00:06:32,570
有些的时候，他们互相嵌套。

119
00:06:32,570 --> 00:06:38,120
jQuery允许您构建简单的查询，检索页面中的元素。

120
00:06:38,120 --> 00:06:41,890
然后，你可以操纵这些元素使用jQuery功能，

121
00:06:41,890 --> 00:06:43,990
这是操纵部分，我们稍后会得到。

122
00:06:43,990 --> 00:06:46,040
您可以更改，更改CSS的HTML，

123
00:06:46,040 --> 00:06:50,500
你也可以动画和添加功能激活某些事件。

124
00:06:50,500 --> 00:06:52,710
因此，举例来说，如果点击的东西，你想要的东西发生，

125
00:06:52,710 --> 00:06:55,210
你可以做到这一点，以及使用jQuery。

126
00:06:55,210 --> 00:06:57,380
有数量庞大的方式来选择元素。

127
00:06:57,380 --> 00:07:00,310
他们中的大多数，我从来没有使用，但也有基本的，

128
00:07:00,310 --> 00:07:02,340
这是非常重要的。

129
00:07:02,340 --> 00:07:05,750
元素选择，例如，如果你只是选择什么

130
00:07:05,750 --> 00:07:10,640
这是一个div  - 其实我有这个幻灯片演示代码开放。

131
00:07:10,640 --> 00:07:13,450
因此，举例来说，在这里的第一张幻灯片。

132
00:07:13,450 --> 00:07:17,430
在这里，我们有一个div。如果我们实际上在页面上，选择所有的div

133
00:07:17,430 --> 00:07:22,300
它只是给我们所有的div，在这个文件中，存在一个数组。

134
00:07:22,300 --> 00:07:27,040
ID选择器可让您选择任何一个给定的ID。

135
00:07:27,040 --> 00:07:32,230
所以，如果，例如，这件事情有ID为“什么，”

136
00:07:32,230 --> 00:07:37,160
如果我们这样做的＃什么，而不是一些ID，

137
00:07:37,160 --> 00:07:42,920
话，就返回一个数组，它有一个单一的元素，也就是该元素的页面。

138
00:07:42,920 --> 00:07:45,490
我们也可以结合选择这种方式有

139
00:07:45,490 --> 00:07:48,260
只能选择东西的div的ID。

140
00:07:48,260 --> 00:07:51,810
所以，是的。只有选择具有该ID的div的。

141
00:07:51,810 --> 00:07:55,260
对于类，你只需要使用一个圆点，这是同样的事情，CSS。

142
00:07:55,260 --> 00:07:57,500
后裔也工作，所以如果你有一些类

143
00:07:57,500 --> 00:08:00,170
嵌套内的元素 - 例如，

144
00:08:00,170 --> 00:08:03,260
有一些类，它有一个锚标记，链接到另一个页面，

145
00:08:03,260 --> 00:08:08,510
你可以使用这个语法检索链接。

146
00:08:08,510 --> 00:08:12,420
您也可以一次选择多个事物，只是用逗号将它们分开，

147
00:08:12,420 --> 00:08:17,360
使用任何你想要的选择，你会选择他们一次，在一个单一的阵列。

148
00:08:17,360 --> 00:08:19,650
再有就是也没有选择，所以你可以选择所有的div

149
00:08:19,650 --> 00:08:24,210
不具有某些特定的类。

150
00:08:24,210 --> 00:08:28,790
而这仅仅是一个有用的方法来介绍，本次评选是如何工作的。

151
00:08:28,790 --> 00:08:32,270
我将展示一些具体的例子，在第二。

152
00:08:32,270 --> 00:08:35,480
>> 高级选择 - 这些只是几个例子。

153
00:08:35,480 --> 00:08:38,840
这些有几十个，但如果你要选择所有的图像标签

154
00:08:38,840 --> 00:08:42,799
在某些元素，那么你只是做图像。

155
00:08:42,799 --> 00:08:45,340
如果你想选择的偶数的元素，例如，如果有20个，其中，

156
00:08:45,340 --> 00:08:48,290
你要选择0，2，4，6等，

157
00:08:48,290 --> 00:08:51,630
你要做的：就算了，或者你也可以这样做：奇数。

158
00:08:51,630 --> 00:08:55,470
这些伪选择，这意味着他们实际上计算

159
00:08:55,470 --> 00:09:00,960
所有其他元素，而不仅仅是选择所有这些。

160
00:09:00,960 --> 00:09:05,510
您也可以 - 每个元素也可以有特定的属性。

161
00:09:05,510 --> 00:09:10,580
因此，举例来说，类=中心也是一个属性。

162
00:09:10,580 --> 00:09:16,500
这个锚标记，HREF，超文本引用，是一个属性也。

163
00:09:16,500 --> 00:09:21,150
因此，您可以选择链接到特定的网页或只是 - 这是真的一般的东西。

164
00:09:21,150 --> 00:09:25,410
您可以选择任何你喜欢的任何属性。

165
00:09:25,410 --> 00:09:27,470
然后，属性，也包含。

166
00:09:27,470 --> 00:09:30,420
如果，例如，要选择所有的输入元素

167
00:09:30,420 --> 00:09:32,700
有“通”字，它们的名称，

168
00:09:32,700 --> 00:09:37,560
如果网页上有一个输入文本块

169
00:09:37,560 --> 00:09:41,050
这就是所谓的“密码”，那是一种方式，你可以选择。

170
00:09:41,050 --> 00:09:43,020
有很多种。你可以去看看文档

171
00:09:43,020 --> 00:09:46,950
看到它是如何工作的具体例子。

172
00:09:46,950 --> 00:09:48,840
>> 接下来的事情就是DOM操作。

173
00:09:48,840 --> 00:09:52,500
我们选择的元素之后，我们将要与他们实际做的东西。

174
00:09:52,500 --> 00:09:55,500
到目前为止，我们还没有在看着，但如果你看一下文档，

175
00:09:55,500 --> 00:09:57,950
真的有很多，我们可以做。

176
00:09:57,950 --> 00:10:02,900
在这一点上，我们要在这个演示中选择元素

177
00:10:02,900 --> 00:10:04,890
并操纵他们使用jQuery。

178
00:10:04,890 --> 00:10:08,290
因为这是使用jQuery实现，我们有jQuery库的访问，

179
00:10:08,290 --> 00:10:13,580
我们可以使用这些功能在这个代码。

180
00:10:13,580 --> 00:10:16,200
一个有用的东西，你可能不知道的是控制台。

181
00:10:16,200 --> 00:10:19,340
和谷歌Chrome是我使用的是什么。您可以按ALT指令J

182
00:10:19,340 --> 00:10:21,720
或ALT控制J来打开控制台。

183
00:10:21,720 --> 00:10:26,130
在Firefox中，我认为它的位移K命令或控制移位K.

184
00:10:26,130 --> 00:10:28,880
在Safari中，你必须去改变一些设置。

185
00:10:28,880 --> 00:10:35,460
有一个链接，如果你想做到这一点，但我建议让浏览器或Firefox。

186
00:10:35,460 --> 00:10:37,750
所以，让我们打开控制台，它在这里。

187
00:10:37,750 --> 00:10:41,170
它基本上只是让你做任何你想要的。

188
00:10:41,170 --> 00:10:45,100
所以，你可以只需键入创建了一个变量x，

189
00:10:45,100 --> 00:10:49,200
X = 5，让我们来看看X + 2。

190
00:10:49,200 --> 00:10:57,670
你甚至可以做一些像CS +让我们来看看，X + 45，那将是CS50。

191
00:10:57,670 --> 00:11:00,530
你可以做一些典型的JavaScript的东西。

192
00:11:00,530 --> 00:11:02,730
但你也可以这样写：jQuery在这里。

193
00:11:02,730 --> 00:11:06,200
>> 因此，让我们来看看这第一方面。

194
00:11:06,200 --> 00:11:09,500
我们要创建一个变量称为HTML，它是一个字符串。

195
00:11:09,500 --> 00:11:15,890
它有一个段落标记，这就是所谓的一些新的文本。

196
00:11:15,890 --> 00:11:19,420
所以我们有这样的HTML，它的一些新的文字，段落标记。

197
00:11:19,420 --> 00:11:21,800
现在，我们其实是想将它添加到页面中。

198
00:11:21,800 --> 00:11:28,310
我将它设置的HTML这一段，在这里，这个称号是追加ID。

199
00:11:28,310 --> 00:11:32,320
如果我们选择追加ID，然后追加到

200
00:11:32,320 --> 00:11:34,560
我刚刚创建的HTML变量，

201
00:11:34,560 --> 00:11:40,370
它会增加，HTML结束时，右后这个段落标记。

202
00:11:40,370 --> 00:11:43,730
因此，如果我们做到这一点 - 我们选择这一段，

203
00:11:43,730 --> 00:11:47,590
我们所谓的附加功能与HTML的变量我只是说，

204
00:11:47,590 --> 00:11:50,960
它会添加新的文本页面上。

205
00:11:50,960 --> 00:11:54,970
我们也可以预先准备，这意味着它会去之前，该元素的开始。

206
00:11:54,970 --> 00:11:58,290
因此，有一些新的文本在开始和之后。

207
00:11:58,290 --> 00:12:01,660
我可以继续前进，刷新摆脱我刚刚做过这方面的东西。

208
00:12:01,660 --> 00:12:05,280
但是，这是一个例子，你可以使用前置和追加方法

209
00:12:05,280 --> 00:12:08,910
操作页面上的东西，添加一些HTML。

210
00:12:08,910 --> 00:12:11,080
>> 您还可以更改类。

211
00:12:11,080 --> 00:12:14,970
在这种风格的文件，我创建了这个胜利类

212
00:12:14,970 --> 00:12:19,990
有文本颜色为红色，有些背景颜色，文字阴影。

213
00:12:19,990 --> 00:12:23,810
它看起来可怕的，但是实际上，我可以 - 

214
00:12:23,810 --> 00:12:26,410
本段对应的类ID。

215
00:12:26,410 --> 00:12:29,860
所以，我可以添加类为赢。

216
00:12:29,860 --> 00:12:31,870
我可以在控制台中执行此，

217
00:12:31,870 --> 00:12:35,480
将增加类，现在它看起来狰狞，不如预期。

218
00:12:35,480 --> 00:12:39,680
CSS自动被应用到你的类 - 

219
00:12:39,680 --> 00:12:42,680
如果有CSS的一类，它会自动被应用

220
00:12:42,680 --> 00:12:44,680
如果你改变一个元素的类。

221
00:12:44,680 --> 00:12:49,230
然后我们可以使用删除类只是将其删除。

222
00:12:49,230 --> 00:12:53,690
因此，如果你有一些预定义的类，如红色或突出，

223
00:12:53,690 --> 00:12:55,990
然后你想运用这些元素，

224
00:12:55,990 --> 00:12:58,230
你不必做所有的CSS样式每次。

225
00:12:58,230 --> 00:13:01,510
你可以添加类的元素，然后它会自动成为 - 

226
00:13:01,510 --> 00:13:05,580
它会自动寻找适合这一类。

227
00:13:05,580 --> 00:13:07,900
我们也可以删除的东西，所以我会选择所有的div

228
00:13:07,900 --> 00:13:10,830
在页面上，并删除它们。

229
00:13:10,830 --> 00:13:13,990
那是什么将会是什么样呢？

230
00:13:13,990 --> 00:13:16,170
它要看起来像什么，所以，实际上什么也没有留下。

231
00:13:16,170 --> 00:13:18,170
我的演讲了。

232
00:13:18,170 --> 00:13:21,290
我可以刷新，并把它带回来，幸运的是，

233
00:13:21,290 --> 00:13:24,420
因为它只是运行一次，

234
00:13:24,420 --> 00:13:29,460
但是这是一个例子，如果你想彻底摧毁关闭页面元素去除。

235
00:13:29,460 --> 00:13:33,180
>> 您也可以覆盖了，我要选择页面上的所有的段落标记

236
00:13:33,180 --> 00:13:36,850
和里面去，取代他们在他们有任何文字

237
00:13:36,850 --> 00:13:39,690
只用单词“测试”。

238
00:13:39,690 --> 00:13:46,520
如果你这样做，你会替换页面上的每一个段落，这个测试。

239
00:13:46,520 --> 00:13:49,150
没错。他们全部换成测试。

240
00:13:49,150 --> 00:13:53,270
所以这就是一个例子访问文字和覆盖的。

241
00:13:53,270 --> 00:13:57,490
您还可以获取信息，这是真的很酷输入框。

242
00:13:57,490 --> 00:14:00,470
如果你有一个输入框，人们打字的东西到，

243
00:14:00,470 --> 00:14:03,880
人们键入的东西进去，

244
00:14:03,880 --> 00:14:09,030
在这里，我们选择的输入，任何一种类型的文本输入标签。

245
00:14:09,030 --> 00:14:13,800
在这种情况下，只有一个输入框整个演示文稿，

246
00:14:13,800 --> 00:14:17,260
所以我们就选择了第一个，然后我们就可以调用Val函数。

247
00:14:17,260 --> 00:14:19,570
返回值，输入框，

248
00:14:19,570 --> 00:14:24,330
值是刚刚发生的一切是在它里面。

249
00:14:24,330 --> 00:14:31,880
因此，如果我们做到这一点，它只是返回字符串的东西。

250
00:14:31,880 --> 00:14:36,860
而如果我们再次调用它写更多的东西后，它变成更多的东西。

251
00:14:36,860 --> 00:14:40,760
这是一个伟大的方式来访问一个输入框的元素，然后检查，

252
00:14:40,760 --> 00:14:45,060
这是一个有效的电子邮件地址，这是一个有效的日期，例如。

253
00:14:45,060 --> 00:14:49,600
您可以立即检索的东西，因为人们打字，

254
00:14:49,600 --> 00:14:54,830
然后检查其是否有效，将其发送回服务器，你想用它做任何事情。

255
00:14:54,830 --> 00:14:57,720
这就是你如何访问这些箱子里面有什么。

256
00:14:57,720 --> 00:15:00,090
>> 您也可以直接修改CSS，而不是增加

257
00:15:00,090 --> 00:15:02,510
一类，有一些预定义的属性，

258
00:15:02,510 --> 00:15:08,120
你可以添加任何CSS，你要到什么。

259
00:15:08,120 --> 00:15:10,350
因此，让我们选择的身体，这是整个演示文稿，

260
00:15:10,350 --> 00:15:14,370
颜色的属性，定义的文字是什么颜色。

261
00:15:14,370 --> 00:15:19,420
如果我们把它改成红色，所有页面中的文字会变成红色。

262
00:15:19,420 --> 00:15:26,310
我们可以做一些像背景颜色为蓝色，

263
00:15:26,310 --> 00:15:30,680
我们去它的美丽。

264
00:15:30,680 --> 00:15:33,840
你可以做任何你想要的与此。

265
00:15:33,840 --> 00:15:39,250
使用CSS属性，你真的可以修改，在任何时候任何事情看起来如何。

266
00:15:39,250 --> 00:15:41,630
接下来的事情就是效果。

267
00:15:41,630 --> 00:15:45,710
修改CSS效果基本上是相同的事情，

268
00:15:45,710 --> 00:15:48,870
但是，实际上他们提供一些额外的动画。

269
00:15:48,870 --> 00:15:53,380
因此，而不是只是显示或隐藏着什么或改变颜色，

270
00:15:53,380 --> 00:15:56,130
你实际上可以使动画。

271
00:15:56,130 --> 00:16:00,760
这里的文件，如果你想看一看它的广泛文档。

272
00:16:00,760 --> 00:16:04,760
但我要说的是，主要的。

273
00:16:04,760 --> 00:16:12,030
有显示和隐藏属性。

274
00:16:12,030 --> 00:16:14,510
显示/隐藏ID的对应这整个框，

275
00:16:14,510 --> 00:16:18,190
所以如果我隐藏它，它就会消失。

276
00:16:18,190 --> 00:16:24,210
我可以再次显示它，如果我要让它回来。

277
00:16:24,210 --> 00:16:26,340
它的背上。它其实并没有消失，

278
00:16:26,340 --> 00:16:30,670
我其实没有删除它，我只是从页面设置的CSS属性的知名度隐藏

279
00:16:30,670 --> 00:16:34,030
所以你看不到它了。

280
00:16:34,030 --> 00:16:39,250
还有向上滑动和向下滑动，可以让你有这样的效果。

281
00:16:39,250 --> 00:16:47,050
滑动消失，消失后

282
00:16:47,050 --> 00:16:53,210
你可以将其向下滑动，使其回来。现在它回来了。

283
00:16:53,210 --> 00:16:57,650
还有这种淡入淡出效果， - 褪色ID的对应这个盒子。

284
00:16:57,650 --> 00:17:01,200
如果我消失了，然后它会慢慢消失。

285
00:17:01,200 --> 00:17:04,490
我也淡出，它会回来的。

286
00:17:04,490 --> 00:17:08,930
你也可以做淡入淡出，这是特定的淡入淡出功能。

287
00:17:08,930 --> 00:17:12,589
你可以把它褪色，你想要的任何具体的不透明度。

288
00:17:12,589 --> 00:17:16,869
所以，如果你慢慢淡出.5，它会成为半可见。

289
00:17:16,869 --> 00:17:22,630
我可以使它.1回1使它再次完全可见。

290
00:17:22,630 --> 00:17:24,760
那只是另一个动画，你可以做。

291
00:17:24,760 --> 00:17:26,750
>> 也有切换的效果。

292
00:17:26,750 --> 00:17:33,410
所以我要选择切换的ID，这相当于这个盒子，

293
00:17:33,410 --> 00:17:38,970
该div，你可以调用切换，如果它是可见的，它会成为无形，

294
00:17:38,970 --> 00:17:42,320
如果它是无形的，它会再次成为可见。

295
00:17:42,320 --> 00:17:44,440
所以，我只是叫这个切换功能两次，第一次是

296
00:17:44,440 --> 00:17:48,380
隐藏同样的事情，第二次调用表演同样的事情。

297
00:17:48,380 --> 00:17:53,510
你也可以做到这一点使用淡入淡出切换，

298
00:17:53,510 --> 00:17:55,730
做同样的事情，但它实际上变淡。

299
00:17:55,730 --> 00:17:59,410
而同样的事情幻灯片切换。

300
00:17:59,410 --> 00:18:01,460
有连锁效应，这意味着

301
00:18:01,460 --> 00:18:05,520
如果你选择一个元素，它只是调用了一堆动画的方法，

302
00:18:05,520 --> 00:18:07,400
如果你想淡出，然后向下滑动，

303
00:18:07,400 --> 00:18:11,040
然后隐藏，然后淡入，它会做他们在一排。

304
00:18:11,040 --> 00:18:24,920
所以消失了，回来 - 由于某种原因，隐藏并没有发生。

305
00:18:24,920 --> 00:18:30,030
让我们试试吧。呀，所以它淡出，然后它溜去。

306
00:18:30,030 --> 00:18:32,230
而且还有很多。您可以使用animate函数

307
00:18:32,230 --> 00:18:35,370
创建自己的动画，这是相当复杂的，

308
00:18:35,370 --> 00:18:38,790
但它为您提供了无限的可扩展性。

309
00:18:38,790 --> 00:18:40,630
你可以让你想要什么样的动画。

310
00:18:40,630 --> 00:18:44,230
您还可以使用队列排队多个动画的时间。

311
00:18:44,230 --> 00:18:47,340
所以，如果你想要的东西飞跨页，

312
00:18:47,340 --> 00:18:49,860
从右上方向左下方滑动，你可以做到这一点，

313
00:18:49,860 --> 00:18:55,240
只是有一堆要一前一后的动作。

314
00:18:55,240 --> 00:18:57,490
>> 接下来的事情，我们要谈的是事件。

315
00:18:57,490 --> 00:19:02,090
活动让您 - 到目前为止，我们刚刚一直在打字的东西到控制台

316
00:19:02,090 --> 00:19:04,870
那就是要做到这一点的方法之一，

317
00:19:04,870 --> 00:19:08,020
但实际页面上，你不会能够

318
00:19:08,020 --> 00:19:10,020
使用户类的东西到控制台。

319
00:19:10,020 --> 00:19:12,050
你想，自动事情发生。

320
00:19:12,050 --> 00:19:18,060
对于这一点，你需要使用激活某些事件发生的事件。

321
00:19:18,060 --> 00:19:21,340
您可以查看文档的全部细节。

322
00:19:21,340 --> 00:19:24,030
所以，让我们来看看。我们想要隐藏或显示框，

323
00:19:24,030 --> 00:19:29,340
但现在这个按钮没有做任何事情，因为我没有实现它。

324
00:19:29,340 --> 00:19:35,420
我打算去实际的HTML页面。

325
00:19:35,420 --> 00:19:38,560
下面的幻灯片。有一个div幻灯片。

326
00:19:38,560 --> 00:19:41,230
它具有类幻灯片。

327
00:19:41,230 --> 00:19:46,890
有文字。现在，有此箱与彩盒按钮。

328
00:19:46,890 --> 00:19:52,900
我们如何真正使这个消失？

329
00:19:52,900 --> 00:19:58,250
首先，让我们写一个函数，使得盒ID消失。

330
00:19:58,250 --> 00:20:01,820
这是的语法FUNTION，让，姑且称之为hideTheBox。

331
00:20:01,820 --> 00:20:06,130
它不带任何参数，因为没有参数应采取。

332
00:20:06,130 --> 00:20:08,950
我们可以选择框的ID。

333
00:20:08,950 --> 00:20:15,020
因此，使用jQuery的选择，我们可以选择框ID，

334
00:20:15,020 --> 00:20:17,700
，然后就让它消失。

335
00:20:17,700 --> 00:20:20,690
让我们把它淡出。

336
00:20:20,690 --> 00:20:27,390
如果我们运行这个功能在实际的控制台，

337
00:20:27,390 --> 00:20:33,380
我们可以定义此功能，我们可以称之为hideTheBox，和它的作品。

338
00:20:33,380 --> 00:20:36,650
但是，我们希望它发生，实际上是按下按钮时。

339
00:20:36,650 --> 00:20:40,950
要做到这一点，我们必须使用一个事件。

340
00:20:40,950 --> 00:20:45,500
要绑定一个事件，某些特定的按钮，或发生一些动作，

341
00:20:45,500 --> 00:20:50,040
我们必须选择将触发该事件的元素 - 

342
00:20:50,040 --> 00:20:52,650
或将触发该事件，对不起。

343
00:20:52,650 --> 00:20:57,220
>> 因此，首先，让我们来选择框按钮的ID

344
00:20:57,220 --> 00:20:59,610
因为的按钮，现在，该按钮，

345
00:20:59,610 --> 00:21:02,750
我们要创建一个动画时，它的点击。

346
00:21:02,750 --> 00:21:05,040
所以有这个点击功能。

347
00:21:05,040 --> 00:21:08,470
它允许你绑定另一个功能。

348
00:21:08,470 --> 00:21:12,320
这个函数接受另一个函数作为参数

349
00:21:12,320 --> 00:21:14,310
我们可以通过在hideTheBox功能，

350
00:21:14,310 --> 00:21:20,950
每当这个按钮被点击时，该功能会自动执行。

351
00:21:20,950 --> 00:21:24,850
因此，这将工作，如果我们保存这一点，我会刷新，

352
00:21:24,850 --> 00:21:33,460
 - 第二，我很抱歉。

353
00:21:33,460 --> 00:21:44,770
让我解决这个问题真的很快。

354
00:21:44,770 --> 00:21:50,680
好吧。我们去那里。所以现在的方块消失，当我们点击按钮。

355
00:21:50,680 --> 00:21:55,470
我们也可以改变这个只是fadeToggle，

356
00:21:55,470 --> 00:22:00,020
改变它只是隐藏或显示框，

357
00:22:00,020 --> 00:22:03,850
这也太多，如果我们刷新。

358
00:22:03,850 --> 00:22:08,550
我们可以将其隐藏，我们也可以表现出来，而且将继续努力。

359
00:22:08,550 --> 00:22:12,210
我们可以做的另一件事是，我们不居然有定义此hideTheBox功能

360
00:22:12,210 --> 00:22:15,050
之前我们所说的点击功能。

361
00:22:15,050 --> 00:22:17,640
因此，而不是定义函数和调用hideTheBox的，

362
00:22:17,640 --> 00:22:20,310
我们只是去调用它，如果点击这个东西。

363
00:22:20,310 --> 00:22:22,310
因此，我们可以将它定义匿名在这里，

364
00:22:22,310 --> 00:22:25,070
这是一个功能的JavaScript。

365
00:22:25,070 --> 00:22:29,720
你可以定义一个函数，通常情况下，我们会说功能hideTheBox

366
00:22:29,720 --> 00:22:34,490
参数，而是，我们就可以说函数没有参数，

367
00:22:34,490 --> 00:22:36,870
启动大括号来定义函数，

368
00:22:36,870 --> 00:22:40,780
关闭，大括号，然后就在这里定义的功能，

369
00:22:40,780 --> 00:22:45,130
第一个括号内的最后一个括号

370
00:22:45,130 --> 00:22:47,860
对应的点击功能参数。

371
00:22:47,860 --> 00:22:53,320
因此，我们通过在这个函数中，我们可以复制这行代码就在这里，

372
00:22:53,320 --> 00:22:55,450
将做同样的事情。

373
00:22:55,450 --> 00:22:57,290
现在我们没有这个的随机fadeTheBox功能

374
00:22:57,290 --> 00:22:59,960
围坐没有明显的原因。

375
00:22:59,960 --> 00:23:02,070
该函数被定义的匿名，它不会有一个名称。

376
00:23:02,070 --> 00:23:08,060
它只会执行包装盒上的按钮，当我们点击。

377
00:23:08,060 --> 00:23:12,180
让人耳目一新一次，再来一次，你可以看到，它仍然有效。

378
00:23:12,180 --> 00:23:16,700
这就是你如何创建活动。

379
00:23:16,700 --> 00:23:19,190
>> 有很多不同的事件，我们可以使用。

380
00:23:19,190 --> 00:23:23,540
我要切换回使用控制台只是向你展示如何将这些工作。

381
00:23:23,540 --> 00:23:28,210
为每个这些的ID对应的每个方块。

382
00:23:28,210 --> 00:23:33,020
因此，这盒是点击ID，这是一个关键的ID，这一个是鼠标ID。

383
00:23:33,020 --> 00:23:36,120
还有一件事是，有这个动作功能，而不是每次打字，

384
00:23:36,120 --> 00:23:41,610
其实，我说干就干，这个动作定义功能在这里。

385
00:23:41,610 --> 00:23:46,860
做同样的事情作为hideTheBox功能。

386
00:23:46,860 --> 00:23:51,340
它得到这个框，要么变淡或消失它。

387
00:23:51,340 --> 00:23:54,110
这就是为什么我们能够使用它。

388
00:23:54,110 --> 00:24:00,350
因此，如果我们点击这个键式身份证，我们希望使框消失或再现。

389
00:24:00,350 --> 00:24:03,610
这是同样的事情，我们不得不在最后一张幻灯片的按钮。

390
00:24:03,610 --> 00:24:07,450
现在我们称之为后，我们可以点击这个框将消失，

391
00:24:07,450 --> 00:24:10,160
然后点击它再次框将再次出现。

392
00:24:10,160 --> 00:24:12,480
这是非常简单的。双击做同样的事情，

393
00:24:12,480 --> 00:24:15,660
它除了需要双击。

394
00:24:15,660 --> 00:24:19,030
所以，如果你点击了一次，再次点击它什么都不会发生，

395
00:24:19,030 --> 00:24:21,140
但如果你双击，它会迅速消失。

396
00:24:21,140 --> 00:24:23,310
如果你再次双击，它会回来的。

397
00:24:23,310 --> 00:24:25,250
所以这是很简单的。

398
00:24:25,250 --> 00:24:31,170
键盘输入是一种怪异的，我不认为它确实可以工作在这个例子中

399
00:24:31,170 --> 00:24:37,670
因为下来的关键，关键和重要的新闻和其他关键行动

400
00:24:37,670 --> 00:24:47,190
激活不管什么元素，你把它绑定到。

401
00:24:47,190 --> 00:24:51,410
例如，即使我身体或别的东西完全绑定键，

402
00:24:51,410 --> 00:24:55,950
那么它仍然会激活不管 - 这是不特定的。

403
00:24:55,950 --> 00:25:00,190
我没有点击按一个键做任何事情消失。

404
00:25:00,190 --> 00:25:04,470
它会被激活，无论什么样的元素，我目前所在

405
00:25:04,470 --> 00:25:06,880
因此，这些实际上并不在这个例子中

406
00:25:06,880 --> 00:25:13,180
因为它不认识我了输入到键盘输入格。

407
00:25:13,180 --> 00:25:15,740
>> 但是，如果你看一下鼠标操作，

408
00:25:15,740 --> 00:25:19,620
第一个是徘徊，它可以做一些使用CSS。

409
00:25:19,620 --> 00:25:24,280
如果你使用CSS，你可以创建，因此，如果您将鼠标悬停在东西，

410
00:25:24,280 --> 00:25:28,940
那么它的风格变化。

411
00:25:28,940 --> 00:25:32,170
但是，使用jQuery，你可以改变的样式，以及其他的东西。

412
00:25:32,170 --> 00:25:37,120
因此，举例来说，我们要打电话的行动，如果我们将鼠标悬停在这个div。

413
00:25:37,120 --> 00:25:39,660
这意味着，如果我们将鼠标悬停在它，那么对话框就会消失。

414
00:25:39,660 --> 00:25:42,430
如果我们远离它移动，方块会重新出现。

415
00:25:42,430 --> 00:25:45,090
如果我们把这种和它悬停，盒子消失，

416
00:25:45,090 --> 00:25:47,050
只要我们搬开，它回来了。

417
00:25:47,050 --> 00:25:49,750
如果我们把这种悬停鼠标ID功能，

418
00:25:49,750 --> 00:25:54,380
对应此框，然后如果我们将鼠标悬停在该框，

419
00:25:54,380 --> 00:26:00,440
然后框实际上会消失 - 它是时髦的权利，但 - 

420
00:26:00,440 --> 00:26:06,310
如果我们将远离它，它会重新出现。现在它是向后的一些原因。

421
00:26:06,310 --> 00:26:12,720
鼠标进入和鼠标移动的功能有些相似，但略有不同。

422
00:26:12,720 --> 00:26:16,470
鼠标进入时，只激活鼠标进入箱，如预期。

423
00:26:16,470 --> 00:26:19,210
所以，如果你进入它，它会消失。

424
00:26:19,210 --> 00:26:23,210
但它不会重新出现，当你搬走，你将不得不搬回到它回来。

425
00:26:23,210 --> 00:26:25,590
还有鼠标移动功能，这将激活

426
00:26:25,590 --> 00:26:29,300
每当鼠标甚至在框中。

427
00:26:29,300 --> 00:26:32,430
所以就继续走，淡入淡出。

428
00:26:32,430 --> 00:26:35,660
它实际上是记录 - 好像它只是淡入淡出，

429
00:26:35,660 --> 00:26:39,140
但它实际上是记录了很多比这更多的行动，

430
00:26:39,140 --> 00:26:43,550
所以，当你搬走它会继续下去，因为它像一个三千人登录。

431
00:26:43,550 --> 00:26:46,620
也许不是一千年。也许五年。

432
00:26:46,620 --> 00:26:50,200
它记录不止于此。

433
00:26:50,200 --> 00:26:53,280
问题的关键是，所有的鼠标操作，也有很多人。

434
00:26:53,280 --> 00:26:55,480
你可以阅读其他的，但他们都略有不同，

435
00:26:55,480 --> 00:26:57,700
你可以挑你最需要

436
00:26:57,700 --> 00:27:02,130
任何特定目的，你要怎样做。

437
00:27:02,130 --> 00:27:05,060
>> 接下来的事情，我要谈的是AJAX。

438
00:27:05,060 --> 00:27:09,340
AJAX，我知道我们没有尽可能多的深度覆盖的JavaScript今年，

439
00:27:09,340 --> 00:27:11,770
所以我只是谈谈AJAX一般一分钟。

440
00:27:11,770 --> 00:27:15,210
AJAX是异步JavaScript和XML。

441
00:27:15,210 --> 00:27:19,030
它基本上是，例如，当你在Facebook和它推动你的通知，

442
00:27:19,030 --> 00:27:23,060
这是因为AJAX的Web浏览器上运行。

443
00:27:23,060 --> 00:27:25,800
您的网页浏览器实际上每几秒钟

444
00:27:25,800 --> 00:27:29,420
Facebook的服务器，要求他们，你有什么新的东西，对我来说，

445
00:27:29,420 --> 00:27:31,980
然后还给你。

446
00:27:31,980 --> 00:27:36,320
这允许你发送请求到服务器

447
00:27:36,320 --> 00:27:38,660
没有实际加载页面。

448
00:27:38,660 --> 00:27:42,040
所以通常情况下，如果你只是使用PHP和数据库，

449
00:27:42,040 --> 00:27:45,480
你必须刷新页面，才可以从服务器得到新的信息。

450
00:27:45,480 --> 00:27:48,770
但是，使用AJAX，你可以拉新的信息不断，

451
00:27:48,770 --> 00:27:52,250
或拉它，当你点击一个按钮或类似的东西。

452
00:27:52,250 --> 00:27:56,140
因此，这使得我们无需重新加载页面发送请求，

453
00:27:56,140 --> 00:27:58,130
我们可以使用GET或POST请求。

454
00:27:58,130 --> 00:28:05,370
>> GET请求是，例如，如果你到Google.com

455
00:28:05,370 --> 00:28:10,900
做Q =测试。这是给他们一个查询测试。

456
00:28:10,900 --> 00:28:15,890
这是一个GET请求，因为它在这些参数传递到URL本身。

457
00:28:15,890 --> 00:28:19,250
如果你通过邮寄发送POST请求。

458
00:28:19,250 --> 00:28:22,500
这就像你把它放在一个字母和运送他们，

459
00:28:22,500 --> 00:28:25,140
但他们没有真正看到的内容。他们不是在URL中可见。

460
00:28:25,140 --> 00:28:31,040
你不能直接键入它，你必须把它几乎偷偷。

461
00:28:31,040 --> 00:28:33,880
这是在一个岗位。

462
00:28:33,880 --> 00:28:38,660
但是，使用jQuery，你可以做的GET和POST请求

463
00:28:38,660 --> 00:28:42,740
更容易比你通常可以只使用普通的JavaScript。

464
00:28:42,740 --> 00:28:50,140
可以查询的API使用GET请求，你也可以检查登录信息。

465
00:28:50,140 --> 00:28:54,400
在接下来的页面中，我创造了这个，问，“什么是午餐吗？”

466
00:28:54,400 --> 00:28:58,230
使用哈佛食品API，让我们拉起来。

467
00:28:58,230 --> 00:29:01,840
这仅仅是一个例子，可以如何使用jQuery做一个GET请求的API

468
00:29:01,840 --> 00:29:04,200
并获得信息。

469
00:29:04,200 --> 00:29:07,090
因此，我们希望看到今天的菜单，

470
00:29:07,090 --> 00:29:10,560
我们想看看有什么吃午饭。

471
00:29:10,560 --> 00:29:16,500
这里是在jQuery创建一个GET请求的URL。

472
00:29:16,500 --> 00:29:18,600
您使用$得到的功能。

473
00:29:18,600 --> 00:29:22,290
第一个参数是URL，所以正是你查询。

474
00:29:22,290 --> 00:29:27,200
那么接下来的参数是一个GET请求完成时执行的函数。

475
00:29:27,200 --> 00:29:29,980
所以你发送一些请求到服务器，等待它回来。

476
00:29:29,980 --> 00:29:33,770
当它回来，你要采取一些行动，从服务器返回的数据。

477
00:29:33,770 --> 00:29:37,520
让我们继续前进，并编写这一点。

478
00:29:37,520 --> 00:29:42,110
我没有编码要么目的。

479
00:29:42,110 --> 00:29:46,660
这里的TODO。首先，让我们用事件绑定

480
00:29:46,660 --> 00:29:50,820
这样，当按下这个按钮，我们发送一个GET请求。

481
00:29:50,820 --> 00:29:53,410
而当GET请求返回一些数据，

482
00:29:53,410 --> 00:29:57,290
我们将它写入这顿饭信息ID格。

483
00:29:57,290 --> 00:30:02,860
首先，让我们来选择食物的按钮的ID。

484
00:30:02,860 --> 00:30:07,320
当点击时，我们希望它做的事情。

485
00:30:07,320 --> 00:30:11,930
让我们只是让一个匿名机能的，如前。

486
00:30:11,930 --> 00:30:15,550
可以换那些大括号，

487
00:30:15,550 --> 00:30:18,530
按下此按钮时，我们要发送一个GET请求

488
00:30:18,530 --> 00:30:20,750
检查有什么吃午饭。

489
00:30:20,750 --> 00:30:24,970
要做到这一点，我们就可以键入$。

490
00:30:24,970 --> 00:30:28,850
这是一个jQuery的功能，使用美元符号。

491
00:30:28,850 --> 00:30:31,430
这需要几个参数。第一个是URL，

492
00:30:31,430 --> 00:30:34,450
第二个是回调函数，这就是所谓的功能

493
00:30:34,450 --> 00:30:37,740
当该请求返回。

494
00:30:37,740 --> 00:30:39,890
就让我们先构建URL。

495
00:30:39,890 --> 00:30:44,650
我们可以得到它的API大卫写了。

496
00:30:44,650 --> 00:30:51,360
在这里，我们可以看到，它是food.cs50.net/api/1.3/menus，

497
00:30:51,360 --> 00:30:54,140
然后你只是传递的参数，你会喜欢的名字。

498
00:30:54,140 --> 00:30:57,760
因此，参数1值1。

499
00:30:57,760 --> 00:31:00,910
它看起来像标准的日期，开始日期默认为今天

500
00:31:00,910 --> 00:31:03,110
如果你不输入任何内容，和结束日期也默认

501
00:31:03,910 --> 00:31:05,930
今天，如果你不输入任何东西。

502
00:31:05,930 --> 00:31:10,790
这就是我们想要的。我们希望今天刚刚得到的信息。

503
00:31:10,790 --> 00:31:12,950
>> 我们想要的格式是JSON。

504
00:31:12,950 --> 00:31:15,570
这只是任意的，你可以使用任何你想要的形式。

505
00:31:15,570 --> 00:31:18,950
您可以使用CSV，但JSON是JavaScript对象符号。

506
00:31:18,950 --> 00:31:24,150
它为JavaScript很容易明白这意味着什么，

507
00:31:24,150 --> 00:31:27,110
我们可以把它打印出来更容易的方式。

508
00:31:27,110 --> 00:31:30,490
因此，我们要求它在JSON和让我们请求午餐。

509
00:31:30,490 --> 00:31:37,660
所以，餐=午餐。只是写网址，我们这里回去。

510
00:31:37,660 --> 00:31:41,290
有菜单。第一个参数是输出= JSON

511
00:31:41,290 --> 00:31:44,640
因为这是我们想要的，分隔参数'。“

512
00:31:44,640 --> 00:31:48,940
第二个参数是 - 我不记得了。

513
00:31:48,940 --> 00:31:52,170
膳食。我们想要一顿=午餐。

514
00:31:52,170 --> 00:31:57,390
你可以测试这个URL输入到浏览器中去它。

515
00:31:57,390 --> 00:32:03,120
它会给你一些输出。它只是一堆东西，吃午饭。

516
00:32:03,120 --> 00:32:10,410
在这个丑陋格式。我们要打印到我们的网页在一个更好的格式。

517
00:32:10,410 --> 00:32:12,580
因此，URL是正确的，现在我们只需要编写一个函数

518
00:32:12,580 --> 00:32:18,300
时回电请求成功。

519
00:32:18,300 --> 00:32:20,430
此功能将采取实际的说法。它能将数据。

520
00:32:20,430 --> 00:32:25,650
这些数据是回来从GET请求GET请求后完成。

521
00:32:25,650 --> 00:32:28,860
我们可以做的大括号，在这里，我们写的匿名函数

522
00:32:28,860 --> 00:32:33,900
执行时，使用该数据时，我们得到的信息。

523
00:32:33,900 --> 00:32:37,840
所以数据，当我们输入这个网址，

524
00:32:37,840 --> 00:32:41,540
这是什么样的数据是怎么回事的样子。这将是这个庞大的字符串。

525
00:32:41,540 --> 00:32:48,610
但好事是，JavaScript可以解析它使用JSON.parse功能的。

526
00:32:48,610 --> 00:32:54,950
因此，让我们来创建一个新的变量解析数据。

527
00:32:54,950 --> 00:32:57,060
和解析数据是一个对象数组。

528
00:32:57,060 --> 00:33:04,200
每个对象都包含的信息，如 - 好吧，让我们来看看。

529
00:33:04,200 --> 00:33:08,980
它的日期，一顿饭，类别，配方，这一切其他的东西。

530
00:33:08,980 --> 00:33:10,860
因此，让我们为每一个打印出了名。

531
00:33:10,860 --> 00:33:13,790
让我们遍历整个数组的东西，我们回来，

532
00:33:13,790 --> 00:33:17,570
刚刚打印出来的每一个 - 打印出每个人的名字。

533
00:33:17,570 --> 00:33:22,670
这是一个循环。

534
00:33:22,670 --> 00:33:26,030
>> JavaScript有这个有用的语法，在这里你可以创建一个数组变量和循环，

535
00:33:26,030 --> 00:33:30,150
变种i是迭代器，所以，而不必做VAR = 0

536
00:33:30,150 --> 00:33:40,290
我是长度小于，我+ +，你可以这样做var目录中解析数据。

537
00:33:40,290 --> 00:33:47,060
在这个例子中，解析出的数据（一）将对应于当前元素

538
00:33:47,060 --> 00:33:49,850
的数组，实际的对象。

539
00:33:49,850 --> 00:33:51,720
我们想要得到出了名的。

540
00:33:51,720 --> 00:33:54,170
因此，让我们只是做名字。

541
00:33:54,170 --> 00:33:57,000
的最后一件事是，我们要再次有一些jQuery。

542
00:33:57,000 --> 00:34:02,660
其实它添加到div，这顿饭资讯目前是空的div中。

543
00:34:02,660 --> 00:34:05,430
因此，让我们选择。

544
00:34:05,430 --> 00:34:13,870
我们将使用jQuery和选择膳食信息的div ID，或饭后信息ID，对不起。

545
00:34:13,870 --> 00:34:16,580
我们要追加到此。

546
00:34:16,580 --> 00:34:21,030
如果我们做了测试，例如，它只是覆盖它每一次。

547
00:34:21,030 --> 00:34:29,190
因此，我们就可以追加。

548
00:34:29,190 --> 00:34:31,889
当前数组中的元素，我们会得到出了名的，它

549
00:34:31,889 --> 00:34:38,159
我们会追加结束了一顿信息ID DIV。

550
00:34:38,159 --> 00:34:40,120
然后只是为了使它看起来更简洁，

551
00:34:40,120 --> 00:34:51,550
我们还会追加一个换行符，所以它不是全部在一行。

552
00:34:51,550 --> 00:34:55,280
因此，如果一切顺利的话，这应该是一件好事 - 

553
00:34:55,280 --> 00:34:57,220
首先，只要按一下这个按钮，

554
00:34:57,220 --> 00:35:00,070
它会发送一个GET请求来此URL。

555
00:35:00,070 --> 00:35:02,500
当数据回来时，它会解析它，

556
00:35:02,500 --> 00:35:06,950
把它变成JSON，循环整个数组，表示该数据，

557
00:35:06,950 --> 00:35:10,310
然后追加的名称和一个换行符

558
00:35:10,310 --> 00:35:16,500
原先是空的这顿饭信息ID的每一行。

559
00:35:16,500 --> 00:35:18,910
所以回到这个页面，我们会刷新，

560
00:35:18,910 --> 00:35:23,690
点击，找到了 - 这是行不通的。这是不幸的。

561
00:35:23,690 --> 00:35:25,830
这是在调试的用武之地。

562
00:35:25,830 --> 00:35:30,070
index.html的1号线。

563
00:35:30,070 --> 00:35:57,210
那很有意思。

564
00:35:57,210 --> 00:35:59,720
所有权利，而不是花时间做这个，我只是去

565
00:35:59,720 --> 00:36:07,070
拉起我有完成的文件，这是完成的版本。

566
00:36:07,070 --> 00:36:13,710
我不知道有什么区别，但我们可以打开这件事，而不是。

567
00:36:13,710 --> 00:36:19,740
我们去了AJAX，这应该正常工作。

568
00:36:19,740 --> 00:36:21,730
这就是今天的午餐，

569
00:36:21,730 --> 00:36:24,870
在没有特定的顺序，用引号括起来，所以它不是最漂亮的。

570
00:36:24,870 --> 00:36:27,090
但是，很明显，如果你做这个项目的最后，

571
00:36:27,090 --> 00:36:30,120
你会让它看起来更好。

572
00:36:30,120 --> 00:36:32,530
但是，这只是一个简单的例子，你是怎么做到的GET请求。

573
00:36:32,530 --> 00:36:34,580
如果我们看看实际的代码，我猜，我敢肯定

574
00:36:34,580 --> 00:36:39,690
它仍然是几乎相同的。

575
00:36:39,690 --> 00:37:04,990
哦，我忘了把它转换为一个字符串，就是这样。

576
00:37:04,990 --> 00:37:07,920
没有，它仍然没有工作。无论如何，这里是实际完成的代码

577
00:37:07,920 --> 00:37:10,300
这看起来应该像，

578
00:37:10,300 --> 00:37:16,400
做同样的事情，我只是实施。

579
00:37:16,400 --> 00:37:22,760
当你按一下按钮，它使用自动解析JSON数据。

580
00:37:22,760 --> 00:37:29,190
它采用数据和遍历整个数组

581
00:37:29,190 --> 00:37:32,770
 - 无论是今天的午餐，它的名字打印出来，

582
00:37:32,770 --> 00:37:38,020
每一行后追加一个换行符。

583
00:37:38,020 --> 00:37:41,100
这就是你如何使用GET功能。

584
00:37:41,100 --> 00:37:44,040
>> 您也可以使用POST，这是我没有时间

585
00:37:44,040 --> 00:37:47,940
写了一个例子，但我们可以看看它的文档。

586
00:37:47,940 --> 00:37:53,220
如果你看看jquery.post，

587
00:37:53,220 --> 00:37:55,510
你可以看到，它几乎同样的事情。

588
00:37:55,510 --> 00:38:01,650
你有一个网址，而是通过参数使用 - 

589
00:38:01,650 --> 00:38:03,990
只是把他们在字符串的URL本身，

590
00:38:03,990 --> 00:38:06,300
你必须通过在该数据变量

591
00:38:06,300 --> 00:38:11,990
基本上是一个数组，字典映射参数值。

592
00:38:11,990 --> 00:38:17,690
您传递，他们在使用POST发送。

593
00:38:17,690 --> 00:38:20,790
一旦你有，那么你就可以有一个成功的功能

594
00:38:20,790 --> 00:38:23,930
时执行的数据回来。

595
00:38:23,930 --> 00:38:26,430
否则，它是完全一样的。因此，使用POST，

596
00:38:26,430 --> 00:38:29,970
你可能想使用POST，例如，如果你有一个输入表单

597
00:38:29,970 --> 00:38:35,780
你让人家进去，输入密码并发送这些密码关闭

598
00:38:35,780 --> 00:38:41,850
您的后端脚本，在数据库中检查该用户是否是有效或无效。

599
00:38:41,850 --> 00:38:46,700
你可以这样做，所有使用jQuery，而不必刷新页面。

600
00:38:46,700 --> 00:38:52,160
这就是我在博客中，我发现你刚才实施。

601
00:38:52,160 --> 00:38:59,530
如果我们去年底门户和注销，注销，

602
00:38:59,530 --> 00:39:02,600
退出不起作用。

603
00:39:02,600 --> 00:39:13,360
好吧，让我在新窗口中打开它。

604
00:39:13,360 --> 00:39:16,580
这里有一个密码，我正想输入随机的东西。

605
00:39:16,580 --> 00:39:18,590
这是行不通的，但你可以看到，我们没有

606
00:39:18,590 --> 00:39:20,840
其实有刷新页面。

607
00:39:20,840 --> 00:39:24,610
的代码，如果你想看看它，

608
00:39:24,610 --> 00:39:37,460
在这里是所有可用的。

609
00:39:37,460 --> 00:39:45,680
所以我写的代码去年的某个时候。

610
00:39:45,680 --> 00:39:47,790
在这里，你可以看到我们发送POST请求。

611
00:39:47,790 --> 00:39:50,400
我有一个文件叫的login.php在后端，

612
00:39:50,400 --> 00:39:53,860
检查，如果密码是有效的。

613
00:39:53,860 --> 00:39:56,000
我们传递的参数是密码，映射到

614
00:39:56,000 --> 00:40:00,030
目前在这个输入框中输入。

615
00:40:00,030 --> 00:40:04,110
当数据回来，我们检查。

616
00:40:04,110 --> 00:40:07,680
如果数据是假的，那么我们说密码不正确，将其向下滑动，

617
00:40:07,680 --> 00:40:09,580
只是让它消失之后。

618
00:40:09,580 --> 00:40:12,320
否则，我们的管理页面加载。

619
00:40:12,320 --> 00:40:15,080
而这一切都是使用JSON。

620
00:40:15,080 --> 00:40:18,510
在这个多行代码，你就可以将数据传递到后端，

621
00:40:18,510 --> 00:40:21,020
检查它是否是正确的，请检查是否正确登录，

622
00:40:21,020 --> 00:40:24,200
实际响应，重定向到正确的页面的人

623
00:40:24,200 --> 00:40:29,760
或不让他们登录并告诉他们，他们有一个不正确的密码。

624
00:40:29,760 --> 00:40:33,040
所以这是一个例子，你如何可以使用jQuery POST

625
00:40:33,040 --> 00:40:37,010
发送POST请求到后端，

626
00:40:37,010 --> 00:40:42,400
检查是否有人在正确的记录。

627
00:40:42,400 --> 00:40:44,820
>> 所有的权利，所以这是我有所有的例子，所有的东西，我想掩盖。

628
00:40:44,820 --> 00:40:47,110
这些都是重大的事情，jQuery允许你做：

629
00:40:47,110 --> 00:40:52,640
选择元素，修改它们使用DOM操作，

630
00:40:52,640 --> 00:40:56,340
您可以添加效果，激活在某些事件上的东西，

631
00:40:56,340 --> 00:41:00,430
也非常无缝地做AJAX请求。

632
00:41:00,430 --> 00:41:02,840
所以，谢谢你的到来或观看，

633
00:41:02,840 --> 00:41:06,230
如果你有任何问题，只是让我知道。是吗？

634
00:41:06,230 --> 00:41:12,730
[学生]当你发现，你有JSON后引号中的POST请求，

635
00:41:12,730 --> 00:41:15,170
我只是想知道做什么。

636
00:41:15,170 --> 00:41:20,070
是啊，我明白了。现在的问题是，在这个例子中，我只是表明，

637
00:41:20,070 --> 00:41:25,790
周围的引号的字JSON  - 

638
00:41:25,790 --> 00:41:31,690
我只是拉起来了 - 周围的POST功能。

639
00:41:31,690 --> 00:41:43,320
我只是拉来显示。

640
00:41:43,320 --> 00:41:46,890
因此，这里的这个POST请求，并在引号中有此JSON。

641
00:41:46,890 --> 00:41:50,280
这只是定义了我们所期望的输出。

642
00:41:50,280 --> 00:41:54,070
因此，如果我们通过JSON作为预期的数据类型，

643
00:41:54,070 --> 00:41:56,070
它不是一个要求，但是如果我们通过它，

644
00:41:56,070 --> 00:41:58,590
那么数据就会被自动解析为JSON。

645
00:41:58,590 --> 00:42:00,600
所以我们不必调用JSON解析功能，

646
00:42:00,600 --> 00:42:02,620
它会自动发生。

647
00:42:02,620 --> 00:42:05,150
如果你看看在POST的文档，

648
00:42:05,150 --> 00:42:09,850
有这样的数据类型的变量，从服务器上的数据，不同的。

649
00:42:09,850 --> 00:42:12,660
它默认的智能猜测，可能是错的，

650
00:42:12,660 --> 00:42:15,520
所以你可以让它空白，但它只是数据的类型

651
00:42:15,520 --> 00:42:21,680
在编码你使用，无论是JSON或XML或别的东西。

652
00:42:21,680 --> 00:42:25,280
>> 任何其他的问题吗？

653
00:42:25,280 --> 00:42:27,300
好的。如果您有任何其他问题，请随时给我发电子邮件

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

655
00:42:30,830 --> 00:42:34,860
幻灯片和代码可在网上很快。

656
00:42:34,860 --> 00:42:42,810
祝你好运与您的最终项目，希望你使用jQuery。

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