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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Ebben a videóban, azt akartuk,
kiáltani külön figyelmet

3
00:00:07,230 --> 00:00:09,110
hogy egy nagyon különleges
eleme JavaScript

4
00:00:09,110 --> 00:00:11,350
hogy lehet találni hasznos
mikor elkezded

5
00:00:11,350 --> 00:00:15,750
dolgozni manipulálni weboldalakat, és
a tartalom megváltoztatása weboldal

6
00:00:15,750 --> 00:00:16,460
menet közben.

7
00:00:16,460 --> 00:00:19,450
És ez a fogalom
A Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Tehát mint láttuk, a video
JavaScript, tárgyak igen rugalmas.

9
00:00:23,030 --> 00:00:24,750
>> És ezek is tartalmazhatnak különböző területeken.

10
00:00:24,750 --> 00:00:28,075
És bár nem mentünk bele a sok
részletek, ezeken a területeken, vagy ingatlan,

11
00:00:28,075 --> 00:00:30,200
hogy mi lenne valószínűleg több
megfelelően hívják őket

12
00:00:30,200 --> 00:00:33,915
keretében egy tárgy, még
Ezek a tulajdonságok a más tárgyak.

13
00:00:33,915 --> 00:00:36,210
És azon belül az említett tárgyak
lehet más tárgyakat.

14
00:00:36,210 --> 00:00:39,630
>> Itt van ez a nagyon nagy objektum
egy csomó más tárgyak

15
00:00:39,630 --> 00:00:43,550
belsejében is, amely egyfajta
teremt ez a gondolat egy nagy fa.

16
00:00:43,550 --> 00:00:47,540
Most, a dokumentum objektum egy
nagyon különleges tárgy JavaScript

17
00:00:47,540 --> 00:00:52,580
szervezi a teljes web
lap szerint ez a fajta esernyő

18
00:00:52,580 --> 00:00:53,470
egy tárgy.

19
00:00:53,470 --> 00:00:56,770
És így belsejében a dokumentum
tárgy tárgyak bemutatásával

20
00:00:56,770 --> 00:00:59,630
A fej és a test a weboldal.

21
00:00:59,630 --> 00:01:03,760
>> Belül e más
tárgyak, satöbbi, satöbbi,

22
00:01:03,760 --> 00:01:08,411
amíg a teljes weboldal
szerveztek ebben a nagy objektum.

23
00:01:08,411 --> 00:01:09,660
Mi a fejjel itt, ugye?

24
00:01:09,660 --> 00:01:12,170
Nos, tudjuk, hogyan kell dolgozni
A tárgyak a JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Tehát ha van egy tárgy,
utal a teljes weboldalt, hogy

26
00:01:15,840 --> 00:01:19,590
azt jelenti, hívja a helyes
módszerek manipulálni, hogy az objektum

27
00:01:19,590 --> 00:01:22,360
vagy módosítsanak bizonyos
a tulajdonságok, mi

28
00:01:22,360 --> 00:01:25,500
lehet változtatni a elemeit
oldalunkat programból

29
00:01:25,500 --> 00:01:30,210
JavaScript segítségével ahelyett,
kódolásához dolgokat, mondjuk, HTML.

30
00:01:30,210 --> 00:01:33,760
Tehát itt egy példa egy
Nagyon egyszerű weboldal, ugye?

31
00:01:33,760 --> 00:01:35,850
Van rajta HTML, egy fej.

32
00:01:35,850 --> 00:01:37,979
>> Belsejében van egy cím, hello world.

33
00:01:37,979 --> 00:01:38,770
Aztán van egy test.

34
00:01:38,770 --> 00:01:40,686
Belsejét, hogy azt kell
Három különböző dolog.

35
00:01:40,686 --> 00:01:44,170
Nekem van egy H2 fejléc tag,
egy bekezdés, valamint egy linket.

36
00:01:44,170 --> 00:01:45,920
Ez egy nagyon egyszerű internetes oldalt.

37
00:01:45,920 --> 00:01:48,590
>> Nos, mi lehet a dokumentum
objektumának néz ki?

38
00:01:48,590 --> 00:01:50,700
Nos, ez egy kicsit
ijesztő lehet, eleinte.

39
00:01:50,700 --> 00:01:52,510
De ez tényleg csak egy nagy fa.

40
00:01:52,510 --> 00:01:54,890
És a gyökerét ez a dokumentum.

41
00:01:54,890 --> 00:02:00,030
>> Belül a dokumentum egy másik
objektum utalva a HTML oldalam.

42
00:02:00,030 --> 00:02:02,660
És a HTML oldalam van mindez.

43
00:02:02,660 --> 00:02:06,900
És akkor belsejében a HTML
objektum, van egy vezetője tárgyat,

44
00:02:06,900 --> 00:02:09,000
arra utal, hogy ott mindent.

45
00:02:09,000 --> 00:02:11,009
>> És belsejében van,
Van egy cím objektumot.

46
00:02:11,009 --> 00:02:15,620
És belsejében van, van egy másik
kifogásolják, hogy ez csak hello world.

47
00:02:15,620 --> 00:02:18,020
Tudtam volna a testem
képviselt, mint ez.

48
00:02:18,020 --> 00:02:22,850
>> Testemben, van egy h2
objektum és egy p objektumot bekezdés

49
00:02:22,850 --> 00:02:25,270
és a tárgy egy linket.

50
00:02:25,270 --> 00:02:29,660
És így ez a hierarchiája
leírható, mint egy nagy fa

51
00:02:29,660 --> 00:02:31,990
sok kisebb kicsit
dolgok jönnek ki belőle.

52
00:02:31,990 --> 00:02:33,740
Most, természetesen, amikor
mi programozás, mi

53
00:02:33,740 --> 00:02:35,560
Nem hiszem, hogy a dolgok, mint egy nagy fa.

54
00:02:35,560 --> 00:02:37,980
Szeretnénk látni a tényleges
kód kapcsolatos dolgokat.

55
00:02:37,980 --> 00:02:40,790
>> És Szerencsére mi is
Használhatja fejlesztői eszközök

56
00:02:40,790 --> 00:02:46,080
hogy valóban vessünk egy pillantást
Ezen a honlapon a dokumentum objektum.

57
00:02:46,080 --> 00:02:48,150
És legyünk erre.

58
00:02:48,150 --> 00:02:49,580
Úgyhogy nyitott egy böngésző fülre.

59
00:02:49,580 --> 00:02:51,540
>> És én megnyitotta fejlesztői eszközök.

60
00:02:51,540 --> 00:02:54,460
És az én video Javascript, I
Említette, hogy a konzol nem

61
00:02:54,460 --> 00:02:56,770
Csak olyan helyre, ahol
nyomtatjuk információkat,

62
00:02:56,770 --> 00:02:59,560
ez is egy hely, ahol
tudjuk bemeneti adatok.

63
00:02:59,560 --> 00:03:01,380
Ebben az összefüggésben, mi
Megyek mondani,

64
00:03:01,380 --> 00:03:05,720
Szeretnék visszatérni
A dokumentum tárgyak,

65
00:03:05,720 --> 00:03:07,502
így tudok kezdeni, hogy egy pillantást.

66
00:03:07,502 --> 00:03:08,460
Szóval, hogyan lehet ezt megtenni?

67
00:03:08,460 --> 00:03:10,740
Nos, ha azt akarom,
megszervezni, hogy valóban szépen,

68
00:03:10,740 --> 00:03:16,317
Azt fogom mondani console.dir, D-I-R.
Most, azt használja console.log, hogy csak a nyomtatási

69
00:03:16,317 --> 00:03:17,400
valamit nagyon egyszerű.

70
00:03:17,400 --> 00:03:20,450
De ha azt akarom, hogy szervezze meg ezt
hierarchikusan, mint egy tárgy,

71
00:03:20,450 --> 00:03:23,800
Azt akarom, hogy egyfajta strukturált
mint egy könyvtár struktúrát.

72
00:03:23,800 --> 00:03:27,400
>> Szóval azt akarom console.dir dokumentumot.

73
00:03:27,400 --> 00:03:28,430
Megyek az Enter leütése.

74
00:03:28,430 --> 00:03:32,350
És jobbra lent most,
és én nagyítás itt,

75
00:03:32,350 --> 00:03:36,000
Van ez a válasz dokumentumban
egy kis nyílra.

76
00:03:36,000 --> 00:03:39,470
Most, amikor kinyitom ezt a nyilat,
ott lesz egy csomó dolgot.

77
00:03:39,470 --> 00:03:42,560
>> De mi lesz figyelmen kívül hagyni a sok
belőle, és csak egyfajta fókusz

78
00:03:42,560 --> 00:03:46,250
a legfontosabb része, ezért
lehet kezdeni navigálni ezt a dokumentumot.

79
00:03:46,250 --> 00:03:50,125
Van sokkal több a DOM, mint
Csak a szülő és a gyermek csomópontok csomópontok.

80
00:03:50,125 --> 00:03:51,500
Van egy csomó járulékos dolog.

81
00:03:51,500 --> 00:03:52,280
>> Így fogok megnyitni ezt fel.

82
00:03:52,280 --> 00:03:54,610
És van egy csomó
dolog, hogy kiugrik.

83
00:03:54,610 --> 00:03:59,000
De minden, amit érdekel
Itt, gyermek csomópont.

84
00:03:59,000 --> 00:04:00,410
Nyissunk hogy akár.

85
00:04:00,410 --> 00:04:03,810
>> Belsejében ott látom
valami ismerős, HTML.

86
00:04:03,810 --> 00:04:07,670
Szóval belsejében a dokumentum
Egy szinttel lejjebb, HTML.

87
00:04:07,670 --> 00:04:08,550
Kinyitom, hogy akár.

88
00:04:08,550 --> 00:04:10,380
Mit fogunk számított?

89
00:04:10,380 --> 00:04:13,760
>> Ha felidézzük a mi rajz,
Mit tegyünk megtalálja benne a HTML?

90
00:04:13,760 --> 00:04:17,275
Mi két csomópont alatta a fán?

91
00:04:17,275 --> 00:04:17,899
Találjuk ki.

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

93
00:04:18,940 --> 00:04:22,079
Lemegyünk a gyermek csomópontok.

94
00:04:22,079 --> 00:04:23,440
>> Pop, hogy nyitva van.

95
00:04:23,440 --> 00:04:25,990
Van fej és a test.

96
00:04:25,990 --> 00:04:28,540
És mi lehet megnyitni a fejét.

97
00:04:28,540 --> 00:04:30,460
Mennie, hogy a gyermek csomópontok.

98
00:04:30,460 --> 00:04:31,460
Nos, itt van a cím.

99
00:04:31,460 --> 00:04:33,293
>> És sorolhatnám
mint ez örökre.

100
00:04:33,293 --> 00:04:34,770
Mi is ezt a testet is.

101
00:04:34,770 --> 00:04:40,090
De van egy lehetőség számunkra, hogy nézd meg
A dokumentum szervezett, mint egy nagy tárgyat.

102
00:04:40,090 --> 00:04:42,610
És ha megnézzük egy nagy
objektum, amely úgy néz ki,

103
00:04:42,610 --> 00:04:47,480
mint a kód, ez azt jelenti, hogy mi lehet kezdeni
manipulálni a nagy objektumot

104
00:04:47,480 --> 00:04:51,220
kódot megváltoztatni, amit mi
honlap kinézetét és érzetét.

105
00:04:51,220 --> 00:04:54,920
>> Tehát ez egy nagyon hatékony eszköz
mi rendelkezésünkre áll most.

106
00:04:54,920 --> 00:04:57,360
Tehát ahogy most láttam, az
dokumentum tárgy maga

107
00:04:57,360 --> 00:05:01,392
és minden a tárgyak belsejébe
van tulajdonságok és módszerek, csak

108
00:05:01,392 --> 00:05:04,100
mint bármely más objektumot, hogy már
óta dolgozik a JavaScript.

109
00:05:04,100 --> 00:05:08,370
De tudjuk használni azokat a tulajdonságokat és
a módszert alkalmazni, hogy egyfajta lebontja

110
00:05:08,370 --> 00:05:10,900
a nagy dokumentumot, és kap
lejjebb és lejjebb és lejjebb,

111
00:05:10,900 --> 00:05:13,360
finomabb és finomabb szemcsék
részletesség, amíg nem

112
00:05:13,360 --> 00:05:17,510
eljut egy nagyon különleges darab a mi
weboldalt, hogy meg akarjuk változtatni.

113
00:05:17,510 --> 00:05:22,700
>> És amikor frissíteni tulajdonságai
Document Object vagy hívja azokat a módszereket,

114
00:05:22,700 --> 00:05:24,450
dolgok megtörténhet honlapunkon.

115
00:05:24,450 --> 00:05:28,420
És nem kell semmilyen frissítő
arra, hogy e módosítások lépnek életbe.

116
00:05:28,420 --> 00:05:33,160
>> És ez egy nagyon jó képessége
Van, amikor dolgozunk kóddal.

117
00:05:33,160 --> 00:05:37,185
Tehát mi van néhány ilyen tulajdonságok
hogy része egy dokumentum objektum?

118
00:05:37,185 --> 00:05:40,100
Nos, akkor valószínűleg látta, hogy egy
pár közülük nagyon gyorsan

119
00:05:40,100 --> 00:05:42,700
mint mi voltunk cipzár
az óriás dokumentum

120
00:05:42,700 --> 00:05:45,150
objektum láttunk a böngészőben.

121
00:05:45,150 --> 00:05:48,420
>> De egy pár ilyen tulajdonságok
Lehet, hogy a dolgok, mint a belső HTML.

122
00:05:48,420 --> 00:05:52,950
És lehet, hogy még emlékszem nekem
ezzel a JavaScript videó

123
00:05:52,950 --> 00:05:54,950
a legvégén, amikor
beszélt eseményeket.

124
00:05:54,950 --> 00:05:56,125
Mi volt ez a belső HTML?

125
00:05:56,125 --> 00:05:59,030
Nos, ez csak mi
között a címkéket.

126
00:05:59,030 --> 00:06:01,590
>> És így a belső HTML,
például, a cím szerinti

127
00:06:01,590 --> 00:06:05,390
tag, ha már folyamatosan megy a
hogy például egy perce

128
00:06:05,390 --> 00:06:08,020
lett volna hello world.

129
00:06:08,020 --> 00:06:10,140
Ez volt a címe oldalunkon.

130
00:06:10,140 --> 00:06:12,370
Egyéb tulajdonságok
többek között a csomópont neve, amely

131
00:06:12,370 --> 00:06:15,810
a neve egy HTML
elemet, például címet.

132
00:06:15,810 --> 00:06:19,100
ID, amely az ID-
attribútum egy HTML elemet.

133
00:06:19,100 --> 00:06:23,790
>> Emlékezzünk vissza, hogy mi is kifejezetten jelzi,
speciális eleme a HTML

134
00:06:23,790 --> 00:06:27,510
egy attribútum, amely általában
jól jön keretében CSS,

135
00:06:27,510 --> 00:06:29,000
konkrétan.

136
00:06:29,000 --> 00:06:33,217
Szülő csomópont, amely egy hivatkozás
mi csak fel felettem a DOM.

137
00:06:33,217 --> 00:06:35,800
És a gyermek csomópontok, amelyek egy
hivatkozással mi meg alattam.

138
00:06:35,800 --> 00:06:37,950
És láttunk egy csomó, hogy
Csak nézegette.

139
00:06:37,950 --> 00:06:42,970
Gyermek csomópontok, ez hogyan jutottunk
mélyebbre és mélyebbre a fa.

140
00:06:42,970 --> 00:06:46,590
>> Tulajdonítja, ez csak egy tömböt
Az attribútumok a HTML elem.

141
00:06:46,590 --> 00:06:50,270
Tehát egy példa attribútumok talán
lehet, ha van egy kép tag,

142
00:06:50,270 --> 00:06:54,090
ez általában egy forrás attribútumot,
talán egy magassága és szélessége attribútumot.

143
00:06:54,090 --> 00:06:57,120
És így, hogy ez csak egy tömböt
Az összes jellemzővel társult

144
00:06:57,120 --> 00:06:59,300
azzal a HTML elemet.

145
00:06:59,300 --> 00:07:04,140
>> A stílus másik, hogy
nem képviseli a CSS

146
00:07:04,140 --> 00:07:06,050
stílus egy sajátos eleme.

147
00:07:06,050 --> 00:07:08,310
És később ebben a
videó, akkor kifejezetten

148
00:07:08,310 --> 00:07:14,592
tőkeáttétel stílust, hogy egy pár
A változások a honlapunkon.

149
00:07:14,592 --> 00:07:15,800
Tehát ezek néhány tulajdonságát.

150
00:07:15,800 --> 00:07:17,591
>> És van olyan is,
módszereket, hogy mi lehet

151
00:07:17,591 --> 00:07:22,450
Használja a szintén gyorsabban lehet elkülöníteni
elemei a Document Object.

152
00:07:22,450 --> 00:07:26,730
Talán a legsokoldalúbb
ezek közül getElementById.

153
00:07:26,730 --> 00:07:31,190
Szóval lehet, hogy valami ilyesmit mondani, mert
emlékszem ez egy módszer a dokumentum

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

155
00:07:34,880 --> 00:07:39,820
>> És belsejét ezek a zárójelek adja
HTML elemet egy adott azonosító

156
00:07:39,820 --> 00:07:42,330
tulajdonítják, hogy én már korábban
beállítva, és én azonnal

157
00:07:42,330 --> 00:07:46,685
ugorj el ezt az elemet
A teljes honlapon.

158
00:07:46,685 --> 00:07:49,310
Szóval nem kell fúrni talán
végig minden egyes réteg.

159
00:07:49,310 --> 00:07:52,841
Én is csak ezt a módszert használja, hogy megtalálja azt,
Valahogy úgy, mint egy hő kereső rakéta,

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

161
00:07:53,340 --> 00:07:56,300
Csak azt, és megállapítja,
pontosan mit keres.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName van
nagyon hasonló szellemben.

163
00:07:59,290 --> 00:08:02,500
Talán ez lenne megtalálni az összes
félkövér címkék vagy valamennyi p címkék

164
00:08:02,500 --> 00:08:05,920
és adj egy sor mindent
hogy én is majd dolgozni.

165
00:08:05,920 --> 00:08:12,080
AppendChild hozzáad valamit
Egy szinttel lejjebb a fán.

166
00:08:12,080 --> 00:08:16,440
>> Szóval én is hozzá egy teljesen új
eleme egy szinttel lejjebb.

167
00:08:16,440 --> 00:08:19,700
Vagy tudok eltávolítani egy elem, ami
egy szinttel lejjebb is, ha azt akarom,

168
00:08:19,700 --> 00:08:22,870
törölni valamit a weboldalon.

169
00:08:22,870 --> 00:08:28,480
Most, gyors kódolási jegyzetet, és egy gyors
fejfájás megtakarítás tudomásul, remélhetőleg.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- a d kisbetűs.

171
00:08:31,670 --> 00:08:36,950
Nem tudom megmondani, hogy hány alkalommal van
Használt getElementById és aktivált

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

173
00:08:38,336 --> 00:08:39,460
Mert ez tényleg gyakori.

174
00:08:39,460 --> 00:08:42,990
Ha mi írjuk a szót ID, ez
Általában főváros I. tőke D.

175
00:08:42,990 --> 00:08:44,240
És a kód csak nem működik.

176
00:08:44,240 --> 00:08:45,630
És nem tudok rájönni, hogy miért.

177
00:08:45,630 --> 00:08:49,490
Ez egy nagyon, nagyon, nagyon
Gyakori hiba, hogy mindenki teszi,

178
00:08:49,490 --> 00:08:51,890
még a szakértők, akik
már ezt örökre.

179
00:08:51,890 --> 00:08:55,410
Tehát csak ne feledje, getElementById,
hogy d kisbetűs.

180
00:08:55,410 --> 00:09:00,080
És remélhetőleg, hogy takarít meg a több
perc legalább szívfájdalom.

181
00:09:00,080 --> 00:09:02,204
>> Szóval mit jelent mindez nekünk?

182
00:09:02,204 --> 00:09:03,120
Jelenleg ezeket a módszereket.

183
00:09:03,120 --> 00:09:04,161
Jelenleg ezeket a tulajdonságokat.

184
00:09:04,161 --> 00:09:06,610
Ha most kezdődik
dokumentumot, a dokumentum.

185
00:09:06,610 --> 00:09:10,220
bármi, mi most kap bármely
egyetlen darab honlapunkon

186
00:09:10,220 --> 00:09:14,870
hogy szeretnénk JavaScript segítségével
Csak hívja ezeket a módszereket

187
00:09:14,870 --> 00:09:19,940
és kihasználva a tulajdonságok
hogy megtaláljuk a különböző helyszíneken.

188
00:09:19,940 --> 00:09:24,890
>> Ez is kap bőbeszédű, ez
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
Talán van egy hosszú címke nevét,
Lehet, hogy még több hívást később.

190
00:09:28,560 --> 00:09:31,230
Dolgok egy kicsit bőbeszédű.

191
00:09:31,230 --> 00:09:34,480
És ahogy a programozók, ahogy már
Valószínűleg látott sok ilyen videó,

192
00:09:34,480 --> 00:09:36,600
mi nem tetszik bőbeszédű dolgokat.

193
00:09:36,600 --> 00:09:38,520
>> Szeretnénk tudni, hogy a dolgok gyorsan.

194
00:09:38,520 --> 00:09:42,640
Tehát szeretnénk egy
tömören, hogy mondjon valamit.

195
00:09:42,640 --> 00:09:46,270
Tehát ez a fajta vezet a
fogalma úgynevezett jQuery.

196
00:09:46,270 --> 00:09:49,170
Most jQuery nem JavaScript.

197
00:09:49,170 --> 00:09:50,350
Ez nem része a JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Ez egy könyvtár, amit írt,
Egyes JavaScript programozó

199
00:09:54,790 --> 00:09:57,060
Körülbelül 10 évvel ezelőtt.

200
00:09:57,060 --> 00:10:01,300
A Bizottság célja, hogy egyszerűsítse ezt mi
nevű kliens oldali programozás, amely

201
00:10:01,300 --> 00:10:04,310
alapvetően mi voltunk csak
beszél a DOM manipuláció.

202
00:10:04,310 --> 00:10:11,090
És így ha akartam, hogy módosítsa a
háttérszíne weboldalamon, talán

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

204
00:10:11,980 --> 00:10:15,325
>> Itt vagyok láthatóan egyre
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
És azt akarom állítani a háttérszínt.

206
00:10:16,950 --> 00:10:20,720
Ha én csak a tiszta JavaScript
használja a Document Object Model,

207
00:10:20,720 --> 00:10:23,990
ez egy csomó dolog, ugye?
document.getElementById

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

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

210
00:10:27,260 --> 00:10:28,050
>> Tyűha.

211
00:10:28,050 --> 00:10:30,110
Ez volt sok mondanivalója.

212
00:10:30,110 --> 00:10:31,720
Ez sok, hogy írja is.

213
00:10:31,720 --> 00:10:35,760
És így a jQuery, akkor talán mondani
ez egy kicsit tömörebben.

214
00:10:35,760 --> 00:10:39,350
A kompromisszum, hogy ez talán egy kicsit
kicsit rejtélyes hirtelen,

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

216
00:10:39,850 --> 00:10:43,580
>> Legalábbis hosszú egy kicsit
magyarázó, hogy mit csinálunk.

217
00:10:43,580 --> 00:10:49,947
Ez dollár jel, zárójelben,
aposztróf hash, colorDiv, ugye?

218
00:10:49,947 --> 00:10:50,780
Az mit jelent?

219
00:10:50,780 --> 00:10:53,640
Nos, ez alapvetően csak
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> De ez a fajta gyorsírásos
módja, hogy a jQuery.

221
00:10:58,700 --> 00:11:01,380
Nézzük csak vess egy pillantást most
egy pár különböző módon

222
00:11:01,380 --> 00:11:04,520
hogy talán valóban
Használja ezt a Document Object

223
00:11:04,520 --> 00:11:06,807
Modell manipulálni darab oldalamon.

224
00:11:06,807 --> 00:11:09,140
Különösen megyünk
hogy a dolgozó a manipulálására

225
00:11:09,140 --> 00:11:14,090
a szín egy adott
Div, colorDiv, a weblapon.

226
00:11:14,090 --> 00:11:15,299
Szóval vessünk egy pillantást, hogy.

227
00:11:15,299 --> 00:11:15,798
Minden rendben.

228
00:11:15,798 --> 00:11:16,700
Szóval én egy oldalon.

229
00:11:16,700 --> 00:11:20,750
Úgy hívják proba.html, ha le
ezt, ha akarod bütykölni ezt.

230
00:11:20,750 --> 00:11:24,730
És van egy csomó
gombok ezen az oldalon.

231
00:11:24,730 --> 00:11:27,730
És mondok egyes funkciók
A háttér színe, lila, zöld,

232
00:11:27,730 --> 00:11:31,330
narancs, piros, kék, egy egyfunkciós
A háttér színe, eseménykezelő

233
00:11:31,330 --> 00:11:34,360
A háttér színe, és a jQuery.

234
00:11:34,360 --> 00:11:38,147
Mit is beszélek
ha én csinálom ezt?

235
00:11:38,147 --> 00:11:39,230
Így láttuk a gombokat.

236
00:11:39,230 --> 00:11:41,521
Most, vessünk egy pillantást
néhány forráskód itt.

237
00:11:41,521 --> 00:11:44,770
Kezdjük proba.html.

238
00:11:44,770 --> 00:11:48,100
Így az egyes funkciók háttér
szín az, amit az ide beírt.

239
00:11:48,100 --> 00:11:49,350
Hadd lépjünk egy kicsit.

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

241
00:11:56,170 --> 00:11:58,820
>> És észre fogod venni, hogy én
meghatározta ezeket a gombokat

242
00:11:58,820 --> 00:12:03,990
Mondhatni, mikor erre a gombra kattint,
A funkciót lilára.

243
00:12:03,990 --> 00:12:06,670
Ha ez a gomb klikk, hanem,
A funkciót zöldre vált,

244
00:12:06,670 --> 00:12:08,710
narancssárgára, pirosra, kékre vált.

245
00:12:08,710 --> 00:12:11,880
Akkor valószínűleg hiszem, hogy ez a
talán nem a legjobb design

246
00:12:11,880 --> 00:12:12,460
értelme, ugye?

247
00:12:12,460 --> 00:12:16,490
>> Jó lenne, ha tudnék
Van egy általános megközelítést.

248
00:12:16,490 --> 00:12:19,570
Nos, először akkor vess egy pillantást
hogy mi az az öt funkciók

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

250
00:12:24,400 --> 00:12:27,250
zöld, narancssárga, piros,
és kék, ill.

251
00:12:27,250 --> 00:12:30,930
Szóval, nem különösebben a legjobb design.

252
00:12:30,930 --> 00:12:33,390
>> A következő sor gomb
Én is írtam

253
00:12:33,390 --> 00:12:36,380
egy funkció úgynevezett
színe megváltozik, hogy látszólag

254
00:12:36,380 --> 00:12:38,960
elfogad egy sztringet ad érvet.

255
00:12:38,960 --> 00:12:40,290
Szóval ez egy kicsit jobb.

256
00:12:40,290 --> 00:12:43,840
Lila, zöld, narancs, piros,
kék most egy érv.

257
00:12:43,840 --> 00:12:46,230
Szóval írtam egy általánosabb
esetében a JavaScript funkciót,

258
00:12:46,230 --> 00:12:47,771
ami valahogy így néz ki.

259
00:12:47,771 --> 00:12:48,680
Én halad.

260
00:12:48,680 --> 00:12:52,090
Ez a funkció a változás színe
vár egy érv az úgynevezett színes.

261
00:12:52,090 --> 00:12:54,970
És mondok meg a
háttérszínt színét.

262
00:12:54,970 --> 00:12:58,390
Tehát itt képviseli, amit kaptam itt.

263
00:12:58,390 --> 00:12:59,770
Szóval ez egy kicsit jobb.

264
00:12:59,770 --> 00:13:02,740
>> De lehet, hogy
Ennél jobb.

265
00:13:02,740 --> 00:13:06,140
Ha lemegyünk, hogy egy pillantást
A eseménykezelő helyzetet,

266
00:13:06,140 --> 00:13:07,860
Most ezek a hívások ugyanúgy néz ki.

267
00:13:07,860 --> 00:13:10,340
Ha felidézzük a mi
vita esetén rakodók,

268
00:13:10,340 --> 00:13:15,770
Azt lehet információt szerezni, amely a
ezeket a gombokat kattintottak, és azt használja.

269
00:13:15,770 --> 00:13:19,560
>> És így event.JavaScript, én már
írásos színe megváltozik esemény, amely

270
00:13:19,560 --> 00:13:21,110
kitalálja, melyik gombra kattintás.

271
00:13:21,110 --> 00:13:23,250
Ez a ravaszt tárgy sorban.

272
00:13:23,250 --> 00:13:25,240
És akkor itt, nem lesz igazán bőbeszédű.

273
00:13:25,240 --> 00:13:27,420
De mit csinálok én vagyok
beállítás a háttér

274
00:13:27,420 --> 00:13:30,340
szín triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Ez a szöveg
a gomb közötti címkéket.

276
00:13:34,170 --> 00:13:36,500
>> És akkor nyilván van
úgy beállítani, hogy kisbetűs.

277
00:13:36,500 --> 00:13:40,780
És ez hogyan tudja alakítani az egész
karakterlánc kisbetűs a JavaScript segítségével

278
00:13:40,780 --> 00:13:42,940
ezt a módszert a kisbetűs.

279
00:13:42,940 --> 00:13:46,570
Mert amikor meghatározta a színt,
mint én próbálok csinálni itt,

280
00:13:46,570 --> 00:13:48,260
A színes kell lennie csupa kisbetűvel.

281
00:13:48,260 --> 00:13:50,920
>> De a gombot, hogy volt,
ha veszünk egy pillantást,

282
00:13:50,920 --> 00:13:55,890
észre, hogy a szöveg van
írva egy nagy P a lila.

283
00:13:55,890 --> 00:13:59,140
És akkor a nagyon
alján van, azt nyilván

284
00:13:59,140 --> 00:14:02,630
megpróbálja ezt a jQuery is.

285
00:14:02,630 --> 00:14:06,000
És ebben az esetben, nem vagyok ténylegesen
egy funkció egyáltalán.

286
00:14:06,000 --> 00:14:11,430
Már csak azt mondta az osztálynak, hogy én vagyok
hogy erre a gombra egy JQ gombot.

287
00:14:11,430 --> 00:14:12,360
Ez az.

288
00:14:12,360 --> 00:14:14,950
>> Tehát hogyan jQuery tudom, mit csinálok?

289
00:14:14,950 --> 00:14:18,740
Nos, ez az egyik előnye
perjel hátrányait jQuery.

290
00:14:18,740 --> 00:14:21,560
Ez engedje meg, hogy a dolgokat
nagyon tömören, de talán nem

291
00:14:21,560 --> 00:14:22,570
mint kezelni.

292
00:14:22,570 --> 00:14:25,570
Lehet, hogy azok a másik három, hogy egy
kicsit több értelme, hogy mit csinálok.

293
00:14:25,570 --> 00:14:29,010
Itt azonban mi folyik itt?

294
00:14:29,010 --> 00:14:31,940
>> Úgy látszik, ami
egy névtelen függvényt

295
00:14:31,940 --> 00:14:36,790
hogy a rakományok valahányszor dokumentum
készen áll, így document.ready,

296
00:14:36,790 --> 00:14:38,760
Néhány funkció nem fog történni.

297
00:14:38,760 --> 00:14:40,490
Alapvetően, ha egy dokumentumot kész?

298
00:14:40,490 --> 00:14:42,310
Ez az, amikor az én oldal betöltése.

299
00:14:42,310 --> 00:14:46,540
>> Tehát amint én oldal betöltése, a
következő funkció mindig készen áll.

300
00:14:46,540 --> 00:14:54,310
Azt mondja, ha egy objektum típusú jQButton,
vagy ha osztály jQButton került kattintott,

301
00:14:54,310 --> 00:14:55,570
A funkció végrehajtása.

302
00:14:55,570 --> 00:14:59,360
Tehát itt két névtelen függvények,
egy meghatározott belsejében a többi.

303
00:14:59,360 --> 00:15:03,930
>> Szóval én egész összefüggésében
Itt eddig oldalam

304
00:15:03,930 --> 00:15:06,520
amikor betölti azt kéri ezt a funkciót.

305
00:15:06,520 --> 00:15:09,740
És ez a funkció vár
Egy gombot kell kattintani.

306
00:15:09,740 --> 00:15:14,490
És amikor egy gombra kattint, Jq
gombot kifejezetten kattint,

307
00:15:14,490 --> 00:15:17,150
arra kéri a másik
funkciót, ami megy

308
00:15:17,150 --> 00:15:21,250
beállítani a háttérben
színe colorDiv lenni

309
00:15:21,250 --> 00:15:25,990
bármilyen szöveg között a címkéket.

310
00:15:25,990 --> 00:15:28,050
>> Ez a fogalom
amely gombra kattintás.

311
00:15:28,050 --> 00:15:31,230
De különben ez a fajta
viselkedik hasonló esemény.

312
00:15:31,230 --> 00:15:34,460
Ez ugyanúgy I
kifejezné ezt a jQuery.

313
00:15:34,460 --> 00:15:36,790
Ismét, ez valószínűleg egy
sokkal több félelmetes.

314
00:15:36,790 --> 00:15:40,840
Ez nem olyan egyértelmű, mint
valami ilyesmit event.js,

315
00:15:40,840 --> 00:15:45,080
ami talán egy kicsit többet
bőbeszédű, de egy kicsit kevesebb

316
00:15:45,080 --> 00:15:46,000
riasztónak.

317
00:15:46,000 --> 00:15:51,460
>> De ha pop vissza át a böngészőm
ablak, ha elkezdek clicking-- is,

318
00:15:51,460 --> 00:15:52,690
hogy megváltozott a lila.

319
00:15:52,690 --> 00:15:54,450
Ez a zöld segítségével a húr módszer.

320
00:15:54,450 --> 00:15:56,500
Ez narancs az eseménykezelő.

321
00:15:56,500 --> 00:15:58,300
>> Ez a vörös jQuery, ugye?

322
00:15:58,300 --> 00:16:01,270
Ezek mindegyike viselkednek pontosan ugyanaz.

323
00:16:01,270 --> 00:16:06,509
Ők csak csináld különböző
megközelíti a probléma megoldására.

324
00:16:06,509 --> 00:16:08,550
Van egy sokkal többet
jQuery akkor is biztos

325
00:16:08,550 --> 00:16:10,050
fogok beszélni ebben a videóban.

326
00:16:10,050 --> 00:16:15,410
De ha azt akarjuk, hogy többet, akkor
megy a jQuery fajta dokumentáció

327
00:16:15,410 --> 00:16:19,710
és tanulni egy kicsit többet
Ez a nagyon rugalmas könyvtár, amely

328
00:16:19,710 --> 00:16:22,550
nagyszerű csinál kliens oldali
scripting, mint amit csináltunk

329
00:16:22,550 --> 00:16:26,240
manipulálni a megjelenés
és úgy érzi, a honlapunkon

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

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

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

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