1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
道格·劳埃德：在这段视频中，我们希望
召唤出不同的关注

3
00:00:07,230 --> 00:00:09,110
一个非常特殊的
JavaScript的元素

4
00:00:09,110 --> 00:00:11,350
你可能会发现得心应手
你开始的时候

5
00:00:11,350 --> 00:00:15,750
工作在操纵网页和
改变你的网页的内容

6
00:00:15,750 --> 00:00:16,460
上飞。

7
00:00:16,460 --> 00:00:19,450
这就是概念
文档对象模型。

8
00:00:19,450 --> 00:00:23,030
所以当我们在视频上看到
JavaScript中，对象是非常灵活的。

9
00:00:23,030 --> 00:00:24,750
>> 同样也可以包含各种领域。

10
00:00:24,750 --> 00:00:28,075
虽然我们没去成很多
细节，这些字段或属性，

11
00:00:28,075 --> 00:00:30,200
那我们可能更多
适当地给他们打电话

12
00:00:30,200 --> 00:00:33,915
在一个对象的情况下，甚至
这些属性可以是其它的目的。

13
00:00:33,915 --> 00:00:36,210
而这些对象的内部
可以是其它的目的。

14
00:00:36,210 --> 00:00:39,630
>> 你有这非常大的对象
与很多其他对象

15
00:00:39,630 --> 00:00:43,550
里面的吧，这之类的
造成这种想法的一棵大树。

16
00:00:43,550 --> 00:00:47,540
现在，文档对象是一个
在JavaScript中非常特殊的对象

17
00:00:47,540 --> 00:00:52,580
，组织您的整个网络
在这种伞的页面

18
00:00:52,580 --> 00:00:53,470
的一个目的。

19
00:00:53,470 --> 00:00:56,770
等内的文件的
对象是对象呈现

20
00:00:56,770 --> 00:00:59,630
你的网页的头部和身体。

21
00:00:59,630 --> 00:01:03,760
>> 这里面的其他
对象，等等，等等，

22
00:01:03,760 --> 00:01:08,411
直到你的整个网页都有
被组织在这个大目标。

23
00:01:08,411 --> 00:01:09,660
什么是上攻这里，对不对？

24
00:01:09,660 --> 00:01:12,170
好了，我们知道如何工作
在JavaScript对象。

25
00:01:12,170 --> 00:01:15,840
>> 因此，如果我们有一个对象
指的是我们整个网页，即

26
00:01:15,840 --> 00:01:19,590
是指通过调用正确的
方法来操作对象

27
00:01:19,590 --> 00:01:22,360
或修改某些
其特性，我们

28
00:01:22,360 --> 00:01:25,500
可以改变的元件
我们的网页编程

29
00:01:25,500 --> 00:01:30,210
使用JavaScript，而不必
编写东西，比如说HTML。

30
00:01:30,210 --> 00:01:33,760
所以这里有一个例子
很简单的网页，对不对？

31
00:01:33,760 --> 00:01:35,850
它有HTML标签，一个头。

32
00:01:35,850 --> 00:01:37,979
>> 里面有一个标题，你好世界。

33
00:01:37,979 --> 00:01:38,770
然后，我有一具尸体。

34
00:01:38,770 --> 00:01:40,686
里面的，我有
三个不同的事情。

35
00:01:40,686 --> 00:01:44,170
我有h2标题标签，
一个段，和一个链接。

36
00:01:44,170 --> 00:01:45,920
这是一个非常简单的网页。

37
00:01:45,920 --> 00:01:48,590
>> 那么，可能的文件
反对这个样子？

38
00:01:48,590 --> 00:01:50,700
嗯，这是一个小
可怕的也许在第一。

39
00:01:50,700 --> 00:01:52,510
但它实际上只是一棵大树。

40
00:01:52,510 --> 00:01:54,890
而在它的根源是文档。

41
00:01:54,890 --> 00:02:00,030
>> 内的文件是另一个
对象指的是我的网页的HTML。

42
00:02:00,030 --> 00:02:02,660
而我的网页的HTML是这一切。

43
00:02:02,660 --> 00:02:06,900
然后里面的HTML
对象，我有一个头的对象，

44
00:02:06,900 --> 00:02:09,000
它指的是那里的一切。

45
00:02:09,000 --> 00:02:11,009
>> 而且还有里面，
我有一个标题对象。

46
00:02:11,009 --> 00:02:15,620
而且还有里面，我有另一个
反对这只是世界你好。

47
00:02:15,620 --> 00:02:18,020
我可以有我的身体
表示如下。

48
00:02:18,020 --> 00:02:22,850
>> 在我的身体，我有一个H2
对象和第一个p对象

49
00:02:22,850 --> 00:02:25,270
和链接的一个对象。

50
00:02:25,270 --> 00:02:29,660
所以这整个层次
可以表示为一棵大树

51
00:02:29,660 --> 00:02:31,990
有很多小一点的
东西出来吧。

52
00:02:31,990 --> 00:02:33,740
现在，当然时，
我们在编程时，我们

53
00:02:33,740 --> 00:02:35,560
没有想到的事情像一棵大树。

54
00:02:35,560 --> 00:02:37,980
我们希望看到实际的
代码相关的东西。

55
00:02:37,980 --> 00:02:40,790
>> 幸运的是，我们可以
使用我们的开发工具

56
00:02:40,790 --> 00:02:46,080
实际看一看
此网站的文档对象。

57
00:02:46,080 --> 00:02:48,150
而且我们做到这一点。

58
00:02:48,150 --> 00:02:49,580
所以，我已经打开了一个浏览器标签。

59
00:02:49,580 --> 00:02:51,540
>> 我已经打开了开发工具。

60
00:02:51,540 --> 00:02:54,460
而在我的视频上的JavaScript，我
提到的是，控制台是不

61
00:02:54,460 --> 00:02:56,770
只有放在安全的位置
我们打​​印的信息，

62
00:02:56,770 --> 00:02:59,560
它也是一个地方
我们可以输入信息。

63
00:02:59,560 --> 00:03:01,380
在这种情况下，什么
我要说的是

64
00:03:01,380 --> 00:03:05,720
我想找回
文档对象，

65
00:03:05,720 --> 00:03:07,502
这样我就可以开始看看吧。

66
00:03:07,502 --> 00:03:08,460
所以，我怎么可以这样做？

67
00:03:08,460 --> 00:03:10,740
好吧，如果我想
组织它真的很好，

68
00:03:10,740 --> 00:03:16,317
我会说console.dir，D-1-R。
现在，我使用的console.log只是打印

69
00:03:16,317 --> 00:03:17,400
出来的东西很简单。

70
00:03:17,400 --> 00:03:20,450
但是，如果我想组织这样
分层像一个对象，

71
00:03:20,450 --> 00:03:23,800
我想，它像是结构
像的目录结构。

72
00:03:23,800 --> 00:03:27,400
>> 所以我想console.dir文件。

73
00:03:27,400 --> 00:03:28,430
我要敲回车。

74
00:03:28,430 --> 00:03:32,350
而正下方，现在，
我会放大在这里，

75
00:03:32,350 --> 00:03:36,000
我有这个响应文件
与它旁边的小箭头。

76
00:03:36,000 --> 00:03:39,470
现在，当我打开这个箭头，
还有的将是一个很大的东西。

77
00:03:39,470 --> 00:03:42,560
>> 但是，我们会忽略了很多
它和公正的一种重点

78
00:03:42,560 --> 00:03:46,250
在最重要的一部分，所以我们
可以开始浏览这个文件。

79
00:03:46,250 --> 00:03:50,125
还有很多更重要的DOM比
只是父节点和子节点。

80
00:03:50,125 --> 00:03:51,500
有很多附属的东西。

81
00:03:51,500 --> 00:03:52,280
>> 所以，我要打开这个了。

82
00:03:52,280 --> 00:03:54,610
还有一大堆
东西弹出。

83
00:03:54,610 --> 00:03:59,000
但是，我所关心的是
在这里，子节点。

84
00:03:59,000 --> 00:04:00,410
让我们打开了。

85
00:04:00,410 --> 00:04:03,810
>> 里面还有我看到
一些熟悉的东西，HTML。

86
00:04:03,810 --> 00:04:07,670
因此，我们的文档里面
下一级别的HTML。

87
00:04:07,670 --> 00:04:08,550
我打开了。

88
00:04:08,550 --> 00:04:10,380
我们有什么期待？

89
00:04:10,380 --> 00:04:13,760
>> 如果从图中我们还记得，
我们应该怎样HTML里面找？

90
00:04:13,760 --> 00:04:17,275
哪两个节点是在它下面的树？

91
00:04:17,275 --> 00:04:17,899
让我们来看看。

92
00:04:17,899 --> 00:04:18,940
我们打​​开HTML。

93
00:04:18,940 --> 00:04:22,079
我们去到其子节点。

94
00:04:22,079 --> 00:04:23,440
>> 弹出打开。

95
00:04:23,440 --> 00:04:25,990
有头部和身体。

96
00:04:25,990 --> 00:04:28,540
我们可以打开头。

97
00:04:28,540 --> 00:04:30,460
转到其子节点。

98
00:04:30,460 --> 00:04:31,460
嗯，有标题。

99
00:04:31,460 --> 00:04:33,293
>> 而且我们可以继续下去
就这样永远。

100
00:04:33,293 --> 00:04:34,770
我们可以用身体做的这一点。

101
00:04:34,770 --> 00:04:40,090
但是，有一种方法让我们来看看
组织作为一个大对象的文档。

102
00:04:40,090 --> 00:04:42,610
如果我们看一下是个大
对象看起来很

103
00:04:42,610 --> 00:04:47,480
像代码，这意味着我们可以开始
通过操纵这个大目标

104
00:04:47,480 --> 00:04:51,220
代码改变了我们的
网站的外观和感觉。

105
00:04:51,220 --> 00:04:54,920
>> 所以这是一个非常强大的工具
我们有我们所掌握了。

106
00:04:54,920 --> 00:04:57,360
所以，正如我们刚才看到的
文档对象本身

107
00:04:57,360 --> 00:05:01,392
和所有的其内的对象的
具有属性和方法，只是

108
00:05:01,392 --> 00:05:04,100
像我们已经其他对象
一直与在JavaScript中。

109
00:05:04,100 --> 00:05:08,370
但是，我们可以利用这些特性，
使用这些方法排序的深入

110
00:05:08,370 --> 00:05:10,900
从大的文档，并得到
下限和低，

111
00:05:10,900 --> 00:05:13,360
越来越细晶粒
细节，直到我们

112
00:05:13,360 --> 00:05:17,510
得到一个非常特殊的一块我们
我们要改变的网页。

113
00:05:17,510 --> 00:05:22,700
>> 而当我们更新的属性
文档对象或调用这些方法，

114
00:05:22,700 --> 00:05:24,450
事情可能发生在我们的网页上。

115
00:05:24,450 --> 00:05:28,420
而且我们不需要做任何令人耳目一新
让这些更改生效。

116
00:05:28,420 --> 00:05:33,160
>> 这是一个很酷的能力，
当我们正在处理的代码有。

117
00:05:33,160 --> 00:05:37,185
那么，什么是其中一些属性
这是一个文档对象的一部分？

118
00:05:37,185 --> 00:05:40,100
好吧，你可能看到一个
他们夫妇真的很快

119
00:05:40,100 --> 00:05:42,700
因为我们是荏苒
通过巨大的文件

120
00:05:42,700 --> 00:05:45,150
对象，我们在Web浏览器中刚刚看到。

121
00:05:45,150 --> 00:05:48,420
>> 但一对夫妇的这些属性
可能会像内部HTML。

122
00:05:48,420 --> 00:05:52,950
你甚至可能还记得我
在JavaScript中的视频使用此

123
00:05:52,950 --> 00:05:54,950
在最后的时候我
在谈论事件。

124
00:05:54,950 --> 00:05:56,125
什么是这种内在的HTML？

125
00:05:56,125 --> 00:05:59,030
好吧，这只是什么
在标记之间。

126
00:05:59,030 --> 00:06:01,590
>> 等内部HTML，
例如，标题的

127
00:06:01,590 --> 00:06:05,390
标签，如果我们继续前进的
这个例子刚才，

128
00:06:05,390 --> 00:06:08,020
本来世界你好。

129
00:06:08,020 --> 00:06:10,140
这是我们的页面的标题。

130
00:06:10,140 --> 00:06:12,370
其它性能
包括节点名，其中

131
00:06:12,370 --> 00:06:15,810
是HTML的名称
元素如标题。

132
00:06:15,810 --> 00:06:19,100
ID，它是ID
HTML元素的属性。

133
00:06:19,100 --> 00:06:23,790
>> 回想一下，我们可以专门指示
我们的HTML中的具体内容

134
00:06:23,790 --> 00:06:27,510
有一个ID属性，通常
就派上用场了在CSS的背景下，

135
00:06:27,510 --> 00:06:29,000
特别。

136
00:06:29,000 --> 00:06:33,217
父节点，这是一个参照
什么是刚起来比我高的DOM。

137
00:06:33,217 --> 00:06:35,800
和子节点，这是一个
参考什么是下来我下面。

138
00:06:35,800 --> 00:06:37,950
我们看到了很多的
只是翻翻。

139
00:06:37,950 --> 00:06:42,970
子节点，这就是我们得到了
再降到树。

140
00:06:42,970 --> 00:06:46,590
>> 属性，这只是一个数组
属性的HTML元素。

141
00:06:46,590 --> 00:06:50,270
所以属性的例子可能
如果你有一个形象的标签是，

142
00:06:50,270 --> 00:06:54,090
它通常有一个源属性，
也许一高度和宽度属性。

143
00:06:54,090 --> 00:06:57,120
所以这也只是一个数组
所有关联的属性的

144
00:06:57,120 --> 00:06:59,300
与HTML元素。

145
00:06:59,300 --> 00:07:04,140
>> 风格是另外一个，
确实代表了CSS

146
00:07:04,140 --> 00:07:06,050
造型特定元素。

147
00:07:06,050 --> 00:07:08,310
后来就在这
视频中，我们会特别

148
00:07:08,310 --> 00:07:14,592
杠杆式的，使一对夫妇
变化到我们的网站。

149
00:07:14,592 --> 00:07:15,800
因此，这些都是一些属性。

150
00:07:15,800 --> 00:07:17,591
>> 而也有一些
方法我们就可以

151
00:07:17,591 --> 00:07:22,450
使用也更迅速，也许隔离
文档对象的元素。

152
00:07:22,450 --> 00:07:26,730
也许，最通用的
这些是的getElementById的。

153
00:07:26,730 --> 00:07:31,190
所以，我可能会这样说，是因为
记住它的文档的方法

154
00:07:31,190 --> 00:07:34,880
对象的document.getElementById。

155
00:07:34,880 --> 00:07:39,820
>> 而那些括号内，指定
通过特定的ID的HTML元素

156
00:07:39,820 --> 00:07:42,330
属性是我以前
定，我马上

157
00:07:42,330 --> 00:07:46,685
向右走该元素
整个网站。

158
00:07:46,685 --> 00:07:49,310
所以，我没有可能钻
上下贯通的每一层。

159
00:07:49,310 --> 00:07:52,841
我就可以用这个方法来找到它，
有点像热寻的导弹，

160
00:07:52,841 --> 00:07:53,340
对？

161
00:07:53,340 --> 00:07:56,300
它只是和发现
正是它的寻找。

162
00:07:56,300 --> 00:07:59,290
>> 的getElementsByTagName是
非常相似的精神。

163
00:07:59,290 --> 00:08:02,500
这也许会发现所有的
大胆标记或所有的p标签

164
00:08:02,500 --> 00:08:05,920
并给了我一切的数组
我可以再与工作。

165
00:08:05,920 --> 00:08:12,080
的appendChild增加了一些
上一级树上下来。

166
00:08:12,080 --> 00:08:16,440
>> 所以，我可以添加一个全新的
元素一个水平。

167
00:08:16,440 --> 00:08:19,700
或者，我可以删除元素的
低一个级别，以及如果我想

168
00:08:19,700 --> 00:08:22,870
要删除我的网页的东西。

169
00:08:22,870 --> 00:08:28,480
现在，一个快速的编码说明和快速
节能头痛笔记，希望。

170
00:08:28,480 --> 00:08:31,670
>> getElementById--的d为小写。

171
00:08:31,670 --> 00:08:36,950
我不能告诉你我有多少次
使用的getElementById和资本化

172
00:08:36,950 --> 00:08:38,336
对D那里。

173
00:08:38,336 --> 00:08:39,460
因为它真的很普遍。

174
00:08:39,460 --> 00:08:42,990
如果我们写的字ID，它是
通常我的资本资本D.

175
00:08:42,990 --> 00:08:44,240
而我的代码是行不通的。

176
00:08:44,240 --> 00:08:45,630
我想不通为什么。

177
00:08:45,630 --> 00:08:49,490
这是真的，真的，真的
常见的错误，每个人都会，

178
00:08:49,490 --> 00:08:51,890
即使是专家有
一直这样做下去。

179
00:08:51,890 --> 00:08:55,410
所以要知道，的getElementById，
使得d是小写。

180
00:08:55,410 --> 00:09:00,080
并希望，这可以节省数
至少心痛分钟。

181
00:09:00,080 --> 00:09:02,204
>> 那么，是什么这一切告诉我们什么？

182
00:09:02,204 --> 00:09:03,120
我们有这些方法。

183
00:09:03,120 --> 00:09:04,161
我们有这些属性。

184
00:09:04,161 --> 00:09:06,610
现在，如果我们从开始
文档，文档。

185
00:09:06,610 --> 00:09:10,220
什么，我们现在可以去任何
单件我们的网页

186
00:09:10,220 --> 00:09:14,870
我们要使用JavaScript
只是通过调用这些方法

187
00:09:14,870 --> 00:09:19,940
并利用属性
我们发现在各种位置。

188
00:09:19,940 --> 00:09:24,890
>> 这可以得到罗嗦，这
的document.getElementById，

189
00:09:24,890 --> 00:09:28,560
也许有很长的标签名，
也许你以后做更多的电话。

190
00:09:28,560 --> 00:09:31,230
事情可能会变得有点罗嗦。

191
00:09:31,230 --> 00:09:34,480
而作为程序员，因为你已经
可能看到很多这样的视频，

192
00:09:34,480 --> 00:09:36,600
我们不喜欢罗嗦的东西。

193
00:09:36,600 --> 00:09:38,520
>> 我们希望能够快速地做事情。

194
00:09:38,520 --> 00:09:42,640
所以，我们想的更
简洁的方式说些什么。

195
00:09:42,640 --> 00:09:46,270
所以这种动态到的
的一些概念叫jQuery的。

196
00:09:46,270 --> 00:09:49,170
现在，jQuery是不是JavaScript的。

197
00:09:49,170 --> 00:09:50,350
这不是JavaScript的一部分。

198
00:09:50,350 --> 00:09:54,790
>> 这是写的一个库
一些JavaScript程序员

199
00:09:54,790 --> 00:09:57,060
大约10年前。

200
00:09:57,060 --> 00:10:01,300
而它的目标是简化什么
所谓的客户端脚本，这

201
00:10:01,300 --> 00:10:04,310
基本上我们是什么只是
谈到与DOM操作。

202
00:10:04,310 --> 00:10:11,090
所以，如果我想修改
我的网页背景颜色，也许

203
00:10:11,090 --> 00:10:11,980
具体的股利。

204
00:10:11,980 --> 00:10:15,325
>> 在这里，我显然得到
ElementById colorDiv。

205
00:10:15,325 --> 00:10:16,950
我想设置它的背景色。

206
00:10:16,950 --> 00:10:20,720
如果我只是用纯JavaScript
使用文档对象模型，

207
00:10:20,720 --> 00:10:23,990
这是一个很多东西，对不对？
的document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor =绿色。

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> 呼。

211
00:10:28,050 --> 00:10:30,110
这是一个有很多话要说。

212
00:10:30,110 --> 00:10:31,720
这是一个很多键入。

213
00:10:31,720 --> 00:10:35,760
所以在jQuery中，我们也许可以说，
这一点更简洁。

214
00:10:35,760 --> 00:10:39,350
在权衡是它也许有点
更多的神秘突然，

215
00:10:39,350 --> 00:10:39,850
对？

216
00:10:39,850 --> 00:10:43,580
>> 至少长是有点多
解释性以我们正在做什么。

217
00:10:43,580 --> 00:10:49,947
这个美元符号，括号，
单引号，哈希，colorDiv，对不对？

218
00:10:49,947 --> 00:10:50,780
这意味着什么？

219
00:10:50,780 --> 00:10:53,640
好吧，这基本上只是
的document.getElementById colorDiv。

220
00:10:53,640 --> 00:10:58,700
>> 但它的这种速记
做它使用jQuery的方式。

221
00:10:58,700 --> 00:11:01,380
就让我们来看看现在
在几种不同的方法

222
00:11:01,380 --> 00:11:04,520
我实际上可能
使用该文档对象

223
00:11:04,520 --> 00:11:06,807
型号操纵我的网站作品。

224
00:11:06,807 --> 00:11:09,140
特别是，我们要去
是工作在操纵

225
00:11:09,140 --> 00:11:14,090
的一个特定的颜色
事业部，colorDiv，在网页上。

226
00:11:14,090 --> 00:11:15,299
因此，让我们来看看这一点。

227
00:11:15,299 --> 00:11:15,798
好吧。

228
00:11:15,798 --> 00:11:16,700
所以我在页面上。

229
00:11:16,700 --> 00:11:20,750
这就是所谓的test.html的，当你下载
这一点，如果你想鼓捣这个。

230
00:11:20,750 --> 00:11:24,730
我有一堆的
此页面上的按钮。

231
00:11:24,730 --> 00:11:27,730
而我要说的各个功能
为背景色，紫色，绿色，

232
00:11:27,730 --> 00:11:31,330
橙色，红色，蓝色，一个单一的功能
作为背景色，事件处理

233
00:11:31,330 --> 00:11:34,360
作为背景色，并使用jQuery。

234
00:11:34,360 --> 00:11:38,147
我是什么说什么
当我这样做呢？

235
00:11:38,147 --> 00:11:39,230
因此，我们已经看到了按钮。

236
00:11:39,230 --> 00:11:41,521
现在，让我们来看看
这里的一些源代码。

237
00:11:41,521 --> 00:11:44,770
我们将开始与test.html的。

238
00:11:44,770 --> 00:11:48,100
为背景，使各个功能
颜色是我在这里输入。

239
00:11:48,100 --> 00:11:49,350
让我滚动一点点。

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> 而且你会发现，我
定义这些按钮

242
00:11:58,820 --> 00:12:03,990
要说单击此按钮时，
调用变成紫色的功能。

243
00:12:03,990 --> 00:12:06,670
当这个按钮被点击，相反，
调用函数变成绿色，

244
00:12:06,670 --> 00:12:08,710
变为橙色，变红，发紫。

245
00:12:08,710 --> 00:12:11,880
你可能已经猜到，这
也许不是最好的设计

246
00:12:11,880 --> 00:12:12,460
某种意义上说，对不对？

247
00:12:12,460 --> 00:12:16,490
>> 如果我能这将是很好
有一个更通用的方法。

248
00:12:16,490 --> 00:12:19,570
嗯，首先我们来看看
什么这五个功能

249
00:12:19,570 --> 00:12:24,400
的document.getElementById
colorDiv.style.background =紫，

250
00:12:24,400 --> 00:12:27,250
绿，橙，红，
和蓝色，分别。

251
00:12:27,250 --> 00:12:30,930
所以，没有特别的最好的设计。

252
00:12:30,930 --> 00:12:33,390
>> 下一组按钮
我已经是我写

253
00:12:33,390 --> 00:12:36,380
称为单功能
改变颜色，显然

254
00:12:36,380 --> 00:12:38,960
接受字符串作为它的参数。

255
00:12:38,960 --> 00:12:40,290
所以这是一个更好一点。

256
00:12:40,290 --> 00:12:43,840
紫，绿，橙，红，
蓝现在是一个说法。

257
00:12:43,840 --> 00:12:46,230
所以，我写了一个更普遍
案例JavaScript函数，

258
00:12:46,230 --> 00:12:47,771
这可能会是这个样子。

259
00:12:47,771 --> 00:12:48,680
我通过研究。

260
00:12:48,680 --> 00:12:52,090
这个功能的改变颜色
期待所谓的颜色参数。

261
00:12:52,090 --> 00:12:54,970
而我要说的设置
背景颜色以颜色。

262
00:12:54,970 --> 00:12:58,390
所以在这里代表我在这里得到了什么。

263
00:12:58,390 --> 00:12:59,770
所以这是一个好一点。

264
00:12:59,770 --> 00:13:02,740
>> 不过，我也许能
做的更好。

265
00:13:02,740 --> 00:13:06,140
如果我们下去看看
在事件处理程序的情况下，

266
00:13:06,140 --> 00:13:07,860
现在所有这些调用看起来是一样的。

267
00:13:07,860 --> 00:13:10,340
如果你还记得我们的
在事件处理程序的讨论，

268
00:13:10,340 --> 00:13:15,770
我可以得到哪些信息
这些按钮被点击并使用它。

269
00:13:15,770 --> 00:13:19,560
>> 因此在event.JavaScript，我已经
书面变更色彩的事件，这

270
00:13:19,560 --> 00:13:21,110
计算出该按钮被点击。

271
00:13:21,110 --> 00:13:23,250
这是触发对象行。

272
00:13:23,250 --> 00:13:25,240
然后在这里，它变得非常罗嗦。

273
00:13:25,240 --> 00:13:27,420
但是我在做什么是我
设置背景

274
00:13:27,420 --> 00:13:30,340
颜色triggerObject inner.HTML。

275
00:13:30,340 --> 00:13:34,170
这是在文本
按钮标记之间。

276
00:13:34,170 --> 00:13:36,500
>> 然后，我显然有
将其设置为小写。

277
00:13:36,500 --> 00:13:40,780
这就是我可以把整个
字符串使用JavaScript的小写

278
00:13:40,780 --> 00:13:42,940
该方法为小写。

279
00:13:42,940 --> 00:13:46,570
因为当我设置颜色，
因为我想在这里做，

280
00:13:46,570 --> 00:13:48,260
颜色必须全部小写。

281
00:13:48,260 --> 00:13:50,920
>> 但是，我有按钮，
如果我们再看看，

282
00:13:50,920 --> 00:13:55,890
注意到文本有
写一个大写P表示紫色。

283
00:13:55,890 --> 00:13:59,140
然后在最
底部在这里，我明显

284
00:13:59,140 --> 00:14:02,630
尝试做到这一点使用jQuery为好。

285
00:14:02,630 --> 00:14:06,000
在这种情况下，我不竟
调用一个函数的。

286
00:14:06,000 --> 00:14:11,430
我刚才说的类，我
使用此按钮是一个JQ按钮。

287
00:14:11,430 --> 00:14:12,360
而已。

288
00:14:12,360 --> 00:14:14,950
>> 那么，如何jQuery的知道我在做什么？

289
00:14:14,950 --> 00:14:18,740
那么，这是一个优点
削减jQuery的缺点。

290
00:14:18,740 --> 00:14:21,560
它可以让我做的事情
很简洁，但也许不是

291
00:14:21,560 --> 00:14:22,570
为直观。

292
00:14:22,570 --> 00:14:25,570
也许那些其他三个做
一点感觉我在做什么。

293
00:14:25,570 --> 00:14:29,010
在这里，虽然，这是怎么回事？

294
00:14:29,010 --> 00:14:31,940
>> 显然，创建
匿名函数

295
00:14:31,940 --> 00:14:36,790
，加载每当我的文档
准备好了，那么的document.ready，

296
00:14:36,790 --> 00:14:38,760
有些功能会发生什么。

297
00:14:38,760 --> 00:14:40,490
基本上，当是文档准备好了吗？

298
00:14:40,490 --> 00:14:42,310
这是当我的页面加载。

299
00:14:42,310 --> 00:14:46,540
>> 所以，只要我的页面加载时，
下面的功能是时刻准备着。

300
00:14:46,540 --> 00:14:54,310
它说，如果类型jQButton的对象，
如果类jQButton已被点击，

301
00:14:54,310 --> 00:14:55,570
执行该功能。

302
00:14:55,570 --> 00:14:59,360
因此，这里的两个匿名函数，
一个在另一个的内部限定。

303
00:14:59,360 --> 00:15:03,930
>> 所以，我的整个背景
到这里为止是我的网页

304
00:15:03,930 --> 00:15:06,520
在加载时调用此函数。

305
00:15:06,520 --> 00:15:09,740
并且这个功能是在等待
为一个按钮被点击。

306
00:15:09,740 --> 00:15:14,490
并且单击一个按钮时，JQ
按钮特别被点击，

307
00:15:14,490 --> 00:15:17,150
它调用此等
功能，这是怎么回事

308
00:15:17,150 --> 00:15:21,250
设置背景
colorDiv的颜色为

309
00:15:21,250 --> 00:15:25,990
无论文本是在标记之间。

310
00:15:25,990 --> 00:15:28,050
>> 这是的概念
该按钮被点击。

311
00:15:28,050 --> 00:15:31,230
但除此之外，这是有点
行为类似于事件。

312
00:15:31,230 --> 00:15:34,460
这只是以同样的方式我
会表达这种jQuery中。

313
00:15:34,460 --> 00:15:36,790
再次，它可能是一个
很多吓人。

314
00:15:36,790 --> 00:15:40,840
这不是一样清晰
像event.js，

315
00:15:40,840 --> 00:15:45,080
这也许是一点点
详细，但有点少

316
00:15:45,080 --> 00:15:46,000
恐吓。

317
00:15:46,000 --> 00:15:51,460
>> 但是，如果我们弹回过我的浏览器
窗口，如果我开始clicking--好，

318
00:15:51,460 --> 00:15:52,690
即改为紫色。

319
00:15:52,690 --> 00:15:54,450
这是一个绿色的使用字符串的方法。

320
00:15:54,450 --> 00:15:56,500
这是橙色使用的事件处理程序。

321
00:15:56,500 --> 00:15:58,300
>> 这是红色的使用jQuery的，对不对？

322
00:15:58,300 --> 00:16:01,270
他们都表现得一模一样。

323
00:16:01,270 --> 00:16:06,509
他们只是做它用不同的
接近要解决的问题。

324
00:16:06,509 --> 00:16:08,550
还有很多更
jQuery的话我们肯定

325
00:16:08,550 --> 00:16:10,050
要谈谈在这个视频。

326
00:16:10,050 --> 00:16:15,410
但是，如果你想了解更多，可以
去jQuery的排序文件

327
00:16:15,410 --> 00:16:19,710
并了解了很多关于
这个非常灵活的库，它

328
00:16:19,710 --> 00:16:22,550
是非常适合做客户端
脚本如我们在做什么

329
00:16:22,550 --> 00:16:26,240
操纵它的外表
感觉我们的网页

330
00:16:26,240 --> 00:16:28,750
与文档对象模型。

331
00:16:28,750 --> 00:16:29,650
我是道格·劳埃德。

332
00:16:29,650 --> 00:16:31,930
这是CS50。

333
00:16:31,930 --> 00:16:34,022