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

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

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
Над 19,6 милиона уеб сайтове са го използвате, както и използване на все още нараства

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
Сред топ 10 милиона обекти, все още има -

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
на minified файл, който е без всички празно пространство и коментари, и е само на 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
Това е minified версия, която не се чете на всички.

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 KB,

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
След това можете да манипулират тези елементи, използващи по закона за функциите,

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
Тук имаме DIV. Ако ние действително изберете всички Divs на страницата,

133
00:07:17,430 --> 00:07:22,300
тя просто ще ни даде масив от всички Divs, които съществуват в този файл.

134
00:07:22,300 --> 00:07:27,040
The 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
изберете само неща с идентификатори, които са Divs.

140
00:07:48,260 --> 00:07:51,810
Така че, да. Само изберете Divs, които имат, че 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
И след това има също така не селектор, така че можете да изберете всички Divs

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 Мисля, че е команда смяна K или контрол на смяната K.

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
Така че можете просто да напишете в създадете променлива наречена X,

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
Ако изберете за добавяне ID и след това да приложи към него

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
Но това е пример за това как можете да използвате добавя нищо и прилага методи

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
I може да изпълни това в конзолата,

217
00:12:31,870 --> 00:12:35,480
и че ще добави този клас, и сега изглежда отвратително, както се очаква.

218
00:12:35,480 --> 00:12:39,680
The 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
Можем също така да премахнете неща, така че аз ще да изберете всички Divs

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
I могат да се освежат и да го върне обратно, за щастие,

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
Покажи / скрий ID действително отговаря на това цялата кутия,

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, и обратно до един, за да го вижда напълно отново.

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
и на тази дивизия можете да се обадите превключване а ако това е видимо, че ще стане невидим,

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
Ето и слайд. Има една дивизия за слайд.

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
Ние можем да изберете ID кутия.

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
>> Така че, на първо място, нека да изберете ID бутона кутия

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, а този е мишка 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
Така, например, ние пак ще се обадим действия, ако ние мишката върху този DIV.

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
и ние можем да използваме или GET или POST заявки.

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
A 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
Вие може да задава въпроси APIs използва GET искания, и можете да проверите данните за вход.

465
00:28:50,140 --> 00:28:54,400
На следващата страница, съм създал този, който пита: "Какво има за обяд?"

466
00:28:54,400 --> 00:28:58,230
използване на Harvard храна API, така че нека да дръпнеш нагоре.

467
00:28:58,230 --> 00:29:01,840
Това е само един пример за това как можете да използвате JQuery да направите заявка за получаване на 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
Тук е TODO. На първо място, нека използваме свързването събитие

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
ние ще го напиша в тази храна Div информация ID.

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
Нека просто го направи анонимно fuction, както преди.

486
00:30:11,930 --> 00:30:15,550
Да наслагвате тези фигурни скоби,

487
00:30:15,550 --> 00:30:18,530
и когато този бутон е натиснат, ние искаме да изпрати заявка за получаване на

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, че David написах.

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.

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 Object Notation.

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
Meal. И ние искаме обяд хранене =.

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 I е само на итератор, така че вместо да се налага да правя VAR I = 0,

536
00:33:30,150 --> 00:33:40,290
аз бях по-малко от дължината, аз + +, може просто да правя аз в Var анализирани данни.

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, тази дивизия хранене информация, че е празна.

543
00:34:02,660 --> 00:34:05,430
Така че нека да изберете това.

544
00:34:05,430 --> 00:34:13,870
Ще използваме Jquery и изберете храна 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
и ние ще го добавите към края на хранене Div информация ID.

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
той ще изпрати заявка за получаване на този 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
>> Можете да използвате POST, което аз не са имали време

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
[Student] Обратно, когато ви показах, трябваше 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
Аз просто ще го спра отново - около POST функция.

639
00:41:31,690 --> 00:41:43,320
Аз просто го дърпа нагоре за да покаже.

640
00:41:43,320 --> 00:41:46,890
Така че тук е това POST заявка, а има и този 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
И ако погледнете документацията за POST,

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]