1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminarium: jQuery]

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

3
00:00:04,790 --> 00:00:08,000
[To jest CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Jeśli jesteś po wzdłuż w domu, rzeczywiście można uzyskać dostęp do moich slajdów Internecie

5
00:00:10,640 --> 00:00:13,310
wchodząc na ten link.

6
00:00:13,310 --> 00:00:18,650
To TjjRWj na bit.ly.

7
00:00:18,650 --> 00:00:20,700
Możesz też po prostu przejść do adresu URL bezpośrednio,

8
00:00:20,700 --> 00:00:27,300
co jest cloud.cs50.net / ~ vshekhawat, które jest moje imię,

9
00:00:27,300 --> 00:00:32,409
i jquery.

10
00:00:32,409 --> 00:00:34,920
Gorąco zachęcamy do podążać jeśli to oglądasz w domu,

11
00:00:34,920 --> 00:00:40,650
i jeśli jesteś tutaj, też, bo to jest dość interaktywne przedstawienie.

12
00:00:40,650 --> 00:00:43,160
>> Więc dzisiaj mam zamiar mówić o jQuery, i pierwsze pytanie,

13
00:00:43,160 --> 00:00:45,300
co to jest jQuery?

14
00:00:45,300 --> 00:00:47,090
W tym roku, wiem, że faceci nie są objęte JavaScript

15
00:00:47,090 --> 00:00:51,080
tak szczegółowo, jak to już w ostatnich latach.

16
00:00:51,080 --> 00:00:53,150
JavaScript jest, przede wszystkim, tylko po stronie klienta język

17
00:00:53,150 --> 00:00:58,390
, który służy do uruchamiania skryptów i kodu na każdym komputerze.

18
00:00:58,390 --> 00:01:00,660
Więc masz serwer, który zapewnia stron internetowych dla osób,

19
00:01:00,660 --> 00:01:02,600
ale możesz robić rzeczy, na ich maszyny,

20
00:01:02,600 --> 00:01:08,060
zapytaj ich urządzenia do wysyłania żądania do serwera co 30 sekund czy coś takiego.

21
00:01:08,060 --> 00:01:10,420
Możesz to zrobić za pomocą JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery tylko zapewnia większą funkcjonalność na szczycie JavaScript

23
00:01:13,190 --> 00:01:15,680
że ma dodatkowe rzeczy dla Ciebie.

24
00:01:15,680 --> 00:01:17,710
Jeśli spojrzeć na treści na górze,

25
00:01:17,710 --> 00:01:21,410
które opisuje niektóre z rzeczy, które jesteś w stanie zrobić.

26
00:01:21,410 --> 00:01:23,500
Tak ogólnie, to powstała w styczniu 2006 roku.

27
00:01:23,500 --> 00:01:26,560
Po raz pierwszy został pomyślany w sierpniu 2005 roku.

28
00:01:26,560 --> 00:01:31,370
To już za kilka lat, a to jest naprawdę częścią nowego ruchu Web 2.0

29
00:01:31,370 --> 00:01:34,330
że robił Internet tak błyszczące.

30
00:01:34,330 --> 00:01:37,630
Jest to najczęściej używany biblioteki JavaScript.

31
00:01:37,630 --> 00:01:41,450
Ponad 19.600.000 strony są jej używania i użytkowania nadal rośnie

32
00:01:41,450 --> 00:01:45,640
według builtwith.com, który, zdaje się, w ciągu ostatniego roku,

33
00:01:45,640 --> 00:01:49,710
właśnie stale rośnie dość liniowo.

34
00:01:49,710 --> 00:01:52,870
Wśród najlepszych 10 milionów stron, jest jeszcze -

35
00:01:52,870 --> 00:01:55,180
około 40% z nich jest obecnie używany.

36
00:01:55,180 --> 00:01:58,540
Facebook wykorzystuje je, wiele innych stron internetowych obecnie używać.

37
00:01:58,540 --> 00:02:01,540
Możesz patrzeć na te statystyki na własną rękę, jeśli chcesz.

38
00:02:01,540 --> 00:02:05,820
I można powiedzieć, że to legit, ponieważ ma podstawę i 13 członków Zarządu,

39
00:02:05,820 --> 00:02:11,910
wraz z zespołem 20 ludzi, którzy pracują na nim regularnie.

40
00:02:11,910 --> 00:02:16,110
Więc to jest bardzo szeroko stosowane, to ma. URL org, to jest fantazja,

41
00:02:16,110 --> 00:02:21,660
to ma skutki dla innych rzeczy, więc jest to duży problem.

42
00:02:21,660 --> 00:02:24,510
>> Dlaczego warto z niej korzystać? JQuery jest bardzo lekki.

43
00:02:24,510 --> 00:02:27,270
Oznacza to, że nie jest to ogromny plik. Możesz pobrać

44
00:02:27,270 --> 00:02:31,540
minified plik, który jest bez wszystkich białej przestrzeni i uwagi, a to tylko 32 kB.

45
00:02:31,540 --> 00:02:33,600
Tak łatwo jest po prostu wrzucić na swojej stronie internetowej

46
00:02:33,600 --> 00:02:35,910
i po prostu zacząć go używać.

47
00:02:35,910 --> 00:02:39,630
Jest to także bardzo sprawnie napisany, więc nie trzeba się wiele -

48
00:02:39,630 --> 00:02:42,550
to nie spowalnia swojej stronie wiele, gdy go używać.

49
00:02:42,550 --> 00:02:45,770
Pozwala realizować rzeczy, które wcześniej były niemożliwe.

50
00:02:45,770 --> 00:02:47,790
Istnieją pewne aspekty funkcjonalności,

51
00:02:47,790 --> 00:02:51,780
jak tworzenie animacji, które normalnie byłoby bardzo, bardzo trudne do zrobienia.

52
00:02:51,780 --> 00:02:54,300
Ale w jQuery są bardzo proste.

53
00:02:54,300 --> 00:02:57,040
I są pewne rzeczy, które są denerwujące uwagi,

54
00:02:57,040 --> 00:02:59,610
możliwe w JavaScript, takie jak wysyłanie żądania POST,

55
00:02:59,610 --> 00:03:02,190
ale aby wysłać żądanie do serwera, musisz napisać

56
00:03:02,190 --> 00:03:04,320
pięć lub sześć lub siedem linii kodu.

57
00:03:04,320 --> 00:03:07,200
Teraz możesz to zrobić w jednej linii kodu, w jednym wywołaniu funkcji.

58
00:03:07,200 --> 00:03:11,790
To bardzo upraszcza wiele rzeczy, które robisz.

59
00:03:11,790 --> 00:03:15,950
I wszystkie dzieciaki korzystasz. Przez to, mam na myśli mnie.

60
00:03:15,950 --> 00:03:19,270
W moim ostatnim projekcie w ubiegłym roku, co jest news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
co jest dla stacji radiowej, stworzyłem ten blog

62
00:03:22,530 --> 00:03:29,750
w którym odbywają się wszystkie koncerty, które mamy zrobić i pliki MP3 do nich.

63
00:03:29,750 --> 00:03:32,070
Możesz przeglądać ostatnich pokazach,

64
00:03:32,070 --> 00:03:34,130
i to wszystko zrobić za pomocą jQuery. Można powiedzieć,

65
00:03:34,130 --> 00:03:37,340
z powodu tych wszystkich animacji, w istocie.

66
00:03:37,340 --> 00:03:42,360
Więc jeśli masz - jeśli tworzysz nowy post,

67
00:03:42,360 --> 00:03:45,980
widzisz te małe slideDowns, że wszystko odbywa się przy użyciu jQuery.

68
00:03:45,980 --> 00:03:49,140
I to więdną - tak tego rodzaju rzeczy jest wykonywane przy użyciu jQuery,

69
00:03:49,140 --> 00:03:52,720
i nie trzeba stale odświeżyć stronę, aby poruszać się po witrynie.

70
00:03:52,720 --> 00:03:57,220
Kolejna fajna rzecz, która z wykorzystaniem jQuery jest ta prezentacja.

71
00:03:57,220 --> 00:03:59,700
Używam tego otwartego rzecz source o nazwie scrolldeck,

72
00:03:59,700 --> 00:04:03,250
co ktoś napisał na górze jQuery.

73
00:04:03,250 --> 00:04:04,870
Jeśli spojrzy na źródła, można zobaczyć, że

74
00:04:04,870 --> 00:04:07,830
że używają tego znaku dolara, znaki dolara

75
00:04:07,830 --> 00:04:12,110
są wykorzystywane w jQuery oznaczać, że funkcja jest jQuery funkcja.

76
00:04:12,110 --> 00:04:15,020
Więc oni określenie otoki na górze jQuery

77
00:04:15,020 --> 00:04:18,570
, który pozwala dokonać prezentacji tak,

78
00:04:18,570 --> 00:04:21,200
i widać, że tutaj są one w tym oryginalny plik jQuery,

79
00:04:21,200 --> 00:04:24,120
czyli co musisz to jeśli chcesz używać jQuery

80
00:04:24,120 --> 00:04:30,450
na swoje strony.

81
00:04:30,450 --> 00:04:32,790
>> Czekając na to, w jaki sposób go zainstalować?

82
00:04:32,790 --> 00:04:36,150
Możesz pójść do jQuery.com i pobrać plik,

83
00:04:36,150 --> 00:04:38,320
dodać go do katalogu stron i obejmuje go.

84
00:04:38,320 --> 00:04:42,200
Więc po prostu na górze, w tagu głowa pliku HTML

85
00:04:42,200 --> 00:04:45,400
z głównego pliku HTML, wystarczy, że wiersz kodu

86
00:04:45,400 --> 00:04:49,490
z poprawnej wersji, dla których wersja jQuery używasz.

87
00:04:49,490 --> 00:04:51,340
Można go pobrać, przechodząc do jQuery.com,

88
00:04:51,340 --> 00:04:55,130
Kliknij przycisk "Download jQuery," i masz go. To wszystko.

89
00:04:55,130 --> 00:04:58,880
I rzeczywiście, możemy przyjrzeć się, jak to wygląda.

90
00:04:58,880 --> 00:05:01,080
Jeśli klikniesz na pobierz tutaj, jQuery to.

91
00:05:01,080 --> 00:05:05,260
To jest po prostu jeden wielki plik JavaScript, który nie wszystkie magiczne rzeczy dla Ciebie.

92
00:05:05,260 --> 00:05:09,270
Jest minified wersji, która nie może być odczytany w ogóle.

93
00:05:09,270 --> 00:05:13,180
Możesz też zajrzeć na wersji rozwojowej, która jest czytelna

94
00:05:13,180 --> 00:05:15,370
ale nadal bardzo, bardzo długo.

95
00:05:15,370 --> 00:05:17,980
Jest wiele rzeczy w tam.

96
00:05:17,980 --> 00:05:20,240
Można również link do obsługiwanej wersji Google to.

97
00:05:20,240 --> 00:05:23,820
Tak, że będziemy pozwalają tylko polegać na Google, aby dostarczyć.

98
00:05:23,820 --> 00:05:29,310
Zapewniają każdą wersję, dostępną w każdym czasie.

99
00:05:29,310 --> 00:05:31,530
Tak więc prawdopodobnie można polegać na Google, aby udostępniać je dla Ciebie.

100
00:05:31,530 --> 00:05:33,270
Można też na niej link do własnej jQuery w najnowszej wersji.

101
00:05:33,270 --> 00:05:36,400
Mają adres URL, który zawsze jest zaktualizowany do najnowszej wersji.

102
00:05:36,400 --> 00:05:40,850
To jQuery-ostatni, i jest jeden problem z tym,

103
00:05:40,850 --> 00:05:44,350
która jest, że, jeśli aktualizacja jQuery i niektóre z poprzedniej funkcji

104
00:05:44,350 --> 00:05:47,250
oni staje uległej retrogradacji lub przestarzałe,

105
00:05:47,250 --> 00:05:49,620
nie może - może rozpocząć się nie dać już wspierane.

106
00:05:49,620 --> 00:05:52,940
Więc jeśli piszesz stronę za pomocą wersji 1.8.2,

107
00:05:52,940 --> 00:05:55,000
przez wersję czasu 2.7 wychodzi

108
00:05:55,000 --> 00:05:57,000
niektóre z funkcji, które napisałem nie działają już.

109
00:05:57,000 --> 00:05:59,930
Więc lepiej jest po prostu pobrać 32 plików kB,

110
00:05:59,930 --> 00:06:04,100
umieścić ją na swojej stronie internetowej, a będziesz pracować zawsze.

111
00:06:04,100 --> 00:06:07,450
>> Mam zamiar iść do przodu i zacząć mówić o rzeczywistej funkcjonalności jQuery.

112
00:06:07,450 --> 00:06:13,090
Pierwszą rzeczą jest selektorów. To jest to, co jQuery był początkowo pomyślany, aby zapewnić.

113
00:06:13,090 --> 00:06:15,500
I możesz kliknąć na dokumentacji patrzeć

114
00:06:15,500 --> 00:06:18,690
Szczegółowa dokumentacja dla selekcjonerów I zamierzam pokrycie.

115
00:06:18,690 --> 00:06:24,120
Ideą selektorów jest to, że można wybrać elementów HTML na stronie.

116
00:06:24,120 --> 00:06:28,790
Elementy na stronie mają identyfikatory i klasy i innych określających aspekty do nich.

117
00:06:28,790 --> 00:06:30,500
Jest też - Oni są w różnych zleceń.

118
00:06:30,500 --> 00:06:32,570
Raz na jakiś czas są one zagnieżdżone wewnątrz siebie.

119
00:06:32,570 --> 00:06:38,120
JQuery pozwala na budowę prostych zapytań pobierających elementy z tej strony.

120
00:06:38,120 --> 00:06:41,890
Następnie można manipulować tych elementów za pomocą jQuery funkcje,

121
00:06:41,890 --> 00:06:43,990
która jest sekcja manipulacja dostaniemy później.

122
00:06:43,990 --> 00:06:46,040
Możesz zmienić HTML, zmienić CSS,

123
00:06:46,040 --> 00:06:50,500
można również animować i dodać funkcje, które aktywują się na pewne wydarzenia.

124
00:06:50,500 --> 00:06:52,710
Tak więc, na przykład, jeśli coś się kliknął, chcesz coś się stało,

125
00:06:52,710 --> 00:06:55,210
możesz to zrobić przy użyciu jQuery, jak również.

126
00:06:55,210 --> 00:06:57,380
I istnieje ogromna liczba sposobów wyboru elementów.

127
00:06:57,380 --> 00:07:00,310
Większość z nich nigdy nie używane, ale są te podstawowe,

128
00:07:00,310 --> 00:07:02,340
które są bardzo ważne.

129
00:07:02,340 --> 00:07:05,750
Selektor elementu, na przykład, jeśli jesteś po prostu wybierając niczego

130
00:07:05,750 --> 00:07:10,640
to jest div - I rzeczywiście kod otwarty dla prezentacji slajdów.

131
00:07:10,640 --> 00:07:13,450
Tak więc, na przykład, oto pierwszy slajd.

132
00:07:13,450 --> 00:07:17,430
Tutaj mamy div. Jeśli rzeczywiście wybrać wszystkie div na stronie,

133
00:07:17,430 --> 00:07:22,300
będzie to po prostu dać nam tablicę wszystkich div, które istnieją w tym pliku.

134
00:07:22,300 --> 00:07:27,040
ID selektor pozwala wybrać coś z danym ID.

135
00:07:27,040 --> 00:07:32,230
Jeżeli więc, na przykład, tego co ma identyfikator "co"

136
00:07:32,230 --> 00:07:37,160
i jeśli zrobił to z # co zamiast jakiegoś identyfikatora,

137
00:07:37,160 --> 00:07:42,920
to po prostu zwraca tablicę, która ma jeden element i to jest ten element strony.

138
00:07:42,920 --> 00:07:45,490
Możemy również połączyć selektorów w ten sposób poprzez

139
00:07:45,490 --> 00:07:48,260
wybrać tylko rzeczy z identyfikatorów, które są DIV.

140
00:07:48,260 --> 00:07:51,810
Więc tak. Tylko wybierz div, które mają tego identyfikatora.

141
00:07:51,810 --> 00:07:55,260
Dla klasy po prostu użyć kropki, to samo, co CSS.

142
00:07:55,260 --> 00:07:57,500
Potomek działa również, więc jeśli masz jakąś klasę

143
00:07:57,500 --> 00:08:00,170
i to zagnieżdżone elementy wewnątrz niego - tak, na przykład,

144
00:08:00,170 --> 00:08:03,260
istnieje pewna klasa i ma tagu kotwicy, żeby dodać odnośnik do innej strony,

145
00:08:03,260 --> 00:08:08,510
można użyć tej składni do pobrania link.

146
00:08:08,510 --> 00:08:12,420
Możesz również wybrać kilka rzeczy na raz, tylko oddzielić je przecinkami

147
00:08:12,420 --> 00:08:17,360
używać selektor, który chcesz, a będzie można wybrać je wszystkie na raz, w jednym szeregu.

148
00:08:17,360 --> 00:08:19,650
I wtedy też nie selektor, więc można wybrać wszystkie div

149
00:08:19,650 --> 00:08:24,210
że nie mają jakieś konkretne klasy.

150
00:08:24,210 --> 00:08:28,790
A to tylko jako sposób na wprowadzenie do tego, jak ta opcja działa.

151
00:08:28,790 --> 00:08:32,270
Pokażę kilka konkretnych przykładów w drugim.

152
00:08:32,270 --> 00:08:35,480
>> Zaawansowane selektory są - to tylko kilka przykładów.

153
00:08:35,480 --> 00:08:38,840
Istnieją dziesiątki tych, ale jeśli chcesz wybrać wszystkie tagi obrazu

154
00:08:38,840 --> 00:08:42,799
w ramach jakiegoś elementu, to po prostu zrobić: obraz.

155
00:08:42,799 --> 00:08:45,340
Jeśli chce wybrać nawet elementy, na przykład, jeśli jest 20 z nich,

156
00:08:45,340 --> 00:08:48,290
chcesz wybrać 0, 2, 4, 6, i tak dalej,

157
00:08:48,290 --> 00:08:51,630
zrobić: nawet, czy można to zrobić również: dziwne.

158
00:08:51,630 --> 00:08:55,470
Są to pseudo selektorów, co oznacza, że ​​faktycznie obliczyć

159
00:08:55,470 --> 00:09:00,960
każdy inny element, a nie tylko iść i wybierając je wszystkie.

160
00:09:00,960 --> 00:09:05,510
Można również - każdy element może mieć określone atrybuty.

161
00:09:05,510 --> 00:09:10,580
Tak więc, na przykład, class = center jest również atrybutem.

162
00:09:10,580 --> 00:09:16,500
Dla tego tagu kotwicy, href, hipertekst odniesienia, jest atrybutem również.

163
00:09:16,500 --> 00:09:21,150
Tak więc można wybrać coś, że linki do konkretnej strony lub po prostu - to bardzo ogólne.

164
00:09:21,150 --> 00:09:25,410
Możesz wybrać coś z każdego atrybutu, które chcesz.

165
00:09:25,410 --> 00:09:27,470
A potem, również atrybut zawiera.

166
00:09:27,470 --> 00:09:30,420
Jeśli, na przykład, chciał, aby wybrać wszystkie elementy wejściowe

167
00:09:30,420 --> 00:09:32,700
, które mają słowo "przepustkę" jako nazwę nich

168
00:09:32,700 --> 00:09:37,560
jeśli strona ma blok tekstu wejściowego

169
00:09:37,560 --> 00:09:41,050
to się nazywa "password", to byłoby jednym ze sposobów można wybrać, które.

170
00:09:41,050 --> 00:09:43,020
I wiele więcej. Można iść dalej i patrzeć na dokumentacji

171
00:09:43,020 --> 00:09:46,950
i zobaczyć konkretne przykłady, jak to działa.

172
00:09:46,950 --> 00:09:48,840
>> Następną rzeczą jest manipulacji DOM.

173
00:09:48,840 --> 00:09:52,500
Po wybierz elementy, będziemy chcieli, aby rzeczywiście robić rzeczy z nimi.

174
00:09:52,500 --> 00:09:55,500
Do tej pory nie spojrzał na to w ogóle, ale jeśli spojrzeć na dokumentacji,

175
00:09:55,500 --> 00:09:57,950
tam naprawdę dużo, że możemy zrobić.

176
00:09:57,950 --> 00:10:02,900
W tym momencie mamy zamiar wybrać elementy na tej prezentacji

177
00:10:02,900 --> 00:10:04,890
i manipulować nimi przy użyciu jQuery.

178
00:10:04,890 --> 00:10:08,290
Bo to jest realizowane przy użyciu jQuery, mamy dostęp do biblioteki jQuery,

179
00:10:08,290 --> 00:10:13,580
i możemy korzystać z tych funkcji, w tym kodzie.

180
00:10:13,580 --> 00:10:16,200
Jednym z przydatnych rzeczy, które może nie wiedzieć o jest konsola.

181
00:10:16,200 --> 00:10:19,340
I Google Chrome jest to, co używam. Można nacisnąć alt polecenia J

182
00:10:19,340 --> 00:10:21,720
lub alt control J, aby otworzyć konsolę.

183
00:10:21,720 --> 00:10:26,130
Firefox Myślę, że to polecenie przesunięcia K lub Shift Control K.

184
00:10:26,130 --> 00:10:28,880
W Safari trzeba iść zmienić niektóre ustawienia.

185
00:10:28,880 --> 00:10:35,460
Tam jest link, jeśli chcesz to zrobić, ale ja polecam się Chrome lub Firefox.

186
00:10:35,460 --> 00:10:37,750
Warto więc otworzyć konsolę, to tutaj.

187
00:10:37,750 --> 00:10:41,170
Pozwala po prostu w zasadzie zrobić wszystko, co chcesz.

188
00:10:41,170 --> 00:10:45,100
Więc może po prostu wpisać w utworzyć zmienną x nazwie,

189
00:10:45,100 --> 00:10:49,200
x = 5, zobaczmy co x + 2 jest.

190
00:10:49,200 --> 00:10:57,670
Można nawet zrobić coś jak CS + Zobaczmy, x + 45, że będzie CS50.

191
00:10:57,670 --> 00:11:00,530
Możesz po prostu zrobić kilka typowych rzeczy JavaScript.

192
00:11:00,530 --> 00:11:02,730
Ale można też zrobić jQuery tutaj.

193
00:11:02,730 --> 00:11:06,200
>> Warto więc spojrzeć na ten pierwszy aspekt tutaj.

194
00:11:06,200 --> 00:11:09,500
Zamierzamy utworzyć zmienną o nazwie HTML, który jest ciągiem znaków.

195
00:11:09,500 --> 00:11:15,890
Posiada znacznik akapitu w to, że nazywa się jakiś nowy tekst.

196
00:11:15,890 --> 00:11:19,420
Mamy więc ten HTML, to jakiś nowy tekst, w znaczników akapitu.

197
00:11:19,420 --> 00:11:21,800
Teraz naprawdę chcemy, aby dodać go do strony.

198
00:11:21,800 --> 00:11:28,310
I ustawić go tak, że HTML do niniejszego ustępu, tytuł ten tutaj, to append ID.

199
00:11:28,310 --> 00:11:32,320
Jeśli wybieramy identyfikator append a następnie dodać do niego

200
00:11:32,320 --> 00:11:34,560
HTML zmienna I właśnie stworzył,

201
00:11:34,560 --> 00:11:40,370
to dodać, że kod HTML na końcu, tuż po tym tagiem ust.

202
00:11:40,370 --> 00:11:43,730
Więc jeśli to zrobimy - wybraliśmy ten akapit,

203
00:11:43,730 --> 00:11:47,590
i mamy wywołaniu funkcji dołączania z HTML zmiennej Właśnie dodanej,

204
00:11:47,590 --> 00:11:50,960
to dodać, że nowy tekst tam na stronie.

205
00:11:50,960 --> 00:11:54,970
Można również poprzedzić, co oznacza, że ​​to jest możliwe, zanim na początku tego elementu.

206
00:11:54,970 --> 00:11:58,290
Więc jest jakiś nowy tekst na początku i później.

207
00:11:58,290 --> 00:12:01,660
Mogę śmiało odświeżyć, aby pozbyć się tych rzeczy I właśnie wykonywana.

208
00:12:01,660 --> 00:12:05,280
Ale to jest przykład jak można użyć prepend i dołączyć metody

209
00:12:05,280 --> 00:12:08,910
manipulować rzeczy na stronie, dodać trochę kodu HTML.

210
00:12:08,910 --> 00:12:11,080
>> Można również zmienić klasy.

211
00:12:11,080 --> 00:12:14,970
Jeszcze w tym pliku stylu, stworzyłem ten dla klasy win

212
00:12:14,970 --> 00:12:19,990
, który ma kolor czerwony tekst, jakiś kolor tła i cienia tekstu.

213
00:12:19,990 --> 00:12:23,810
Wygląda to ohydne, ale może faktycznie -

214
00:12:23,810 --> 00:12:26,410
niniejszym ustępie odpowiada identyfikator klasy.

215
00:12:26,410 --> 00:12:29,860
Więc mogę dodać klasę dla wygranej.

216
00:12:29,860 --> 00:12:31,870
Mogę wykonać to w konsoli,

217
00:12:31,870 --> 00:12:35,480
i że będzie dodać, że klasy, a teraz wygląda to ohydne, jak oczekiwano.

218
00:12:35,480 --> 00:12:39,680
CSS automatycznie zostanie zastosowane do klas, że -

219
00:12:39,680 --> 00:12:42,680
czy jest CSS dla klasy, automatycznie zostanie zastosowana

220
00:12:42,680 --> 00:12:44,680
jeśli zmienisz klasę elementu.

221
00:12:44,680 --> 00:12:49,230
Wtedy możemy po prostu usunąć go za pomocą Remove Class.

222
00:12:49,230 --> 00:12:53,690
Więc jeśli masz kilka predefiniowanych klas, takich jak czerwony lub wyróżniony,

223
00:12:53,690 --> 00:12:55,990
a następnie chcesz zastosować te, do elementów,

224
00:12:55,990 --> 00:12:58,230
nie trzeba robić wszystko CSS stylizacji każdym razem.

225
00:12:58,230 --> 00:13:01,510
Można tylko dodać klasę do elementu, a następnie zostanie ona automatycznie stają się -

226
00:13:01,510 --> 00:13:05,580
będzie automatycznie wyszuka odpowiednie dla tej klasy.

227
00:13:05,580 --> 00:13:07,900
Możemy również usunąć rzeczy, więc mam zamiar wybrać wszystkie div

228
00:13:07,900 --> 00:13:10,830
na stronie i usunąć je.

229
00:13:10,830 --> 00:13:13,990
Co to będzie wyglądać?

230
00:13:13,990 --> 00:13:16,170
To będzie wyglądać jak nic, więc nie ma właściwie nic.

231
00:13:16,170 --> 00:13:18,170
Moja prezentacja nie ma.

232
00:13:18,170 --> 00:13:21,290
Można odświeżyć i wprowadzić go ponownie, na szczęście,

233
00:13:21,290 --> 00:13:24,420
bo to po prostu działa raz,

234
00:13:24,420 --> 00:13:29,460
ale to jest przykład usunięcia, jeśli chcesz, aby całkowicie zniszczyć element poza stronę.

235
00:13:29,460 --> 00:13:33,180
>> Możesz również zastąpić, i mam zamiar wybrać wszystkie znaczniki akapitów na stronie

236
00:13:33,180 --> 00:13:36,850
i przejść w nich i zastąpić dowolny inny tekst mają w nich

237
00:13:36,850 --> 00:13:39,690
z tylko słowo "badanie".

238
00:13:39,690 --> 00:13:46,520
Jeśli to zrobisz, możesz zamienić każdy paragraf na stronie z tego badania.

239
00:13:46,520 --> 00:13:49,150
Tak. Oni wszyscy zastąpić badania.

240
00:13:49,150 --> 00:13:53,270
Więc to jest przykład dostępu do tekstu i zastępowanie go.

241
00:13:53,270 --> 00:13:57,490
Można również uzyskać informacje, a to jest naprawdę fajne dla pól wejściowych.

242
00:13:57,490 --> 00:14:00,470
Jeśli pole wprowadzania, że ​​ludzie są wpisując rzeczy do,

243
00:14:00,470 --> 00:14:03,880
ludzie wpisując rzeczy do niego,

244
00:14:03,880 --> 00:14:09,030
tu wybrać wejście, każdy tag wejście w nowy rodzaj tekstu.

245
00:14:09,030 --> 00:14:13,800
W tym przypadku jest tylko jedno wejście box w całej prezentacji,

246
00:14:13,800 --> 00:14:17,260
więc musimy po prostu wybrać pierwszy z nich, a następnie wywołujemy funkcję val na nim.

247
00:14:17,260 --> 00:14:19,570
, Która zwraca wartość, a na polu tekstowym,

248
00:14:19,570 --> 00:14:24,330
wartość jest po prostu, co dzieje się w środku.

249
00:14:24,330 --> 00:14:31,880
Więc jeśli to zrobimy, to po prostu zwraca rzeczy ciąg.

250
00:14:31,880 --> 00:14:36,860
A jeśli nazwiemy go ponownie po napisaniu więcej rzeczy, okazuje się więcej rzeczy.

251
00:14:36,860 --> 00:14:40,760
To jeden świetny sposób, aby uzyskać dostęp do elementów na polu tekstowym, a następnie sprawdzić,

252
00:14:40,760 --> 00:14:45,060
jest to, że podany adres e-mail, jest to ważna data, na przykład.

253
00:14:45,060 --> 00:14:49,600
Możesz tylko pobierać rzeczy od razu, jak ludzie są wpisując je,

254
00:14:49,600 --> 00:14:54,830
a następnie sprawdzić, czy to ważne, wysłać go do serwera, rób co chcesz z nim.

255
00:14:54,830 --> 00:14:57,720
A to, w jaki sposób uzyskać dostęp do tego, co jest w środku tych polach.

256
00:14:57,720 --> 00:15:00,090
>> Można również zmodyfikować CSS bezpośrednio, więc zamiast dodawać

257
00:15:00,090 --> 00:15:02,510
Klasa, która ma kilka predefiniowanych właściwości,

258
00:15:02,510 --> 00:15:08,120
można po prostu dodać cokolwiek CSS chcesz coś.

259
00:15:08,120 --> 00:15:10,350
Warto więc wybrać ciało, które jest cała prezentacja,

260
00:15:10,350 --> 00:15:14,370
i kolor jest właściwość, która określa, jakie kolory tekst.

261
00:15:14,370 --> 00:15:19,420
Jeśli zmienimy go na czerwono, cały tekst na stronie zmieni kolor na czerwony.

262
00:15:19,420 --> 00:15:26,310
Możemy zrobić coś niebieskiego koloru tła,

263
00:15:26,310 --> 00:15:30,680
nie idziemy, to jest piękne.

264
00:15:30,680 --> 00:15:33,840
Możesz robić co chcesz z tym.

265
00:15:33,840 --> 00:15:39,250
Korzystanie z właściwości CSS, naprawdę można zmienić, jak coś wygląda w każdej chwili.

266
00:15:39,250 --> 00:15:41,630
Następna sprawa to efekty.

267
00:15:41,630 --> 00:15:45,710
Efekty są w zasadzie to samo, co modyfikując CSS,

268
00:15:45,710 --> 00:15:48,870
ale rzeczywiście świadczą jakieś dodatkowe animacje do niego.

269
00:15:48,870 --> 00:15:53,380
Zamiast więc pokazując lub ukrywając coś lub zmianę koloru,

270
00:15:53,380 --> 00:15:56,130
rzeczywiście można zrobić to animowany.

271
00:15:56,130 --> 00:16:00,760
Oto dokumentacja, jeśli chcesz zapoznać się z obszerną dokumentacją do niego.

272
00:16:00,760 --> 00:16:04,760
Ale mam zamiar pokryć główne z nich.

273
00:16:04,760 --> 00:16:12,030
Jest show i właściwości ukryć.

274
00:16:12,030 --> 00:16:14,510
Pokaż / ukryj ID rzeczywiście odpowiada całym tym polu,

275
00:16:14,510 --> 00:16:18,190
więc jeśli to ukryć, to będzie po prostu zniknąć.

276
00:16:18,190 --> 00:16:24,210
I mogę pokazać go ponownie, jeśli chcesz zrobić to wrócić.

277
00:16:24,210 --> 00:16:26,340
I to jest z powrotem. To faktycznie nie znikają,

278
00:16:26,340 --> 00:16:30,670
I faktycznie nie usunąć go ze strony, po prostu ustawić właściwość CSS widoczność do ukryty

279
00:16:30,670 --> 00:16:34,030
, więc nie można zobaczyć go już.

280
00:16:34,030 --> 00:16:39,250
Jest też przesunąć w górę i przesuń w dół, która pozwala na taki efekt.

281
00:16:39,250 --> 00:16:47,050
To przesuwa się znikać, a po znika

282
00:16:47,050 --> 00:16:53,210
można przesunąć go w dół, aby to wrócić. A teraz wracamy.

283
00:16:53,210 --> 00:16:57,650
Jest też tego efektu zanikania, które - więdną ID odpowiada tym polu.

284
00:16:57,650 --> 00:17:01,200
Gdybym fade out, a następnie będzie ona powoli znikają.

285
00:17:01,200 --> 00:17:04,490
Mogę również fade in, i to wróci.

286
00:17:04,490 --> 00:17:08,930
Możesz też zrobić blaknięcie do, co jest specyficzne dla blaknięcie funkcji.

287
00:17:08,930 --> 00:17:12,589
Możesz mieć to znikną z konkretnym zadymienia, które chcesz.

288
00:17:12,589 --> 00:17:16,869
Więc jeśli znikną powoli do 0,5, to będzie się pół widoczne.

289
00:17:16,869 --> 00:17:22,630
Mogę zrobić to udać się do 0,1, i z powrotem do 1, aby to w pełni widoczne ponownie.

290
00:17:22,630 --> 00:17:24,760
To tylko kolejna animacja, że ​​można zrobić.

291
00:17:24,760 --> 00:17:26,750
>> Istnieją również przełączniki efekty.

292
00:17:26,750 --> 00:17:33,410
Więc mam zamiar wybrać przełącznik ID, która odpowiada tym polu,

293
00:17:33,410 --> 00:17:38,970
i na tym div możesz zadzwonić przełącznik, jeśli jest widoczny stanie się niewidzialny,

294
00:17:38,970 --> 00:17:42,320
jeśli jest niewidoczne stanie się ponownie widoczne.

295
00:17:42,320 --> 00:17:44,440
Tak właśnie nazywa się to przełącznik funkcji dwa razy, pierwszy był

296
00:17:44,440 --> 00:17:48,380
samo jak skóry, drugie połączenie było to samo w formie pokazu.

297
00:17:48,380 --> 00:17:53,510
I można to zrobić także z blaknięcie przełącznik,

298
00:17:53,510 --> 00:17:55,730
który robi to samo, tylko, że faktycznie zanika.

299
00:17:55,730 --> 00:17:59,410
I to samo z suwakiem przełączyć.

300
00:17:59,410 --> 00:18:01,460
Jest przykuty efekty, jak również, co oznacza,

301
00:18:01,460 --> 00:18:05,520
po wybraniu elementu i po prostu zadzwonić kilka metod animacji na nim,

302
00:18:05,520 --> 00:18:07,400
gdybyś go wygasić, a następnie przesuń w dół,

303
00:18:07,400 --> 00:18:11,040
a następnie ukryć, a następnie znikają, pojawia się zrobić je w rzędzie.

304
00:18:11,040 --> 00:18:24,920
Tak zniknął, powrócił - z jakiegoś powodu, ukryj się nie stało.

305
00:18:24,920 --> 00:18:30,030
Spróbujmy go. Tak, więc jest wyciszony, a potem zjechał z dala.

306
00:18:30,030 --> 00:18:32,230
I jest wiele więcej. Możesz używać animate funkcji

307
00:18:32,230 --> 00:18:35,370
do tworzenia własnych animacji, która jest dość skomplikowane,

308
00:18:35,370 --> 00:18:38,790
ale zapewnia nieskończonej rozciągliwości.

309
00:18:38,790 --> 00:18:40,630
Można dokonać wszelkiego rodzaju animacji, który chcesz.

310
00:18:40,630 --> 00:18:44,230
Można również użyć kolejki w kolejce wielu animacji w czasie.

311
00:18:44,230 --> 00:18:47,340
Więc jeśli chcesz coś do pływania w poprzek strony,

312
00:18:47,340 --> 00:18:49,860
slajd z góry po prawej na dole po lewej stronie, można to zrobić,

313
00:18:49,860 --> 00:18:55,240
i po prostu kilka działań wykraczających jeden po drugim.

314
00:18:55,240 --> 00:18:57,490
>> Następną rzeczą, będziemy rozmawiać o to wydarzenia.

315
00:18:57,490 --> 00:19:02,090
Zdarzenia pozwalają - jak dotąd, mamy właśnie pisanie rzeczy do konsoli

316
00:19:02,090 --> 00:19:04,870
i to jest jeden sposób, aby tak się stało,

317
00:19:04,870 --> 00:19:08,020
ale na rzeczywistej stronie, nie będziemy w stanie

318
00:19:08,020 --> 00:19:10,020
robić rzeczy typu użytkownika do konsoli.

319
00:19:10,020 --> 00:19:12,050
Chcesz rzeczy dzieje się automatycznie.

320
00:19:12,050 --> 00:19:18,060
Do tego trzeba użyć zdarzenia, które aktywują się na pewnym określonym zaistnienia zdarzenia.

321
00:19:18,060 --> 00:19:21,340
Możesz sprawdzić w dokumentacji pełnych szczegółów.

322
00:19:21,340 --> 00:19:24,030
Zobaczmy więc. Chcemy, aby ukryć lub wyświetlić okno,

323
00:19:24,030 --> 00:19:29,340
ale teraz ten przycisk nie działa, bo nie wdrożyła jeszcze.

324
00:19:29,340 --> 00:19:35,420
Mam zamiar iść do rzeczywistej strony HTML.

325
00:19:35,420 --> 00:19:38,560
Oto slide. Jest div na slajdzie.

326
00:19:38,560 --> 00:19:41,230
Posiada klasę slajdu.

327
00:19:41,230 --> 00:19:46,890
Nie ma tekstu. Teraz, jest to pole i przycisk box.

328
00:19:46,890 --> 00:19:52,900
Jak by faktycznie zrobić to zniknąć?

329
00:19:52,900 --> 00:19:58,250
Przede wszystkim, niech napisać funkcję, która sprawia, że ​​ID box zniknąć.

330
00:19:58,250 --> 00:20:01,820
To jest składnia funtion, po prostu nazwać to hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Nie ma żadnych argumentów, bo nie ma żadnych argumentów, które mają być podjęte.

332
00:20:06,130 --> 00:20:08,950
Możemy wybrać identyfikator skrzynki.

333
00:20:08,950 --> 00:20:15,020
Więc za pomocą jQuery wybrać, możemy wybrać identyfikator skrzynki,

334
00:20:15,020 --> 00:20:17,700
a potem po prostu sprawiają, że znikają.

335
00:20:17,700 --> 00:20:20,690
Zróbmy to fade out.

336
00:20:20,690 --> 00:20:27,390
Jeśli zabrakło tej funkcji w rzeczywistej konsoli

337
00:20:27,390 --> 00:20:33,380
możemy zdefiniować tę funkcję, można nazwać hideTheBox, i to działa.

338
00:20:33,380 --> 00:20:36,650
Ale chcemy, żeby tak się stało, gdy przycisk jest rzeczywiście wciśnięty.

339
00:20:36,650 --> 00:20:40,950
Aby to zrobić, musimy użyć zdarzenia.

340
00:20:40,950 --> 00:20:45,500
Aby powiązać zdarzenie do jakiegoś konkretnego przycisku lub jakiegoś happeningu działania,

341
00:20:45,500 --> 00:20:50,040
musimy wybrać element, że wydarzenie wywoła -

342
00:20:50,040 --> 00:20:52,650
lub że będzie wyzwalać, sorry.

343
00:20:52,650 --> 00:20:57,220
>> Więc po pierwsze, niech wybrać przycisk pole ID

344
00:20:57,220 --> 00:20:59,610
bo to jest przycisk, a teraz, na tym przycisku,

345
00:20:59,610 --> 00:21:02,750
chcemy stworzyć animację kiedy jest kliknięty.

346
00:21:02,750 --> 00:21:05,040
Więc jest to funkcja Click.

347
00:21:05,040 --> 00:21:08,470
To pozwala powiązać inną funkcję do niego.

348
00:21:08,470 --> 00:21:12,320
Funkcja ta ma inną funkcję jako argument

349
00:21:12,320 --> 00:21:14,310
możemy przekazać w funkcji hideTheBox,

350
00:21:14,310 --> 00:21:20,950
i kiedykolwiek tego przycisku, funkcja ta automatycznie wykonać.

351
00:21:20,950 --> 00:21:24,850
Więc to będzie działać, jeśli zapisać to, będę odświeżać,

352
00:21:24,850 --> 00:21:33,460
oraz - jedną sekundę, przykro mi.

353
00:21:33,460 --> 00:21:44,770
Pozwól mi rozwiązać to naprawdę szybko.

354
00:21:44,770 --> 00:21:50,680
Okay. Tam my iść. Więc teraz pole znika, gdy kliknij przycisk.

355
00:21:50,680 --> 00:21:55,470
Możemy również zmienić to tylko fadeToggle,

356
00:21:55,470 --> 00:22:00,020
zmienić go tak, aby ukryć lub wyświetlić okno,

357
00:22:00,020 --> 00:22:03,850
i to będzie także działać także, jeśli mamy odświeżyć.

358
00:22:03,850 --> 00:22:08,550
Możemy go ukryć, możemy również pokazać, i że będzie nadal działać.

359
00:22:08,550 --> 00:22:12,210
Kolejną rzeczą, którą możemy zrobić, to, że w rzeczywistości nie ma potrzeby definiowania tej funkcji hideTheBox

360
00:22:12,210 --> 00:22:15,050
przed wywołujemy funkcję kliknięcia.

361
00:22:15,050 --> 00:22:17,640
Więc zamiast definiowania funkcji i wywołanie hideTheBox,

362
00:22:17,640 --> 00:22:20,310
jesteśmy tylko będzie to nazwać, jeśli ta sprawa zostanie kliknięty.

363
00:22:20,310 --> 00:22:22,310
Można więc określić go anonimowo w tutaj,

364
00:22:22,310 --> 00:22:25,070
która to funkcja JavaScript ma.

365
00:22:25,070 --> 00:22:29,720
Można zdefiniować funkcję, normalnie, powiedzielibyśmy hideTheBox funkcji

366
00:22:29,720 --> 00:22:34,490
z argumentami, ale zamiast tego, możemy tylko powiedzieć funkcjonować żadnych argumentów,

367
00:22:34,490 --> 00:22:36,870
rozpocząć nawias klamrowy do określenia funkcji,

368
00:22:36,870 --> 00:22:40,780
zamknąć ten nawias kręcone, a potem po prostu zdefiniować funkcję w tutaj,

369
00:22:40,780 --> 00:22:45,130
w pierwszym i nawiasach nawiasem ostatniego

370
00:22:45,130 --> 00:22:47,860
które odpowiadają na argumenty funkcji kliknięcia.

371
00:22:47,860 --> 00:22:53,320
Liczymy więc, przechodząc w tej funkcji, możemy skopiować ten wiersz kodu tutaj,

372
00:22:53,320 --> 00:22:55,450
i że zrobi dokładnie to samo.

373
00:22:55,450 --> 00:22:57,290
A teraz nie mamy tę funkcję losową fadeTheBox

374
00:22:57,290 --> 00:22:59,960
że siedzi wokół bez widocznego powodu.

375
00:22:59,960 --> 00:23:02,070
Funkcja została zdefiniowana anonimowo, nie ma nazwy.

376
00:23:02,070 --> 00:23:08,060
To tylko wykonać, gdy klikamy na przycisk skrzynki.

377
00:23:08,060 --> 00:23:12,180
Więc orzeźwiający raz, jeszcze raz, i widać, że to działa.

378
00:23:12,180 --> 00:23:16,700
A to, w jaki sposób tworzyć wydarzenia.

379
00:23:16,700 --> 00:23:19,190
>> Istnieje wiele różnych wydarzeń, które możemy wykorzystać.

380
00:23:19,190 --> 00:23:23,540
Mam zamiar wrócić do korzystania z konsoli, aby po prostu pokazać, jak te prace.

381
00:23:23,540 --> 00:23:28,210
Identyfikatory dla każdego z nich odpowiadają każdym polu.

382
00:23:28,210 --> 00:23:33,020
Więc to pole jest ID kliknij ten jest kluczem ID, a ten jest ID myszy.

383
00:23:33,020 --> 00:23:36,120
Jeszcze jedno jest to, że istnieje funkcja ta akcja, a nie wpisywać go za każdym razem,

384
00:23:36,120 --> 00:23:41,610
I rzeczywiście poszedł do przodu i zdefiniowane tę funkcję działania tutaj.

385
00:23:41,610 --> 00:23:46,860
To nie to samo, co funkcji hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Robi to pole i albo zanika to z albo zanika go w.

387
00:23:51,340 --> 00:23:54,110
A to dlatego, że jesteśmy w stanie użyć go tutaj.

388
00:23:54,110 --> 00:24:00,350
Jeśli więc kliknij na ten ID click, chcemy, aby pole znika lub pojawia się ponownie.

389
00:24:00,350 --> 00:24:03,610
To samo, jak przycisk, który mieliśmy w ostatnim slajdzie.

390
00:24:03,610 --> 00:24:07,450
Teraz po wywołaniu, możemy kliknąć na ten i pole zniknie,

391
00:24:07,450 --> 00:24:10,160
następnie kliknij na nią ponownie i ponownie zostanie wyświetlone okno.

392
00:24:10,160 --> 00:24:12,480
To bardzo proste. Kliknij dwukrotnie robi to samo,

393
00:24:12,480 --> 00:24:15,660
oprócz tego, że wymaga podwójnego kliknięcia.

394
00:24:15,660 --> 00:24:19,030
Więc jeśli kliknij na nią raz i kliknij na nią ponownie nic się nie stanie,

395
00:24:19,030 --> 00:24:21,140
ale jeśli klikniesz dwukrotnie szybko, to będzie zanikać.

396
00:24:21,140 --> 00:24:23,310
Jeśli dwukrotnie kliknij ponownie, to wróci.

397
00:24:23,310 --> 00:24:25,250
Więc to jest bardzo proste.

398
00:24:25,250 --> 00:24:31,170
Klawiatura jest trochę dziwne, nie sądzę, to rzeczywiście działa w tym przykładzie

399
00:24:31,170 --> 00:24:37,670
ponieważ klucz w dół, w górę i naciśnięcie i inne kluczowe działania

400
00:24:37,670 --> 00:24:47,190
włączyć bez względu na to element który wiąże go.

401
00:24:47,190 --> 00:24:51,410
Na przykład, nawet jeśli wiąże klucz w dół ciała lub coś innego całkowicie,

402
00:24:51,410 --> 00:24:55,950
wtedy to jeszcze włączyć bez względu na to - to nie jest specyficzny.

403
00:24:55,950 --> 00:25:00,190
I nie trzeba być kliknięcie na to i naciśnij klawisz, aby zrobić coś zniknie.

404
00:25:00,190 --> 00:25:04,470
To jest włączana bez względu na to, co elementem jestem obecnie w.

405
00:25:04,470 --> 00:25:06,880
Więc nie są one faktycznie pracują w tym przykładzie

406
00:25:06,880 --> 00:25:13,180
ponieważ nie uznają mnie jako wejście wejście do div wejścia klawiatury.

407
00:25:13,180 --> 00:25:15,740
>> Ale jeśli spojrzeć na działania myszy,

408
00:25:15,740 --> 00:25:19,620
Pierwszy z nich jest unosić, a to może zrobić trochę tego za pomocą CSS.

409
00:25:19,620 --> 00:25:24,280
Jeśli używasz CSS, można stworzyć go tak, że jeśli po najechaniu na coś,

410
00:25:24,280 --> 00:25:28,940
to jego styl się zmienia.

411
00:25:28,940 --> 00:25:32,170
Ale za pomocą jQuery można zmieniać style innych rzeczy również.

412
00:25:32,170 --> 00:25:37,120
Tak więc, na przykład, mamy zamiar wywołać działania jeśli unoszą się nad tym div.

413
00:25:37,120 --> 00:25:39,660
Oznacza to, że jeśli unoszą się nad nim, a następnie pole zniknie.

414
00:25:39,660 --> 00:25:42,430
Jeśli poruszamy się z dala od niego, w polu pojawi się ponownie.

415
00:25:42,430 --> 00:25:45,090
Jeśli nazywamy to i unoszą się nad nim, box nie zniknie,

416
00:25:45,090 --> 00:25:47,050
i jak tylko odejść, to wraca.

417
00:25:47,050 --> 00:25:49,750
Jeśli nazywamy tę funkcję aktywowania na identyfikatorze myszy

418
00:25:49,750 --> 00:25:54,380
który odpowiada tym polu, a następnie, jeśli wskaźnik nad polu,

419
00:25:54,380 --> 00:26:00,440
następnie box rzeczywiście znikają - to jest modny teraz, ale -

420
00:26:00,440 --> 00:26:06,310
gdy oddalamy się od niego, będzie się ona ponownie. Teraz to jest do tyłu z jakiegoś powodu.

421
00:26:06,310 --> 00:26:12,720
Mysz wprowadzić ruch myszy oraz funkcje są nieco podobne, ale nieco inaczej.

422
00:26:12,720 --> 00:26:16,470
Mysz wprowadzić tylko uaktywnia się, gdy mysz wchodzi na pole, zgodnie z oczekiwaniami.

423
00:26:16,470 --> 00:26:19,210
Jeśli więc przenieść się do niego, będzie to zniknie.

424
00:26:19,210 --> 00:26:23,210
Ale to nie pojawi się ponownie, kiedy odejść, musisz wrócić na nim do niego wrócić.

425
00:26:23,210 --> 00:26:25,590
Jest też funkcja move mouse, która aktywuje

426
00:26:25,590 --> 00:26:29,300
gdy mysz jest jeszcze obecny w polu.

427
00:26:29,300 --> 00:26:32,430
Więc to po prostu zachować na dzieje, blaknięcie i na zewnątrz.

428
00:26:32,430 --> 00:26:35,660
I to rzeczywiście zalogowaniu - wydaje się, że to jest po prostu zanika i obecnie,

429
00:26:35,660 --> 00:26:39,140
ale to faktycznie zalogowaniu dużo więcej akcji, niż to,

430
00:26:39,140 --> 00:26:43,550
więc kiedy odejść to będzie po prostu iść dalej, bo zalogować się jak tysiąc z nich.

431
00:26:43,550 --> 00:26:46,620
Może nie tysiące. Może pięć.

432
00:26:46,620 --> 00:26:50,200
Loguje więcej.

433
00:26:50,200 --> 00:26:53,280
Chodzi o to, wszystkie działania myszy, istnieje wiele z nich.

434
00:26:53,280 --> 00:26:55,480
Możesz przeczytać o pozostałych, ale wszystkie są nieco inne,

435
00:26:55,480 --> 00:26:57,700
i można wybrać zależnie od tego, którego potrzebujesz

436
00:26:57,700 --> 00:27:02,130
w zależności od tego, konkretny cel starasz się zrobić.

437
00:27:02,130 --> 00:27:05,060
>> Następną rzeczą, będę mówić o jest AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, wiem, że nie obejmuje JavaScript w tyle głębi w tym roku,

439
00:27:09,340 --> 00:27:11,770
tak mam zamiar mówić o AJAX w ogóle na minutę.

440
00:27:11,770 --> 00:27:15,210
AJAX oznacza Asynchronous JavaScript and XML.

441
00:27:15,210 --> 00:27:19,030
Jest to w zasadzie, na przykład, gdy jesteś na Facebooku i to popycha cię zgłoszenie,

442
00:27:19,030 --> 00:27:23,060
to dlatego, że AJAX jest uruchomiony w przeglądarce internetowej.

443
00:27:23,060 --> 00:27:25,800
Co kilka sekund Twoja przeglądarka jest w rzeczywistości

444
00:27:25,800 --> 00:27:29,420
dzieje się z serwerami Facebooka, pytając ich, czy masz coś nowego dla mnie,

445
00:27:29,420 --> 00:27:31,980
, a następnie wraca do Ciebie.

446
00:27:31,980 --> 00:27:36,320
To pozwala na wysyłanie żądań do serwera

447
00:27:36,320 --> 00:27:38,660
, bez potrzeby ładowania strony.

448
00:27:38,660 --> 00:27:42,040
Tak normalnie, jeśli tylko za pomocą PHP i bazy danych,

449
00:27:42,040 --> 00:27:45,480
trzeba odświeżyć stronę, zanim będzie można uzyskać nowe informacje z serwera.

450
00:27:45,480 --> 00:27:48,770
Ale za pomocą AJAX, można wyciągnąć na tej nowej informacji stale,

451
00:27:48,770 --> 00:27:52,250
lub pociągnąć za to po kliknięciu przycisku lub coś podobnego.

452
00:27:52,250 --> 00:27:56,140
Więc to pozwala nam na wysyłanie żądań bez przeładowania strony,

453
00:27:56,140 --> 00:27:58,130
i możemy użyć albo GET lub POST.

454
00:27:58,130 --> 00:28:05,370
>> GET są, na przykład, jeśli do Google.com in English

455
00:28:05,370 --> 00:28:10,900
i zrobić testy q =. To daje im zapytanie test.

456
00:28:10,900 --> 00:28:15,890
I to jest żądanie GET, bo to przechodzi w tych parametrów w samym URL.

457
00:28:15,890 --> 00:28:19,250
Żądanie POST jest tak jeśli wysyłasz je pocztą.

458
00:28:19,250 --> 00:28:22,500
To jak można umieścić go w piśmie i wysłać go do nich,

459
00:28:22,500 --> 00:28:25,140
ale w rzeczywistości nie zobaczyć zawartość. Nie są one widoczne w adresie URL.

460
00:28:25,140 --> 00:28:31,040
Nie można bezpośrednio wpisać go, trzeba wysłać go niemal w tajemnicy.

461
00:28:31,040 --> 00:28:33,880
To w poście.

462
00:28:33,880 --> 00:28:38,660
Ale za pomocą jQuery, można zrobić żądań GET i POST

463
00:28:38,660 --> 00:28:42,740
znacznie łatwiej niż normalnie można używając tylko zwykłego JavaScript.

464
00:28:42,740 --> 00:28:50,140
Możesz zapytać API przy użyciu żądań GET, można również sprawdzić informacje logowania.

465
00:28:50,140 --> 00:28:54,400
Na następnej stronie, stworzyłem ten, który pyta: "Co na obiad?"

466
00:28:54,400 --> 00:28:58,230
Harvard żywności za pomocą interfejsu API, więc niech to ciągnąć, że się.

467
00:28:58,230 --> 00:29:01,840
To tylko przykład jak można użyć jQuery zrobić żądanie GET do API

468
00:29:01,840 --> 00:29:04,200
i uzyskać informacje z powrotem od niego.

469
00:29:04,200 --> 00:29:07,090
Dlatego chcemy, aby wyświetlić menu na dzisiaj,

470
00:29:07,090 --> 00:29:10,560
i chcemy, aby zobaczyć, co jest na obiad.

471
00:29:10,560 --> 00:29:16,500
Oto adres URL do tworzenia żądania GET w jQuery.

472
00:29:16,500 --> 00:29:18,600
używasz $. uzyskać funkcję.

473
00:29:18,600 --> 00:29:22,290
Pierwszy argument to URL, więc dokładnie to, czego odpytywania.

474
00:29:22,290 --> 00:29:27,200
Potem następny argument to funkcja, która wykonuje żądania GET po zakończeniu.

475
00:29:27,200 --> 00:29:29,980
Więc wysyłaj jakieś żądanie do serwera, poczekaj, aż wróci.

476
00:29:29,980 --> 00:29:33,770
Gdy to nie wróci, masz zamiar podjąć pewne działania z danych, które z serwera.

477
00:29:33,770 --> 00:29:37,520
Idziemy naprzód i kodować to za dobrze.

478
00:29:37,520 --> 00:29:42,110
I nie koduje tego albo, w celu.

479
00:29:42,110 --> 00:29:46,660
Oto TODO. Przede wszystkim, użyjmy wiązania zdarzeń

480
00:29:46,660 --> 00:29:50,820
tak, że gdy ten przycisk jest wciśnięty, wysyłamy od żądania GET.

481
00:29:50,820 --> 00:29:53,410
A kiedy to GET zwraca zapytanie z niektórych danych,

482
00:29:53,410 --> 00:29:57,290
mamy zamiar napisać to w tym informacji posiłku div id.

483
00:29:57,290 --> 00:30:02,860
Przede wszystkim, niech wybierz przycisk ID jedzenie.

484
00:30:02,860 --> 00:30:07,320
W przypadku, gdy użytkownik klika, chcemy, aby coś zrobić.

485
00:30:07,320 --> 00:30:11,930
Chcę po prostu zrobić to anonimowo fuction, jak wcześniej.

486
00:30:11,930 --> 00:30:15,550
Można owinąć te nawiasy klamrowe,

487
00:30:15,550 --> 00:30:18,530
a gdy ten przycisk jest wciśnięty, chcemy wysłać żądanie GET

488
00:30:18,530 --> 00:30:20,750
, aby sprawdzić, co jest na obiad.

489
00:30:20,750 --> 00:30:24,970
Aby to zrobić, możemy po prostu wpisać $. Dostać.

490
00:30:24,970 --> 00:30:28,850
To jQuery funkcja, za pomocą znaku dolara.

491
00:30:28,850 --> 00:30:31,430
To trwa kilka argumentów. Pierwszy to adres URL,

492
00:30:31,430 --> 00:30:34,450
Drugi jest funkcja zwrotna, funkcja, która się nazywa

493
00:30:34,450 --> 00:30:37,740
gdy wniosek ten rzeczywiście zwraca.

494
00:30:37,740 --> 00:30:39,890
Miejmy tylko zbudować domową pierwszy.

495
00:30:39,890 --> 00:30:44,650
Możemy go z API, które David napisał up.

496
00:30:44,650 --> 00:30:51,360
Idąc tutaj, widzimy, że jest to food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
a potem po prostu przejść w nazwach parametrów, które chcesz.

498
00:30:54,140 --> 00:30:57,760
Więc parametr 1 jest wartość 1.

499
00:30:57,760 --> 00:31:00,910
To wygląda jak standardowy dzień, datę rozpoczęcia, domyślnie do dzisiaj

500
00:31:00,910 --> 00:31:03,110
jeśli nie wprowadzić nic, i zakończenia także domyślnie

501
00:31:03,910 --> 00:31:05,930
do dzisiaj, jeśli nie wprowadzono żadnych danych.

502
00:31:05,930 --> 00:31:10,790
To jest to, co chcemy. Chcemy po prostu uzyskać informacje na dziś.

503
00:31:10,790 --> 00:31:12,950
>> Chcemy być w formacie JSON.

504
00:31:12,950 --> 00:31:15,570
To jest po prostu arbitralne, można stosować dowolną postać, którą chcesz.

505
00:31:15,570 --> 00:31:18,950
Możesz używać CSV, ale JSON jest JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
Jest bardzo łatwy w JavaScript, aby zrozumieć, co oznacza,

507
00:31:24,150 --> 00:31:27,110
i możemy wydrukować go łatwiej w ten sposób.

508
00:31:27,110 --> 00:31:30,490
Warto więc poprosić go w JSON, i obiad niech wniosek.

509
00:31:30,490 --> 00:31:37,660
Więc posiłek obiad =. Wystarczy napisać na ten adres URL, wrócimy tu.

510
00:31:37,660 --> 00:31:41,290
Nie ma menu. Pierwszym parametrem jest moc = JSON

511
00:31:41,290 --> 00:31:44,640
bo to jest to, co chcemy, i oddzielić parametrów z "i".

512
00:31:44,640 --> 00:31:48,940
Drugim parametrem jest - nie pamiętam.

513
00:31:48,940 --> 00:31:52,170
Meal. I chcemy obiad = posiłek.

514
00:31:52,170 --> 00:31:57,390
Można przetestować ten adres, wpisując go w przeglądarce i będzie do niego.

515
00:31:57,390 --> 00:32:03,120
To daje jakieś wyjście. To tylko kilka rzeczy, które znajduje się na lunch.

516
00:32:03,120 --> 00:32:10,410
Jest w tym brzydkim formacie. Chcemy, aby wydrukować go na naszej stronie w lepszej formie.

517
00:32:10,410 --> 00:32:12,580
Więc URL jest poprawny, teraz musimy tylko napisać funkcję

518
00:32:12,580 --> 00:32:18,300
się połączyć, gdy wniosek jest udany.

519
00:32:18,300 --> 00:32:20,430
Funkcja ta będzie faktycznie jeden z argumentów. Będzie danych.

520
00:32:20,430 --> 00:32:25,650
Danych, co wraca z GET po Żądanie GET jest zrobione.

521
00:32:25,650 --> 00:32:28,860
Możemy robić nawiasy klamrowe; tu piszemy funkcję anonimowego

522
00:32:28,860 --> 00:32:33,900
które wykonuje, wykorzystując te dane, gdy otrzymamy informacje z powrotem.

523
00:32:33,900 --> 00:32:37,840
Więc danych, gdy wpisaliśmy w tym URL,

524
00:32:37,840 --> 00:32:41,540
to jest to, co dane będzie wyglądać. To będzie ten wielki łańcuch.

525
00:32:41,540 --> 00:32:48,610
Ale dobre jest to, JavaScript może przetworzyć go za pomocą JSON.parse funkcji.

526
00:32:48,610 --> 00:32:54,950
Warto więc stworzyć nową zmienną o nazwie dane analizowania.

527
00:32:54,950 --> 00:32:57,060
A dane parse jest tablica obiektów.

528
00:32:57,060 --> 00:33:04,200
Każdy obiekt zawiera informacje, takie jak - cóż, rzućmy okiem.

529
00:33:04,200 --> 00:33:08,980
Ma datę, posiłek, kategorię, przepis, wszystkie te inne rzeczy.

530
00:33:08,980 --> 00:33:10,860
Więc po prostu wydrukować imię dla każdego z nich.

531
00:33:10,860 --> 00:33:13,790
Miejmy iteracyjne nad całym szeregu rzeczy, które możemy odzyskać od niego,

532
00:33:13,790 --> 00:33:17,570
i po prostu wydrukować każdy - wydrukuj nazwę każdego z nich.

533
00:33:17,570 --> 00:33:22,670
To jest w pętli.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript ma tego jako składni, gdzie można utworzyć zmiennej i pętli nad tablicy,

535
00:33:26,030 --> 00:33:30,150
i var i jest tylko iterator, więc zamiast zrobić var ​​i = 0,

536
00:33:30,150 --> 00:33:40,290
i była mniejsza niż długość, i + +, można po prostu zrobić var ​​i w analizowanych danych.

537
00:33:40,290 --> 00:33:47,060
W tym przykładzie, przeanalizowane dane (I) będzie odpowiadać bieżącego elementu

538
00:33:47,060 --> 00:33:49,850
z tablicy, rzeczywisty obiekt.

539
00:33:49,850 --> 00:33:51,720
I chcemy, aby uzyskać nazwę z niego.

540
00:33:51,720 --> 00:33:54,170
Więc zróbmy nazwa.

541
00:33:54,170 --> 00:33:57,000
I ostatnia rzecz jest, będziemy mieć trochę jQuery ponownie.

542
00:33:57,000 --> 00:34:02,660
Właściwie dodać go do div div informacji, ten posiłek, który jest pusty.

543
00:34:02,660 --> 00:34:05,430
Warto więc wybrać, które.

544
00:34:05,430 --> 00:34:13,870
Będziemy używać jQuery i wybierz informacji posiłek ID div lub identyfikatora informacji posiłek, sorry.

545
00:34:13,870 --> 00:34:16,580
Chcemy, aby dołączyć do tego.

546
00:34:16,580 --> 00:34:21,030
Jeśli zrobiliśmy testy, na przykład, że to po prostu zastąpić go za każdym razem.

547
00:34:21,030 --> 00:34:29,190
Tak więc możemy po prostu dodać to.

548
00:34:29,190 --> 00:34:31,889
Aktualny element tablicy, będziemy mieć nazwę z niego,

549
00:34:31,889 --> 00:34:38,159
a my dołączyć go do końca informacji posiłku div id.

550
00:34:38,159 --> 00:34:40,120
A potem po prostu, aby wyglądać czystsze,

551
00:34:40,120 --> 00:34:51,550
my również dołączyć na końcu linii, więc nie wszystko jest w jednej linii.

552
00:34:51,550 --> 00:34:55,280
Tak więc, jeśli wszystko pójdzie dobrze, to powinno być dobrze -

553
00:34:55,280 --> 00:34:57,220
przede wszystkim, gdy tego przycisku,

554
00:34:57,220 --> 00:35:00,070
wysyła się żądanie GET do tego adresu URL.

555
00:35:00,070 --> 00:35:02,500
Gdy dane wraca z nim, to będzie analizować je,

556
00:35:02,500 --> 00:35:06,950
przekształcić go w JSON, pętli na całej tablicy reprezentującej te dane,

557
00:35:06,950 --> 00:35:10,310
a następnie dodać nazwę i koniec linii

558
00:35:10,310 --> 00:35:16,500
do każdego wiersza w tym informacji ID posiłek, który był wcześniej pusty.

559
00:35:16,500 --> 00:35:18,910
Tak więc wracając do tej strony, odświeżenie,

560
00:35:18,910 --> 00:35:23,690
kliknij, dowiedzieć się - to nie działa. To niefortunne.

561
00:35:23,690 --> 00:35:25,830
I tu wkracza debugowanie

562
00:35:25,830 --> 00:35:30,070
Index.html, line 1.

563
00:35:30,070 --> 00:35:57,210
To jest interesujące.

564
00:35:57,210 --> 00:35:59,720
Dobrze, dobrze, a nie spędzać czas robi to, jestem po prostu będzie

565
00:35:59,720 --> 00:36:07,070
podciągnąć zrobić plik, który mam, która jest zakończona wersja.

566
00:36:07,070 --> 00:36:13,710
Nie jestem pewien, jaka jest różnica, ale może po prostu otworzyć ten fakt, zamiast.

567
00:36:13,710 --> 00:36:19,740
I idziemy na AJAX, a to powinno działać prawidłowo.

568
00:36:19,740 --> 00:36:21,730
To jest to, co było na obiad dzisiaj,

569
00:36:21,730 --> 00:36:24,870
w przypadkowej kolejności, w cudzysłowie, więc to nie jest najładniejszy.

570
00:36:24,870 --> 00:36:27,090
Ale, oczywiście, jeśli robisz to dla ostatecznego projektu,

571
00:36:27,090 --> 00:36:30,120
chcesz, żeby wyglądało lepiej.

572
00:36:30,120 --> 00:36:32,530
Ale to tylko prosty przykład, w jaki sposób wykonać żądanie GET.

573
00:36:32,530 --> 00:36:34,580
A jeśli spojrzeć na rzeczywisty kod, zgaduję, jestem pewien,

574
00:36:34,580 --> 00:36:39,690
to wciąż niemal tak samo.

575
00:36:39,690 --> 00:37:04,990
Oh, zapomniałem przekonwertować go na ciąg, to jest to.

576
00:37:04,990 --> 00:37:07,920
Nie, dalej nie działa. Niezależnie, oto rzeczywisty wypełniony kod

577
00:37:07,920 --> 00:37:10,300
za to, co powinno to wyglądać,

578
00:37:10,300 --> 00:37:16,400
i to nie to samo, co to, co właśnie realizowane.

579
00:37:16,400 --> 00:37:22,760
Po kliknięciu na przycisk, używa GET JSON automatycznie analizować dane.

580
00:37:22,760 --> 00:37:29,190
Zajmuje dane z powrotem z niego i pętle przez cały szereg

581
00:37:29,190 --> 00:37:32,770
i wypisuje na - wszystko co dziś na obiad, nazwę to,

582
00:37:32,770 --> 00:37:38,020
i dołącza do nowego wiersza po każdym wierszu.

583
00:37:38,020 --> 00:37:41,100
To, w jaki sposób korzystać z funkcji GET.

584
00:37:41,100 --> 00:37:44,040
>> Można również użyć POST, które nie mają czasu

585
00:37:44,040 --> 00:37:47,940
pisać się przykładem dla niego, ale możemy spojrzeć na dokumentacji.

586
00:37:47,940 --> 00:37:53,220
Jeśli spojrzeć na jquery.post,

587
00:37:53,220 --> 00:37:55,510
widać, że jest to prawie to samo.

588
00:37:55,510 --> 00:38:01,650
Masz adres URL, ale zamiast przekazywania parametrów za pomocą -

589
00:38:01,650 --> 00:38:03,990
po prostu umieszczając je w ciąg na samym URL,

590
00:38:03,990 --> 00:38:06,300
trzeba przejść w tej zmiennej danych

591
00:38:06,300 --> 00:38:11,990
, że jest w zasadzie tablicy, słownik, który mapuje parametry do wartości.

592
00:38:11,990 --> 00:38:17,690
Mijamy że, i że wysyła je w użyciu POST.

593
00:38:17,690 --> 00:38:20,790
A kiedy już to, to możesz mieć funkcję sukces

594
00:38:20,790 --> 00:38:23,930
które wykonuje, gdy dane wraca.

595
00:38:23,930 --> 00:38:26,430
W przeciwnym razie jest to dokładnie to samo. Więc za pomocą POST,

596
00:38:26,430 --> 00:38:29,970
możesz użyć POST, na przykład, jeśli masz formularz wejściowy

597
00:38:29,970 --> 00:38:35,780
niech ludzie haseł wejściowych do niego i wysłać te hasła off

598
00:38:35,780 --> 00:38:41,850
do back-end skryptu, aby sprawdzić w bazie danych, czy użytkownik jest ważny, czy nie.

599
00:38:41,850 --> 00:38:46,700
Możesz zrobić wszystko przy użyciu jQuery zamiast odświeżyć stronę w ogóle.

600
00:38:46,700 --> 00:38:52,160
Tak właśnie realizowane w blogu, że pokazałem wcześniej.

601
00:38:52,160 --> 00:38:59,530
Jeśli idziemy do portalu końcowego i wylogować się, zaloguj się,

602
00:38:59,530 --> 00:39:02,600
Zaloguj się, nie działa.

603
00:39:02,600 --> 00:39:13,360
Cóż, pozwól mi tylko otworzyć go w nowym oknie.

604
00:39:13,360 --> 00:39:16,580
Tu jest hasło, i miałem zamiar wpisać coś losowego.

605
00:39:16,580 --> 00:39:18,590
To nie działa, ale widać, że nie

606
00:39:18,590 --> 00:39:20,840
rzeczywiście trzeba odświeżyć stronę w ogóle.

607
00:39:20,840 --> 00:39:24,610
Kod, jeśli chcesz spojrzeć na to,

608
00:39:24,610 --> 00:39:37,460
wszystko jest dostępne tutaj.

609
00:39:37,460 --> 00:39:45,680
Więc kod pisałem w zeszłym roku gdzieś.

610
00:39:45,680 --> 00:39:47,790
Jak widać tutaj, wysyłamy żądania POST.

611
00:39:47,790 --> 00:39:50,400
Mam plik o nazwie login.php na tylnym końcu,

612
00:39:50,400 --> 00:39:53,860
który sprawdza, czy hasło jest ważne.

613
00:39:53,860 --> 00:39:56,000
Parametry mijamy w to hasło, przypisane do

614
00:39:56,000 --> 00:40:00,030
Wejście to jest w tym polu tekstowym obecnie.

615
00:40:00,030 --> 00:40:04,110
A kiedy dane wraca, możemy sprawdzić.

616
00:40:04,110 --> 00:40:07,680
Jeśli dane są fałszywe, to mówimy, niepoprawne hasło, przesuń go w dół,

617
00:40:07,680 --> 00:40:09,580
i po prostu sprawiają, że znikają po tym.

618
00:40:09,580 --> 00:40:12,320
W przeciwnym razie, możemy załadować administratora strony.

619
00:40:12,320 --> 00:40:15,080
I to wszystko było zrobione za pomocą JSON.

620
00:40:15,080 --> 00:40:18,510
W tym wiele linii kodu, można po prostu przekazać dane do tylnego końca,

621
00:40:18,510 --> 00:40:21,020
sprawdzić, czy jest on poprawny, sprawdź, czy jesteś zalogowany w pełnym zakresie,

622
00:40:21,020 --> 00:40:24,200
i właściwie reagować na to, skierowanie osoby do właściwej strony

623
00:40:24,200 --> 00:40:29,760
lub nie pozwalając im zalogować się i mówi im, że mieli błędne hasło.

624
00:40:29,760 --> 00:40:33,040
Więc to jest przykład jak można użyć jQuery POST

625
00:40:33,040 --> 00:40:37,010
wysłać żądanie POST do back-end,

626
00:40:37,010 --> 00:40:42,400
sprawdzając, czy ktoś poprawnie zalogowany.

627
00:40:42,400 --> 00:40:44,820
>> W porządku, więc to wszystkie przykłady miałem i wszystkie rzeczy chciałem pokryć.

628
00:40:44,820 --> 00:40:47,110
To są najważniejsze rzeczy, które jQuery pozwala zrobić:

629
00:40:47,110 --> 00:40:52,640
wybierz elementy, zmodyfikować je za pomocą manipulacji DOM,

630
00:40:52,640 --> 00:40:56,340
można dodawać efekty, włączyć rzeczy na pewnych zdarzeń,

631
00:40:56,340 --> 00:41:00,430
a także do żądań AJAX bardzo płynnie i łatwo.

632
00:41:00,430 --> 00:41:02,840
Więc dziękuję za przybycie lub oglądania,

633
00:41:02,840 --> 00:41:06,230
a jeśli masz jakiekolwiek pytania, po prostu daj mi znać. Tak?

634
00:41:06,230 --> 00:41:12,730
[Student] Powrót kiedy pokazał, miałeś JSON po żądania POST w cudzysłowie,

635
00:41:12,730 --> 00:41:15,170
i byłem po prostu zastanawiasz się, co to zrobił.

636
00:41:15,170 --> 00:41:20,070
>> Tak, widzę. Pytanie było, że w tym przykładzie po prostu pokazał,

637
00:41:20,070 --> 00:41:25,790
było JSON słowo w cudzysłowie -

638
00:41:25,790 --> 00:41:31,690
Ja po prostu wyciągnąć go ponownie - całego POST funkcji.

639
00:41:31,690 --> 00:41:43,320
Jestem po prostu wyciągając ją pokazać.

640
00:41:43,320 --> 00:41:46,890
Więc to jest żądanie POST, a tam to jest JSON w cudzysłów.

641
00:41:46,890 --> 00:41:50,280
To właśnie określa, co spodziewamy wyjście być.

642
00:41:50,280 --> 00:41:54,070
Więc jeśli mamy przejść w JSON jako oczekiwanego typu danych,

643
00:41:54,070 --> 00:41:56,070
Wymaganie to nie jest, ale jeśli mijamy go,

644
00:41:56,070 --> 00:41:58,590
Następnie dane są automatycznie analizowane jako JSON.

645
00:41:58,590 --> 00:42:00,600
Tak więc nie mamy do wywołania funkcji parse JSON na nim,

646
00:42:00,600 --> 00:42:02,620
będzie to po prostu dzieje się automatycznie.

647
00:42:02,620 --> 00:42:05,150
A jeśli spojrzeć na dokumentacji POST

648
00:42:05,150 --> 00:42:09,850
nie jest to typ danych zmiennej, typ danych oczekiwanych z serwera.

649
00:42:09,850 --> 00:42:12,660
Domyślnie jest to inteligentny przypuszczenie, że mogą się mylić,

650
00:42:12,660 --> 00:42:15,520
więc można pozostawić puste, ale to jest po prostu rodzaj danych

651
00:42:15,520 --> 00:42:21,680
w kodowaniu, że używasz, czy to JSON lub XML lub coś innego.

652
00:42:21,680 --> 00:42:25,280
>> Jeszcze jakieś pytania?

653
00:42:25,280 --> 00:42:27,300
Dobrze. Jeśli masz jakieś pytania, nie wahaj się napisz do mnie

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

655
00:42:30,830 --> 00:42:34,860
i slajdy i kod powinien być dostępny w sieci już wkrótce.

656
00:42:34,860 --> 00:42:42,810
Powodzenia ostatecznych projektów, nadzieję, że korzystać z jQuery.

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