1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: W tym filmie chcieliśmy
zawołać osobną uwagę

3
00:00:07,230 --> 00:00:09,110
do bardzo szczególności
elementem JavaScript

4
00:00:09,110 --> 00:00:11,350
które można znaleźć pod ręką
kiedy zaczynasz

5
00:00:11,350 --> 00:00:15,750
do pracy na manipulowanie stron internetowych i
zmianę treści swojej stronie internetowej

6
00:00:15,750 --> 00:00:16,460
w locie.

7
00:00:16,460 --> 00:00:19,450
I to jest pojęcie
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Tak jak widzieliśmy w naszym wideo na
JavaScript, obiekty są bardzo elastyczne.

9
00:00:23,030 --> 00:00:24,750
>> I mogą zawierać różne pola.

10
00:00:24,750 --> 00:00:28,075
I choć nie iść na wiele
szczegóły, te pola lub właściwości,

11
00:00:28,075 --> 00:00:30,200
że prawdopodobnie więcej
odpowiednio je nazwać

12
00:00:30,200 --> 00:00:33,915
w kontekście przedmiotu, nawet
Właściwości te mogą być inne obiekty.

13
00:00:33,915 --> 00:00:36,210
I wewnątrz tych obiektów
może być inne obiekty.

14
00:00:36,210 --> 00:00:39,630
>> Musisz to bardzo duży obiekt
z wieloma innymi przedmiotami

15
00:00:39,630 --> 00:00:43,550
w jej wnętrzu, jakiego rodzaju
tworzy ten pomysł wielkiego drzewa.

16
00:00:43,550 --> 00:00:47,540
Teraz obiekt dokument jest
wyjątkowy obiekt w JavaScript

17
00:00:47,540 --> 00:00:52,580
która organizuje całą internecie
Strona w ramach tego rodzaju parasolem

18
00:00:52,580 --> 00:00:53,470
przedmiotu.

19
00:00:53,470 --> 00:00:56,770
I tak wewnątrz dokumentu
przedmiotem są obiekty prezentujące

20
00:00:56,770 --> 00:00:59,630
głowa i ciało swojej stronie internetowej.

21
00:00:59,630 --> 00:01:03,760
>> Wewnątrz tych są inne
obiekty, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
aż cała strona ma
organizowany w tym wielkim obiekcie.

23
00:01:08,411 --> 00:01:09,660
Co jest odwrotnie tutaj, prawda?

24
00:01:09,660 --> 00:01:12,170
Dobrze wiemy, jak pracować
z obiektów w JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Więc jeśli mamy obiekt, który
odnosi się do całej naszej stronie internetowej, że

26
00:01:15,840 --> 00:01:19,590
Oznacza dzwoniąc prawidłowe
sposoby modyfikacji tego obiektu

27
00:01:19,590 --> 00:01:22,360
lub zmiany niektórych
jego właściwości, to

28
00:01:22,360 --> 00:01:25,500
może zmieniać elementy
Strona programowo

29
00:01:25,500 --> 00:01:30,210
przy użyciu JavaScript zamiast
kodować rzeczy z, powiedzmy, HTML.

30
00:01:30,210 --> 00:01:33,760
Więc oto przykład
bardzo prosta strona, prawda?

31
00:01:33,760 --> 00:01:35,850
To nie ma znaczników HTML, głowę.

32
00:01:35,850 --> 00:01:37,979
>> Wewnątrz znajduje się tytuł, hello world.

33
00:01:37,979 --> 00:01:38,770
Wtedy mam ciało.

34
00:01:38,770 --> 00:01:40,686
Wewnątrz, że mam
trzy różne rzeczy.

35
00:01:40,686 --> 00:01:44,170
Mam tagu nagłówka h2,
paragraf, a link.

36
00:01:44,170 --> 00:01:45,920
Jest to bardzo prosta strona internetowa.

37
00:01:45,920 --> 00:01:48,590
>> Cóż, co może dokument
obiekt do tego wygląda?

38
00:01:48,590 --> 00:01:50,700
Cóż, to trochę
przerażające może na początku.

39
00:01:50,700 --> 00:01:52,510
Ale to naprawdę tylko wielkie drzewo.

40
00:01:52,510 --> 00:01:54,890
A na samym korzeniu to jest dokument.

41
00:01:54,890 --> 00:02:00,030
>> Wewnątrz dokument jest inny
Obiekt odnosząc się do HTML z mojej strony.

42
00:02:00,030 --> 00:02:02,660
I HTML z mojej strony to wszystko.

43
00:02:02,660 --> 00:02:06,900
A następnie wewnątrz HTML
Obiekt, Mam obiekt głowy,

44
00:02:06,900 --> 00:02:09,000
która odnosi się do wszystkiego, co istnieje.

45
00:02:09,000 --> 00:02:11,009
>> I wewnątrz tam,
Mam obiekt tytułu.

46
00:02:11,009 --> 00:02:15,620
I wewnątrz nie mam innego
obiekt to tylko hello world.

47
00:02:15,620 --> 00:02:18,020
Mógłbym mieć moje ciało
reprezentowane tak.

48
00:02:18,020 --> 00:02:22,850
>> Wewnątrz mojego ciała, mam h2
obiekt i obiekt p do ust

49
00:02:22,850 --> 00:02:25,270
oraz obiekt o link.

50
00:02:25,270 --> 00:02:29,660
A więc ta cała hierarchia
może być reprezentowana jako duży drzewa

51
00:02:29,660 --> 00:02:31,990
z dużą ilością mniejszych niewiele
rzeczy pochodzących od niego.

52
00:02:31,990 --> 00:02:33,740
Teraz, oczywiście, kiedy
jesteśmy programowania, mamy

53
00:02:33,740 --> 00:02:35,560
nie myśl o takie rzeczy jak wielkie drzewo.

54
00:02:35,560 --> 00:02:37,980
Chcemy, aby zobaczyć rzeczywisty
Kod rzeczy związane.

55
00:02:37,980 --> 00:02:40,790
>> I na szczęście, możemy
korzystać z naszych narzędzi programistycznych

56
00:02:40,790 --> 00:02:46,080
rzeczywiście spojrzeć na
Dokument przedmiotem niniejszej strony.

57
00:02:46,080 --> 00:02:48,150
I zróbmy to.

58
00:02:48,150 --> 00:02:49,580
Tak już otworzył kartę przeglądarki.

59
00:02:49,580 --> 00:02:51,540
>> A ja otworzył narzędzi dla programistów.

60
00:02:51,540 --> 00:02:54,460
I w moim wideo na JavaScript, ja
wspomniał, że konsola nie jest

61
00:02:54,460 --> 00:02:56,770
tylko gdzieś, gdzie
drukujemy informacji,

62
00:02:56,770 --> 00:02:59,560
jest to również miejsce, gdzie
możemy informacje wejściowe.

63
00:02:59,560 --> 00:03:01,380
W związku z tym, co
Mam zamiar powiedzieć to,

64
00:03:01,380 --> 00:03:05,720
Chciałbym wrócić
obiekty na dokumenty,

65
00:03:05,720 --> 00:03:07,502
więc mogę zacząć, aby spojrzeć na niego.

66
00:03:07,502 --> 00:03:08,460
Więc jak mogę to zrobić?

67
00:03:08,460 --> 00:03:10,740
Cóż, jeśli chcę
zorganizować naprawdę ładnie,

68
00:03:10,740 --> 00:03:16,317
Mam zamiar powiedzieć console.dir, D-I-R.
Teraz używam tylko console.log do druku

69
00:03:16,317 --> 00:03:17,400
się coś bardzo prostego.

70
00:03:17,400 --> 00:03:20,450
Ale jeśli chcę, aby to zorganizować
hierarchicznie jak przedmiot,

71
00:03:20,450 --> 00:03:23,800
Chcę to rodzaj zorganizowany
jak struktury katalogów.

72
00:03:23,800 --> 00:03:27,400
>> Więc chcę console.dir dokument.

73
00:03:27,400 --> 00:03:28,430
Mam zamiar naciśnij Enter.

74
00:03:28,430 --> 00:03:32,350
A tuż pod nim teraz,
a ja przybliżyć tutaj,

75
00:03:32,350 --> 00:03:36,000
Mam ten dokument odpowiedzi
z małą strzałkę obok.

76
00:03:36,000 --> 00:03:39,470
Teraz, gdy otwieram tę strzałkę,
nie będzie wiele rzeczy.

77
00:03:39,470 --> 00:03:42,560
>> Ale będziemy ignorować wiele
o to i po prostu rodzaj ostrości

78
00:03:42,560 --> 00:03:46,250
na najważniejszej części, więc
może zacząć poruszać tego dokumentu.

79
00:03:46,250 --> 00:03:50,125
Jest dużo więcej do DOM niż
tylko rodzic węzłów i węzły potomne.

80
00:03:50,125 --> 00:03:51,500
Jest wiele rzeczy pomocniczy.

81
00:03:51,500 --> 00:03:52,280
>> Więc mam zamiar otworzyć tego.

82
00:03:52,280 --> 00:03:54,610
I jest o wiele
rzeczy, które pojawia się.

83
00:03:54,610 --> 00:03:59,000
Ale wszystko zależy mi na to
tu, węzły potomne.

84
00:03:59,000 --> 00:04:00,410
Otwórzmy, że się.

85
00:04:00,410 --> 00:04:03,810
>> Wewnątrz nie widzę
coś znajomego, HTML.

86
00:04:03,810 --> 00:04:07,670
Więc wewnątrz naszego dokumentu
jeden poziom w dół, HTML.

87
00:04:07,670 --> 00:04:08,550
Otwieram, że się.

88
00:04:08,550 --> 00:04:10,380
Co mamy spodziewa?

89
00:04:10,380 --> 00:04:13,760
>> Jeśli pamiętacie z naszego schematu,
co powinno znaleźć się wewnątrz HTML?

90
00:04:13,760 --> 00:04:17,275
Co dwa węzły są poniżej w drzewie?

91
00:04:17,275 --> 00:04:17,899
Przekonajmy się.

92
00:04:17,899 --> 00:04:18,940
Otwieramy HTML.

93
00:04:18,940 --> 00:04:22,079
Schodzimy do jego węzłów potomnych.

94
00:04:22,079 --> 00:04:23,440
>> Pop, że otwarte.

95
00:04:23,440 --> 00:04:25,990
Nie ma głowy i ciała.

96
00:04:25,990 --> 00:04:28,540
I możemy otworzyć głowę.

97
00:04:28,540 --> 00:04:30,460
Idź do jego węzłów potomnych.

98
00:04:30,460 --> 00:04:31,460
Cóż, jest tytuł.

99
00:04:31,460 --> 00:04:33,293
>> I mogliśmy iść i
on tak zawsze.

100
00:04:33,293 --> 00:04:34,770
Możemy to zrobić z ciałem, jak również.

101
00:04:34,770 --> 00:04:40,090
Ale jest na to sposób dla nas, aby spojrzeć na
dokument zorganizowane jako duży obiekt.

102
00:04:40,090 --> 00:04:42,610
A jeśli spojrzymy na to duży
obiekt, który wygląda dużo

103
00:04:42,610 --> 00:04:47,480
jak kod, to oznacza, że ​​możemy rozpocząć
manipulować ten wielki obiekt za pomocą

104
00:04:47,480 --> 00:04:51,220
Kod zmienić co nasi
strona wygląda i czuje się jak.

105
00:04:51,220 --> 00:04:54,920
>> Tak, że to dość potężne narzędzie
mamy do dyspozycji teraz.

106
00:04:54,920 --> 00:04:57,360
Więc jak tylko zobaczył,
Sam obiekt dokument

107
00:04:57,360 --> 00:05:01,392
i wszystkie przedmioty w jej wnętrzu
mają właściwości i metody, po prostu

108
00:05:01,392 --> 00:05:04,100
jak każdy inny obiekt, który mamy
Pracuję z w JavaScript.

109
00:05:04,100 --> 00:05:08,370
Ale możemy wykorzystać te właściwości i
korzystać z tych metod rodzaj drążyć

110
00:05:08,370 --> 00:05:10,900
od wielkiego dokumentu i uzyskać
coraz niżej i niżej,

111
00:05:10,900 --> 00:05:13,360
coraz bardziej rozdrobnionych ziaren
szczegółów, dopóki nie

112
00:05:13,360 --> 00:05:17,510
dostać się do bardzo specyficzny kawałek naszego
Strona internetowa, która chcemy zmienić.

113
00:05:17,510 --> 00:05:22,700
>> A kiedy aktualizować właściwości
Document Object lub zadzwoń do tych metod,

114
00:05:22,700 --> 00:05:24,450
rzeczy mogą się zdarzyć na naszej stronie internetowej.

115
00:05:24,450 --> 00:05:28,420
I nie trzeba robić żadnej odświeżający
mieć te zmiany odniosły skutek.

116
00:05:28,420 --> 00:05:33,160
>> I to jest całkiem fajna możliwość
mają, gdy pracujemy z kodem.

117
00:05:33,160 --> 00:05:37,185
Więc jakie są niektóre z tych właściwości
które są częścią obiektu dokumentu?

118
00:05:37,185 --> 00:05:40,100
Cóż, prawdopodobnie zobaczył
Kilka z nich bardzo szybko

119
00:05:40,100 --> 00:05:42,700
jak byliśmy skompresowanie
przez giganta dokumentu

120
00:05:42,700 --> 00:05:45,150
Obiekt po prostu zobaczyłem w przeglądarce internetowej.

121
00:05:45,150 --> 00:05:48,420
>> Ale kilka z tych właściwości
może być takie rzeczy jak wewnętrznej HTML.

122
00:05:48,420 --> 00:05:52,950
A może nawet przypomnieć mnie
za pomocą tego w filmie JavaScript

123
00:05:52,950 --> 00:05:54,950
na samym końcu, kiedy
mówił o wydarzeniach.

124
00:05:54,950 --> 00:05:56,125
Jaki był ten wewnętrzny HTML?

125
00:05:56,125 --> 00:05:59,030
Cóż, to tylko to, co jest
pomiędzy znacznikami.

126
00:05:59,030 --> 00:06:01,590
>> I tak wewnętrzna HTML,
na przykład, tytułem

127
00:06:01,590 --> 00:06:05,390
tag, gdybyśmy kontynuowałem w
że przykład przed chwilą,

128
00:06:05,390 --> 00:06:08,020
byłby hello world.

129
00:06:08,020 --> 00:06:10,140
To był tytuł naszej strony.

130
00:06:10,140 --> 00:06:12,370
Inne właściwości
zawierać nazwę węzła, który

131
00:06:12,370 --> 00:06:15,810
to nazwa HTML
Element taki, jak tytule.

132
00:06:15,810 --> 00:06:19,100
ID, który jest identyfikatorem
atrybut elementu HTML.

133
00:06:19,100 --> 00:06:23,790
>> Przypomnijmy, że możemy specjalnie wskazują
szczególne elementy naszej HTML

134
00:06:23,790 --> 00:06:27,510
z atrybutem ID, które zwykle
jest przydatna w kontekście CSS,

135
00:06:27,510 --> 00:06:29,000
swoiście.

136
00:06:29,000 --> 00:06:33,217
Rodzic, który jest odniesieniem do
co tylko się nade mną w DOM.

137
00:06:33,217 --> 00:06:35,800
I węzły potomne, który jest
odniesienia do tego, co się pode mną.

138
00:06:35,800 --> 00:06:37,950
I widzieliśmy wiele, że
po prostu pominie.

139
00:06:37,950 --> 00:06:42,970
Węzły potomne, to jak mamy
niżej i niżej w drzewie.

140
00:06:42,970 --> 00:06:46,590
>> Atrybuty, to tylko tablicą
z atrybutów elementu HTML.

141
00:06:46,590 --> 00:06:50,270
Więc przykład atrybutów może
się jeśli masz znacznika obrazu,

142
00:06:50,270 --> 00:06:54,090
zwykle ma atrybut źródłowego,
może na wysokość i szerokość atrybut.

143
00:06:54,090 --> 00:06:57,120
I tak, że będzie tylko tablicą
wszystkich atrybutów związanych

144
00:06:57,120 --> 00:06:59,300
z tego elementu HTML.

145
00:06:59,300 --> 00:07:04,140
>> Styl jest inny, że
nie stanowią CSS

146
00:07:04,140 --> 00:07:06,050
stylizacja konkretnego elementu.

147
00:07:06,050 --> 00:07:08,310
A później w tym
wideo, będziemy specjalnie

148
00:07:08,310 --> 00:07:14,592
styl dźwigni, aby kilka
o zmianach na naszej stronie internetowej.

149
00:07:14,592 --> 00:07:15,800
To są niektóre właściwości.

150
00:07:15,800 --> 00:07:17,591
>> I są też niektóre
metod, które możemy

151
00:07:17,591 --> 00:07:22,450
wykorzystywać również szybciej może izolować
elementy obiektu dokumentu.

152
00:07:22,450 --> 00:07:26,730
Być może, najbardziej uniwersalny
z nich jest getElementById.

153
00:07:26,730 --> 00:07:31,190
Więc mogę powiedzieć coś takiego, bo
pamiętać, że jest to metoda Dokumentu

154
00:07:31,190 --> 00:07:34,880
Obiekt, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> A w środku tych nawiasów, określ
element HTML z określonym ID

156
00:07:39,820 --> 00:07:42,330
atrybut, że mam wcześniej
ustawić i będę zaraz

157
00:07:42,330 --> 00:07:46,685
idź w prawo do tego elementu
ogólnej strony.

158
00:07:46,685 --> 00:07:49,310
Więc nie trzeba być może wiercić
w dół każdej warstwie.

159
00:07:49,310 --> 00:07:52,841
Może po prostu użyć tej metody, aby znaleźć to,
coś jak pocisk szukając ciepła,

160
00:07:52,841 --> 00:07:53,340
dobrze?

161
00:07:53,340 --> 00:07:56,300
To po prostu idzie i znajdzie
dokładnie to, czego szuka.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName jest
bardzo podobne w duchu.

163
00:07:59,290 --> 00:08:02,500
Być może będzie to znaleźć wszystkie z
śmiałe tagi lub wszystkie znaczniki p

164
00:08:02,500 --> 00:08:05,920
i daj mi tablicę wszystko
że mogłem wtedy pracować.

165
00:08:05,920 --> 00:08:12,080
appendChild dodaje coś
jeden poziom w dół w drzewie.

166
00:08:12,080 --> 00:08:16,440
>> Więc mogę dodać cały nowy
Element o jeden poziom niżej.

167
00:08:16,440 --> 00:08:19,700
Albo mogę usunąć element, który jest
jeden poziom niższy, a jeśli chcę

168
00:08:19,700 --> 00:08:22,870
usunąć coś z mojej strony internetowej.

169
00:08:22,870 --> 00:08:28,480
Teraz krótka notatka kodowanie i szybkie
bóle głowy oszczędności notatkę, miejmy nadzieję.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d jest małe.

171
00:08:31,670 --> 00:08:36,950
Nie mogę powiedzieć, ile razy mam
Używane getElementById i kapitalizowane

172
00:08:36,950 --> 00:08:38,336
tam d.

173
00:08:38,336 --> 00:08:39,460
Ponieważ jest to bardzo powszechne.

174
00:08:39,460 --> 00:08:42,990
Jeśli piszemy identyfikator słowo, to
Ja zwykle Kapitał Kapitał D.

175
00:08:42,990 --> 00:08:44,240
A mój kod po prostu nie działa.

176
00:08:44,240 --> 00:08:45,630
I nie mogę zrozumieć dlaczego.

177
00:08:45,630 --> 00:08:49,490
To jest naprawdę, naprawdę, naprawdę
wspólny problem, że każdy robi,

178
00:08:49,490 --> 00:08:51,890
nawet ekspertów, którzy
robi to na zawsze.

179
00:08:51,890 --> 00:08:55,410
Więc po prostu mieć świadomość, getElementById,
że d jest małe.

180
00:08:55,410 --> 00:09:00,080
I miejmy nadzieję, że oszczędza kilka
minut co najmniej bólu serca.

181
00:09:00,080 --> 00:09:02,204
>> Więc co to wszystko ma nam powiedzieć?

182
00:09:02,204 --> 00:09:03,120
Mamy tych metod.

183
00:09:03,120 --> 00:09:04,161
Mamy te właściwości.

184
00:09:04,161 --> 00:09:06,610
Teraz, jeśli zaczniemy od
dokument, dokument.

185
00:09:06,610 --> 00:09:10,220
cokolwiek, możemy dostać się do dowolnego
Pojedynczy kawałek naszej stronie internetowej

186
00:09:10,220 --> 00:09:14,870
że chcemy za pomocą JavaScript
po prostu dzwoniąc do tych metod

187
00:09:14,870 --> 00:09:19,940
i wykorzystując właściwości
że znajdujemy się w różnych miejscach.

188
00:09:19,940 --> 00:09:24,890
>> To może się rozwlekły, to
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
Może mają długą nazwę znacznika,
może zrobić więcej połączeń później.

190
00:09:28,560 --> 00:09:31,230
Co może się nieco rozwlekły.

191
00:09:31,230 --> 00:09:34,480
I jak programistów, jak masz
chyba widać w wielu z tych filmów,

192
00:09:34,480 --> 00:09:36,600
nie lubimy rozwlekły rzeczy.

193
00:09:36,600 --> 00:09:38,520
>> Chcemy być w stanie szybko zrobić rzeczy.

194
00:09:38,520 --> 00:09:42,640
Dlatego pragniemy bardziej
zwięzły sposób, aby coś powiedzieć.

195
00:09:42,640 --> 00:09:46,270
Więc tego rodzaju prowadzi do
Pojęcie coś o nazwie jQuery.

196
00:09:46,270 --> 00:09:49,170
Teraz jQuery nie jest JavaScript.

197
00:09:49,170 --> 00:09:50,350
To nie jest część JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Jest to biblioteka, że ​​został napisany
przez niektórych programistów JavaScript

199
00:09:54,790 --> 00:09:57,060
około 10 lat temu.

200
00:09:57,060 --> 00:10:01,300
A jego celem jest uproszczenie tego, co jest
po stronie klienta skryptów nazywa, które

201
00:10:01,300 --> 00:10:04,310
jest w zasadzie to, co my po prostu
mówisz o manipulacji DOM.

202
00:10:04,310 --> 00:10:11,090
I tak, jeśli chciałem zmodyfikować
Kolor tła mojej stronie internetowej, może

203
00:10:11,090 --> 00:10:11,980
specyficzny Div.

204
00:10:11,980 --> 00:10:15,325
>> Tutaj, mam podobno coraz
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
I chcę, aby ustawić kolor tła.

206
00:10:16,950 --> 00:10:20,720
Jeśli jestem tylko przy użyciu czystego JavaScript
przy użyciu Document Object Model,

207
00:10:20,720 --> 00:10:23,990
że jest wiele rzeczy, prawda?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = zielony.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Ufff.

211
00:10:28,050 --> 00:10:30,110
To było wiele do powiedzenia.

212
00:10:30,110 --> 00:10:31,720
To dużo, aby wpisać, też.

213
00:10:31,720 --> 00:10:35,760
I tak w jQuery, możemy być może powiedzieć,
to trochę bardziej zwięźle.

214
00:10:35,760 --> 00:10:39,350
Kompromis jest, że to może trochę
nieco bardziej tajemnicze się nagle,

215
00:10:39,350 --> 00:10:39,850
dobrze?

216
00:10:39,850 --> 00:10:43,580
>> Przynajmniej długo jest nieco bardziej
wyjaśniający, co robimy.

217
00:10:43,580 --> 00:10:49,947
Ten znak dolara, nawiasy,
apostrof, hash, colorDiv, prawda?

218
00:10:49,947 --> 00:10:50,780
Co to znaczy?

219
00:10:50,780 --> 00:10:53,640
Dobrze, że to w zasadzie tylko
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ale to ten rodzaj stenografii
sposób to zrobić przy użyciu jQuery.

221
00:10:58,700 --> 00:11:01,380
Miejmy tylko spojrzeć teraz
na kilka różnych sposobów,

222
00:11:01,380 --> 00:11:04,520
że może faktycznie
korzystać z tego obiektu Document

223
00:11:04,520 --> 00:11:06,807
Model manipulować kawałki mojej stronie.

224
00:11:06,807 --> 00:11:09,140
W szczególności, będziemy
do pracy na manipulowanie

225
00:11:09,140 --> 00:11:14,090
kolor szczególny
Div, colorDiv, na stronie internetowej.

226
00:11:14,090 --> 00:11:15,299
Warto więc spojrzeć na to.

227
00:11:15,299 --> 00:11:15,798
W porządku.

228
00:11:15,798 --> 00:11:16,700
Więc jestem na stronie.

229
00:11:16,700 --> 00:11:20,750
To się nazywa test.html podczas pobierania
jeśli chcesz majstrować z tym.

230
00:11:20,750 --> 00:11:24,730
A ja mam kilka
Przyciski na tej stronie.

231
00:11:24,730 --> 00:11:27,730
A ja mówię, że poszczególne funkcje
na kolor tła, fioletowy, zielony,

232
00:11:27,730 --> 00:11:31,330
pomarańczowy, czerwony, niebieski, jedna funkcja
na kolor tła, obsługi zdarzeń

233
00:11:31,330 --> 00:11:34,360
dla koloru tła i jQuery.

234
00:11:34,360 --> 00:11:38,147
Co ja mówię
kiedy to robię?

235
00:11:38,147 --> 00:11:39,230
Tak więc widzieliśmy przycisków.

236
00:11:39,230 --> 00:11:41,521
Teraz rzućmy okiem na
niektóre z kodu źródłowego tutaj.

237
00:11:41,521 --> 00:11:44,770
Zaczniemy test.html.

238
00:11:44,770 --> 00:11:48,100
Tak więc poszczególne funkcje w tle
kolor to co ja wpisane tutaj.

239
00:11:48,100 --> 00:11:49,350
Pozwól mi przejść trochę.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> A zauważysz, że ja
zdefiniowaniu tych przycisków

242
00:11:58,820 --> 00:12:03,990
powiedzieć, kiedy kliknięciu tego przycisku,
wywołać funkcję włączyć fioletowy.

243
00:12:03,990 --> 00:12:06,670
Po kliknięciu tego przycisku, a raczej
wywołania funkcji zmieni kolor na zielony,

244
00:12:06,670 --> 00:12:08,710
zmieni kolor na pomarańczowy, zmieni kolor na czerwony, zmieni kolor na niebieski.

245
00:12:08,710 --> 00:12:11,880
Można się domyślić, że to
nie jest chyba najlepszy projekt

246
00:12:11,880 --> 00:12:12,460
sensu, prawda?

247
00:12:12,460 --> 00:12:16,490
>> Byłoby miło, gdybym mógł
mają bardziej ogólne podejście.

248
00:12:16,490 --> 00:12:19,570
Cóż, po pierwsze my spojrzeć
na co te pięć funkcje są

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = fioletowy,

250
00:12:24,400 --> 00:12:27,250
zielony, pomarańczowy, czerwony,
i niebieski, odpowiednio.

251
00:12:27,250 --> 00:12:30,930
Tak więc, nie jest szczególnie najlepszy projekt.

252
00:12:30,930 --> 00:12:33,390
>> Kolejny zestaw przycisków
Mam się Pisałem

253
00:12:33,390 --> 00:12:36,380
pojedyncza funkcja nazywa
zmienić kolor, który najwyraźniej

254
00:12:36,380 --> 00:12:38,960
akceptuje ciąg jako jego argument.

255
00:12:38,960 --> 00:12:40,290
Więc to jest trochę lepiej.

256
00:12:40,290 --> 00:12:43,840
Fioletowy, zielony, pomarańczowy, czerwony,
niebieski jest argument.

257
00:12:43,840 --> 00:12:46,230
Więc pisałem bardziej ogólnego
Sprawa funkcji JavaScript,

258
00:12:46,230 --> 00:12:47,771
co może wyglądać tak.

259
00:12:47,771 --> 00:12:48,680
Jestem przechodząc.

260
00:12:48,680 --> 00:12:52,090
Ta zmiana koloru funkcja jest
spodziewa się argument o nazwie koloru.

261
00:12:52,090 --> 00:12:54,970
I mówię ustaw
kolor tła do koloru.

262
00:12:54,970 --> 00:12:58,390
Więc tutaj reprezentuje to, co mam tutaj.

263
00:12:58,390 --> 00:12:59,770
Więc to jest nieco lepiej.

264
00:12:59,770 --> 00:13:02,740
>> Ale być może uda mi się
coś lepszego.

265
00:13:02,740 --> 00:13:06,140
Jeśli idziemy w dół, aby przyjrzeć
w sytuacji, obsługi zdarzeń,

266
00:13:06,140 --> 00:13:07,860
Teraz wszystkie te rozmowy wyglądają tak samo.

267
00:13:07,860 --> 00:13:10,340
Jeśli pamiętacie dla naszego
dyskusja na temat obsługi zdarzeń,

268
00:13:10,340 --> 00:13:15,770
Można uzyskać informacje na temat, który z
te przyciski został kliknięty i używać.

269
00:13:15,770 --> 00:13:19,560
>> I tak w event.JavaScript, mam
napisane wydarzenie zmiana koloru, które

270
00:13:19,560 --> 00:13:21,110
domyśla się, który przycisk został kliknięty.

271
00:13:21,110 --> 00:13:23,250
To linia obiekt spust.

272
00:13:23,250 --> 00:13:25,240
I to tutaj, to robi się naprawdę rozwlekły.

273
00:13:25,240 --> 00:13:27,420
Ale to, co robię, to jestem
ustawienie tła

274
00:13:27,420 --> 00:13:30,340
kolor triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
To tekst
pomiędzy znacznikami przycisków.

276
00:13:34,170 --> 00:13:36,500
>> A potem najwyraźniej mają
aby ustawić go na małe litery.

277
00:13:36,500 --> 00:13:40,780
A to w jaki sposób mogę przekonwertować całej karty
ciąg znaków na małe litery w JavaScript za pomocą

278
00:13:40,780 --> 00:13:42,940
metoda na małe litery.

279
00:13:42,940 --> 00:13:46,570
Bo kiedy ustawić kolor,
jak staram się zrobić tutaj,

280
00:13:46,570 --> 00:13:48,260
kolor ma być pisane małymi literami.

281
00:13:48,260 --> 00:13:50,920
>> Ale przycisk, który miałem,
jeśli przyjrzeć,

282
00:13:50,920 --> 00:13:55,890
zauważyć, że tekst jest
napisane z P kapitałowego na fioletowy.

283
00:13:55,890 --> 00:13:59,140
A następnie w bardzo
Dno tutaj, ja widocznie

284
00:13:59,140 --> 00:14:02,630
spróbuj zrobić to przy użyciu jQuery, jak również.

285
00:14:02,630 --> 00:14:06,000
I w tym przypadku, nie jestem w rzeczywistości
wywołanie funkcji w ogóle.

286
00:14:06,000 --> 00:14:11,430
Właśnie powiedział uczniom, że jestem
używając do tego przycisku jest przycisk JQ.

287
00:14:11,430 --> 00:14:12,360
To jest.

288
00:14:12,360 --> 00:14:14,950
>> Więc w jaki sposób jQuery wiem, co robię?

289
00:14:14,950 --> 00:14:18,740
No, to jedną z zalet
slash wady jQuery.

290
00:14:18,740 --> 00:14:21,560
To może pozwoli mi robić rzeczy,
bardzo zwięźle, ale może nie

291
00:14:21,560 --> 00:14:22,570
jak intuicyjnie.

292
00:14:22,570 --> 00:14:25,570
Może te pozostałe trzy zrobić
nieco więcej sensu, co robię.

293
00:14:25,570 --> 00:14:29,010
Tu jednak, co się dzieje?

294
00:14:29,010 --> 00:14:31,940
>> Wydaje się, tworząc
anonimowa funkcja

295
00:14:31,940 --> 00:14:36,790
który ładuje gdy mój dokument
jest gotowy, więc document.ready,

296
00:14:36,790 --> 00:14:38,760
niektórych funkcji będzie się działo.

297
00:14:38,760 --> 00:14:40,490
Zasadniczo, gdy jest to dokument gotowy?

298
00:14:40,490 --> 00:14:42,310
To kiedy mój załadowaniu strony.

299
00:14:42,310 --> 00:14:46,540
>> Więc jak tylko moja strona była załadowaniu
następujących funkcji jest zawsze gotowy.

300
00:14:46,540 --> 00:14:54,310
Mówi, jeśli obiekt typu jQButton,
lub jeśli klasa jQButton został wciśnięty,

301
00:14:54,310 --> 00:14:55,570
wykonywania tej funkcji.

302
00:14:55,570 --> 00:14:59,360
Więc oto dwa anonimowe funkcje,
zdefiniowany wewnątrz drugiej.

303
00:14:59,360 --> 00:15:03,930
>> Więc moim całym kontekście
tutaj tak daleko jest moja strona

304
00:15:03,930 --> 00:15:06,520
podczas ładowania wywołuje tę funkcję.

305
00:15:06,520 --> 00:15:09,740
I ta funkcja czeka
dla przycisku należy kliknąć.

306
00:15:09,740 --> 00:15:14,490
A kiedy kliknięciu przycisku, JQ
Przycisk kliknięciu specjalnie,

307
00:15:14,490 --> 00:15:17,150
wywołuje ten drugi
Funkcja ta, która będzie

308
00:15:17,150 --> 00:15:21,250
ustawić kontekst
Kolor colorDiv się

309
00:15:21,250 --> 00:15:25,990
co tekst jest pomiędzy znacznikami.

310
00:15:25,990 --> 00:15:28,050
>> Jest to pojęcie
który przycisk został kliknięty.

311
00:15:28,050 --> 00:15:31,230
Ale poza tym, to jest coś w rodzaju
zachowuje się podobnie do zdarzenia.

312
00:15:31,230 --> 00:15:34,460
To tak samo jak ja
by wyrazić to w jQuery.

313
00:15:34,460 --> 00:15:36,790
Ponownie, jest to prawdopodobnie
dużo bardziej zastraszające.

314
00:15:36,790 --> 00:15:40,840
To nie jest tak oczywiste, jak
coś event.js,

315
00:15:40,840 --> 00:15:45,080
co jest być może trochę więcej
gadatliwy, ale trochę mniej

316
00:15:45,080 --> 00:15:46,000
zastraszające.

317
00:15:46,000 --> 00:15:51,460
>> Ale jeśli wracamy do mojego przeglądarce
okno, jeśli zacznę clicking-- dobrze,

318
00:15:51,460 --> 00:15:52,690
że zmienił się fioletowy.

319
00:15:52,690 --> 00:15:54,450
To zielone przy użyciu metody.

320
00:15:54,450 --> 00:15:56,500
To jest pomarańczowy z wykorzystaniem obsługi zdarzeń.

321
00:15:56,500 --> 00:15:58,300
>> To jest czerwony przy użyciu jQuery, prawda?

322
00:15:58,300 --> 00:16:01,270
Wszyscy zachowują się tak samo.

323
00:16:01,270 --> 00:16:06,509
Oni po prostu zrobić to za pomocą inaczej
podejście do rozwiązania problemu.

324
00:16:06,509 --> 00:16:08,550
Jest dużo więcej
jQuery to my na pewno

325
00:16:08,550 --> 00:16:10,050
Porozmawiamy o tym w filmie.

326
00:16:10,050 --> 00:16:15,410
Ale jeśli chcesz dowiedzieć się więcej, można
przejdź na jQuery rodzaj dokumentacji

327
00:16:15,410 --> 00:16:19,710
i dowiedzieć się nieco więcej na temat
Biblioteka to bardzo elastyczny, co

328
00:16:19,710 --> 00:16:22,550
doskonale nadaje się do prowadzenia po stronie klienta
skryptów, takich jak to, co robimy

329
00:16:22,550 --> 00:16:26,240
manipulować wygląd
i czuć naszej stronie internetowej

330
00:16:26,240 --> 00:16:28,750
z Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Jestem Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
To CS50.

333
00:16:31,930 --> 00:16:34,022