1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Семинар: JQUERY]

2
00:00:02,690 --> 00:00:04,790
[Vipul Шехават, Гарвардский университет]

3
00:00:04,790 --> 00:00:08,000
[Это CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Если вы следуете у себя дома, вы можете получить доступ к своему онлайн слайды

5
00:00:10,640 --> 00:00:13,310
перейдя по этой ссылке.

6
00:00:13,310 --> 00:00:18,650
Это TjjRWj, на bit.ly.

7
00:00:18,650 --> 00:00:20,700
Вы также можете просто пойти в URL напрямую,

8
00:00:20,700 --> 00:00:27,300
который cloud.cs50.net / ~ vshekhawat, что мое имя,

9
00:00:27,300 --> 00:00:32,409
и JQuery.

10
00:00:32,409 --> 00:00:34,920
Я настоятельно призываю вас следовать, если вы наблюдаете у себя дома,

11
00:00:34,920 --> 00:00:40,650
и если вы здесь, также, потому что это довольно интерактивной презентации.

12
00:00:40,650 --> 00:00:43,160
>> Итак, сегодня я собираюсь говорить о JQuery, и первый вопрос,

13
00:00:43,160 --> 00:00:45,300
что JQuery?

14
00:00:45,300 --> 00:00:47,090
В этом году, я знаю, вы, ребята, не распространяется JavaScript

15
00:00:47,090 --> 00:00:51,080
так же подробно, как у нас в последние годы.

16
00:00:51,080 --> 00:00:53,150
JavaScript является, в первую очередь, как раз на стороне клиента языке

17
00:00:53,150 --> 00:00:58,390
которое используется для выполнения сценариев и кода на машине каждого пользователя.

18
00:00:58,390 --> 00:01:00,660
Так у вас есть сервер, который обеспечивает веб-страниц для людей,

19
00:01:00,660 --> 00:01:02,600
но вы можете делать такие вещи, на своей машине,

20
00:01:02,600 --> 00:01:08,060
спросите их машину для отправки запросов на сервер каждые 30 секунд или что-то вроде этого.

21
00:01:08,060 --> 00:01:10,420
Вы можете сделать это с помощью JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery просто предоставляет больше возможностей, на вершине JavaScript

23
00:01:13,190 --> 00:01:15,680
, что делает дополнительный материал для вас.

24
00:01:15,680 --> 00:01:17,710
Если вы посмотрите на содержимое на вершине,

25
00:01:17,710 --> 00:01:21,410
который описывает некоторые из вещей, которые вы в состоянии сделать.

26
00:01:21,410 --> 00:01:23,500
В общем и целом, он был создан в январе 2006 года.

27
00:01:23,500 --> 00:01:26,560
Впервые он был задуман в августе 2005 года.

28
00:01:26,560 --> 00:01:31,370
Это было вокруг в течение нескольких лет, и это действительно часть нового движения Web 2.0

29
00:01:31,370 --> 00:01:34,330
которая сделана в Интернет, поэтому блестящими.

30
00:01:34,330 --> 00:01:37,630
Это наиболее широко используемый JavaScript библиотеки.

31
00:01:37,630 --> 00:01:41,450
За 19600000 сайты используют его, и использование по-прежнему растет

32
00:01:41,450 --> 00:01:45,640
в соответствии с builtwith.com, которая, по-видимому, в течение последнего года,

33
00:01:45,640 --> 00:01:49,710
только что был постоянно растет довольно линейно.

34
00:01:49,710 --> 00:01:52,870
Среди топ-10000000 сайтов, есть еще -

35
00:01:52,870 --> 00:01:55,180
около 40% из них в настоящее время его использования.

36
00:01:55,180 --> 00:01:58,540
Facebook использует его, много других веб-сайтов сейчас ее используют.

37
00:01:58,540 --> 00:02:01,540
Вы можете посмотреть на эти статистические данные по своему усмотрению, если вы хотите.

38
00:02:01,540 --> 00:02:05,820
А вы могли бы сказать, что это законно, потому что имеет основание и 13 членов совета директоров,

39
00:02:05,820 --> 00:02:11,910
вместе с командой из 20 человек, которые работают на его на регулярной основе.

40
00:02:11,910 --> 00:02:16,110
Так что это очень широко используется, она имеет. Орг URL, это фантазия,

41
00:02:16,110 --> 00:02:21,660
он имеет спин-офф за другие вещи, так что это большое дело.

42
00:02:21,660 --> 00:02:24,510
>> Почему вы должны использовать это? JQuery очень легкий.

43
00:02:24,510 --> 00:02:27,270
Это означает, что это не огромный файл. Вы можете скачать

44
00:02:27,270 --> 00:02:31,540
уменьшенная файлами, которая без всяких пробел и комментарии, и это только 32 КБ.

45
00:02:31,540 --> 00:02:33,600
Так что это легко просто бросить на своей веб-странице

46
00:02:33,600 --> 00:02:35,910
и просто начать использовать его.

47
00:02:35,910 --> 00:02:39,630
Это также очень эффективно написано, так что не занимает много -

48
00:02:39,630 --> 00:02:42,550
это не замедляет ваш сайт много, когда вы его используете.

49
00:02:42,550 --> 00:02:45,770
Это позволяет реализовать то, что было ранее невозможно.

50
00:02:45,770 --> 00:02:47,790
Есть некоторые аспекты функциональности,

51
00:02:47,790 --> 00:02:51,780
как создание анимации, который обычно был бы очень, очень трудно сделать.

52
00:02:51,780 --> 00:02:54,300
Но в JQuery они на самом деле очень проста.

53
00:02:54,300 --> 00:02:57,040
И есть некоторые вещи, которые раздражают делать,

54
00:02:57,040 --> 00:02:59,610
возможно в JavaScript, как отправка POST запроса,

55
00:02:59,610 --> 00:03:02,190
но, чтобы послать запрос к серверу, вы должны написать

56
00:03:02,190 --> 00:03:04,320
пять или шесть или семь строк кода.

57
00:03:04,320 --> 00:03:07,200
Теперь вы можете сделать это в одну строку кода, в одном вызове функции.

58
00:03:07,200 --> 00:03:11,790
Это действительно упрощает многие вещи, которые вы делаете.

59
00:03:11,790 --> 00:03:15,950
И все спокойные дети используют его. Под этим я имею в виду меня.

60
00:03:15,950 --> 00:03:19,270
В мой последний проект в прошлом году, которое является news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
которая является для радиостанции, я создал этот блог

62
00:03:22,530 --> 00:03:29,750
в котором находится все показывает, что мы сделали, и MP3-файлы для них.

63
00:03:29,750 --> 00:03:32,070
Вы можете просматривать прошлого показывает,

64
00:03:32,070 --> 00:03:34,130
и все это делается с помощью JQuery. Вы можете сказать,

65
00:03:34,130 --> 00:03:37,340
Из-за всех этих анимации, по существу.

66
00:03:37,340 --> 00:03:42,360
Так что если у вас есть - если вы создаете новое сообщение,

67
00:03:42,360 --> 00:03:45,980
Вы видите эти маленькие slideDowns, вот и все делается с помощью JQuery.

68
00:03:45,980 --> 00:03:49,140
И это исчезать - так что такие вещи все это делается использованием JQuery,

69
00:03:49,140 --> 00:03:52,720
и вам не придется постоянно перезагрузите страницу перемещаться по сайту.

70
00:03:52,720 --> 00:03:57,220
Другая интересная вещь, которая формируется с помощью JQuery это представление.

71
00:03:57,220 --> 00:03:59,700
Я использую эту открытую вещь исходным кодом под названием scrolldeck,

72
00:03:59,700 --> 00:04:03,250
который кто-то написал на вершине JQuery.

73
00:04:03,250 --> 00:04:04,870
Если вы действительно посмотрите на исходный код, вы можете видеть, что

74
00:04:04,870 --> 00:04:07,830
они используют этот знак доллара; знаки доллара

75
00:04:07,830 --> 00:04:12,110
используются в JQUERY, чтобы показать, что функция JQUERY функции.

76
00:04:12,110 --> 00:04:15,020
Так что они определении оберткой для JQuery

77
00:04:15,020 --> 00:04:18,570
, что позволяет делать презентации, как это,

78
00:04:18,570 --> 00:04:21,200
и вы можете видеть, что здесь они в том числе исходный файл JQuery,

79
00:04:21,200 --> 00:04:24,120
чего и вам придется включать, если хотите использовать JQuery

80
00:04:24,120 --> 00:04:30,450
в вашем собственном веб-сайтов.

81
00:04:30,450 --> 00:04:32,790
>> Говоря о том, как Вы его установить?

82
00:04:32,790 --> 00:04:36,150
Вы можете просто пойти в jQuery.com и загрузите файл,

83
00:04:36,150 --> 00:04:38,320
добавить его в веб-каталог и включить его.

84
00:04:38,320 --> 00:04:42,200
Так что просто на вершине, в голове метку вашего HTML файла

85
00:04:42,200 --> 00:04:45,400
Вашей основной HTML файл, просто есть эта строка кода

86
00:04:45,400 --> 00:04:49,490
с правильной версией для какой версии JQuery вы используете.

87
00:04:49,490 --> 00:04:51,340
Вы можете скачать его, перейдя в jQuery.com,

88
00:04:51,340 --> 00:04:55,130
Нажмите кнопку "Скачать JQuery", и вы его получили. Вот и все.

89
00:04:55,130 --> 00:04:58,880
А на самом деле, мы можем взглянуть на то, что он выглядит.

90
00:04:58,880 --> 00:05:01,080
Если вы нажмете на скачать здесь, Jquery это.

91
00:05:01,080 --> 00:05:05,260
Это просто один большой файл JavaScript, что выполняет все, что материал для вас.

92
00:05:05,260 --> 00:05:09,270
Это уменьшенная версия, которая не читается вообще.

93
00:05:09,270 --> 00:05:13,180
Вы также можете посмотреть на развитие версии, который доступен

94
00:05:13,180 --> 00:05:15,370
но все еще очень, очень длительным.

95
00:05:15,370 --> 00:05:17,980
Это много чего там.

96
00:05:17,980 --> 00:05:20,240
Вы можете перейти по ссылке состоялся версии Google, о нем.

97
00:05:20,240 --> 00:05:23,820
Так что позволю тебе просто полагаться на Google, чтобы обеспечить это.

98
00:05:23,820 --> 00:05:29,310
Они обеспечивают каждый вариант, доступный в любое время.

99
00:05:29,310 --> 00:05:31,530
Таким образом, вы, вероятно, может рассчитывать на Google разместить его для вас.

100
00:05:31,530 --> 00:05:33,270
Или вы можете по ссылке собственной последней версии JQuery автора.

101
00:05:33,270 --> 00:05:36,400
У них есть URL, который всегда обновлен до последней версии.

102
00:05:36,400 --> 00:05:40,850
Это JQuery-последнее, и есть одна проблема с этим,

103
00:05:40,850 --> 00:05:44,350
который является то, что если обновленный JQUERY и некоторые из предыдущих функциональность

104
00:05:44,350 --> 00:05:47,250
они становятся ретроградированный или которые устарели,

105
00:05:47,250 --> 00:05:49,620
она не может - он может начать, чтобы не получить поддерживаются.

106
00:05:49,620 --> 00:05:52,940
Так что если вы написать сайт с помощью версии 1.8.2,

107
00:05:52,940 --> 00:05:55,000
к тому времени, версии 2.7 выходит

108
00:05:55,000 --> 00:05:57,000
некоторые из функций, которые вы написали больше не работают.

109
00:05:57,000 --> 00:05:59,930
Так что лучше просто скачать файл 32 Кб,

110
00:05:59,930 --> 00:06:04,100
положить его на веб-страницу, и он будет работать вечно.

111
00:06:04,100 --> 00:06:07,450
>> Я собираюсь идти вперед и начать говорить о фактической функциональности JQuery.

112
00:06:07,450 --> 00:06:13,090
Первое, что селекторы. Это то, что JQuery была первоначально задумана предоставить.

113
00:06:13,090 --> 00:06:15,500
И вы можете нажать на документацию, чтобы посмотреть на

114
00:06:15,500 --> 00:06:18,690
Рабочая документация на селекторы Я собираюсь быть покрытие.

115
00:06:18,690 --> 00:06:24,120
Идея селекторов, которые можно выбрать HTML элементы на странице.

116
00:06:24,120 --> 00:06:28,790
Элементов на странице есть идентификаторы и классы и другие аспекты выявления на них.

117
00:06:28,790 --> 00:06:30,500
Там же - они в разном порядке.

118
00:06:30,500 --> 00:06:32,570
Некоторое время они вложены друг в друга.

119
00:06:32,570 --> 00:06:38,120
JQuery позволяет создавать простые запросы, которые извлекают из элементов страницы.

120
00:06:38,120 --> 00:06:41,890
Тогда вы можете манипулировать этими элементами использованием JQuery функции,

121
00:06:41,890 --> 00:06:43,990
которая является манипуляцией разделе мы получим позже.

122
00:06:43,990 --> 00:06:46,040
Вы можете изменить HTML, CSS изменить,

123
00:06:46,040 --> 00:06:50,500
Вы также можете добавить анимацию и функции, которые активируются по определенным событиям.

124
00:06:50,500 --> 00:06:52,710
Так, например, если что-то щелкнуло, вы хотите, чтобы что-то случилось,

125
00:06:52,710 --> 00:06:55,210
Вы можете сделать это с помощью JQuery, а также.

126
00:06:55,210 --> 00:06:57,380
И есть огромное количество способов выбора элементов.

127
00:06:57,380 --> 00:07:00,310
Большинство из них я никогда не использовал, но есть основные,

128
00:07:00,310 --> 00:07:02,340
которые являются довольно важными.

129
00:07:02,340 --> 00:07:05,750
Селектора элемента, например, если вы просто ничего выбора

130
00:07:05,750 --> 00:07:10,640
то есть DIV - Я на самом деле есть код открыт для этого слайда презентации.

131
00:07:10,640 --> 00:07:13,450
Так, к примеру, вот первый слайд.

132
00:07:13,450 --> 00:07:17,430
Здесь мы имеем дел. Если мы на самом деле выбрать все дивы на странице,

133
00:07:17,430 --> 00:07:22,300
это будет просто дать нам массив всех дивы, которые существуют в этом файле.

134
00:07:22,300 --> 00:07:27,040
ID селектор позволяет выбрать все что угодно с данным ID.

135
00:07:27,040 --> 00:07:32,230
Так что, если это, например, эта вещь имеет ID "что"

136
00:07:32,230 --> 00:07:37,160
и если бы мы сделали это с #, что вместо некоторых ID,

137
00:07:37,160 --> 00:07:42,920
было бы просто вернуть массив, который имеет единственный элемент и что в том, что элемент страницы.

138
00:07:42,920 --> 00:07:45,490
Мы также можем комбинировать селекторы Таким образом, имея

139
00:07:45,490 --> 00:07:48,260
выбрать только вещи с идентификаторами, которые дивы.

140
00:07:48,260 --> 00:07:51,810
Так что да. Только выберите дивы, которые имеют этот ID.

141
00:07:51,810 --> 00:07:55,260
Для класса вы просто используете точка, это то же самое, CSS.

142
00:07:55,260 --> 00:07:57,500
Потомок также работает, так что если у вас есть некоторый класс

143
00:07:57,500 --> 00:08:00,170
и это имеет вложенные элементы внутри него - так, например,

144
00:08:00,170 --> 00:08:03,260
есть некоторый класс и он имеет тега привязки в ссылку на другую страницу,

145
00:08:03,260 --> 00:08:08,510
Вы можете использовать этот синтаксис для получения ссылки.

146
00:08:08,510 --> 00:08:12,420
Вы также можете выбрать несколько вещей сразу, просто разделите их запятыми,

147
00:08:12,420 --> 00:08:17,360
использовать любой селектор вы хотите, и вы выберите их все сразу, в одном массиве.

148
00:08:17,360 --> 00:08:19,650
А тут еще и не селектором, так что вы можете выбрать все дивы

149
00:08:19,650 --> 00:08:24,210
, которые не имеют некоторый определенный класс.

150
00:08:24,210 --> 00:08:28,790
И это только полезный способ получить введение в выборе, как это работает.

151
00:08:28,790 --> 00:08:32,270
Я покажу несколько конкретных примеров в секунду.

152
00:08:32,270 --> 00:08:35,480
>> Расширенный селекторы - это лишь несколько примеров.

153
00:08:35,480 --> 00:08:38,840
Существуют десятки из них, но если вы хотите, чтобы выбрать все теги изображения

154
00:08:38,840 --> 00:08:42,799
в течение некоторого элемента, то вы просто делаете: изображения.

155
00:08:42,799 --> 00:08:45,340
Если вы хотите выбрать четные элементы, например, если есть 20 из них,

156
00:08:45,340 --> 00:08:48,290
Вы хотите выбрать 0, 2, 4, 6 и так далее,

157
00:08:48,290 --> 00:08:51,630
Вы делаете: даже, или вы также можете сделать: странно.

158
00:08:51,630 --> 00:08:55,470
Это псевдо-селекторы, что означает, что они на самом деле вычислить

159
00:08:55,470 --> 00:09:00,960
любой другой элемент, а не просто собирается и выбрав все из них.

160
00:09:00,960 --> 00:09:05,510
Вы также можете - каждый элемент может иметь атрибуты.

161
00:09:05,510 --> 00:09:10,580
Так, например, класс = центр также атрибут.

162
00:09:10,580 --> 00:09:16,500
Для этого тега привязки, HREF, гипертекстовой ссылки, является атрибутом также.

163
00:09:16,500 --> 00:09:21,150
Таким образом, вы можете выбрать то, что ссылки на конкретную страницу или просто - это действительно общая.

164
00:09:21,150 --> 00:09:25,410
Вы можете выбрать все что угодно с любой атрибут, который вы хотите.

165
00:09:25,410 --> 00:09:27,470
А потом, также, содержит атрибут.

166
00:09:27,470 --> 00:09:30,420
Если вы, например, хотел, чтобы выбрать все элементы ввода

167
00:09:30,420 --> 00:09:32,700
, которые содержат слово "проход" в качестве имени из них,

168
00:09:32,700 --> 00:09:37,560
Если у страницы есть блок ввода текста

169
00:09:37,560 --> 00:09:41,050
это называется "пароль", что бы быть одним из способов вы можете выбрать, что.

170
00:09:41,050 --> 00:09:43,020
И есть еще много. Вы можете пойти дальше и посмотреть на документацию

171
00:09:43,020 --> 00:09:46,950
и увидеть конкретные примеры того, как это работает.

172
00:09:46,950 --> 00:09:48,840
>> Следующим важным моментом является DOM манипуляции.

173
00:09:48,840 --> 00:09:52,500
После того как мы выбрать элементы, мы хотим на самом деле делать вещи с ними.

174
00:09:52,500 --> 00:09:55,500
До сих пор мы не смотрели на это вообще, но если вы посмотрите на документацию,

175
00:09:55,500 --> 00:09:57,950
Там на самом деле много, что мы могли сделать.

176
00:09:57,950 --> 00:10:02,900
На данный момент, мы собираемся, чтобы выбрать элементы на этой презентации

177
00:10:02,900 --> 00:10:04,890
и манипулировать их с помощью JQuery.

178
00:10:04,890 --> 00:10:08,290
Потому что это реализуется с помощью JQuery, мы имеем доступ к JQuery библиотеки,

179
00:10:08,290 --> 00:10:13,580
и мы можем использовать эти функции в этом коде.

180
00:10:13,580 --> 00:10:16,200
Одна полезная вещь, что вы можете не знать о том, консоль.

181
00:10:16,200 --> 00:10:19,340
И Google Chrome является то, что я использую. Вы можете нажать Alt команды J

182
00:10:19,340 --> 00:10:21,720
или управления ALT J, чтобы открыть консоль.

183
00:10:21,720 --> 00:10:26,130
В Firefox я думаю, что это команда сдвига К или управление переключением К.

184
00:10:26,130 --> 00:10:28,880
В Safari вы должны пойти изменить некоторые настройки.

185
00:10:28,880 --> 00:10:35,460
Там в ссылку, если вы хотели бы это сделать, но я рекомендую получить Chrome или Firefox.

186
00:10:35,460 --> 00:10:37,750
Так что давайте откройте консоль, это здесь.

187
00:10:37,750 --> 00:10:41,170
Она позволяет в основном только делать все что угодно.

188
00:10:41,170 --> 00:10:45,100
Таким образом, вы можете просто ввести в создаем переменную с именем х,

189
00:10:45,100 --> 00:10:49,200
х = 5, давайте посмотрим, что х + 2.

190
00:10:49,200 --> 00:10:57,670
Вы даже можете сделать что-то вроде CS + Посмотрим, х + 45, которые будут CS50.

191
00:10:57,670 --> 00:11:00,530
Вы можете просто сделать некоторые типичные вещи JavaScript.

192
00:11:00,530 --> 00:11:02,730
Но вы также можете сделать JQuery здесь.

193
00:11:02,730 --> 00:11:06,200
>> Итак, давайте посмотрим на это первым аспектом здесь.

194
00:11:06,200 --> 00:11:09,500
Мы собираемся создать переменную HTML, который является строкой.

195
00:11:09,500 --> 00:11:15,890
Она имеет тег абзаца в нем, что называется новым текстом.

196
00:11:15,890 --> 00:11:19,420
Так что у нас есть этот HTML, это некоторый новый текст в теги абзаца.

197
00:11:19,420 --> 00:11:21,800
Теперь мы действительно хотим, чтобы добавить его на страницу.

198
00:11:21,800 --> 00:11:28,310
Я поставил его так, чтобы HTML для этого абзаца, этот титул здесь, добавление ID.

199
00:11:28,310 --> 00:11:32,320
Если мы выбираем добавление идентификатор, а затем добавить к нему

200
00:11:32,320 --> 00:11:34,560
HTML переменной я только что создал,

201
00:11:34,560 --> 00:11:40,370
она будет добавить, что HTML в конце, сразу после этого тега абзаца.

202
00:11:40,370 --> 00:11:43,730
Так что если мы это сделаем, - мы выбрали этот пункт,

203
00:11:43,730 --> 00:11:47,590
и мы назвали добавление функции с переменным HTML я просто добавил,

204
00:11:47,590 --> 00:11:50,960
она будет добавить, что новый текст прямо на странице.

205
00:11:50,960 --> 00:11:54,970
Мы можем также соответствующим образом исправить, что означает, он будет направлен, в начале этого элемента.

206
00:11:54,970 --> 00:11:58,290
Таким образом, есть некоторый новый текст в начале и после него.

207
00:11:58,290 --> 00:12:01,660
Я могу идти вперед и обновить, чтобы избавиться от этой вещи я только что сделал.

208
00:12:01,660 --> 00:12:05,280
Но это пример того, как можно использовать Prepend и добавить методы

209
00:12:05,280 --> 00:12:08,910
манипулировать материал на страницы, добавить некоторые HTML.

210
00:12:08,910 --> 00:12:11,080
>> Вы также можете изменить классов.

211
00:12:11,080 --> 00:12:14,970
Назад в этом стиле файл, я создал это для победы класса

212
00:12:14,970 --> 00:12:19,990
Текст, который имеет красный цвет, некоторые цвета фона, текста и тени.

213
00:12:19,990 --> 00:12:23,810
Это выглядит отвратительным, но не могу на самом деле -

214
00:12:23,810 --> 00:12:26,410
настоящем пункте, соответствует классу ID.

215
00:12:26,410 --> 00:12:29,860
Так что я могу добавить класс для победы.

216
00:12:29,860 --> 00:12:31,870
Я могу выполнить это в консоли,

217
00:12:31,870 --> 00:12:35,480
и что будет добавить, что класс, и теперь он выглядит отвратительным, как и ожидалось.

218
00:12:35,480 --> 00:12:39,680
CSS автоматически будет применяться к классам, что вы -

219
00:12:39,680 --> 00:12:42,680
если есть CSS для класса, он автоматически будет применяться

220
00:12:42,680 --> 00:12:44,680
если вы измените классом элемента.

221
00:12:44,680 --> 00:12:49,230
Тогда мы можем просто удалить его с помощью Remove Class.

222
00:12:49,230 --> 00:12:53,690
Так что если у вас есть предопределенные классы, как красный подчеркиваются,

223
00:12:53,690 --> 00:12:55,990
а затем вы хотите применить к элементам тех,

224
00:12:55,990 --> 00:12:58,230
Вы не должны сделать все, CSS стилей каждый раз.

225
00:12:58,230 --> 00:13:01,510
Вы можете просто добавить класс к элементу, а затем это автоматически станет -

226
00:13:01,510 --> 00:13:05,580
она будет автоматически искать подходящие для этого класса.

227
00:13:05,580 --> 00:13:07,900
Мы также можем удалить вещи, так что я собираюсь, чтобы выбрать все дивы

228
00:13:07,900 --> 00:13:10,830
на странице и удалить их.

229
00:13:10,830 --> 00:13:13,990
И что это будет выглядеть?

230
00:13:13,990 --> 00:13:16,170
Это будет выглядеть, как будто ничего, так что нет на самом деле ничего не осталось.

231
00:13:16,170 --> 00:13:18,170
Мое выступление не стало.

232
00:13:18,170 --> 00:13:21,290
Я могу обновить и привести его обратно, к счастью,

233
00:13:21,290 --> 00:13:24,420
Потому что это просто ходит раз,

234
00:13:24,420 --> 00:13:29,460
но это пример удаления, если вы хотите, чтобы полностью уничтожить элемент со страницы.

235
00:13:29,460 --> 00:13:33,180
>> Вы также можете переписать, и я собираюсь, чтобы выбрать все теги абзаца на странице

236
00:13:33,180 --> 00:13:36,850
и заходите внутрь их и заменить любым текстом они имеют в них

237
00:13:36,850 --> 00:13:39,690
с только слово "тестирование".

238
00:13:39,690 --> 00:13:46,520
Если вы сделаете это, вы замените каждый абзац на странице с этого тестирования.

239
00:13:46,520 --> 00:13:49,150
Да. Они все заменены тестирования.

240
00:13:49,150 --> 00:13:53,270
Вот пример доступа к тексту и перезаписи.

241
00:13:53,270 --> 00:13:57,490
Вы также можете получить информацию, и это действительно здорово для ввода.

242
00:13:57,490 --> 00:14:00,470
Если у вас есть поле ввода, что люди набрав вещи в,

243
00:14:00,470 --> 00:14:03,880
люди набрав в него вещи,

244
00:14:03,880 --> 00:14:09,030
Здесь мы выбираем входные, любой вход тега с типом текста.

245
00:14:09,030 --> 00:14:13,800
В этом случае есть только одно поле ввода в целое представление,

246
00:14:13,800 --> 00:14:17,260
поэтому мы просто выберите первую, а затем мы вызываем функцию Val на нем.

247
00:14:17,260 --> 00:14:19,570
, Который возвращает значение, а для ввода,

248
00:14:19,570 --> 00:14:24,330
Значение только что бы ни случилось, чтобы быть внутри него.

249
00:14:24,330 --> 00:14:31,880
Так что, если мы сделаем это, он просто возвращает строку материал.

250
00:14:31,880 --> 00:14:36,860
И если мы называем его снова после написания больше материала, она превращается в больше вещей.

251
00:14:36,860 --> 00:14:40,760
Вот один отличный способ доступа к элементам поле ввода, а затем проверьте,

252
00:14:40,760 --> 00:14:45,060
это адрес электронной почты, это является допустимой датой, например.

253
00:14:45,060 --> 00:14:49,600
Вы можете просто получить вещи мгновенно, как люди набрав его,

254
00:14:49,600 --> 00:14:54,830
а затем проверить, является ли это действительно, отправить его обратно на сервер, делать все, что хотите с ним.

255
00:14:54,830 --> 00:14:57,720
И это, как вы получаете доступ, что находится внутри этих ящиков.

256
00:14:57,720 --> 00:15:00,090
>> Вы также можете изменить CSS напрямую, так что вместо добавления

257
00:15:00,090 --> 00:15:02,510
класса, который имеет некоторые предопределенные свойства,

258
00:15:02,510 --> 00:15:08,120
вы можете просто добавить любой CSS вы хотите что-нибудь.

259
00:15:08,120 --> 00:15:10,350
Так давайте выберем тело, которое всей презентации,

260
00:15:10,350 --> 00:15:14,370
и цвет является свойством, которое определяет, какие цвета текста.

261
00:15:14,370 --> 00:15:19,420
Если мы изменим его на красный, весь текст на странице станет красным.

262
00:15:19,420 --> 00:15:26,310
Мы можем сделать что-то вроде синий цвет фона

263
00:15:26,310 --> 00:15:30,680
там мы идем, это красиво.

264
00:15:30,680 --> 00:15:33,840
Вы можете делать все что угодно с этим.

265
00:15:33,840 --> 00:15:39,250
Используя свойство CSS, вы можете реально изменить, как что-то выглядит в любое время.

266
00:15:39,250 --> 00:15:41,630
Следующим важным моментом является эффектов.

267
00:15:41,630 --> 00:15:45,710
Эффекты в основном такие же вещи, как изменение CSS,

268
00:15:45,710 --> 00:15:48,870
но они на самом деле обеспечивают некоторую дополнительную анимацию к нему.

269
00:15:48,870 --> 00:15:53,380
Таким образом, вместо того, чтобы просто показывать или скрывать что-то или изменения цвета,

270
00:15:53,380 --> 00:15:56,130
Вы можете фактически сделать его анимированным.

271
00:15:56,130 --> 00:16:00,760
Вот документацию, если вы хотите взглянуть на обширную документацию на него.

272
00:16:00,760 --> 00:16:04,760
Но я собираюсь охватить основные из них.

273
00:16:04,760 --> 00:16:12,030
Есть Отображение и скрытие свойств.

274
00:16:12,030 --> 00:16:14,510
Показать / скрыть номер действительно соответствует этому целую коробку,

275
00:16:14,510 --> 00:16:18,190
так что если я скрыть это, он просто исчезнет.

276
00:16:18,190 --> 00:16:24,210
И я могу показать его снова, если я хочу, чтобы сделать его вернуться.

277
00:16:24,210 --> 00:16:26,340
И он вернулся. Это на самом деле не исчезнут,

278
00:16:26,340 --> 00:16:30,670
Я фактически не удалить его со страницы, я просто установить свойство CSS видимости в скрытом

279
00:16:30,670 --> 00:16:34,030
так что вы не можете видеть его больше.

280
00:16:34,030 --> 00:16:39,250
Там же скользить вверх и скользить вниз, что позволяет иметь такой эффект.

281
00:16:39,250 --> 00:16:47,050
Он скользит до исчезают, а после того, как исчезает

282
00:16:47,050 --> 00:16:53,210
Вы можете двигать его вниз, чтобы он вернулся. А теперь он вернулся.

283
00:16:53,210 --> 00:16:57,650
Там также это эффект затухания, которое - исчезают ID соответствует этой рамки.

284
00:16:57,650 --> 00:17:01,200
Если я исчезать до нее, то она будет постепенно исчезать.

285
00:17:01,200 --> 00:17:04,490
Я могу также исчезают его, и он вернется.

286
00:17:04,490 --> 00:17:08,930
Вы также можете сделать, чтобы исчезать, который специфичен для функция фейдера.

287
00:17:08,930 --> 00:17:12,589
Вы можете иметь его исчезать с каким-либо конкретным непрозрачность, что вы хотите.

288
00:17:12,589 --> 00:17:16,869
Так что если вы исчезают так медленно 0,5, это станет половину видимой.

289
00:17:16,869 --> 00:17:22,630
Я могу сделать это пойти в 0,1, и обратно в 1, чтобы сделать его полностью видимым.

290
00:17:22,630 --> 00:17:24,760
Вот только анимацию, которое вы можете сделать.

291
00:17:24,760 --> 00:17:26,750
>> Есть также переключатель эффектов.

292
00:17:26,750 --> 00:17:33,410
Так что я собираюсь, чтобы выбрать переключение ID, который соответствует этой рамки,

293
00:17:33,410 --> 00:17:38,970
и на этой DIV вы можете позвонить Toggle; если это видимо он станет невидимым,

294
00:17:38,970 --> 00:17:42,320
если это невидимое станет видимым.

295
00:17:42,320 --> 00:17:44,440
Так что я просто назвал эту функцию переключения в два раза, первый из которых был

296
00:17:44,440 --> 00:17:48,380
то же, что скрывать, на второй вызов было то же самое, как шоу.

297
00:17:48,380 --> 00:17:53,510
И вы также можете сделать это с помощью переключения исчезают,

298
00:17:53,510 --> 00:17:55,730
которая делает то же самое, за исключением того, фактически исчезает.

299
00:17:55,730 --> 00:17:59,410
И то же самое с горкой переключения.

300
00:17:59,410 --> 00:18:01,460
Есть прикован эффекты, а также, что означает,

301
00:18:01,460 --> 00:18:05,520
При выборе элемента и просто позвонить куча анимации его методы,

302
00:18:05,520 --> 00:18:07,400
Если вы хотели, чтобы исчезать, а затем сдвиньте вниз,

303
00:18:07,400 --> 00:18:11,040
а затем прятать и затем исчезают в, он будет делать их в ряд.

304
00:18:11,040 --> 00:18:24,920
Так исчез, вернулся - по некоторым причинам, шкура не произошло.

305
00:18:24,920 --> 00:18:30,030
Давайте попробуем его. Да, так что исчез, и затем это соскользнула.

306
00:18:30,030 --> 00:18:32,230
И есть еще много. Вы можете использовать функцию анимации

307
00:18:32,230 --> 00:18:35,370
чтобы создавать свои собственные анимации, которая является довольно сложной,

308
00:18:35,370 --> 00:18:38,790
но она дает вам бесконечную расширяемость.

309
00:18:38,790 --> 00:18:40,630
Вы можете сделать любой вид анимации вы хотите.

310
00:18:40,630 --> 00:18:44,230
Вы также можете использовать очереди стоять в очереди несколько анимаций одновременно.

311
00:18:44,230 --> 00:18:47,340
Так что если вы хотите, чтобы что-то покупать на странице,

312
00:18:47,340 --> 00:18:49,860
слайд с верхнего правого в нижний левый, вы можете сделать это,

313
00:18:49,860 --> 00:18:55,240
и просто есть куча действий идущих друг за другом.

314
00:18:55,240 --> 00:18:57,490
>> Следующее, что мы собираемся поговорить о событиях.

315
00:18:57,490 --> 00:19:02,090
События позволяют - до сих пор, мы только что печатал вещи в консоли

316
00:19:02,090 --> 00:19:04,870
и что является одним из способов, чтобы это произошло,

317
00:19:04,870 --> 00:19:08,020
но на реальной странице, вы не собираетесь быть в состоянии

318
00:19:08,020 --> 00:19:10,020
делать вещи, типа пользователя в консоли.

319
00:19:10,020 --> 00:19:12,050
Вы хотите, чтобы то, что происходит автоматически.

320
00:19:12,050 --> 00:19:18,060
Для этого вам нужно использовать события, которые активируют на некоторых определенных происходит событие.

321
00:19:18,060 --> 00:19:21,340
Вы можете проверить документацию для получения полной информации.

322
00:19:21,340 --> 00:19:24,030
Итак, давайте посмотрим. Мы хотим, чтобы скрыть или показать окно,

323
00:19:24,030 --> 00:19:29,340
но сейчас эта кнопка ничего не делает, потому что я не выполнил его еще.

324
00:19:29,340 --> 00:19:35,420
Я собираюсь пойти в фактических HTML страницы.

325
00:19:35,420 --> 00:19:38,560
Вот слайд. Там в DIV для слайда.

326
00:19:38,560 --> 00:19:41,230
Он имеет класс слайда.

327
00:19:41,230 --> 00:19:46,890
Там в тексте. Теперь, есть этот флажок и кнопку ящика.

328
00:19:46,890 --> 00:19:52,900
Как бы мы на самом деле сделать это исчезнуть?

329
00:19:52,900 --> 00:19:58,250
Прежде всего, давайте напишем функцию, которая делает текстовое окно ID исчезают.

330
00:19:58,250 --> 00:20:01,820
Это синтаксис Funtion, давайте просто называть это hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Она не принимает никаких аргументов, потому что нет никаких аргументов, которые должны быть приняты.

332
00:20:06,130 --> 00:20:08,950
Мы можем выбрать поле Идентификатор.

333
00:20:08,950 --> 00:20:15,020
Таким образом, используя JQuery выбора, мы можем выбрать окно ID,

334
00:20:15,020 --> 00:20:17,700
а потом просто заставить его исчезнуть.

335
00:20:17,700 --> 00:20:20,690
Давайте сделаем это постепенно исчезают.

336
00:20:20,690 --> 00:20:27,390
Если мы вдруг эта функция в реальной консоли,

337
00:20:27,390 --> 00:20:33,380
мы могли бы определить эту функцию, мы можем называть hideTheBox, и она работает.

338
00:20:33,380 --> 00:20:36,650
Но мы хотим, чтобы это произошло, когда кнопка нажата на самом деле.

339
00:20:36,650 --> 00:20:40,950
Чтобы сделать это, мы должны использовать события.

340
00:20:40,950 --> 00:20:45,500
Чтобы привязать событие к некоторым конкретным кнопки или некоторые действия происходит,

341
00:20:45,500 --> 00:20:50,040
мы должны выбрать элемент, что событие вызовет -

342
00:20:50,040 --> 00:20:52,650
или, что будет инициировать событие, извините.

343
00:20:52,650 --> 00:20:57,220
>> Итак, прежде всего, давайте выберем поле Код кнопки

344
00:20:57,220 --> 00:20:59,610
потому что это кнопка, и теперь, для этой кнопки,

345
00:20:59,610 --> 00:21:02,750
мы хотим создать анимацию при нажатии.

346
00:21:02,750 --> 00:21:05,040
Так что эту функцию мыши.

347
00:21:05,040 --> 00:21:08,470
Она позволяет связать другую функцию к нему.

348
00:21:08,470 --> 00:21:12,320
Эта функция принимает другую функцию в качестве аргумента

349
00:21:12,320 --> 00:21:14,310
мы можем передать в функцию hideTheBox,

350
00:21:14,310 --> 00:21:20,950
и всякий раз, когда эта кнопка нажата, эта функция автоматически выполнит.

351
00:21:20,950 --> 00:21:24,850
Так что это будет работать, если мы сохраним это, я обновления,

352
00:21:24,850 --> 00:21:33,460
и - одну секунду, мне очень жаль.

353
00:21:33,460 --> 00:21:44,770
Позвольте мне исправить это действительно быстро.

354
00:21:44,770 --> 00:21:50,680
Хорошо. Там мы идем. Так что теперь поле исчезает, когда мы нажимаем на кнопку.

355
00:21:50,680 --> 00:21:55,470
Мы также можем изменить это просто fadeToggle,

356
00:21:55,470 --> 00:22:00,020
изменить его, чтобы скрыть или показать окно,

357
00:22:00,020 --> 00:22:03,850
и это также будет работать тоже, если мы обновляем.

358
00:22:03,850 --> 00:22:08,550
Мы можем скрыть это, мы также можем показать это, и что будет продолжать работать.

359
00:22:08,550 --> 00:22:12,210
Другое дело, что мы можем сделать, мы на самом деле не надо определить этот hideTheBox функции

360
00:22:12,210 --> 00:22:15,050
перед вызовом функции мыши.

361
00:22:15,050 --> 00:22:17,640
Так вместо определения функции и вызов hideTheBox,

362
00:22:17,640 --> 00:22:20,310
мы только собираемся называть это если эта вещь кнопки.

363
00:22:20,310 --> 00:22:22,310
Таким образом, мы можем определить его анонимно здесь,

364
00:22:22,310 --> 00:22:25,070
которая является функцией, которая имеет JavaScript.

365
00:22:25,070 --> 00:22:29,720
Вы можете определить функцию; нормально, мы бы сказали, функции hideTheBox

366
00:22:29,720 --> 00:22:34,490
с аргументами, но вместо этого, мы можем просто сказать не функционируют аргументов,

367
00:22:34,490 --> 00:22:36,870
начать фигурной скобки, определяющие функции,

368
00:22:36,870 --> 00:22:40,780
близко, что фигурной скобки, а потом просто определить функцию здесь,

369
00:22:40,780 --> 00:22:45,130
в течение первых скобках и последней скобкой

370
00:22:45,130 --> 00:22:47,860
, которые соответствуют аргументам функции мыши.

371
00:22:47,860 --> 00:22:53,320
Так что мы передаем в этой функции, мы можем скопировать эту строку кода прямо здесь,

372
00:22:53,320 --> 00:22:55,450
и что будет делать одно и то же.

373
00:22:55,450 --> 00:22:57,290
А теперь у нас нет этой случайной функции fadeTheBox

374
00:22:57,290 --> 00:22:59,960
, который сидит вокруг без всякой видимой причины.

375
00:22:59,960 --> 00:23:02,070
Функция была определена анонимно, он не имеет имени.

376
00:23:02,070 --> 00:23:08,060
Это будет выполняться только когда мы нажимаем на кнопку ящика.

377
00:23:08,060 --> 00:23:12,180
Так освежая, еще раз, еще раз, и вы можете видеть, что он все еще работает.

378
00:23:12,180 --> 00:23:16,700
И вот как создавать события.

379
00:23:16,700 --> 00:23:19,190
>> Есть много разных событий, которые мы можем использовать.

380
00:23:19,190 --> 00:23:23,540
Я собираюсь вернуться в режим с помощью консоли, чтобы просто показать вам, как они работают.

381
00:23:23,540 --> 00:23:28,210
Идентификаторы для каждого из этих соответствуют каждой коробке.

382
00:23:28,210 --> 00:23:33,020
Так это поле Щелкните ID, на этот раз идентификатором ключа, и этот мышь ID.

383
00:23:33,020 --> 00:23:36,120
Еще одна вещь, то, что есть эта функция действия; а не вводить его каждый раз,

384
00:23:36,120 --> 00:23:41,610
Я на самом деле пошел вперед и определил эту функцию действия здесь.

385
00:23:41,610 --> 00:23:46,860
Он делает то же самое, что и hideTheBox функции.

386
00:23:46,860 --> 00:23:51,340
Он получает эту коробку и либо постепенно изменяется оно исчезает или его дюйма

387
00:23:51,340 --> 00:23:54,110
И именно поэтому мы можем использовать его здесь.

388
00:23:54,110 --> 00:24:00,350
Так что, если мы нажмем на эту Щелкните ID, мы хотим сделать коробку исчезать или появляться.

389
00:24:00,350 --> 00:24:03,610
Это то же самое, что и кнопка, которая у нас была в последнем слайде.

390
00:24:03,610 --> 00:24:07,450
Теперь после того, как мы называем это, мы можем нажать на эту и окно исчезает,

391
00:24:07,450 --> 00:24:10,160
затем щелкните на нем снова и снова появится окно.

392
00:24:10,160 --> 00:24:12,480
Это довольно просто. Дважды щелкните делает то же самое,

393
00:24:12,480 --> 00:24:15,660
за исключением того, требуется двойной щелчок.

394
00:24:15,660 --> 00:24:19,030
Так что если вы щелкните на ней и нажмите на нее снова ничего не случится,

395
00:24:19,030 --> 00:24:21,140
но если вы дважды щелкните быстро, то оно исчезнет.

396
00:24:21,140 --> 00:24:23,310
Если вы дважды щелкните снова, он вернется.

397
00:24:23,310 --> 00:24:25,250
Так что это довольно просто.

398
00:24:25,250 --> 00:24:31,170
Ввод с клавиатуры немного странно, я не думаю, что это на самом деле работает в этом примере

399
00:24:31,170 --> 00:24:37,670
потому что ключ вниз, ключевые и нажатием клавиши и других ключевых действий

400
00:24:37,670 --> 00:24:47,190
не активируете независимо от того, какой элемент вы связать его с.

401
00:24:47,190 --> 00:24:51,410
Например, даже если я связан вниз для тела или что-то еще полностью,

402
00:24:51,410 --> 00:24:55,950
то это обошлось бы активировать независимо от того - это не конкретно.

403
00:24:55,950 --> 00:25:00,190
Я не должна быть перейдя по этой и нажмите клавишу, чтобы сделать что-нибудь исчезнуть.

404
00:25:00,190 --> 00:25:04,470
Было бы быть активированы независимо от того, элемент, который я в настоящее время нахожусь дюйма

405
00:25:04,470 --> 00:25:06,880
Так что это на самом деле не работают в данном примере

406
00:25:06,880 --> 00:25:13,180
потому что он не узнал меня, как ввод вклад в DIV ввод с клавиатуры.

407
00:25:13,180 --> 00:25:15,740
>> Но если вы посмотрите на действия мыши,

408
00:25:15,740 --> 00:25:19,620
Первый из них парят, и он может сделать некоторые из этих использованием CSS.

409
00:25:19,620 --> 00:25:24,280
Если вы используете CSS, вы можете создать его так, чтобы при наведении на что-то,

410
00:25:24,280 --> 00:25:28,940
то его изменение стиля.

411
00:25:28,940 --> 00:25:32,170
Но использование JQuery вы можете изменить стили и другие вещи.

412
00:25:32,170 --> 00:25:37,120
Так, например, мы собираемся называть действия, если мы наведем курсор мыши этой див.

413
00:25:37,120 --> 00:25:39,660
Это означает, что если мы навести на нее, то окно исчезнет.

414
00:25:39,660 --> 00:25:42,430
Если мы будем двигаться от него, вновь появится окно.

415
00:25:42,430 --> 00:25:45,090
Если мы называем это и навести на нее, коробка действительно исчезает,

416
00:25:45,090 --> 00:25:47,050
и как только мы уходим, он возвращается.

417
00:25:47,050 --> 00:25:49,750
Если мы назовем эту функцию при наведении мыши на ID,

418
00:25:49,750 --> 00:25:54,380
что соответствует этой рамки, то, если мы наведем курсор мыши коробки,

419
00:25:54,380 --> 00:26:00,440
Затем бокс будет на самом деле исчезают - это бытие фанк прямо сейчас, но -

420
00:26:00,440 --> 00:26:06,310
Если мы отойдем от него, он вновь появится. Сейчас это назад по некоторым причинам.

421
00:26:06,310 --> 00:26:12,720
Введите мыши и функции перемещения мыши в чем-то похожи, но немного отличается.

422
00:26:12,720 --> 00:26:16,470
Мышь ввести только активизируется, когда мышь входит в коробку, как и ожидалось.

423
00:26:16,470 --> 00:26:19,210
Так что, если вы двигаетесь в этом, то оно исчезнет.

424
00:26:19,210 --> 00:26:23,210
Но это не будет снова появится, когда вы уходите, вы будете иметь, чтобы вернуться на него для того, чтобы вернуться.

425
00:26:23,210 --> 00:26:25,590
Там также функции перемещения мыши, которая будет активировать

426
00:26:25,590 --> 00:26:29,300
когда мышь даже присутствует в коробке.

427
00:26:29,300 --> 00:26:32,430
Так что будем просто продолжать идти, Плавное появление и исчезновение.

428
00:26:32,430 --> 00:26:35,660
И это на самом деле Лесоповал - Это кажется, что это просто исчезают, и выйдет,

429
00:26:35,660 --> 00:26:39,140
но это на самом деле вход намного больше действий, чем это,

430
00:26:39,140 --> 00:26:43,550
поэтому, когда вы уходите он будет просто продолжать идти, потому что вошли как тысяча из них.

431
00:26:43,550 --> 00:26:46,620
Может, не тысяча. Может быть, пять.

432
00:26:46,620 --> 00:26:50,200
Он регистрирует более того.

433
00:26:50,200 --> 00:26:53,280
Дело в том, все действия мыши, есть многие из них.

434
00:26:53,280 --> 00:26:55,480
Вы можете прочитать о других, но все они немного отличаются,

435
00:26:55,480 --> 00:26:57,700
и вы можете выбрать ту, вам нужно

436
00:26:57,700 --> 00:27:02,130
для какой конкретной цели вы пытаетесь сделать.

437
00:27:02,130 --> 00:27:05,060
>> Следующее, что я хочу поговорить о том, AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, я знаю, мы не охватили JavaScript в столько глубины в этом году,

439
00:27:09,340 --> 00:27:11,770
так что я просто буду говорить о AJAX вообще ни на минуту.

440
00:27:11,770 --> 00:27:15,210
AJAX расшифровывается как Asynchronous JavaScript и XML.

441
00:27:15,210 --> 00:27:19,030
Это в основном, например, когда вы на Facebook, и это толкает вам уведомление

442
00:27:19,030 --> 00:27:23,060
это потому, что AJAX работает на вашем веб-браузере.

443
00:27:23,060 --> 00:27:25,800
Каждые несколько секунд ваш браузер на самом деле

444
00:27:25,800 --> 00:27:29,420
собираются серверы Facebook, спрашивая их, у вас есть что-нибудь новое для меня,

445
00:27:29,420 --> 00:27:31,980
а затем он возвращается к вам.

446
00:27:31,980 --> 00:27:36,320
Это позволяет отправлять запросы на сервер

447
00:27:36,320 --> 00:27:38,660
фактически без необходимости загрузки страницы.

448
00:27:38,660 --> 00:27:42,040
Так что нормально, если вы используете только PHP и базы данных,

449
00:27:42,040 --> 00:27:45,480
у вас есть, чтобы обновить страницу, прежде чем получить новую информацию с сервера.

450
00:27:45,480 --> 00:27:48,770
Но использование AJAX, можно потянуть за эту новую информацию постоянно,

451
00:27:48,770 --> 00:27:52,250
или тянуть за него, когда вы нажимаете на кнопку или что-нибудь подобное.

452
00:27:52,250 --> 00:27:56,140
Таким образом, это позволяет нам посылать запросы без перезагрузки страницы,

453
00:27:56,140 --> 00:27:58,130
и мы можем использовать либо получить или подайте запросов.

454
00:27:58,130 --> 00:28:05,370
>> GET запросы, например, если вам в Google.com

455
00:28:05,370 --> 00:28:10,900
и делать Q = тест. Это дает им запроса тест.

456
00:28:10,900 --> 00:28:15,890
И это GET запрос, потому что это проходящий в эти параметры в URL себя.

457
00:28:15,890 --> 00:28:19,250
POST запрос, как будто вы отправляете их по почте.

458
00:28:19,250 --> 00:28:22,500
Это, как вы положите его в письмо и отправить его к ним,

459
00:28:22,500 --> 00:28:25,140
но они на самом деле не увидеть содержимое. Они не видны в URL.

460
00:28:25,140 --> 00:28:31,040
Вы не можете напрямую ввести его, вы должны отправить его чуть ли не тайком.

461
00:28:31,040 --> 00:28:33,880
Это в должности.

462
00:28:33,880 --> 00:28:38,660
Но использование JQuery, вы можете сделать GET и POST запросы

463
00:28:38,660 --> 00:28:42,740
гораздо легче, чем вы обычно могли просто использованием JavaScript.

464
00:28:42,740 --> 00:28:50,140
Вы можете запросить использованием API, получаем запросы, и вы также можете проверить информацию для входа.

465
00:28:50,140 --> 00:28:54,400
На следующей странице, я создал этот, который спрашивает: "Что у нас на обед?"

466
00:28:54,400 --> 00:28:58,230
использованием Гарвардского еду API, так что давайте тянуть, что вверх.

467
00:28:58,230 --> 00:29:01,840
Это всего лишь пример того, как можно использовать JQuery сделать GET запрос к API

468
00:29:01,840 --> 00:29:04,200
и получить информацию от него.

469
00:29:04,200 --> 00:29:07,090
Поэтому мы хотим, чтобы посмотреть меню на сегодняшний день,

470
00:29:07,090 --> 00:29:10,560
и мы хотим посмотреть, что у нас на обед.

471
00:29:10,560 --> 00:29:16,500
Вот URL создать GET запрос в JQuery.

472
00:29:16,500 --> 00:29:18,600
Вы используете $. получить функцию.

473
00:29:18,600 --> 00:29:22,290
Первым аргументом является URL, так что то, что Вы запроса.

474
00:29:22,290 --> 00:29:27,200
Тогда следующий аргумент является функцией, которая выполняется при GET запрос выполнен.

475
00:29:27,200 --> 00:29:29,980
Таким образом, вы отсылают некоторые запрос на сервер, ждать его, чтобы вернуться.

476
00:29:29,980 --> 00:29:33,770
Когда он вернется, вы собираетесь предпринять некоторые действия с данными, что вернулся с сервера.

477
00:29:33,770 --> 00:29:37,520
Давайте пойдем дальше и код это также.

478
00:29:37,520 --> 00:29:42,110
Я не закодировал это либо, нарочно.

479
00:29:42,110 --> 00:29:46,660
Вот что предстоит сделать. Прежде всего, давайте использовать привязку события

480
00:29:46,660 --> 00:29:50,820
так что при нажатии на эту кнопку, мы посылаем GET запрос.

481
00:29:50,820 --> 00:29:53,410
И когда это GET запрос возвращается с некоторым данным,

482
00:29:53,410 --> 00:29:57,290
мы собираемся записать его в эту ID DIV информация еды.

483
00:29:57,290 --> 00:30:02,860
Прежде всего, давайте выберем ID еду кнопки.

484
00:30:02,860 --> 00:30:07,320
Когда она нажата, мы хотим, чтобы что-то сделать.

485
00:30:07,320 --> 00:30:11,930
Давайте просто сделать его анонимным фикция, как и прежде.

486
00:30:11,930 --> 00:30:15,550
Можно обернуть эти фигурные скобки,

487
00:30:15,550 --> 00:30:18,530
и когда эта кнопка нажата, мы хотим послать GET запрос

488
00:30:18,530 --> 00:30:20,750
чтобы проверить, что у нас на обед.

489
00:30:20,750 --> 00:30:24,970
Чтобы сделать это, мы можем просто типа в $. Получить.

490
00:30:24,970 --> 00:30:28,850
Это JQuery функции, используя знак доллара.

491
00:30:28,850 --> 00:30:31,430
Это займет всего пару аргументов. Первым из них является URL,

492
00:30:31,430 --> 00:30:34,450
вторая функция обратного вызова, функции, вызываемой

493
00:30:34,450 --> 00:30:37,740
когда это на самом деле возвращает запрос.

494
00:30:37,740 --> 00:30:39,890
Давайте просто построить URL в первую очередь.

495
00:30:39,890 --> 00:30:44,650
Мы можем получить его из API, что Давид написал.

496
00:30:44,650 --> 00:30:51,360
Движение здесь, мы можем видеть, что это food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
а затем вы просто передаете в названиях параметров, которые вы хотели бы.

498
00:30:54,140 --> 00:30:57,760
Таким параметром 1 Значение 1.

499
00:30:57,760 --> 00:31:00,910
Похоже, что стандарт даты, даты начала, по умолчанию сегодня

500
00:31:00,910 --> 00:31:03,110
Если вы ничего не введете, а также дата окончания по умолчанию

501
00:31:03,910 --> 00:31:05,930
на сегодня, если вы ничего не введете.

502
00:31:05,930 --> 00:31:10,790
Это то, что мы хотим. Мы хотим, чтобы просто получить информацию на сегодняшний день.

503
00:31:10,790 --> 00:31:12,950
>> Мы хотим, чтобы формат, который будет в JSON.

504
00:31:12,950 --> 00:31:15,570
Вот только произвольные, вы можете использовать любую форму, которую вы хотите.

505
00:31:15,570 --> 00:31:18,950
Вы можете использовать CSV, JSON, но это нотации объектов JavaScript.

506
00:31:18,950 --> 00:31:24,150
Это очень легко для JavaScript, чтобы понять, что это значит,

507
00:31:24,150 --> 00:31:27,110
и мы можем напечатать его более легко, что путь.

508
00:31:27,110 --> 00:31:30,490
Итак, давайте просить его в JSON, и запрос обеда давай.

509
00:31:30,490 --> 00:31:37,660
Так еды = обеда. Просто, чтобы описать, что URL, мы идем сюда.

510
00:31:37,660 --> 00:31:41,290
Там в меню. Первым параметром является выход = JSON

511
00:31:41,290 --> 00:31:44,640
потому что это то, что мы хотим, и вы разделите с параметрами и.

512
00:31:44,640 --> 00:31:48,940
Второй параметр - Я не помню.

513
00:31:48,940 --> 00:31:52,170
Питания. И мы хотим обеда =.

514
00:31:52,170 --> 00:31:57,390
Вы можете проверить это URL, введя его в адресную строку браузера и идти в него.

515
00:31:57,390 --> 00:32:03,120
Это даст вам некоторое выход. Это просто куча вещей, что у нас на обед.

516
00:32:03,120 --> 00:32:10,410
Именно в этом формате уродливым. Мы хотим распечатать на нашей странице в лучшем формате.

517
00:32:10,410 --> 00:32:12,580
Так URL правильный, Теперь нам нужно написать функцию

518
00:32:12,580 --> 00:32:18,300
перезвонить при успешном выполнении запроса.

519
00:32:18,300 --> 00:32:20,430
Эта функция будет фактически принимать аргумент. Это будет данных.

520
00:32:20,430 --> 00:32:25,650
Данных является то, что возвращается из GET запрос после GET запрос делается.

521
00:32:25,650 --> 00:32:28,860
Мы можем сделать фигурные скобки; здесь мы пишем анонимные функции

522
00:32:28,860 --> 00:32:33,900
, которая выполняет, используя эти данные, когда мы получаем информацию обратно.

523
00:32:33,900 --> 00:32:37,840
Так что данные, когда мы набрали в этом URL,

524
00:32:37,840 --> 00:32:41,540
это то, что данные собирается выглядеть. Это собирается быть эта огромная строка.

525
00:32:41,540 --> 00:32:48,610
Но хорошо то, JavaScript может разобрать его с помощью JSON.parse функции.

526
00:32:48,610 --> 00:32:54,950
Поэтому давайте создадим новую переменную по имени разбора данных.

527
00:32:54,950 --> 00:32:57,060
И анализировать данные массива объектов.

528
00:32:57,060 --> 00:33:04,200
Каждый объект содержит информацию, такую ​​как - ну, давайте посмотрим.

529
00:33:04,200 --> 00:33:08,980
Она имеет даты, еда, категория, рецепт, все эти другие вещи.

530
00:33:08,980 --> 00:33:10,860
Так что давайте просто распечатать имя для каждого из них.

531
00:33:10,860 --> 00:33:13,790
Переберем целый ряд вещей, которые мы вернемся из этого,

532
00:33:13,790 --> 00:33:17,570
и просто распечатать каждый - вывода названия каждого из них.

533
00:33:17,570 --> 00:33:22,670
Это цикл.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript имеет полезные синтаксиса, где вы можете создать переменную и петля над массивом,

535
00:33:26,030 --> 00:33:30,150
Var и я просто итератора, чтобы вместо того, чтобы делать Var = 0,

536
00:33:30,150 --> 00:33:40,290
Я был меньше, чем длина, я + +, вы можете просто сделать уаг я в анализируемых данных.

537
00:33:40,290 --> 00:33:47,060
В этом примере анализируемых данных (I) будет соответствовать текущим элементом

538
00:33:47,060 --> 00:33:49,850
массива, фактическое объекта.

539
00:33:49,850 --> 00:33:51,720
И мы хотим, чтобы получить имя из него.

540
00:33:51,720 --> 00:33:54,170
Так что давайте просто делать имя.

541
00:33:54,170 --> 00:33:57,000
И последняя вещь, мы собираемся иметь некоторые JQuery снова.

542
00:33:57,000 --> 00:34:02,660
На самом деле добавить его в DIV, DIV эту еду информация, которая в настоящее время пуст.

543
00:34:02,660 --> 00:34:05,430
Так что давайте, что выбрать.

544
00:34:05,430 --> 00:34:13,870
Мы будем использовать JQuery и выберите еды информация DIV ID или ID еды информация, извините.

545
00:34:13,870 --> 00:34:16,580
Мы хотим добавить к этому.

546
00:34:16,580 --> 00:34:21,030
Если бы мы сделали тест, например, было бы просто перезаписать его каждый раз.

547
00:34:21,030 --> 00:34:29,190
Так что мы можем просто добавить это.

548
00:34:29,190 --> 00:34:31,889
Текущего элемента в массиве, мы получим имя из него,

549
00:34:31,889 --> 00:34:38,159
и мы добавим его в конце ID DIV информация еды.

550
00:34:38,159 --> 00:34:40,120
А потом просто, чтобы сделать ее более чистой,

551
00:34:40,120 --> 00:34:51,550
мы также добавляем строки так что это не все в одной строке.

552
00:34:51,550 --> 00:34:55,280
Так что, если все пойдет хорошо, то должно быть хорошо -

553
00:34:55,280 --> 00:34:57,220
Прежде всего, всякий раз, когда эта кнопка нажата,

554
00:34:57,220 --> 00:35:00,070
он пошлет с GET запрос к этому URL.

555
00:35:00,070 --> 00:35:02,500
Когда данные возвращается от него, это будет разобрать его,

556
00:35:02,500 --> 00:35:06,950
превратить его в JSON, петля на весь массив, представляющий, что данные,

557
00:35:06,950 --> 00:35:10,310
а затем добавите имя и строки

558
00:35:10,310 --> 00:35:16,500
к каждой строке в этом ID еды информацию, которая ранее была пустой.

559
00:35:16,500 --> 00:35:18,910
Так возвращаясь к этой странице будет обновлен,

560
00:35:18,910 --> 00:35:23,690
клик, выяснить - она ​​не работает. Это печально.

561
00:35:23,690 --> 00:35:25,830
И вот тут приходит дюйма отладки

562
00:35:25,830 --> 00:35:30,070
Index.html, линии 1.

563
00:35:30,070 --> 00:35:57,210
Интересно.

564
00:35:57,210 --> 00:35:59,720
Хорошо, ну, а не тратить время, делая это, я просто собираюсь

565
00:35:59,720 --> 00:36:07,070
подтянуть сделать файл, который у меня есть, который является завершенной версией.

566
00:36:07,070 --> 00:36:13,710
Я не уверен, в чем разница, но мы можем просто открыть это вместо этого.

567
00:36:13,710 --> 00:36:19,740
И мы идем к AJAX, и это должно работать правильно.

568
00:36:19,740 --> 00:36:21,730
Это то, что было на обед сегодня,

569
00:36:21,730 --> 00:36:24,870
В частности, нет порядка, с кавычками вокруг него, так что это не самая красивая.

570
00:36:24,870 --> 00:36:27,090
Но, очевидно, если вы делаете это для окончательного проекта,

571
00:36:27,090 --> 00:36:30,120
Вы хотели, чтобы она выглядела лучше.

572
00:36:30,120 --> 00:36:32,530
Но это всего лишь простой пример того, как вы делаете GET запроса.

573
00:36:32,530 --> 00:36:34,580
И если мы посмотрим на реальный код, я предполагаю, что, я уверен,

574
00:36:34,580 --> 00:36:39,690
он по-прежнему в значительной степени то же самое.

575
00:36:39,690 --> 00:37:04,990
Ой, я забыл, чтобы преобразовать его в строку, вот и все.

576
00:37:04,990 --> 00:37:07,920
Нет, он по-прежнему не работает. Несмотря на это, вот фактическая завершено код

577
00:37:07,920 --> 00:37:10,300
за то, что это должно выглядеть,

578
00:37:10,300 --> 00:37:16,400
и он делает то же самое, что я только что реализовано.

579
00:37:16,400 --> 00:37:22,760
Когда вы нажимаете на кнопку, она использует GET JSON для автоматического разбора данных.

580
00:37:22,760 --> 00:37:29,190
Он принимает данные от него и перебирает весь массив

581
00:37:29,190 --> 00:37:32,770
и печатает - все, что сегодня на обед, название его,

582
00:37:32,770 --> 00:37:38,020
и добавляет разрыв строки после каждой строки.

583
00:37:38,020 --> 00:37:41,100
Это, как вы используете функцию GET.

584
00:37:41,100 --> 00:37:44,040
>> Вы также можете использовать пост, который у меня не было времени

585
00:37:44,040 --> 00:37:47,940
подправить пример для этого, но мы можем посмотреть на документацию.

586
00:37:47,940 --> 00:37:53,220
Если вы посмотрите на jquery.post,

587
00:37:53,220 --> 00:37:55,510
Вы можете видеть, что это почти то же самое.

588
00:37:55,510 --> 00:38:01,650
У вас есть URL, но вместо передачи параметров с помощью -

589
00:38:01,650 --> 00:38:03,990
просто положить их в строку для URL себе,

590
00:38:03,990 --> 00:38:06,300
вы должны пройти в этом переменные данные

591
00:38:06,300 --> 00:38:11,990
что в основном массив, словарь, который отображает параметры в значения.

592
00:38:11,990 --> 00:38:17,690
Вы проходите, что в, и что отправляет их при помощи POST.

593
00:38:17,690 --> 00:38:20,790
И как только вы это, то вы можете иметь успех функцию

594
00:38:20,790 --> 00:38:23,930
который выполняется, когда данные возвращается.

595
00:38:23,930 --> 00:38:26,430
В противном случае, это точно так же. Таким образом, используя POST,

596
00:38:26,430 --> 00:38:29,970
Вы можете использовать POST, например, если у вас есть форма ввода

597
00:38:29,970 --> 00:38:35,780
Вы позволяете людям пароли входа в него, и отправить эти пароли от

598
00:38:35,780 --> 00:38:41,850
к серверным сценарием, чтобы проверить в базе данных, что ли пользователь является действительным или нет.

599
00:38:41,850 --> 00:38:46,700
Вы можете сделать это все с использованием JQuery вместо того, чтобы обновить страницу вообще.

600
00:38:46,700 --> 00:38:52,160
Вот как я реализовал в своем блоге, что я показал вам ранее.

601
00:38:52,160 --> 00:38:59,530
Если мы пойдем до конца портал и выйти из системы, выйти из системы,

602
00:38:59,530 --> 00:39:02,600
Выйти не работает.

603
00:39:02,600 --> 00:39:13,360
Ну, позвольте мне открыть его в новом окне.

604
00:39:13,360 --> 00:39:16,580
Здесь есть пароль, а я собирался ввести что-то случайное.

605
00:39:16,580 --> 00:39:18,590
Она не работает, но вы можете видеть, что мы не

606
00:39:18,590 --> 00:39:20,840
на самом деле нужно обновить страницу вообще.

607
00:39:20,840 --> 00:39:24,610
Кода, если вы хотите взглянуть на нее,

608
00:39:24,610 --> 00:39:37,460
Все это доступно здесь.

609
00:39:37,460 --> 00:39:45,680
Таким образом, код, который я написал в прошлом году некоторое время.

610
00:39:45,680 --> 00:39:47,790
Как вы можете видеть здесь, мы посылаем запрос POST.

611
00:39:47,790 --> 00:39:50,400
У меня есть файл с именем login.php в задней части,

612
00:39:50,400 --> 00:39:53,860
которая проверяет, является ли пароль едины.

613
00:39:53,860 --> 00:39:56,000
Параметров мы передаем только с помощью пароля, отображается на

614
00:39:56,000 --> 00:40:00,030
входа, в этом поле себе.

615
00:40:00,030 --> 00:40:04,110
И когда данные вернется, мы проверяем.

616
00:40:04,110 --> 00:40:07,680
Если данные ложные, то говорят, неправильный пароль, переместите его вниз,

617
00:40:07,680 --> 00:40:09,580
и просто заставить его исчезнуть после этого.

618
00:40:09,580 --> 00:40:12,320
В противном случае, мы загружаем страницу администратора.

619
00:40:12,320 --> 00:40:15,080
И все это было сделано с помощью JSON.

620
00:40:15,080 --> 00:40:18,510
В этом много строк кода, вы можете просто передать данные на сервер данных,

621
00:40:18,510 --> 00:40:21,020
проверка является ли он правильный, проверьте, что авторизация прошла успешно,

622
00:40:21,020 --> 00:40:24,200
и на самом деле ответить на него, перенаправление человека на нужную страницу

623
00:40:24,200 --> 00:40:29,760
или не давая им войти и говорил им, что у них был неправильный пароль.

624
00:40:29,760 --> 00:40:33,040
Вот пример того, как вы могли бы использовать JQuery POST

625
00:40:33,040 --> 00:40:37,010
отправить POST запрос к задней части,

626
00:40:37,010 --> 00:40:42,400
проверки, является ли кто-то авторизация прошла успешно.

627
00:40:42,400 --> 00:40:44,820
>> Ладно, так что все примеры, которые я имел, и все то, что я хотел, чтобы покрыть.

628
00:40:44,820 --> 00:40:47,110
Таковы основные вещи, которые JQuery позволяет вам делать:

629
00:40:47,110 --> 00:40:52,640
выбрать элементы, изменять их с помощью DOM манипуляции,

630
00:40:52,640 --> 00:40:56,340
Вы можете добавить эффекты, активизируют вещи на определенные события,

631
00:40:56,340 --> 00:41:00,430
а также делать запросы AJAX очень легко и просто.

632
00:41:00,430 --> 00:41:02,840
Так что спасибо, что пришли или смотреть,

633
00:41:02,840 --> 00:41:06,230
и если у вас есть какие-либо вопросы, просто дайте мне знать. Да?

634
00:41:06,230 --> 00:41:12,730
[Студент] назад, когда вы показали, нужно было JSON после POST запроса в кавычках,

635
00:41:12,730 --> 00:41:15,170
и мне было просто интересно, что это сделал.

636
00:41:15,170 --> 00:41:20,070
>> Да, я вижу. Вопрос заключался в том, что в примере, который я только что показал,

637
00:41:20,070 --> 00:41:25,790
было слово JSON в кавычки -

638
00:41:25,790 --> 00:41:31,690
Я просто потяните его вверх, снова - вокруг поста функции.

639
00:41:31,690 --> 00:41:43,320
Я просто потянув его вверх, чтобы показать.

640
00:41:43,320 --> 00:41:46,890
Итак, вот этот пост запрос, и есть эта JSON в кавычки.

641
00:41:46,890 --> 00:41:50,280
Это просто определяет, что мы ожидаем выход быть.

642
00:41:50,280 --> 00:41:54,070
Так, если мы передадим в JSON как ожидаемый тип данных,

643
00:41:54,070 --> 00:41:56,070
это не требование, но если мы пройдем его,

644
00:41:56,070 --> 00:41:58,590
то данные будут автоматически анализироваться как JSON.

645
00:41:58,590 --> 00:42:00,600
Таким образом, мы не должны вызывать функцию разбора JSON на нем,

646
00:42:00,600 --> 00:42:02,620
это будет просто происходить автоматически.

647
00:42:02,620 --> 00:42:05,150
И если вы посмотрите на документацию по почте,

648
00:42:05,150 --> 00:42:09,850
есть эта переменная тип данных, тип данных, ожидаемые от сервера.

649
00:42:09,850 --> 00:42:12,660
По умолчанию имеет обоснованные предположения, что может быть не так,

650
00:42:12,660 --> 00:42:15,520
так что вы можете оставить его пустым, но это всего лишь тип данных

651
00:42:15,520 --> 00:42:21,680
в кодировании, что вы используете, будь то JSON или XML или что-то еще.

652
00:42:21,680 --> 00:42:25,280
>> Любые другие вопросы?

653
00:42:25,280 --> 00:42:27,300
Хорошо. Если у Вас есть какие-либо вопросы, не стесняйтесь, пишите мне

654
00:42:27,300 --> 00:42:30,830
на vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
и слайды и код должен быть доступны в Интернете довольно скоро.

656
00:42:34,860 --> 00:42:42,810
Удачи вам в ваших окончательных проектов, надеюсь, что вы используете JQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]