1
00:00:00,000 --> 00:00:04,563
[МУЗЫКА].

2
00:00:04,563 --> 00:00:09,231
Давайте теперь потратим некоторое время, пытаясь понять, как Bootstrap и

3
00:00:09,231 --> 00:00:14,770
jQuery работают вместе для поддержки компонентов JavaScript Bootstrap.

4
00:00:16,310 --> 00:00:21,110
Как мы уже поняли из предыдущего модуля, Bootstrap

5
00:00:21,110 --> 00:00:26,410
имеет ряд интересных компонентов на основе JavaScript.

6
00:00:26,410 --> 00:00:30,871
И мы также узнали, что компоненты на основе JavaScript Bootstrap

7
00:00:30,871 --> 00:00:34,440
включены с использованием jQuery в качестве поддержки.

8
00:00:34,440 --> 00:00:38,160
Так многие из этих плагинов написаны в jQuery.

9
00:00:38,160 --> 00:00:41,780
Их плагины сами могут быть включены индивидуально или

10
00:00:41,780 --> 00:00:45,950
вы можете включить все плагины вместе как единое целое.

11
00:00:45,950 --> 00:00:50,350
В упражнениях мы включили все

12
00:00:50,350 --> 00:00:53,815
плагины JavaScript Bootstrap в нашу веб-страницу.

13
00:00:55,040 --> 00:00:58,350
Мы также видели эту графику в предыдущем модуле,

14
00:00:58,350 --> 00:01:03,160
чтобы помочь нам понять связь между JavaScript, jQuery и

15
00:01:03,160 --> 00:01:07,740
как реализованы JS-плагины Bootstrap.

16
00:01:07,740 --> 00:01:14,820
Таким образом, мы увидели, что компоненты JS Bootstrap в компонентах на основе JQuery и

17
00:01:14,820 --> 00:01:18,538
упрощают их использование на нашей веб-странице.

18
00:01:18,538 --> 00:01:25,200
Мы также узнали, что компоненты на основе JavaScript Bootstrap могут быть использованы

19
00:01:25,200 --> 00:01:31,010
на вашей веб-странице без написания одной строки кода JavaScript.

20
00:01:31,010 --> 00:01:38,860
Вот где атрибуты данных* приходят нам на помощь.

21
00:01:38,860 --> 00:01:44,133
Таким образом, вы можете использовать различные атрибуты, которые мы видели в предыдущем

22
00:01:44,133 --> 00:01:50,910
модуле, чтобы включить многие из компонентов на основе JavaScript Bootstrap.

23
00:01:50,910 --> 00:01:55,705
Если вы хотите больше гибкости с вашими компонентами JavaScript,

24
00:01:55,705 --> 00:02:00,405
то полная гибкость этого API на основе JavaScript

25
00:02:00,405 --> 00:02:05,565
доступна для всех компонентов Bootstrap JavaScript.

26
00:02:05,565 --> 00:02:10,875
Вы можете написать код, используя синтаксис jQuery, а затем использовать

27
00:02:10,875 --> 00:02:16,025
его вместе для управления JS-компонентами Bootstrap.

28
00:02:16,025 --> 00:02:20,350
Мы рассмотрим это чуть более подробно в этом модуле.

29
00:02:20,350 --> 00:02:26,080
Прежде чем мы продолжим дальше, позвольте мне дать вам быстрый обзор jQuery и его синтаксиса

30
00:02:26,080 --> 00:02:32,030
, чтобы мы поняли некоторые из кода, который мы напишем в этом модуле.

31
00:02:32,030 --> 00:02:33,830
jQuery - это очень мощная,

32
00:02:33,830 --> 00:02:39,810
легкая библиотека на основе JavaScript, которая предоставляет ряд различных компонентов.

33
00:02:39,810 --> 00:02:45,100
Это богатая библиотека, которая позволяет писать код для

34
00:02:45,100 --> 00:02:47,880
выполнения HTML или DOM манипуляции.

35
00:02:47,880 --> 00:02:50,170
Это позволяет выполнять манипуляции CSS.

36
00:02:50,170 --> 00:02:50,910
Так, например,

37
00:02:50,910 --> 00:02:56,840
вы можете применить классы CSS к различным элементам HTML через код jQuery.

38
00:02:56,840 --> 00:03:00,860
Это позволяет обрабатывать события HTML,

39
00:03:00,860 --> 00:03:05,920
и когда эти события происходят, вы можете реализовать методы, которые выполняются

40
00:03:05,920 --> 00:03:08,565
в ответ на возникновение этих событий.

41
00:03:08,565 --> 00:03:11,160
jQuery также поддерживает различные эффекты и

42
00:03:11,160 --> 00:03:15,410
анимации, которые могут быть применены к вашим HTML-элементам.

43
00:03:15,410 --> 00:03:22,650
Также jQuery позволяет взаимодействовать с серверным сервером, используя AJAX.

44
00:03:22,650 --> 00:03:27,390
Хотя мы не будем подробно разбираться в этом курсе.

45
00:03:27,390 --> 00:03:31,937
Мы также узнали, что компоненты JavaScript Bootstrap

46
00:03:31,937 --> 00:03:34,310
построены на jQuery.

47
00:03:34,310 --> 00:03:39,480
Эти компоненты используют многие из методов jQuery, которые доступны для

48
00:03:39,480 --> 00:03:45,340
реализации различных функций, которые поддерживают эти компоненты Bootstrap JavaScript.

49
00:03:45,340 --> 00:03:48,120
Давайте кратко рассмотрим синтаксис jQuery.

50
00:03:48,120 --> 00:03:53,150
Теперь, если вы видели код, который мы включили

51
00:03:53,150 --> 00:03:57,700
в предыдущий модуль, специально для

52
00:03:57,700 --> 00:04:03,210
подсказки, вы помните, что что-то начиналось со знака доллара.

53
00:04:03,210 --> 00:04:09,780
Таким образом, синтаксис jQuery реализован с использованием знака доллара.

54
00:04:09,780 --> 00:04:19,113
Знак доллара в начале предложения означает, что это определяет и

55
00:04:19,113 --> 00:04:26,070
обращается к библиотечным плагинам jQuery, которые доступны.

56
00:04:26,070 --> 00:04:31,070
Теперь, когда мы используем знак доллара, вы также поставляете селектор.

57
00:04:31,070 --> 00:04:34,920
Селектор используется для запроса и поиска тех

58
00:04:34,920 --> 00:04:40,270
элементов HTML в вашем DOM, к которым вы хотите применить эту манипуляцию.

59
00:04:40,270 --> 00:04:42,795
Существуют различные способы сделать выбор.

60
00:04:42,795 --> 00:04:46,030
Посмотрим на них на следующем слайде.

61
00:04:47,550 --> 00:04:54,670
Затем третьим аспектом оператора jQuery является действие, которое вы указываете.

62
00:04:54,670 --> 00:04:59,390
Теперь, когда вы выбираете элемент HTML, какое действие вы хотите выполнить

63
00:04:59,390 --> 00:05:02,700
на этом элементе, так что это третья часть, которую вы увидите.

64
00:05:02,700 --> 00:05:09,032
Таким образом, в качестве примера вы можете указать оператор jQuery

65
00:05:09,032 --> 00:05:15,540
, например $ («p») в кодах, а затем .hide.

66
00:05:15,540 --> 00:05:20,268
Таким образом, в этом случае это означает, что, выберите все те элементы HTML,

67
00:05:20,268 --> 00:05:24,690
которые являются элементами абзаца,

68
00:05:24,690 --> 00:05:30,440
начиная с тега p, а затем эти элементы скрывают эти элементы.

69
00:05:30,440 --> 00:05:33,210
Таким образом, действие, которое должно быть выполнено, - это высота,

70
00:05:33,210 --> 00:05:38,150
поэтому это приведет к тому, что все элементы p будут скрыты от вашего

71
00:05:39,400 --> 00:05:43,050
DOM и, следовательно, от отображаемой веб-страницы.

72
00:05:44,510 --> 00:05:49,165
Аналогично, вы увидите позже на нас, используя

73
00:05:49,165 --> 00:05:53,288
заявление, например, доллар, а

74
00:05:53,288 --> 00:05:58,608
затем в кавычках, #mycarousel,

75
00:05:58,608 --> 00:06:06,189
подразумевая, что вы указываете идентификатор определенного элемента HTML,

76
00:06:06,189 --> 00:06:10,970
а затем указывая карусель и паузу.

77
00:06:10,970 --> 00:06:14,340
Мы рассмотрим более подробную информацию о том, что это на самом

78
00:06:14,340 --> 00:06:16,930
деле делает на одном из последующих слайдов.

79
00:06:16,930 --> 00:06:22,870
Но обратите внимание на структуру синтаксиса оператора jQuery там.

80
00:06:22,870 --> 00:06:27,040
Укажите селектор, а затем укажите соответствующее действие, которое будет

81
00:06:27,040 --> 00:06:32,360
выполняться на элементе, который выбран этими селекторами.

82
00:06:32,360 --> 00:06:36,335
Давайте посмотрим на пример Bootstrap jQuery.

83
00:06:36,335 --> 00:06:41,490
Мы вернемся к предыдущему примеру, который мы видели ранее,

84
00:06:41,490 --> 00:06:43,410
где мы вводим всплывающую подсказку.

85
00:06:43,410 --> 00:06:47,480
Итак, когда мы вводим всплывающую подсказку, мы указали скрипт, а

86
00:06:47,480 --> 00:06:50,940
затем внутри скрипта, мы сказали $ (document).

87
00:06:50,940 --> 00:06:53,800
В этом случае документ означает весь документ.

88
00:06:53,800 --> 00:06:56,510
Таким образом, выбранный здесь для всего документа.

89
00:06:56,510 --> 00:07:01,010
Так что для всего документа, и тогда мы уточним готовый.

90
00:07:01,010 --> 00:07:02,790
Готовы действия, которые необходимо предпринять.

91
00:07:02,790 --> 00:07:07,760
Поэтому, когда документ готов, затем выполните эту функцию, которая

92
00:07:07,760 --> 00:07:11,500
указана в качестве параметра для этого готового действия там.

93
00:07:11,500 --> 00:07:17,710
Таким образом, функция, которую мы видели, используется для всплывающей подсказки, указывала его как $, а

94
00:07:17,710 --> 00:07:23,470
затем в скобках, он сказал, data-toggle=» tooltip».

95
00:07:23,470 --> 00:07:28,240
Теперь здесь мы указываем, что выбираем те элементы, для

96
00:07:28,240 --> 00:07:33,260
которых есть атрибут с data-toggle="tooltip».

97
00:07:33,260 --> 00:07:38,290
А затем для тех элементов, которые соответствуют этому критерию, выполните это действие,

98
00:07:38,290 --> 00:07:43,270
называемое включением всплывающих подсказок для этих элементов.

99
00:07:43,270 --> 00:07:47,580
И мы закрываем функцию там.

100
00:07:47,580 --> 00:07:52,890
Таким образом, это указывает, что этот конкретный скрипт

101
00:07:52,890 --> 00:07:57,640
будет активирован для тех элементов, для которых вы применили всплывающую подсказку data-toggle.

102
00:07:57,640 --> 00:08:02,840
Поэтому в основном для тех элементов HTML, на которых вы определили всплывающие подсказки,

103
00:08:02,840 --> 00:08:05,770
вы хотите, чтобы всплывающая подсказка была включена там.

104
00:08:05,770 --> 00:08:12,800
Так вот как мы интерпретируем этот синтаксис этого примера jQuery здесь.

105
00:08:12,800 --> 00:08:18,340
Давайте рассмотрим различные способы указания селекторов.

106
00:08:18,340 --> 00:08:23,490
Таким образом, как мы понимаем из синтаксиса оператора jQuery,

107
00:08:23,490 --> 00:08:28,240
мы всегда следуем доллару, а затем, в скобках, мы указываем селектор.

108
00:08:28,240 --> 00:08:32,990
Как указать селекторы, каковы различные способы, которые вы можете указать селекторы?

109
00:08:32,990 --> 00:08:35,450
Вот некоторые возможности.

110
00:08:35,450 --> 00:08:38,900
Вы можете указать селектор, указав любой конкретный

111
00:08:38,900 --> 00:08:41,960
HTML-элемент, указав тег.

112
00:08:41,960 --> 00:08:46,050
Таким образом, вы можете сказать p, button,

113
00:08:46,050 --> 00:08:50,315
h4, h3 или любой из HTML-тегов напрямую.

114
00:08:50,315 --> 00:08:54,725
И поэтому в этом случае имя HTML-тега указано в кавычках

115
00:08:54,725 --> 00:08:56,475
, и это сформирует ваш селектор.

116
00:08:56,475 --> 00:09:00,225
Когда вы применяете селектор, как это, вы говорите, что все элементы, соответствующие

117
00:09:00,225 --> 00:09:05,673
этому критерию, будут выбраны.

118
00:09:06,950 --> 00:09:11,920
Затем вы также можете указать конкретный HTML DOM

119
00:09:11,920 --> 00:09:16,640
элемент, указав идентификатор этого элемента с помощью #id.

120
00:09:16,640 --> 00:09:20,990
Так, например, мы используем #myCarousel.

121
00:09:20,990 --> 00:09:26,480
Поэтому в этом случае вы говорите, выберите тот конкретный

122
00:09:26,480 --> 00:09:31,119
HTML-элемент, для которого идентификатор является MyCarousel.

123
00:09:31,119 --> 00:09:36,500
Таким образом, это другой способ выбора, указав идентификатор для элемента.

124
00:09:37,550 --> 00:09:40,620
Третья возможность - выбрать

125
00:09:40,620 --> 00:09:44,440
элементы по классам, которые применили к этому.

126
00:09:44,440 --> 00:09:50,180
Так, например, вы можете видеть в скобках, если вы скажете .btn,

127
00:09:50,180 --> 00:09:53,477
то есть

128
00:09:53,477 --> 00:09:58,702
будут выбраны все элементы HTML DOM, для которых вы применили класс кнопки.

129
00:09:58,702 --> 00:10:03,670
Или вы можете еще больше квалифицироваться, указав группу классов,

130
00:10:03,670 --> 00:10:08,550
сказав .btn.btn-default, что означает, что те элементы, для

131
00:10:08,550 --> 00:10:14,080
которых класс кнопки и класс по умолчанию кнопки были применены.

132
00:10:15,290 --> 00:10:16,620
Так что это другой способ,

133
00:10:16,620 --> 00:10:19,607
используя классы, которые применяются к элементу HTML.

134
00:10:20,630 --> 00:10:25,070
Другая возможность заключается в том, чтобы указать атрибут, который был применен

135
00:10:25,070 --> 00:10:27,120
к элементу HTML.

136
00:10:27,120 --> 00:10:33,150
Так, например, вы можете сказать, что атрибуты указаны в квадратных скобках здесь.

137
00:10:33,150 --> 00:10:38,640
Таким образом, вы можете видеть в квадратных скобках href и включить его в кавычку,

138
00:10:38,640 --> 00:10:44,370
что означает, что все те HTML-элементы, для которых был применен атрибут href.

139
00:10:44,370 --> 00:10:47,920
Аналогично, вы можете сказать data-toggle="tooltip»,

140
00:10:47,920 --> 00:10:50,630
который по существу сохраняет все те элементы, для

141
00:10:50,630 --> 00:10:53,745
которых был применен атрибут tooltip data-toggle.

142
00:10:53,745 --> 00:10:59,270
Кроме того, выбрав текущий элемент

143
00:10:59,270 --> 00:11:04,900
, для которого вы хотите что-то сделать, сказав $ (это).

144
00:11:04,900 --> 00:11:08,360
Поэтому смысл, для текущего элемента, который уже был выбран, для

145
00:11:08,360 --> 00:11:10,360
этого сделайте что-то.

146
00:11:11,520 --> 00:11:14,900
И гораздо больше других возможностей.

147
00:11:14,900 --> 00:11:19,760
Итак, это несколько примеров, поэтому вы увидите, что я использую некоторые из них

148
00:11:19,760 --> 00:11:23,610
в примерах и упражнении, которое следует.

149
00:11:24,650 --> 00:11:29,950
Мало того, что вы также можете указать события jQuery,

150
00:11:29,950 --> 00:11:34,840
события, на основе которых вы отвечаете.

151
00:11:34,840 --> 00:11:37,720
Так, например, взаимодействие пользователя

152
00:11:37,720 --> 00:11:42,590
с различными элементами на вашей веб-странице вызовет события DOM.

153
00:11:42,590 --> 00:11:47,220
Так, например, с помощью мыши пользователь может щелкнуть в определенном месте.

154
00:11:47,220 --> 00:11:52,790
Или дважды щелкните, или когда мышь входит и покидает определенное место.

155
00:11:52,790 --> 00:11:56,880
Для клавиатуры вы можете реагировать на нажатия клавиш, нажатия клавиш и нажатия клавиш.

156
00:11:57,980 --> 00:12:01,680
События для форм, когда форма отправлена,

157
00:12:01,680 --> 00:12:05,870
когда происходит изменение

158
00:12:07,040 --> 00:12:13,230
значения определенного входного элемента, и когда конкретный элемент фокусируется, и так далее.

159
00:12:13,230 --> 00:12:16,140
Мы можем даже поговорить обо всем документе.

160
00:12:16,140 --> 00:12:20,080
Таким образом, при загрузке документа, при изменении размера документа,

161
00:12:20,080 --> 00:12:24,920
при прокрутке или выгрузке документа, вы можете реагировать на эти события.

162
00:12:24,920 --> 00:12:31,253
Таким образом, в этом случае поддерживаемые методы событий jQuery включают готовые,

163
00:12:31,253 --> 00:12:35,140
click, dblclick, mousedown, on и т. Д.

164
00:12:35,140 --> 00:12:38,430
Таким образом, это все методы событий, которые

165
00:12:38,430 --> 00:12:42,770
будут выполняться при возникновении любого из этих событий там.

166
00:12:43,850 --> 00:12:48,480
Давайте рассмотрим пример карусели Bootstrap, чтобы увидеть, как

167
00:12:48,480 --> 00:12:53,640
код JavaScript может быть написан для управления действиями карусели.

168
00:12:54,980 --> 00:13:01,490
Итак, для карусели, вы видели уже из предыдущего модуля, размер индекса.

169
00:13:01,490 --> 00:13:03,584
Мы использовали все эти атрибуты.

170
00:13:03,584 --> 00:13:08,250
Поэтому мы использовали атрибут data-slide = «prev|next», или

171
00:13:08,250 --> 00:13:13,780
мы сказали data-slide-to, а затем указали конкретный номер слайда,

172
00:13:13,780 --> 00:13:16,910
где он говорит data-ride+"carousel».

173
00:13:16,910 --> 00:13:21,570
Затем мы определили интервал данных,

174
00:13:21,570 --> 00:13:25,800
интервал для скользящего действия.

175
00:13:25,800 --> 00:13:29,590
Таким образом, для карусели вы можете делать такие вещи, как,

176
00:13:29,590 --> 00:13:33,076
например, вы можете указать элементы управления на основе JavaScript.

177
00:13:33,076 --> 00:13:38,674
Вы можете увидеть $, и в скобках указать, чтобы выбрать те элементы,

178
00:13:38,674 --> 00:13:44,565
карусели, которые включены в вашу страницу, указав .carousel.

179
00:13:44,565 --> 00:13:50,577
Значение всех тех элементов, для которых был применен класс карусели,

180
00:13:50,577 --> 00:13:56,700
а затем после этого вы используете карусель, чтобы указать что-то.

181
00:13:56,700 --> 00:14:00,580
Итак, в качестве примера вы увидите, что я использую что-то вроде этого

182
00:14:00,580 --> 00:14:02,090
в следующем упражнении.

183
00:14:02,090 --> 00:14:05,400
Мы скажем карусель и карусель, и

184
00:14:05,400 --> 00:14:09,409
внутри там вы указываете интервал: 2000,

185
00:14:09,409 --> 00:14:15,140
что означает установить интервал для скольжения 2000 миллисекунд.

186
00:14:15,140 --> 00:14:17,620
Или две секунды, в данном случае.

187
00:14:17,620 --> 00:14:22,850
Таким образом, вы контролируете или изменяете конкретное свойство

188
00:14:22,850 --> 00:14:27,890
элемента JavaScript карусели там.

189
00:14:27,890 --> 00:14:32,160
Карусель также поддерживает многие другие элементы управления.

190
00:14:32,160 --> 00:14:35,020
Так, например, вы можете сказать карусель ('cycle'),

191
00:14:35,020 --> 00:14:38,730
что означает начать цикл элементов слева направо.

192
00:14:38,730 --> 00:14:44,410
Можно сказать карусель («пауза»), чтобы приостановить скользящее действие карусели.

193
00:14:44,410 --> 00:14:48,171
Затем можно сказать карусель (число), так что

194
00:14:48,171 --> 00:14:53,441
она циклирует карусель к конкретному элементу карусели.

195
00:14:53,441 --> 00:14:56,370
И тогда вы можете сказать карусель («prev»),

196
00:14:56,370 --> 00:15:01,710
карусель («next»), чтобы перейти к предыдущему элементу и следующему элементу в моей карусели.

197
00:15:01,710 --> 00:15:07,420
Таким образом, они могут быть вызваны непосредственно из нашего кода JavaScript.

198
00:15:07,420 --> 00:15:10,390
Аналогично, когда

199
00:15:12,280 --> 00:15:17,550
элемент карусели JavaScript находится на вашей веб-странице, это вызывает различные события.

200
00:15:17,550 --> 00:15:20,870
И основываясь на возникновении этих событий, вы можете ответить.

201
00:15:20,870 --> 00:15:23,980
Так, например, вы можете сказать slide.bs.carousel.

202
00:15:23,980 --> 00:15:28,220
Это конкретное событие будет запущено при вызове метода экземпляра слайда.

203
00:15:29,550 --> 00:15:32,990
Аналогично slid.bs.carousel означает, что

204
00:15:32,990 --> 00:15:38,460
это событие запускается, когда оно завершило переход слайда к следующему элементу.

205
00:15:38,460 --> 00:15:41,880
Таким образом, в вашем коде вы можете указать что-то

206
00:15:43,370 --> 00:15:48,780
вроде $ (» #myCarousel «) .on («slide.bs.carousel».

207
00:15:48,780 --> 00:15:54,110
Это означает, что когда начинается это действие слайда, затем вызовите эту функцию,

208
00:15:54,110 --> 00:15:57,870
а затем сделайте что-то внутри этой функции.

209
00:15:57,870 --> 00:16:00,958
Таким образом, такой код может быть возвращен также

210
00:16:00,958 --> 00:16:06,400
для реагирования на события, вызванные поведением вашей карусели.

211
00:16:07,490 --> 00:16:12,300
Рассмотрев некоторые из этих примеров, мы перейдем к упражнению, где мы на

212
00:16:12,300 --> 00:16:17,460
самом деле напишем код на основе JavaScript для управления нашей каруселью.

213
00:16:17,460 --> 00:16:23,190
Мы напишем код, чтобы включить пару кнопок в нашей карусели,

214
00:16:23,190 --> 00:16:28,280
которые будут использоваться для управления скользящим действием карусели.

215
00:16:28,280 --> 00:16:33,560
Итак, что означает, что мы можем приостановить и возобновить скользящее действие нашей карусели.

216
00:16:33,560 --> 00:16:37,699
И мы активируем эти кнопки с JavaScript.

217
00:16:37,699 --> 00:16:43,799
[ МУЗЫКА]