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