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

2
00:00:04,439 --> 00:00:07,230
ДАГ Lloyd: В этом видео мы хотели
чтобы вызвать отдельного внимания

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
объект и объект р по пункту

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
>> И я открыл Developer Tools.

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-I-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
Я ударю Enter.

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
Объект мы только что видели в веб-браузере.

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, который является идентификатором
атрибут 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
>> А внутри этих скобок, укажите
HTML-элемент с определенной ID

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
Может быть, это будет найти все из
смелые теги и все р тегов

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-- Д в нижнем регистре.

171
00:08:31,670 --> 00:08:36,950
Я не могу сказать вам, сколько раз я должен
б getElementById и капитализируются

172
00:08:36,950 --> 00:08:38,336
Д есть.

173
00:08:38,336 --> 00:08:39,460
Потому что это действительно общее.

174
00:08:39,460 --> 00:08:42,990
Если мы пишем слово ID, это
как правило, капитал Капитал I Д.

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,
что г в нижнем регистре.

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
с использованием Document Object Model,

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
что я на самом деле может
Используйте этот объект Document

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
заметить, что текст есть
написано с большой буквы для фиолетовый.

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