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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Trong video này, chúng tôi muốn
để gọi sự chú ý riêng

3
00:00:07,230 --> 00:00:09,110
để một rất đặc biệt
yếu tố của JavaScript

4
00:00:09,110 --> 00:00:11,350
mà bạn có thể thấy có ích
khi bạn đang bắt đầu

5
00:00:11,350 --> 00:00:15,750
để làm việc trên các trang web và thao tác
thay đổi nội dung của trang web của bạn

6
00:00:15,750 --> 00:00:16,460
trên bay.

7
00:00:16,460 --> 00:00:19,450
Và đó là khái niệm về
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Vì vậy, như chúng ta đã thấy trong video của chúng tôi trên
JavaScript, đối tượng là rất linh hoạt.

9
00:00:23,030 --> 00:00:24,750
>> Và chúng có thể chứa các lĩnh vực khác nhau.

10
00:00:24,750 --> 00:00:28,075
Và mặc dù chúng tôi đã không đi vào rất nhiều
Cụ thể, các lĩnh vực hoặc tài sản,

11
00:00:28,075 --> 00:00:30,200
thì chúng ta sẽ có thể nhiều hơn
thích hợp gọi cho họ

12
00:00:30,200 --> 00:00:33,915
trong bối cảnh của một đối tượng, thậm chí
những tài sản có thể được các đối tượng khác.

13
00:00:33,915 --> 00:00:36,210
Và bên trong của những đối tượng
có thể có các đối tượng khác.

14
00:00:36,210 --> 00:00:39,630
>> Bạn có đối tượng này rất lớn
với rất nhiều đối tượng khác

15
00:00:39,630 --> 00:00:43,550
bên trong của nó, trong đó loại
tạo ra ý tưởng này của một cái cây lớn.

16
00:00:43,550 --> 00:00:47,540
Bây giờ, các đối tượng tài liệu là một
đối tượng rất đặc biệt trong JavaScript

17
00:00:47,540 --> 00:00:52,580
mà tổ chức toàn bộ trang web của bạn
trang dưới này sắp xếp của ô

18
00:00:52,580 --> 00:00:53,470
của một đối tượng.

19
00:00:53,470 --> 00:00:56,770
Và như vậy bên trong của tài liệu
đối tượng là các đối tượng trình bày

20
00:00:56,770 --> 00:00:59,630
đầu và cơ thể của trang web của bạn.

21
00:00:59,630 --> 00:01:03,760
>> Bên trong đó là những khác
đối tượng, vân vân, vân vân,

22
00:01:03,760 --> 00:01:08,411
cho đến khi trang web của bạn có toàn bộ
được tổ chức trong đối tượng lớn này.

23
00:01:08,411 --> 00:01:09,660
Lộn ngược ở đây là gì, phải không?

24
00:01:09,660 --> 00:01:12,170
Vâng, chúng tôi biết làm thế nào để làm việc
với các đối tượng trong JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Vì vậy, nếu chúng ta có một đối tượng
đề cập đến trang web của chúng tôi toàn bộ, mà

26
00:01:15,840 --> 00:01:19,590
có nghĩa là bằng cách gọi chính xác
phương pháp để thao tác đối tượng

27
00:01:19,590 --> 00:01:22,360
hoặc sửa đổi nhất định
các thuộc tính của nó, chúng tôi

28
00:01:22,360 --> 00:01:25,500
có thể thay đổi các yếu tố của
Trang của chúng tôi lập trình

29
00:01:25,500 --> 00:01:30,210
sử dụng JavaScript thay vì có
mã điều với, nói, HTML.

30
00:01:30,210 --> 00:01:33,760
Vì vậy, đây là một ví dụ của một
rất đơn giản trang web, phải không?

31
00:01:33,760 --> 00:01:35,850
Đó là nhận thẻ HTML, một cái đầu.

32
00:01:35,850 --> 00:01:37,979
>> Bên trong có một tiêu đề, xin chào thế giới.

33
00:01:37,979 --> 00:01:38,770
Sau đó, tôi có một cơ thể.

34
00:01:38,770 --> 00:01:40,686
Bên trong đó, tôi có
ba điều khác nhau.

35
00:01:40,686 --> 00:01:44,170
Tôi có một tag tiêu đề h2,
một đoạn, và một liên kết.

36
00:01:44,170 --> 00:01:45,920
Đây là một trang web rất đơn giản.

37
00:01:45,920 --> 00:01:48,590
>> Vâng, những gì có thể các tài liệu
đối tượng cho cái nhìn này như thế nào?

38
00:01:48,590 --> 00:01:50,700
Vâng, đó là một chút
đáng sợ có lẽ lần đầu tiên.

39
00:01:50,700 --> 00:01:52,510
Nhưng nó thực sự chỉ là một cái cây lớn.

40
00:01:52,510 --> 00:01:54,890
Và tại gốc rễ của nó là tài liệu.

41
00:01:54,890 --> 00:02:00,030
>> Bên trong của tài liệu là khác
đối tượng đề cập tới HTML của trang web của tôi.

42
00:02:00,030 --> 00:02:02,660
Và mã HTML của trang web của tôi là tất cả những điều này.

43
00:02:02,660 --> 00:02:06,900
Và sau đó bên trong của HTML
đối tượng, tôi có một đối tượng đầu,

44
00:02:06,900 --> 00:02:09,000
trong đó đề cập đến tất cả mọi thứ ở đó.

45
00:02:09,000 --> 00:02:11,009
>> Và bên trong đó,
Tôi có một đối tượng tên.

46
00:02:11,009 --> 00:02:15,620
Và bên trong đó, tôi có một
đối tượng đó chỉ là hello world.

47
00:02:15,620 --> 00:02:18,020
Tôi có thể có cơ thể của tôi
đại diện như thế này.

48
00:02:18,020 --> 00:02:22,850
>> Bên trong cơ thể của tôi, tôi có một h2
đối tượng và một đối tượng p cho đoạn

49
00:02:22,850 --> 00:02:25,270
và một đối tượng cho một liên kết.

50
00:02:25,270 --> 00:02:29,660
Và do đó, toàn bộ hệ thống phân cấp này
có thể được biểu diễn như một cái cây lớn

51
00:02:29,660 --> 00:02:31,990
với rất nhiều nhỏ hơn chút
thứ ra khỏi nó.

52
00:02:31,990 --> 00:02:33,740
Bây giờ, tất nhiên, khi
chúng tôi đang lập trình, chúng tôi

53
00:02:33,740 --> 00:02:35,560
không nghĩ về những điều giống như một cái cây lớn.

54
00:02:35,560 --> 00:02:37,980
Chúng tôi muốn nhìn thấy thực tế
Mã những thứ liên quan.

55
00:02:37,980 --> 00:02:40,790
>> Và may mắn thay, chúng ta có thể
sử dụng các công cụ phát triển của chúng tôi

56
00:02:40,790 --> 00:02:46,080
để thực sự có một cái nhìn tại
của trang web này tài liệu đối tượng.

57
00:02:46,080 --> 00:02:48,150
Và chúng ta hãy làm điều đó.

58
00:02:48,150 --> 00:02:49,580
Vì vậy, tôi đã mở ra một tab trình duyệt.

59
00:02:49,580 --> 00:02:51,540
>> Và tôi đã mở ra công cụ phát triển.

60
00:02:51,540 --> 00:02:54,460
Và trong video của tôi trên JavaScript, tôi
nói rằng giao diện điều khiển không phải là

61
00:02:54,460 --> 00:02:56,770
chỉ nơi nào đó ở đâu
chúng tôi in thông tin,

62
00:02:56,770 --> 00:02:59,560
nó cũng là một nơi
chúng ta có thể thông tin đầu vào.

63
00:02:59,560 --> 00:03:01,380
Trong bối cảnh này, những gì
Tôi sẽ nói là

64
00:03:01,380 --> 00:03:05,720
Tôi muốn để có được trở lại
các đối tượng tài liệu,

65
00:03:05,720 --> 00:03:07,502
vì vậy tôi có thể bắt đầu để có một cái nhìn vào nó.

66
00:03:07,502 --> 00:03:08,460
Vì vậy, làm thế nào tôi có thể làm điều này?

67
00:03:08,460 --> 00:03:10,740
Vâng, nếu tôi muốn
tổ chức nó thực sự độc đáo,

68
00:03:10,740 --> 00:03:16,317
Tôi sẽ nói console.dir, D-I-R.
Bây giờ, tôi sử dụng console.log để chỉ in

69
00:03:16,317 --> 00:03:17,400
một cái gì đó rất đơn giản.

70
00:03:17,400 --> 00:03:20,450
Nhưng nếu tôi muốn tổ chức này
theo thứ bậc như một đối tượng,

71
00:03:20,450 --> 00:03:23,800
Tôi muốn nó loại cấu trúc
giống như một cấu trúc thư mục.

72
00:03:23,800 --> 00:03:27,400
>> Vì vậy, tôi muốn console.dir tài liệu.

73
00:03:27,400 --> 00:03:28,430
Tôi sẽ nhấn Enter.

74
00:03:28,430 --> 00:03:32,350
Và ngay bên dưới nó bây giờ,
và tôi sẽ phóng to ở đây,

75
00:03:32,350 --> 00:03:36,000
Tôi đã có tài liệu đáp ứng này
với một ít mũi tên bên cạnh nó.

76
00:03:36,000 --> 00:03:39,470
Bây giờ, khi tôi mở mũi tên này,
có đi được rất nhiều thứ.

77
00:03:39,470 --> 00:03:42,560
>> Nhưng chúng ta sẽ bỏ qua rất nhiều
của nó và chỉ cần loại tập trung

78
00:03:42,560 --> 00:03:46,250
trên một phần quan trọng nhất, vì vậy chúng tôi
có thể bắt đầu để di chuyển tài liệu này.

79
00:03:46,250 --> 00:03:50,125
Có rất nhiều chi tiết để các DOM hơn
chỉ các nút và các nút con của phụ huynh.

80
00:03:50,125 --> 00:03:51,500
Có rất nhiều các công cụ phụ trợ.

81
00:03:51,500 --> 00:03:52,280
>> Vì vậy, tôi sẽ mở này lên.

82
00:03:52,280 --> 00:03:54,610
Và có một toàn bộ rất nhiều
thứ mà bật lên.

83
00:03:54,610 --> 00:03:59,000
Nhưng tất cả tôi quan tâm là
ngay tại đây, các nút con.

84
00:03:59,000 --> 00:04:00,410
Chúng ta hãy mở mà lên.

85
00:04:00,410 --> 00:04:03,810
>> Bên trong đó tôi thấy
một cái gì đó quen thuộc, HTML.

86
00:04:03,810 --> 00:04:07,670
Vì vậy, bên trong tài liệu của chúng tôi
một cấp, HTML.

87
00:04:07,670 --> 00:04:08,550
Tôi mở mà lên.

88
00:04:08,550 --> 00:04:10,380
Chúng ta mong đợi những gì?

89
00:04:10,380 --> 00:04:13,760
>> Nếu bạn nhớ lại từ sơ đồ của chúng tôi,
những gì chúng ta nên tìm bên trong HTML?

90
00:04:13,760 --> 00:04:17,275
Những gì hai nút dưới nó trong cây?

91
00:04:17,275 --> 00:04:17,899
Hãy cùng tìm hiểu.

92
00:04:17,899 --> 00:04:18,940
Chúng tôi mở ra HTML.

93
00:04:18,940 --> 00:04:22,079
Chúng tôi đi xuống nút con của nó.

94
00:04:22,079 --> 00:04:23,440
>> Bật mở.

95
00:04:23,440 --> 00:04:25,990
Có đầu và thân.

96
00:04:25,990 --> 00:04:28,540
Và chúng ta có thể mở đầu.

97
00:04:28,540 --> 00:04:30,460
Đến nút con của nó.

98
00:04:30,460 --> 00:04:31,460
Vâng, có tiêu đề.

99
00:04:31,460 --> 00:04:33,293
>> Và chúng tôi có thể đi và
trên như thế này mãi mãi.

100
00:04:33,293 --> 00:04:34,770
Chúng ta có thể làm điều này với cơ thể là tốt.

101
00:04:34,770 --> 00:04:40,090
Nhưng có một cách để chúng ta nhìn vào
các tài liệu được tổ chức như là một đối tượng lớn.

102
00:04:40,090 --> 00:04:42,610
Và nếu chúng ta nhìn vào là một lớn
đối tượng đó trông rất

103
00:04:42,610 --> 00:04:47,480
như mã, điều đó có nghĩa rằng chúng ta có thể bắt đầu
để thao tác đối tượng lớn này bằng cách sử dụng

104
00:04:47,480 --> 00:04:51,220
mã để thay đổi những gì chúng tôi
trang web trông và cảm thấy như thế nào.

105
00:04:51,220 --> 00:04:54,920
>> Vì vậy, đó là một công cụ khá mạnh mẽ
chúng tôi có lúc xử lý của chúng tôi bây giờ.

106
00:04:54,920 --> 00:04:57,360
Vì vậy, như chúng ta vừa thấy, các
tài liệu đối tượng chính nó

107
00:04:57,360 --> 00:05:01,392
và tất cả các đối tượng bên trong của nó
có đặc tính và phương pháp, chỉ

108
00:05:01,392 --> 00:05:04,100
giống như bất kỳ đối tượng khác mà chúng tôi đã
được làm việc với trong JavaScript.

109
00:05:04,100 --> 00:05:08,370
Nhưng chúng ta có thể sử dụng những tài sản và
sử dụng các phương pháp để loại sâu

110
00:05:08,370 --> 00:05:10,900
từ các tài liệu lớn và nhận được
thấp hơn và thấp hơn và thấp hơn,

111
00:05:10,900 --> 00:05:13,360
tốt hơn và tốt hơn các loại ngũ cốc
chi tiết, cho đến khi chúng tôi

112
00:05:13,360 --> 00:05:17,510
có được một mảnh rất cụ thể của chúng tôi
trang web mà chúng tôi muốn thay đổi.

113
00:05:17,510 --> 00:05:22,700
>> Và khi chúng tôi cập nhật thuộc tính của
Tài liệu Object hoặc gọi những phương pháp,

114
00:05:22,700 --> 00:05:24,450
điều có thể xảy ra trên trang web của chúng tôi.

115
00:05:24,450 --> 00:05:28,420
Và chúng ta không cần phải làm bất kỳ làm mới
để có những thay đổi có hiệu lực.

116
00:05:28,420 --> 00:05:33,160
>> Và đó là một khả năng khá mát mẻ để
có khi chúng tôi đang làm việc với mã.

117
00:05:33,160 --> 00:05:37,185
Vì vậy, một số các thuộc tính là gì
đó là một phần của một đối tượng tài liệu?

118
00:05:37,185 --> 00:05:40,100
Vâng, bạn có thể nhìn thấy một
vài trong số họ thực sự nhanh chóng

119
00:05:40,100 --> 00:05:42,700
như chúng tôi đã nén
qua tài liệu khổng lồ

120
00:05:42,700 --> 00:05:45,150
đối tượng, ta chỉ thấy trong các trình duyệt web.

121
00:05:45,150 --> 00:05:48,420
>> Tuy nhiên, một vài trong số này thuộc tính
có thể là những thứ như HTML bên trong.

122
00:05:48,420 --> 00:05:52,950
Và thậm chí bạn có thể gọi lại cho tôi
sử dụng điều này trong đoạn video JavaScript

123
00:05:52,950 --> 00:05:54,950
ở cuối khi tôi
đang nói về các sự kiện.

124
00:05:54,950 --> 00:05:56,125
HTML bên trong này là gì?

125
00:05:56,125 --> 00:05:59,030
Vâng, nó chỉ là những gì
ở giữa các thẻ.

126
00:05:59,030 --> 00:06:01,590
>> Và do đó, HTML bên trong,
Ví dụ, các tiêu đề

127
00:06:01,590 --> 00:06:05,390
tag, nếu chúng ta đã tiếp tục đi trong
rằng ví dụ lúc trước,

128
00:06:05,390 --> 00:06:08,020
sẽ là hello world.

129
00:06:08,020 --> 00:06:10,140
Đó là tiêu đề của trang của chúng tôi.

130
00:06:10,140 --> 00:06:12,370
Các tài sản khác
bao gồm tên nút, mà

131
00:06:12,370 --> 00:06:15,810
là tên của một file HTML
yếu tố như tiêu đề.

132
00:06:15,810 --> 00:06:19,100
ID, đó là ID
thuộc tính của một phần tử HTML.

133
00:06:19,100 --> 00:06:23,790
>> Nhớ lại rằng chúng tôi đặc biệt có thể chỉ ra
các yếu tố cụ thể của HTML của chúng tôi

134
00:06:23,790 --> 00:06:27,510
với một thuộc tính ID, mà thường
có ích trong bối cảnh của CSS,

135
00:06:27,510 --> 00:06:29,000
đặc biệt.

136
00:06:29,000 --> 00:06:33,217
Nút cha, đó là một tham chiếu đến
những gì chỉ lên trên tôi trong DOM.

137
00:06:33,217 --> 00:06:35,800
Và các nút con, mà là một
tham chiếu đến những gì xuống bên dưới tôi.

138
00:06:35,800 --> 00:06:37,950
Và chúng tôi đã thấy rất nhiều mà
chỉ cần nhìn qua.

139
00:06:37,950 --> 00:06:42,970
Nút con, đó là cách chúng tôi đã nhận
thấp hơn và thấp hơn vào cây.

140
00:06:42,970 --> 00:06:46,590
>> Các thuộc tính, đó chỉ là một mảng
các thuộc tính của phần tử HTML.

141
00:06:46,590 --> 00:06:50,270
Vì vậy, một ví dụ về thuộc tính might
được nếu bạn có một thẻ hình ảnh,

142
00:06:50,270 --> 00:06:54,090
nó thường có một thuộc tính nguồn,
có thể là một chiều cao và một thuộc tính chiều rộng.

143
00:06:54,090 --> 00:06:57,120
Và do đó sẽ chỉ là một mảng
của tất cả các thuộc tính liên quan

144
00:06:57,120 --> 00:06:59,300
với phần tử HTML.

145
00:06:59,300 --> 00:07:04,140
>> Phong cách là một số khác mà
đại diện cho sự CSS

146
00:07:04,140 --> 00:07:06,050
kiểu dáng của một yếu tố cụ thể.

147
00:07:06,050 --> 00:07:08,310
Và sau này trong này
video, chúng tôi sẽ đặc biệt

148
00:07:08,310 --> 00:07:14,592
kiểu đòn bẩy để làm cho một cặp vợ chồng
các thay đổi trang web của chúng tôi.

149
00:07:14,592 --> 00:07:15,800
Vì vậy, những người đang có một số tài sản.

150
00:07:15,800 --> 00:07:17,591
>> Và cũng có một số là
phương pháp mà chúng ta có thể

151
00:07:17,591 --> 00:07:22,450
sử dụng để nhanh chóng hơn cũng có thể cô lập
các yếu tố của Document Object.

152
00:07:22,450 --> 00:07:26,730
Có lẽ, sự linh hoạt nhất
số này theo getElementById.

153
00:07:26,730 --> 00:07:31,190
Vì vậy, tôi có thể nói điều gì đó như thế, bởi vì
nhớ đó là một phương pháp của các tài liệu

154
00:07:31,190 --> 00:07:34,880
Object, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Và bên trong những dấu ngoặc đơn, chỉ định
một phần tử HTML với một ID riêng

156
00:07:39,820 --> 00:07:42,330
thuộc tính mà tôi đã từng
thiết lập, và tôi sẽ ngay lập tức

157
00:07:42,330 --> 00:07:46,685
đi đúng cho phần tử đó
của các trang web tổng thể.

158
00:07:46,685 --> 00:07:49,310
Vì vậy, tôi không có để có thể khoan
xuống qua mỗi lớp duy nhất.

159
00:07:49,310 --> 00:07:52,841
Tôi chỉ có thể sử dụng phương pháp này để tìm thấy nó,
loại giống như một tên lửa tìm kiếm nhiệt,

160
00:07:52,841 --> 00:07:53,340
bên phải?

161
00:07:53,340 --> 00:07:56,300
Nó chỉ đi và tìm thấy
chính xác những gì nó đang tìm kiếm.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName là
rất giống nhau trong tinh thần.

163
00:07:59,290 --> 00:08:02,500
Có lẽ điều này sẽ tìm thấy tất cả các
thẻ đậm hoặc tất cả các thẻ p

164
00:08:02,500 --> 00:08:05,920
và đưa cho tôi một mảng của tất cả mọi thứ
mà tôi sau đó có thể làm việc với.

165
00:08:05,920 --> 00:08:12,080
appendChild thêm một cái gì đó
một cấp xuống trong cây.

166
00:08:12,080 --> 00:08:16,440
>> Vì vậy, tôi có thể thêm toàn bộ mới
yếu tố một mức độ thấp hơn.

167
00:08:16,440 --> 00:08:19,700
Hoặc tôi có thể loại bỏ một yếu tố đó là
một cấp thấp hơn cũng như nếu tôi muốn

168
00:08:19,700 --> 00:08:22,870
để xóa một cái gì đó từ trang web của tôi.

169
00:08:22,870 --> 00:08:28,480
Bây giờ, một lưu ý mã hóa nhanh chóng và nhanh chóng
đau đầu tiết kiệm lưu ý, hy vọng.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- các d là chữ thường.

171
00:08:31,670 --> 00:08:36,950
Tôi không thể nói cho bạn biết bao nhiêu lần tôi phải
sử dụng getElementById và hoa

172
00:08:36,950 --> 00:08:38,336
các d có.

173
00:08:38,336 --> 00:08:39,460
Bởi vì nó thực sự phổ biến.

174
00:08:39,460 --> 00:08:42,990
Nếu chúng ta viết các ID từ, đó là
thường vốn tôi vốn D.

175
00:08:42,990 --> 00:08:44,240
Và mã của tôi chỉ không làm việc.

176
00:08:44,240 --> 00:08:45,630
Và tôi không thể tìm ra lý do tại sao.

177
00:08:45,630 --> 00:08:49,490
Đây là một thực sự, thực sự, thực sự
lỗi phổ biến mà mọi người làm,

178
00:08:49,490 --> 00:08:51,890
thậm chí các chuyên gia có
đã làm điều này mãi mãi.

179
00:08:51,890 --> 00:08:55,410
Vì vậy, chỉ cần lưu ý, getElementById,
d đó là chữ thường.

180
00:08:55,410 --> 00:09:00,080
Và hy vọng, giúp bạn tiết kiệm nhiều
phút ít nhất đau lòng.

181
00:09:00,080 --> 00:09:02,204
>> Vậy tất cả những điều này cho chúng ta biết?

182
00:09:02,204 --> 00:09:03,120
Chúng tôi có những phương pháp này.

183
00:09:03,120 --> 00:09:04,161
Chúng tôi có các đặc tính này.

184
00:09:04,161 --> 00:09:06,610
Bây giờ, nếu chúng ta bắt đầu từ
tài liệu, tài liệu.

185
00:09:06,610 --> 00:09:10,220
bất cứ điều gì, chúng ta bây giờ có thể có được để bất kỳ
mảnh duy nhất của trang web của chúng tôi

186
00:09:10,220 --> 00:09:14,870
mà chúng tôi muốn sử dụng JavaScript
chỉ bằng cách gọi các phương pháp

187
00:09:14,870 --> 00:09:19,940
và tận dụng các thuộc tính
mà chúng tôi tìm thấy tại các địa điểm khác nhau.

188
00:09:19,940 --> 00:09:24,890
>> Điều này có thể dài dòng, điều này
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
có thể có một tên tag dài,
có thể bạn làm thêm các cuộc gọi sau này.

190
00:09:28,560 --> 00:09:31,230
Những điều có thể có được một chút dài dòng.

191
00:09:31,230 --> 00:09:34,480
Và như lập trình, như bạn đã
có thể nhìn thấy trong rất nhiều các video,

192
00:09:34,480 --> 00:09:36,600
chúng tôi không thích những thứ dài dòng.

193
00:09:36,600 --> 00:09:38,520
>> Chúng tôi muốn để có thể làm mọi thứ một cách nhanh chóng.

194
00:09:38,520 --> 00:09:42,640
Vì vậy, chúng tôi muốn một nhiều hơn
cách ngắn gọn để nói điều gì đó.

195
00:09:42,640 --> 00:09:46,270
Vì vậy, loại này dẫn đến
khái niệm về một cái gì đó gọi là jQuery.

196
00:09:46,270 --> 00:09:49,170
Bây giờ jQuery không phải là JavaScript.

197
00:09:49,170 --> 00:09:50,350
Đó không phải là một phần của JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Nó là một thư viện mà đã được viết
bởi một số lập trình JavaScript

199
00:09:54,790 --> 00:09:57,060
khoảng 10 năm trước đây.

200
00:09:57,060 --> 00:10:01,300
Và mục tiêu của nó là để đơn giản hóa này có gì
gọi là kịch bản phía máy khách,

201
00:10:01,300 --> 00:10:04,310
về cơ bản là những gì chúng tôi đã chỉ
nói về với thao tác DOM.

202
00:10:04,310 --> 00:10:11,090
Và vì vậy nếu tôi muốn thay đổi
màu nền của trang web của tôi, có lẽ

203
00:10:11,090 --> 00:10:11,980
một Div cụ thể.

204
00:10:11,980 --> 00:10:15,325
>> Ở đây, tôi dường như nhận được
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Và tôi muốn thiết lập màu nền của nó.

206
00:10:16,950 --> 00:10:20,720
Nếu tôi chỉ sử dụng JavaScript tinh khiết
sử dụng Document Object Model,

207
00:10:20,720 --> 00:10:23,990
đó là rất nhiều thứ, phải không?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = màu xanh lá cây.

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

210
00:10:27,260 --> 00:10:28,050
>> Whew.

211
00:10:28,050 --> 00:10:30,110
Đó là rất nhiều để nói.

212
00:10:30,110 --> 00:10:31,720
Đó là rất nhiều để gõ, quá.

213
00:10:31,720 --> 00:10:35,760
Và như vậy trong jQuery, chúng ta có thể có thể nói
này một chút chính xác hơn.

214
00:10:35,760 --> 00:10:39,350
Các thương mại giảm là nó có thể là một chút
chút khó hiểu hơn tất cả của một đột ngột,

215
00:10:39,350 --> 00:10:39,850
bên phải?

216
00:10:39,850 --> 00:10:43,580
>> Ít nhất là dài hơn một chút
giải thích như những gì chúng tôi đang làm.

217
00:10:43,580 --> 00:10:49,947
Ký hiệu đô la này, dấu ngoặc đơn,
báo duy nhất, băm, colorDiv, phải không?

218
00:10:49,947 --> 00:10:50,780
Điều đó có nghĩa là gì?

219
00:10:50,780 --> 00:10:53,640
Vâng, đó là về cơ bản chỉ
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Nhưng đó là loại này viết tắt
cách làm việc đó bằng cách sử dụng jQuery.

221
00:10:58,700 --> 00:11:01,380
Hãy chỉ có một cái nhìn doanh nghiệp
ở một vài cách khác nhau

222
00:11:01,380 --> 00:11:04,520
mà tôi có thể thực sự
sử dụng Document Object này

223
00:11:04,520 --> 00:11:06,807
Mô hình để thao tác phần của trang web của tôi.

224
00:11:06,807 --> 00:11:09,140
Đặc biệt, chúng ta đang đi
được làm việc trên thao tác

225
00:11:09,140 --> 00:11:14,090
màu sắc của một cụ thể
Div, colorDiv, trên một trang web.

226
00:11:14,090 --> 00:11:15,299
Vì vậy, chúng ta hãy nhìn vào đó.

227
00:11:15,299 --> 00:11:15,798
Được rồi.

228
00:11:15,798 --> 00:11:16,700
Vì vậy, tôi đang trên một trang.

229
00:11:16,700 --> 00:11:20,750
Nó được gọi là test.html khi bạn tải về
này nếu bạn muốn chắp vá với điều này.

230
00:11:20,750 --> 00:11:24,730
Và tôi đã có một bó của
nút trên trang này.

231
00:11:24,730 --> 00:11:27,730
Và tôi nói chức năng cá nhân
cho màu nền, màu tím, màu xanh lá cây,

232
00:11:27,730 --> 00:11:31,330
cam, đỏ, xanh, một chức năng duy nhất
cho màu nền, xử lý sự kiện

233
00:11:31,330 --> 00:11:34,360
cho màu nền, và sử dụng jQuery.

234
00:11:34,360 --> 00:11:38,147
Tôi đang nói về cái gì
khi tôi đang làm điều này?

235
00:11:38,147 --> 00:11:39,230
Vì vậy, chúng tôi đã nhìn thấy các nút.

236
00:11:39,230 --> 00:11:41,521
Bây giờ, chúng ta hãy nhìn vào
một số các mã nguồn ở đây.

237
00:11:41,521 --> 00:11:44,770
Chúng tôi sẽ bắt đầu với test.html.

238
00:11:44,770 --> 00:11:48,100
Vì vậy, các chức năng cá nhân cho nền
màu sắc là những gì tôi đã nhập ở đây.

239
00:11:48,100 --> 00:11:49,350
Hãy để tôi di chuyển một chút.

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

241
00:11:56,170 --> 00:11:58,820
>> Và bạn sẽ nhận thấy tôi rằng
đã xác định các nút

242
00:11:58,820 --> 00:12:03,990
để nói khi nút này được nhấn vào,
gọi hàm tím.

243
00:12:03,990 --> 00:12:06,670
Khi nút này được nhấn, thay,
gọi hàm chuyển sang màu xanh,

244
00:12:06,670 --> 00:12:08,710
chuyển sang màu cam, màu đỏ, chuyển sang màu xanh.

245
00:12:08,710 --> 00:12:11,880
Bạn có thể đoán rằng đây
có lẽ không phải là thiết kế tốt nhất

246
00:12:11,880 --> 00:12:12,460
ý nghĩa, phải không?

247
00:12:12,460 --> 00:12:16,490
>> Nó sẽ được tốt đẹp nếu tôi có thể
có một cách tiếp cận tổng quát hơn.

248
00:12:16,490 --> 00:12:19,570
Vâng, đầu tiên chúng ta sẽ có một cái nhìn
vào những gì những năm chức năng là

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = tím,

250
00:12:24,400 --> 00:12:27,250
màu xanh lá cây, cam, đỏ,
và màu xanh, tương ứng.

251
00:12:27,250 --> 00:12:30,930
Vì vậy, không đặc biệt thiết kế tốt nhất.

252
00:12:30,930 --> 00:12:33,390
>> Các tập tiếp theo của nút
Tôi đã được tôi đã viết

253
00:12:33,390 --> 00:12:36,380
một chức năng duy nhất được gọi là
thay đổi màu sắc mà dường

254
00:12:36,380 --> 00:12:38,960
chấp nhận một chuỗi như là đối số của nó.

255
00:12:38,960 --> 00:12:40,290
Vì vậy, đây là một chút tốt hơn.

256
00:12:40,290 --> 00:12:43,840
Tím, xanh lá cây, cam, đỏ,
màu xanh bây giờ là một đối số.

257
00:12:43,840 --> 00:12:46,230
Vì vậy, tôi đã viết một tổng quát hơn
Trường hợp chức năng Javascript,

258
00:12:46,230 --> 00:12:47,771
mà có thể giống như thế này.

259
00:12:47,771 --> 00:12:48,680
Tôi đang đi qua trong.

260
00:12:48,680 --> 00:12:52,090
Màu sắc thay đổi chức năng này
mong đợi một đối số được gọi là màu sắc.

261
00:12:52,090 --> 00:12:54,970
Và tôi nói đặt
màu nền cho màu sắc.

262
00:12:54,970 --> 00:12:58,390
Vì vậy, ở đây đại diện cho những gì tôi đã có ở đây.

263
00:12:58,390 --> 00:12:59,770
Vì vậy, đó là một chút tốt hơn.

264
00:12:59,770 --> 00:13:02,740
>> Nhưng tôi có thể có thể
làm tốt hơn thế.

265
00:13:02,740 --> 00:13:06,140
Nếu chúng tôi đi xuống để có một cái nhìn
vào tình hình xử lý sự kiện,

266
00:13:06,140 --> 00:13:07,860
bây giờ tất cả các cuộc gọi đều giống nhau.

267
00:13:07,860 --> 00:13:10,340
Nếu bạn gọi lại cho chúng tôi
thảo luận về xử lý sự kiện,

268
00:13:10,340 --> 00:13:15,770
Tôi có thể nhận được thông tin về mà trong
các nút này được nhấn và sử dụng đó.

269
00:13:15,770 --> 00:13:19,560
>> Và như vậy trong event.JavaScript, tôi đã
bằng văn bản sự kiện thay đổi màu sắc, mà

270
00:13:19,560 --> 00:13:21,110
con số ra nút đó được nhấp.

271
00:13:21,110 --> 00:13:23,250
Đó là dòng đối tượng cò.

272
00:13:23,250 --> 00:13:25,240
Và sau đó ở đây, nó được thực sự dài dòng.

273
00:13:25,240 --> 00:13:27,420
Nhưng những gì tôi đang làm tôi là
thiết lập nền

274
00:13:27,420 --> 00:13:30,340
màu để triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Đó là các văn bản trong
giữa các thẻ nút.

276
00:13:34,170 --> 00:13:36,500
>> Và sau đó tôi dường như có
để thiết lập nó thành chữ thường.

277
00:13:36,500 --> 00:13:40,780
Và đó là cách tôi có thể chuyển đổi toàn bộ một
string thành chữ thường trong JavaScript sử dụng

278
00:13:40,780 --> 00:13:42,940
phương pháp mà thành chữ thường.

279
00:13:42,940 --> 00:13:46,570
Bởi vì khi tôi thiết lập một màu,
như tôi đang cố gắng để làm ở đây,

280
00:13:46,570 --> 00:13:48,260
màu sắc có được tất cả các chữ thường.

281
00:13:48,260 --> 00:13:50,920
>> Nhưng các nút mà tôi đã có,
nếu chúng ta có một cái nhìn khác,

282
00:13:50,920 --> 00:13:55,890
nhận thấy rằng các văn bản có
bằng văn bản với một P vốn cho màu tím.

283
00:13:55,890 --> 00:13:59,140
Và sau đó ở rất
dưới đây, tôi dường

284
00:13:59,140 --> 00:14:02,630
cố gắng và làm được điều này bằng cách sử dụng jQuery là tốt.

285
00:14:02,630 --> 00:14:06,000
Và trong trường hợp này, tôi không thực sự
gọi một chức năng nào cả.

286
00:14:06,000 --> 00:14:11,430
Tôi vừa nói trong lớp mà tôi
sử dụng cho nút này là một nút JQ.

287
00:14:11,430 --> 00:14:12,360
Đó là nó.

288
00:14:12,360 --> 00:14:14,950
>> Vì vậy, làm thế nào jQuery biết những gì tôi đang làm?

289
00:14:14,950 --> 00:14:18,740
Vâng, đây là một trong những lợi thế
giảm nhược điểm của jQuery.

290
00:14:18,740 --> 00:14:21,560
Nó có thể cho phép tôi làm điều
rất chính xác, nhưng có lẽ không

291
00:14:21,560 --> 00:14:22,570
là trực giác.

292
00:14:22,570 --> 00:14:25,570
Có lẽ những người ba khác làm cho một
hơn chút cảm nhận những gì tôi đang làm.

293
00:14:25,570 --> 00:14:29,010
Ở đây, tuy nhiên, những gì đang xảy ra?

294
00:14:29,010 --> 00:14:31,940
>> Rõ ràng, sáng tạo
một chức năng ẩn danh

295
00:14:31,940 --> 00:14:36,790
mà tải bất cứ khi nào tài liệu của tôi
sẵn sàng, vì vậy document.ready,

296
00:14:36,790 --> 00:14:38,760
một số chức năng sẽ xảy ra.

297
00:14:38,760 --> 00:14:40,490
Về cơ bản, khi là một tài liệu đã sẵn sàng?

298
00:14:40,490 --> 00:14:42,310
Đó là khi trang của tôi đã được nạp.

299
00:14:42,310 --> 00:14:46,540
>> Vì vậy, ngay sau khi trang của tôi đã được nạp,
chức năng sau đây luôn luôn sẵn sàng.

300
00:14:46,540 --> 00:14:54,310
Nó nói, nếu một đối tượng kiểu jQButton,
hoặc nếu lớp jQButton đã được nhấn vào,

301
00:14:54,310 --> 00:14:55,570
thực hiện chức năng này.

302
00:14:55,570 --> 00:14:59,360
Vì vậy, đây là hai chức năng ẩn danh,
một định nghĩa bên trong của người khác.

303
00:14:59,360 --> 00:15:03,930
>> Vì vậy, toàn bộ bối cảnh của tôi
đây cho đến nay là trang của tôi

304
00:15:03,930 --> 00:15:06,520
khi nó tải nó gọi chức năng này.

305
00:15:06,520 --> 00:15:09,740
Và chức năng này được chờ đợi
cho một nút được bấm.

306
00:15:09,740 --> 00:15:14,490
Và khi một nút được nhấn vào, JQ
nút cụ thể chỉ được nhấp,

307
00:15:14,490 --> 00:15:17,150
nó gọi khác này
chức năng, mà là có

308
00:15:17,150 --> 00:15:21,250
để thiết lập nền
màu sắc của colorDiv được

309
00:15:21,250 --> 00:15:25,990
bất cứ văn bản là ở giữa các thẻ.

310
00:15:25,990 --> 00:15:28,050
>> Đây là khái niệm
nút đó được nhấp.

311
00:15:28,050 --> 00:15:31,230
Nhưng mặt khác, đây là loại
hành xử tương tự như một sự kiện.

312
00:15:31,230 --> 00:15:34,460
Nó chỉ giống như cách tôi
sẽ thể hiện điều này trong jQuery.

313
00:15:34,460 --> 00:15:36,790
Một lần nữa, nó có thể là một
rất nhiều đáng sợ hơn.

314
00:15:36,790 --> 00:15:40,840
Nó không phải là rõ ràng như
một cái gì đó giống như event.js,

315
00:15:40,840 --> 00:15:45,080
đó là có thể nhiều hơn một chút
dài dòng, nhưng ít hơn một chút

316
00:15:45,080 --> 00:15:46,000
đáng sợ.

317
00:15:46,000 --> 00:15:51,460
>> Nhưng nếu chúng ta bật lại qua trình duyệt của tôi
cửa sổ, nếu tôi bắt đầu clicking-- tốt,

318
00:15:51,460 --> 00:15:52,690
làm thay đổi sang màu tím.

319
00:15:52,690 --> 00:15:54,450
Đây là màu xanh lá cây bằng cách sử dụng phương pháp chuỗi.

320
00:15:54,450 --> 00:15:56,500
Đây là cam sử dụng xử lý sự kiện.

321
00:15:56,500 --> 00:15:58,300
>> Đây là màu đỏ bằng cách sử dụng jQuery, phải không?

322
00:15:58,300 --> 00:16:01,270
Tất cả họ đều cư xử chính xác như nhau.

323
00:16:01,270 --> 00:16:06,509
Họ chỉ làm điều đó bằng cách sử dụng khác nhau
phương pháp tiếp cận để giải quyết vấn đề.

324
00:16:06,509 --> 00:16:08,550
Có rất nhiều chi tiết để
jQuery sau đó chúng tôi chắc chắn

325
00:16:08,550 --> 00:16:10,050
sẽ nói về trong video này.

326
00:16:10,050 --> 00:16:15,410
Nhưng nếu bạn muốn tìm hiểu thêm, bạn có thể
đi đến jQuery loại tài liệu

327
00:16:15,410 --> 00:16:19,710
và tìm hiểu thêm một chút về
thư viện rất linh hoạt này, mà

328
00:16:19,710 --> 00:16:22,550
là tuyệt vời để làm phía khách hàng
kịch bản như những gì chúng tôi đã làm

329
00:16:22,550 --> 00:16:26,240
để thao tác xem
và cảm nhận của trang web của chúng tôi

330
00:16:26,240 --> 00:16:28,750
với Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Tôi Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Đây là CS50.

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