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]