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

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvardin yliopisto]

3
00:00:04,790 --> 00:00:08,000
[Tämä on CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Jos olet jälkeen pitkin kotona, voit itse käyttää minun dioja verkossa

5
00:00:10,640 --> 00:00:13,310
menemällä tätä linkkiä.

6
00:00:13,310 --> 00:00:18,650
Se TjjRWj, on bit.ly.

7
00:00:18,650 --> 00:00:20,700
Voit myös vain mennä URL suoraan,

8
00:00:20,700 --> 00:00:27,300
joka on cloud.cs50.net / ~ vshekhawat, joka on minun nimeni,

9
00:00:27,300 --> 00:00:32,409
ja jQuery.

10
00:00:32,409 --> 00:00:34,920
Olen erittäin rohkaista teitä seurata mukana, jos olet katsomassa kotona,

11
00:00:34,920 --> 00:00:40,650
ja jos olet täällä, myös, koska tämä on melko interaktiivinen esitys.

12
00:00:40,650 --> 00:00:43,160
>> Joten tänään aion puhua jQuery, ja ensimmäinen kysymys on,

13
00:00:43,160 --> 00:00:45,300
mikä on jQuery?

14
00:00:45,300 --> 00:00:47,090
Tänä vuonna, tiedän te ole katettu JavaScript

15
00:00:47,090 --> 00:00:51,080
niin yksityiskohtaisesti kuin olemme viime vuosina.

16
00:00:51,080 --> 00:00:53,150
JavaScript on ensinnäkin vain client-side kieli

17
00:00:53,150 --> 00:00:58,390
että käytät ajaa skriptejä ja koodin jokaisen käyttäjän koneella.

18
00:00:58,390 --> 00:01:00,660
Joten sinulla on palvelin, joka tarjoaa web-sivuja ihmisiä,

19
00:01:00,660 --> 00:01:02,600
mutta saatat haluta tehdä juttuja heidän koneensa,

20
00:01:02,600 --> 00:01:08,060
pyytävät kone lähettää pyyntöjä palvelimelle 30 sekunnin välein tai jotain.

21
00:01:08,060 --> 00:01:10,420
Voit tehdä sen JavaScriptin avulla.

22
00:01:10,420 --> 00:01:13,190
JQuery vain tarjoaa enemmän toimintoja päälle JavaScript

23
00:01:13,190 --> 00:01:15,680
joka tekee ylimääräistä tavaraa sinulle.

24
00:01:15,680 --> 00:01:17,710
Jos tarkastellaan sisällön päälle,

25
00:01:17,710 --> 00:01:21,410
että kuvataan joitakin juttuja, että pystyt tekemään.

26
00:01:21,410 --> 00:01:23,500
Joten kaiken kaikkiaan, se luotiin tammikuussa 2006.

27
00:01:23,500 --> 00:01:26,560
Se oli aluksi suunniteltiin ja elokuussa 2005.

28
00:01:26,560 --> 00:01:31,370
Se on ollut jo pari vuotta, ja se on todella osa uuden Web 2.0 liikkuvuutta

29
00:01:31,370 --> 00:01:34,330
joka on tehty Internetin niin kiiltävä.

30
00:01:34,330 --> 00:01:37,630
Se on yleisimmin käytetty JavaScript-kirjaston.

31
00:01:37,630 --> 00:01:41,450
Yli 19,6 miljoonaa sivustot käyttävät sitä, ja käyttö on edelleen kasvussa

32
00:01:41,450 --> 00:01:45,640
mukaan builtwith.com, joka ilmeisesti viime vuonna,

33
00:01:45,640 --> 00:01:49,710
on juuri ollut jatkuvassa kasvussa melko lineaarisesti.

34
00:01:49,710 --> 00:01:52,870
Joukossa 10 miljoonaa sivustoja, siellä on vielä -

35
00:01:52,870 --> 00:01:55,180
noin 40% heistä on tällä hetkellä käytetään.

36
00:01:55,180 --> 00:01:58,540
Facebook käyttää sitä, paljon muut sivustot tällä hetkellä käyttää sitä.

37
00:01:58,540 --> 00:02:01,540
Voit tarkastella näitä tilastoja oman, jos haluat.

38
00:02:01,540 --> 00:02:05,820
Ja voit kertoa sen legit, koska se on perusta ja 13 hallituksen jäsentä,

39
00:02:05,820 --> 00:02:11,910
yhdessä tiimin 20 henkilöä, jotka työskentelevät sen säännöllisesti.

40
00:02:11,910 --> 00:02:16,110
Joten se on hyvin laajalti käytetty, se on. Org URL, se on hieno,

41
00:02:16,110 --> 00:02:21,660
se on spin-off muita juttuja, joten se on iso juttu.

42
00:02:21,660 --> 00:02:24,510
>> Miksi sinun pitäisi käyttää sitä? JQuery on erittäin kevyt.

43
00:02:24,510 --> 00:02:27,270
Se tarkoittaa, että ei ole valtava tiedosto. Voit ladata

44
00:02:27,270 --> 00:02:31,540
minified tiedosto, joka ei kaikki valkoinen tila ja kommentteja, ja se on vain 32 kt.

45
00:02:31,540 --> 00:02:33,600
Joten se on helppo vain nakata päälle Web-sivulla

46
00:02:33,600 --> 00:02:35,910
ja vain alkaa käyttää sitä.

47
00:02:35,910 --> 00:02:39,630
Se on myös erittäin tehokkaasti kirjoitettu, joten se ei vie paljon -

48
00:02:39,630 --> 00:02:42,550
se ei hidasta sivuston paljon, kun käytät sitä.

49
00:02:42,550 --> 00:02:45,770
Sen avulla voit toteuttaa asioita, jotka olivat aiemmin mahdottomia.

50
00:02:45,770 --> 00:02:47,790
On joitakin toimintoja,

51
00:02:47,790 --> 00:02:51,780
kuten animaatioiden, jotka normaalisti olisi hyvin, hyvin vaikea tehdä.

52
00:02:51,780 --> 00:02:54,300
Mutta jQuery he oikeastaan ​​hyvin yksinkertainen.

53
00:02:54,300 --> 00:02:57,040
Ja on olemassa joitakin asioita, jotka ovat ärsyttäviä tehdä,

54
00:02:57,040 --> 00:02:59,610
mahdollista JavaScript, kuten lähettämällä POST pyyntö,

55
00:02:59,610 --> 00:03:02,190
vaan lähettää pyynnön palvelimelle, sinun täytyy kirjoittaa

56
00:03:02,190 --> 00:03:04,320
viisi tai kuusi tai seitsemän riviä koodia.

57
00:03:04,320 --> 00:03:07,200
Nyt voit tehdä sen riviäkään koodia, ja yksi toiminto puhelun.

58
00:03:07,200 --> 00:03:11,790
Se todella helpottaa paljon tavaraa, että olet tekemässä.

59
00:03:11,790 --> 00:03:15,950
Ja kaikki siistit tyypit käyttävät sitä. Siihen mennessä, tarkoitan minua.

60
00:03:15,950 --> 00:03:19,270
Minun opinnäytetyön viime vuonna, mikä on news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
joka on radioasema, olen luonut tämän blogin

62
00:03:22,530 --> 00:03:29,750
joka isännöi kaikki osoittaa, että olemme tehneet ja MP3-tiedostoja heille.

63
00:03:29,750 --> 00:03:32,070
Voit selata aiemmin osoittaa,

64
00:03:32,070 --> 00:03:34,130
ja se kaikki tapahtuu käyttämällä jQuery. Voit kertoa

65
00:03:34,130 --> 00:03:37,340
koska kaikki nämä animaatiot lähinnä.

66
00:03:37,340 --> 00:03:42,360
Joten jos sinulla on - jos luot uuden postitse

67
00:03:42,360 --> 00:03:45,980
näet nämä pikku slideDowns, että kaikki tapahtuu käyttämällä jQuery.

68
00:03:45,980 --> 00:03:49,140
Ja tämä fade - niin tuollaista kaikki on tehty käyttäen jQuery,

69
00:03:49,140 --> 00:03:52,720
ja sinun ei tarvitse jatkuvasti ladata sivu navigoida sivuston.

70
00:03:52,720 --> 00:03:57,220
Toinen cool juttu, joka on tehty käyttäen jQuery on esittelyn.

71
00:03:57,220 --> 00:03:59,700
Käytän tätä avoimen lähdekoodin juttu nimeltä scrolldeck,

72
00:03:59,700 --> 00:04:03,250
jossa joku kirjoitti päälle jQuery.

73
00:04:03,250 --> 00:04:04,870
Jos todella katsoa lähde, voit nähdä, että

74
00:04:04,870 --> 00:04:07,830
he käyttävät tätä dollarin merkki; dollarimerkkiä

75
00:04:07,830 --> 00:04:12,110
käytetään jQuery merkiksi siitä, että toiminto on jQuery toiminto.

76
00:04:12,110 --> 00:04:15,020
Joten he määritellään kääre päälle jQuery

77
00:04:15,020 --> 00:04:18,570
jonka avulla voit tehdä esityksen näin,

78
00:04:18,570 --> 00:04:21,200
ja voit nähdä, että täällä he myös alkuperäisen jQuery tiedosto,

79
00:04:21,200 --> 00:04:24,120
joka on mitä sinun täytyy sisällyttää, jos haluat käyttää jQuery

80
00:04:24,120 --> 00:04:30,450
omassa verkkosivuilla.

81
00:04:30,450 --> 00:04:32,790
>> Liikuttavaa, että miten se asennetaan?

82
00:04:32,790 --> 00:04:36,150
Voit vain mennä jQuery.com ja ladata tiedoston,

83
00:04:36,150 --> 00:04:38,320
lisätä sen Web-hakemistoon ja sisällyttää se.

84
00:04:38,320 --> 00:04:42,200
Joten päälle, pää tag HTML-tiedoston

85
00:04:42,200 --> 00:04:45,400
teidän tärkein HTML-tiedoston, vain Koodirivin

86
00:04:45,400 --> 00:04:49,490
kanssa oikea versio version jQuery käytät.

87
00:04:49,490 --> 00:04:51,340
Voit ladata sen menemällä jQuery.com,

88
00:04:51,340 --> 00:04:55,130
klikkaa "Lataa jQuery" ja sinulla on se. Siinä kaikki.

89
00:04:55,130 --> 00:04:58,880
Ja todella, voimme katsoa, ​​miltä se näyttää.

90
00:04:58,880 --> 00:05:01,080
Jos klikkaat ladata täältä, jQuery on tämä.

91
00:05:01,080 --> 00:05:05,260
Se on vain yksi iso JavaScript-tiedoston, joka tekee kaikki taika juttuja sinulle.

92
00:05:05,260 --> 00:05:09,270
Tämä on minified versio, joka ei voi lukea lainkaan.

93
00:05:09,270 --> 00:05:13,180
Voit myös katsoa kehitysversio, joka on luettavissa

94
00:05:13,180 --> 00:05:15,370
mutta silti hyvin, hyvin pitkä.

95
00:05:15,370 --> 00:05:17,980
Se on paljon tavaraa siellä.

96
00:05:17,980 --> 00:05:20,240
Voit myös linkittää Googlen isännöi version.

97
00:05:20,240 --> 00:05:23,820
Niin, että saat avulla voit vain luottaa Google tarjoamaan sitä.

98
00:05:23,820 --> 00:05:29,310
Ne tarjoavat kaikki version, aina saatavilla.

99
00:05:29,310 --> 00:05:31,530
Joten voit todennäköisesti luottaa Google isäntä sen sinulle.

100
00:05:31,530 --> 00:05:33,270
Tai voit linkittää jQuery oma uusin versio.

101
00:05:33,270 --> 00:05:36,400
Heillä on URL, joka on aina päivitetty uusimpaan versioon.

102
00:05:36,400 --> 00:05:40,850
Se on jQuery-uusin, ja siellä on yksi ongelma, että

103
00:05:40,850 --> 00:05:44,350
joka on, että jos päivitetty jQuery ja joidenkin edellä toiminnallisuuden

104
00:05:44,350 --> 00:05:47,250
he olivat tulee degeneroitunut tai vanhentunut,

105
00:05:47,250 --> 00:05:49,620
se ei - se voi alkaa saa enää tueta.

106
00:05:49,620 --> 00:05:52,940
Joten jos kirjoitat sivuston avulla versiota 1.8.2,

107
00:05:52,940 --> 00:05:55,000
mennessä versio 2.7 tulee ulos

108
00:05:55,000 --> 00:05:57,000
joitakin toimintoja kirjoitit eivät enää toimi.

109
00:05:57,000 --> 00:05:59,930
Joten se on parempi vain ladata 32 kB tiedoston,

110
00:05:59,930 --> 00:06:04,100
laita se Web-sivulla, ja se tulee toimimaan ikuisesti.

111
00:06:04,100 --> 00:06:07,450
>> Aion mennä eteenpäin ja alkaa puhua toiminnallisuuden jQuery.

112
00:06:07,450 --> 00:06:13,090
Ensimmäinen asia on valitsimia. Tämä on mitä jQuery oli alun perin tarkoitus antaa.

113
00:06:13,090 --> 00:06:15,500
Ja voit klikata asiakirjat katsomaan

114
00:06:15,500 --> 00:06:18,690
yksityiskohtaiset asiakirjat valitsimet aion olla kattavat.

115
00:06:18,690 --> 00:06:24,120
Ideana valitsimet on, että voit valita HTML-elementtejä sivulla.

116
00:06:24,120 --> 00:06:28,790
Elementtejä sivulla on tunnukset ja luokat ja muita tunnistetietoja näkökohtia heille.

117
00:06:28,790 --> 00:06:30,500
Mukana on myös - He ovat eri järjestyksessä.

118
00:06:30,500 --> 00:06:32,570
Osan ajasta he sisäkkäin toisiaan.

119
00:06:32,570 --> 00:06:38,120
JQuery voit rakentaa yksinkertaisia ​​kyselyjä, jotka hakevat elementtejä sivulla.

120
00:06:38,120 --> 00:06:41,890
Sitten voit käsitellä näitä elementtejä käyttäen jQuery toimintoja,

121
00:06:41,890 --> 00:06:43,990
joka on manipulointia osassa saamme myöhemmin.

122
00:06:43,990 --> 00:06:46,040
Voit muuttaa HTML, muuttaa CSS,

123
00:06:46,040 --> 00:06:50,500
voit myös animoida ja lisätä toimintoja, jotka aktivoivat tiettyjä tapahtumia.

124
00:06:50,500 --> 00:06:52,710
Niinpä esimerkiksi, jos jotain napsautetaan, haluat jotain tapahtuu,

125
00:06:52,710 --> 00:06:55,210
voit tehdä sen käyttämällä jQuery samoin.

126
00:06:55,210 --> 00:06:57,380
Ja on valtava määrä tapoja valita elementtejä.

127
00:06:57,380 --> 00:07:00,310
Useimmat niistä en ole koskaan käyttänyt, mutta on perustiedot niistä,

128
00:07:00,310 --> 00:07:02,340
jotka ovat melko tärkeitä.

129
00:07:02,340 --> 00:07:05,750
Elementti valitsin, esimerkiksi jos olet juuri valinnut mitään

130
00:07:05,750 --> 00:07:10,640
että on div - Minulla on itse asiassa koodi auki tämän dian esityksen.

131
00:07:10,640 --> 00:07:13,450
Niinpä esimerkiksi, tässä ensimmäinen dia.

132
00:07:13,450 --> 00:07:17,430
Täällä meillä on div. Jos me itse valita kaikki divs sivulla,

133
00:07:17,430 --> 00:07:22,300
se täytyy vain antaa meille erilaisia ​​kaikki divs olemassa tähän tiedostoon.

134
00:07:22,300 --> 00:07:27,040
ID valitsin voit valita mitään tiettyä ID.

135
00:07:27,040 --> 00:07:32,230
Joten jos tämä esimerkiksi, tämä asia on tunnus "mitä"

136
00:07:32,230 --> 00:07:37,160
ja jos emme tätä # mitä sijaan joidenkin tunnus,

137
00:07:37,160 --> 00:07:42,920
se vain palauttavat array, joka on yksi tekijä ja se on, että osa sivun.

138
00:07:42,920 --> 00:07:45,490
Voimme myös yhdistää valitsimet tällä tavalla ottaa

139
00:07:45,490 --> 00:07:48,260
valita vain asioita tunnukset, jotka ovat divs.

140
00:07:48,260 --> 00:07:51,810
Niin joo. Valitse vain divs, joilla on kyseinen tunnus.

141
00:07:51,810 --> 00:07:55,260
Luokassa käytät vain piste, se on sama asia kuin CSS.

142
00:07:55,260 --> 00:07:57,500
Jälkeläinen myös toimii, joten jos sinulla on luokassa

143
00:07:57,500 --> 00:08:00,170
ja se on sisäkkäisiä osia sen sisällä - niin, esimerkiksi

144
00:08:00,170 --> 00:08:03,260
on jonkin verran luokkaan ja se on ankkuri tag linkki toiselle sivulle,

145
00:08:03,260 --> 00:08:08,510
voit käyttää tätä syntaksia hakea linkkiä.

146
00:08:08,510 --> 00:08:12,420
Voit myös valita useita asioita samanaikaisesti, vain erota ne pilkuilla

147
00:08:12,420 --> 00:08:17,360
käytä valitsin haluat ja valitset ne kaikki kerralla, yhdessä array.

148
00:08:17,360 --> 00:08:19,650
Ja sitten siellä on myös ei valitsin, joten voit valita kaikki divs

149
00:08:19,650 --> 00:08:24,210
joilla ei ole tiettyjä luokkaan.

150
00:08:24,210 --> 00:08:28,790
Ja tämä on vain hyödyllinen tapa saada johdatus miten tämä valinta toimii.

151
00:08:28,790 --> 00:08:32,270
Näytän joitakin konkreettisia esimerkkejä toisessa.

152
00:08:32,270 --> 00:08:35,480
>> Advanced valitsimia - nämä ovat vain muutamia esimerkkejä.

153
00:08:35,480 --> 00:08:38,840
On olemassa kymmeniä näistä, mutta jos haluat valita kaikki kuvan tunnisteet

154
00:08:38,840 --> 00:08:42,799
joissakin elementti, niin et vain: kuva.

155
00:08:42,799 --> 00:08:45,340
Jos haluat valita jopa elementtejä, esimerkiksi jos on 20 niistä,

156
00:08:45,340 --> 00:08:48,290
haluat valita 0, 2, 4, 6 ja niin edelleen,

157
00:08:48,290 --> 00:08:51,630
teet: jopa, tai voit myös tehdä: outoa.

158
00:08:51,630 --> 00:08:55,470
Nämä ovat pseudo valitsimet, mikä tarkoittaa, että ne itse asiassa laskea

159
00:08:55,470 --> 00:09:00,960
joka toinen elementti sijaan juuri menossa ja valitsemalla ne kaikki.

160
00:09:00,960 --> 00:09:05,510
Voit myös - jokainen elementti voi olla myös erityisiä ominaisuuksia.

161
00:09:05,510 --> 00:09:10,580
Niinpä esimerkiksi, class = keskellä on myös ominaisuus.

162
00:09:10,580 --> 00:09:16,500
Tämän ankkurointimerkki, href, hypertekstiviittausta, on ominaisuus myös.

163
00:09:16,500 --> 00:09:21,150
Joten voit valita jotain, että linkkejä tietylle sivulle tai vain - se on todella yleistä.

164
00:09:21,150 --> 00:09:25,410
Voit valita mitä tahansa ominaisuus, että haluat.

165
00:09:25,410 --> 00:09:27,470
Ja sitten myös, ominaisuus sisältää.

166
00:09:27,470 --> 00:09:30,420
Jos esimerkiksi halusi valita kaikki Tuloyksiköiden

167
00:09:30,420 --> 00:09:32,700
että on sana "pass", kuten nimi niitä,

168
00:09:32,700 --> 00:09:37,560
jos sivulla on syöttää tekstiä lohko

169
00:09:37,560 --> 00:09:41,050
sitä kutsutaan "salasana" Se olisi yksi tapa voit valita että.

170
00:09:41,050 --> 00:09:43,020
Ja siellä on paljon enemmän. Voit mennä eteenpäin ja katsoa asiakirjat

171
00:09:43,020 --> 00:09:46,950
ja nähdä konkreettisia esimerkkejä siitä, miten se toimii.

172
00:09:46,950 --> 00:09:48,840
>> Seuraava asia on DOM manipulointi.

173
00:09:48,840 --> 00:09:52,500
Kun olemme valitse elementtejä, me haluamme todella tehdä juttuja heidän kanssaan.

174
00:09:52,500 --> 00:09:55,500
Toistaiseksi emme ole katsonut lainkaan, mutta jos tarkastellaan asiakirjat,

175
00:09:55,500 --> 00:09:57,950
siellä on todella paljon, että voisimme tehdä.

176
00:09:57,950 --> 00:10:02,900
Tässä vaiheessa aiomme valita elementtejä esittelyn

177
00:10:02,900 --> 00:10:04,890
ja manipuloida niitä käyttämällä jQuery.

178
00:10:04,890 --> 00:10:08,290
Koska tämä on toteutettu jQuery, meillä on pääsy jQuery kirjasto,

179
00:10:08,290 --> 00:10:13,580
ja voimme käyttää näitä toimintoja tämän koodin.

180
00:10:13,580 --> 00:10:16,200
Yksi hyödyllinen asia, että et voi tietää on konsoli.

181
00:10:16,200 --> 00:10:19,340
Ja Google Chrome on mitä käytän. Voit painaa alt-komento J

182
00:10:19,340 --> 00:10:21,720
tai alt ohjaus J avata konsoli.

183
00:10:21,720 --> 00:10:26,130
Firefox Minusta käsky siirtyminen K tai valvonnan siirtyminen K.

184
00:10:26,130 --> 00:10:28,880
Safari sinun täytyy mennä muuttamaan joitakin asetuksia.

185
00:10:28,880 --> 00:10:35,460
Ei linkkiä, jos haluat tehdä sen, mutta suosittelen saada Chrome tai Firefox.

186
00:10:35,460 --> 00:10:37,750
Joten avata konsoli, se on täällä.

187
00:10:37,750 --> 00:10:41,170
Sen avulla voit pohjimmiltaan vain tehdä mitä haluat.

188
00:10:41,170 --> 00:10:45,100
Joten voit vain kirjoittaa luoda muuttuja nimeltä x,

189
00:10:45,100 --> 00:10:49,200
x = 5, katsotaanpa mitä x + 2 on.

190
00:10:49,200 --> 00:10:57,670
Voit jopa tehdä jotain CS + Katsotaanpa, x + 45, joka on CS50.

191
00:10:57,670 --> 00:11:00,530
Voit vain tehdä joitakin tyypillisiä JavaScript juttuja.

192
00:11:00,530 --> 00:11:02,730
Mutta voit myös tehdä jQuery täällä.

193
00:11:02,730 --> 00:11:06,200
>> Joten katsokaa tämä ensimmäinen osa tästä.

194
00:11:06,200 --> 00:11:09,500
Aiomme luoda muuttujan kutsutaan HTML, joka on merkkijono.

195
00:11:09,500 --> 00:11:15,890
Se on kohta tag se, että kutsutaan joitakin uuden tekstin.

196
00:11:15,890 --> 00:11:19,420
Joten meillä on tämä HTML, se on jokin uusi teksti, kohdassa tageja.

197
00:11:19,420 --> 00:11:21,800
Nyt todella haluavat lisätä sen sivulle.

198
00:11:21,800 --> 00:11:28,310
Otan sen käyttöön niin, että HTML tässä kohdassa, tämä otsikko täällä, on append tunnus.

199
00:11:28,310 --> 00:11:32,320
Jos valitsemme append tunnus ja sitten liittää se

200
00:11:32,320 --> 00:11:34,560
HTML muuttuja Olen juuri luonut,

201
00:11:34,560 --> 00:11:40,370
se lisää, että HTML lopussa, heti tämän kohdan tag.

202
00:11:40,370 --> 00:11:43,730
Joten jos teemme sen - olemme valinneet tämän kohdan

203
00:11:43,730 --> 00:11:47,590
ja me olemme kutsuneet append toimintoa HTML muuttuja Olen vain lisännyt,

204
00:11:47,590 --> 00:11:50,960
se lisää, että uusi teksti tuolla sivulla.

205
00:11:50,960 --> 00:11:54,970
Voimme myös liittää alkuun, mikä tarkoittaa, että se menee ennen, alussa, että elementti.

206
00:11:54,970 --> 00:11:58,290
Siksi on olemassa uusi teksti alussa ja sen jälkeen.

207
00:11:58,290 --> 00:12:01,660
Voin mennä eteenpäin ja päivittää päästä eroon tästä juttuja olen juuri tehnyt.

208
00:12:01,660 --> 00:12:05,280
Mutta se on esimerkki siitä, miten voit käyttää prepend ja liittää menetelmät

209
00:12:05,280 --> 00:12:08,910
manipuloida juttuja sivulla, lisätä joitakin HTML.

210
00:12:08,910 --> 00:12:11,080
>> Voit myös vaihtaa luokkaa.

211
00:12:11,080 --> 00:12:14,970
Takaisin tähän tyyliin tiedosto, olen luonut tämän voitosta luokan

212
00:12:14,970 --> 00:12:19,990
että on tekstin väri punainen, jotkut taustaväri ja tekstin varjo.

213
00:12:19,990 --> 00:12:23,810
Se näyttää hirvittävän, mutta voin todella -

214
00:12:23,810 --> 00:12:26,410
Tämä kohta vastaa luokan tunnus.

215
00:12:26,410 --> 00:12:29,860
Joten en voi lisätä luokan voitto.

216
00:12:29,860 --> 00:12:31,870
Voin toteuttaa tämän konsolin,

217
00:12:31,870 --> 00:12:35,480
ja lisää, että luokka, ja nyt se näyttää hirvittävän, odotetusti.

218
00:12:35,480 --> 00:12:39,680
CSS automaattisesti saa soveltaa luokkaa, että olet -

219
00:12:39,680 --> 00:12:42,680
jos on CSS-luokka, se automaattisesti saa soveltaa

220
00:12:42,680 --> 00:12:44,680
jos muutat luokan elementti.

221
00:12:44,680 --> 00:12:49,230
Sitten voimme vain poistaa sen käyttämällä Remove Class.

222
00:12:49,230 --> 00:12:53,690
Joten jos sinulla on joitakin ennalta luokkia kuten punainen tai korostettuna

223
00:12:53,690 --> 00:12:55,990
ja sitten haluat hakea ne, elementtejä,

224
00:12:55,990 --> 00:12:58,230
sinun ei tarvitse tehdä kaikki CSS tyyli joka kerta.

225
00:12:58,230 --> 00:13:01,510
Voit vain lisätä luokan elementti, ja sitten siitä tulee automaattisesti -

226
00:13:01,510 --> 00:13:05,580
se automaattisesti etsiä sopiva kyseiseen luokkaan.

227
00:13:05,580 --> 00:13:07,900
Voimme myös poistaa asioita, joten aion valita kaikki divs

228
00:13:07,900 --> 00:13:10,830
sivulla ja poistaa ne.

229
00:13:10,830 --> 00:13:13,990
Mikä on, että tulee näyttämään?

230
00:13:13,990 --> 00:13:16,170
Se tulee näyttämään mitään, joten ei ole oikeastaan ​​mitään jäljellä.

231
00:13:16,170 --> 00:13:18,170
Oma esitys on mennyt.

232
00:13:18,170 --> 00:13:21,290
En voi virkistää ja tuoda sen takaisin, onneksi

233
00:13:21,290 --> 00:13:24,420
koska se on juuri käynnissä kerran,

234
00:13:24,420 --> 00:13:29,460
mutta se on esimerkki poistaa, jos haluat tuhota elementti pois sivulta.

235
00:13:29,460 --> 00:13:33,180
>> Voit myös korvata, ja aion valita kaikki kappalemerkkaukset sivulla

236
00:13:33,180 --> 00:13:36,850
ja mennä sisälle ja vaihda mitä tekstiä ne ovat niitä

237
00:13:36,850 --> 00:13:39,690
vain sana "testaus."

238
00:13:39,690 --> 00:13:46,520
Jos teet tämän, voit korvata jokainen kappale sivu testauksen.

239
00:13:46,520 --> 00:13:49,150
Jep. He kaikki korvataan testaus.

240
00:13:49,150 --> 00:13:53,270
Niin, että esimerkki päästä tekstin ja kirjoittamalla sen päälle.

241
00:13:53,270 --> 00:13:57,490
Voit myös hakea tietoa, ja tämä on todella siistiä kenttiin.

242
00:13:57,490 --> 00:14:00,470
Jos sinulla on syötelaatikon että ihmiset kirjoittavat jutut,

243
00:14:00,470 --> 00:14:03,880
ihmiset kirjoittavat juttuja siihen,

244
00:14:03,880 --> 00:14:09,030
täällä me valita tulo, tuotantopanoksia tunnisteen tyyppi tekstiä.

245
00:14:09,030 --> 00:14:13,800
Tässä tapauksessa on vain yksi syöttö-ruutuun koko esityksen,

246
00:14:13,800 --> 00:14:17,260
joten meidän täytyy vain valita ensimmäinen, ja sitten me kutsumme Val toiminto sitä.

247
00:14:17,260 --> 00:14:19,570
Joka palauttaa arvon, ja syötekentästä

248
00:14:19,570 --> 00:14:24,330
arvo on vain mitä sattuu olemaan sisällä.

249
00:14:24,330 --> 00:14:31,880
Joten jos teemme tämän, se vain palauttaa merkkijonon kamaa.

250
00:14:31,880 --> 00:14:36,860
Ja jos me kutsumme sitä uudelleen kirjoittamista enemmän tavaraa, se muuttuu enemmän tavaraa.

251
00:14:36,860 --> 00:14:40,760
Se on yksi hyvä tapa käyttää elementtejä syötekentästä ja tarkista,

252
00:14:40,760 --> 00:14:45,060
tämä voimassa oleva sähköpostiosoite, on tämä kelvollinen päivämäärä, esimerkiksi.

253
00:14:45,060 --> 00:14:49,600
Voit vain hakea tavaraa heti, kun ihmiset kirjoittavat sen,

254
00:14:49,600 --> 00:14:54,830
ja sitten tarkistaa, onko se voimassa, lähettää sen takaisin palvelimelle, tehdä mitä haluat sen kanssa.

255
00:14:54,830 --> 00:14:57,720
Ja se miten käyttää mitä sisällä ne laatikot.

256
00:14:57,720 --> 00:15:00,090
>> Voit myös muokata CSS suoraan, joten sen sijaan lisäämällä

257
00:15:00,090 --> 00:15:02,510
luokka, joka on joitakin tiettyjä ominaisuuksia,

258
00:15:02,510 --> 00:15:08,120
voit vain lisätä mitä CSS haluat jotain.

259
00:15:08,120 --> 00:15:10,350
Joten valitse runko, joka on koko esityksen,

260
00:15:10,350 --> 00:15:14,370
ja väri on ominaisuus, joka määrittelee, mitä värejä teksti on.

261
00:15:14,370 --> 00:15:19,420
Jos muutamme sen punaiseksi, kaikki teksti sivun muuttuu punaiseksi.

262
00:15:19,420 --> 00:15:26,310
Voimme tehdä jotain taustaväri sininen,

263
00:15:26,310 --> 00:15:30,680
siellä mennään, se on kaunis.

264
00:15:30,680 --> 00:15:33,840
Voit tehdä mitä haluat tämän.

265
00:15:33,840 --> 00:15:39,250
Käyttämällä CSS omaisuus, voit todella muuttaa miten tahansa näyttää milloin tahansa.

266
00:15:39,250 --> 00:15:41,630
Seuraava asia on vaikutuksia.

267
00:15:41,630 --> 00:15:45,710
Vaikutukset ovat periaatteessa sama asia kuin muuttamalla CSS,

268
00:15:45,710 --> 00:15:48,870
mutta he todella tarjoavat ylimääräistä animaatio siihen.

269
00:15:48,870 --> 00:15:53,380
Joten sen sijaan vain näyttämällä tai piilottamalla jotain tai värin muuttaminen

270
00:15:53,380 --> 00:15:56,130
voit itse tehdä animoituja.

271
00:15:56,130 --> 00:16:00,760
Tässä asiakirjat, jos haluat vilkaista laajan asiakirja sitä.

272
00:16:00,760 --> 00:16:04,760
Mutta aion kattaa tärkeimmät.

273
00:16:04,760 --> 00:16:12,030
On piilottaa ja näyttää ominaisuuksia.

274
00:16:12,030 --> 00:16:14,510
Näytä / piilota ID tosiasiallisesti vastaa tämän koko ruutuun

275
00:16:14,510 --> 00:16:18,190
Eli jos piilottaa sen, se vain katoaa.

276
00:16:18,190 --> 00:16:24,210
Ja voin näyttää sen uudelleen, jos haluan tehdä tulla takaisin.

277
00:16:24,210 --> 00:16:26,340
Ja se takaisin. Se ei oikeastaan ​​häviä,

278
00:16:26,340 --> 00:16:30,670
En oikeastaan ​​poistaa sen sivun, olen vain asettaa CSS omaisuutta näkyvyyttä piilotettu

279
00:16:30,670 --> 00:16:34,030
niin et näe sitä enää.

280
00:16:34,030 --> 00:16:39,250
Mukana on myös dia ylös ja työnnä alas, että voit olla tätä.

281
00:16:39,250 --> 00:16:47,050
Se liukuu ylös katoaa, ja sen jälkeen se katoaa

282
00:16:47,050 --> 00:16:53,210
voit liu'uta se alas, jotta se tulee takaisin. Ja nyt se on takaisin.

283
00:16:53,210 --> 00:16:57,650
Mukana on myös tämän fade vaikutus, joka - fade ID vastaa tähän ruutuun.

284
00:16:57,650 --> 00:17:01,200
Jos minä häivyttää se ulos, niin se tulee hiljalleen.

285
00:17:01,200 --> 00:17:04,490
Voin myös häivyttää sitä, ja se tulee takaisin.

286
00:17:04,490 --> 00:17:08,930
Voit myös tehdä Fade to, joka on nimenomaan häivyttää toiminto.

287
00:17:08,930 --> 00:17:12,589
Voit olla se haalistu mihinkään tiettyyn peittävyyttä, että haluat.

288
00:17:12,589 --> 00:17:16,869
Joten jos häivyttää se hitaasti 0,5, niistä tulee puoli näkyvissä.

289
00:17:16,869 --> 00:17:22,630
Voin tehdä sen mennä 0,1, ja takaisin 1 tehdä täysin uudelleen näkyviin.

290
00:17:22,630 --> 00:17:24,760
Se on vain yksi animaatio, että voit tehdä.

291
00:17:24,760 --> 00:17:26,750
>> On myös toggle vaikutuksia.

292
00:17:26,750 --> 00:17:33,410
Joten aion valita toggle tunnus, joka vastaa tähän ruutuun,

293
00:17:33,410 --> 00:17:38,970
ja että div voit soittaa toggle, jos se on näkyvissä se tulee näkymätön,

294
00:17:38,970 --> 00:17:42,320
jos se on näkymätön se tulee näkyviin uudelleen.

295
00:17:42,320 --> 00:17:44,440
Joten Soitin äsken tämän toiminnon pois kahdesti; ensimmäinen oli

296
00:17:44,440 --> 00:17:48,380
sama asia kuin hide, toinen puhelu oli sama asia kuin show.

297
00:17:48,380 --> 00:17:53,510
Ja voit myös tehdä tämän kanssa fade toggle,

298
00:17:53,510 --> 00:17:55,730
joka ei sama asia, paitsi se todella haalistuu.

299
00:17:55,730 --> 00:17:59,410
Ja sama juttu dia vaihtaa.

300
00:17:59,410 --> 00:18:01,460
On kahlittu vaikutuksia sekä, mikä tarkoittaa

301
00:18:01,460 --> 00:18:05,520
Jos valitset elementti ja vain soittaa joukko animaation menetelmien sitä,

302
00:18:05,520 --> 00:18:07,400
jos halusi häivyttää, liu'uta sitten,

303
00:18:07,400 --> 00:18:11,040
ja sitten piilottaa ja sitten häivyttää, se tekee niistä peräkkäin.

304
00:18:11,040 --> 00:18:24,920
Niin katosi, tuli takaisin - jostain syystä, hide ei tapahtunut.

305
00:18:24,920 --> 00:18:30,030
Kokeillaan sitä. Joo, niin se hiipui ja sitten se liukui pois.

306
00:18:30,030 --> 00:18:32,230
Ja siellä on runsaasti enemmän. Voit käyttää animoida toimintoa

307
00:18:32,230 --> 00:18:35,370
luoda omia animaatioita, mikä on melko monimutkainen,

308
00:18:35,370 --> 00:18:38,790
mutta se tarjoaa sinulle ääretön laajennettavuus.

309
00:18:38,790 --> 00:18:40,630
Voit tehdä mitä tahansa animaation haluat.

310
00:18:40,630 --> 00:18:44,230
Voit myös käyttää jono jonottaa useita animaatioita kerrallaan.

311
00:18:44,230 --> 00:18:47,340
Joten jos haluat jotain lentää sivulla

312
00:18:47,340 --> 00:18:49,860
dian ylhäältä oikealta alhaalla vasemmalla, voit tehdä sen,

313
00:18:49,860 --> 00:18:55,240
ja vain nippu toimia menossa yksi toisensa jälkeen.

314
00:18:55,240 --> 00:18:57,490
>> Seuraava asia aiomme puhua on tapahtumia.

315
00:18:57,490 --> 00:19:02,090
Tapahtumat voit - niin pitkälle, olemme juuri kirjoittamalla asioita konsoliin

316
00:19:02,090 --> 00:19:04,870
ja tämä on yksi tapa tehdä tämän tapahtua,

317
00:19:04,870 --> 00:19:08,020
mutta todellinen sivulla, et aio pystyä

318
00:19:08,020 --> 00:19:10,020
tehdä käyttäjän tyypin asioita konsoliin.

319
00:19:10,020 --> 00:19:12,050
Haluat asioita tapahtuu automaattisesti.

320
00:19:12,050 --> 00:19:18,060
Sillä, että sinun täytyy käyttää tapahtumia, jotka aktivoivat joitakin tiettyjä tapahtuma tapahtuu.

321
00:19:18,060 --> 00:19:21,340
Voit tarkistaa asiakirjat täydelliset tiedot.

322
00:19:21,340 --> 00:19:24,030
Katsotaanpa. Haluamme näyttää tai piilottaa ruutuun

323
00:19:24,030 --> 00:19:29,340
mutta nyt tämä painike ei tee mitään, koska en ole toteuttaa sitä vielä.

324
00:19:29,340 --> 00:19:35,420
Aion mennä todellinen HTML-sivulle.

325
00:19:35,420 --> 00:19:38,560
Tässä liukumäki. On div liukumäki.

326
00:19:38,560 --> 00:19:41,230
Se on luokan liukumäki.

327
00:19:41,230 --> 00:19:46,890
Ei tekstiä. Nyt on tämä laatikko ja laatikko painike.

328
00:19:46,890 --> 00:19:52,900
Miten voisimme itse tehdä tämän katoavat?

329
00:19:52,900 --> 00:19:58,250
Ensinnäkin, nyt kirjoittaa toiminto, joka tekee box ID katoavat.

330
00:19:58,250 --> 00:20:01,820
Tämä on syntaksi funtion, haluan vain kutsua sitä hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Se ei ota mitään perusteluja, koska ei ole perusteluja otettava.

332
00:20:06,130 --> 00:20:08,950
Voimme valita box ID.

333
00:20:08,950 --> 00:20:15,020
Joten käyttäen jQuery valitse, voimme valita box ID,

334
00:20:15,020 --> 00:20:17,700
ja sitten vain tehdä se katoaa.

335
00:20:17,700 --> 00:20:20,690
Tehdään se häivyttää.

336
00:20:20,690 --> 00:20:27,390
Jos me juoksimme tämän toiminnon todellinen konsoli,

337
00:20:27,390 --> 00:20:33,380
voisimme määritellä tämän tehtävän, voimme soittaa hideTheBox, ja se toimii.

338
00:20:33,380 --> 00:20:36,650
Mutta haluamme sen tapahtuvan, kun painiketta on todella painetaan.

339
00:20:36,650 --> 00:20:40,950
Voit tehdä, että meidän on käytettävä tapahtumaa.

340
00:20:40,950 --> 00:20:45,500
Sitoa tapahtuman tiettyjä painiketta tai jotain toimintaa tapahtuu,

341
00:20:45,500 --> 00:20:50,040
meidän on valittava elementti, joka tapahtuma laukaisee -

342
00:20:50,040 --> 00:20:52,650
tai joka laukaisee tapahtuman, sorry.

343
00:20:52,650 --> 00:20:57,220
>> Joten ensinnäkin, nyt valitse laatikko painike tunnus

344
00:20:57,220 --> 00:20:59,610
koska se on painike, ja nyt, että painike,

345
00:20:59,610 --> 00:21:02,750
haluamme luoda animaation, kun se napsautetaan.

346
00:21:02,750 --> 00:21:05,040
Joten ei tämä näppäysfunktio.

347
00:21:05,040 --> 00:21:08,470
Sen avulla voit sitoa toinen toiminto sen.

348
00:21:08,470 --> 00:21:12,320
Tämä toiminto ottaa toisen toiminnon argumenttina

349
00:21:12,320 --> 00:21:14,310
voimme kulkea hideTheBox toiminto,

350
00:21:14,310 --> 00:21:20,950
ja kun tätä painiketta napsautetaan, että toiminto suoritetaan automaattisesti.

351
00:21:20,950 --> 00:21:24,850
Joten tämä toimii, jos säästämme tämän, minä virkistää,

352
00:21:24,850 --> 00:21:33,460
ja - yksi sekunti, olen pahoillani.

353
00:21:33,460 --> 00:21:44,770
Haluan korjata tämän todella nopeasti.

354
00:21:44,770 --> 00:21:50,680
Okei. Siellä me mennä. Joten nyt laatikko on katoamassa kun klikkaa painiketta.

355
00:21:50,680 --> 00:21:55,470
Voimme myös muuttaa vain fadeToggle,

356
00:21:55,470 --> 00:22:00,020
muuttaa se vain piilottaa tai näyttää ruutuun

357
00:22:00,020 --> 00:22:03,850
ja tämä toimii myös liikaa, jos me virkistää.

358
00:22:03,850 --> 00:22:08,550
Voimme piilottaa sen, voimme myös näyttää sen, ja että jatkaa.

359
00:22:08,550 --> 00:22:12,210
Toinen asia, mitä voimme tehdä on, emme oikeastaan ​​tarvitse määritellä tämän hideTheBox toiminto

360
00:22:12,210 --> 00:22:15,050
ennen kutsumme näppäysfunktio.

361
00:22:15,050 --> 00:22:17,640
Joten sen sijaan määritellä toiminnon ja soittaa hideTheBox,

362
00:22:17,640 --> 00:22:20,310
me vain aio kutsua sitä, jos tämä asia on napsautetaan.

363
00:22:20,310 --> 00:22:22,310
Joten voimme määritellä sen nimettömänä täällä,

364
00:22:22,310 --> 00:22:25,070
joka on ominaisuus, että JavaScript on.

365
00:22:25,070 --> 00:22:29,720
Voit määrittää toiminnon, kun normaalisti sanoisimme toiminto hideTheBox

366
00:22:29,720 --> 00:22:34,490
argumenteilla, vaan voimme vain sanoa toimia argumentteja ei

367
00:22:34,490 --> 00:22:36,870
Aloita kihara ahdin määritellä toiminnon,

368
00:22:36,870 --> 00:22:40,780
lähellä, että kihara ahdin, ja sitten vain määritellä funktio täällä,

369
00:22:40,780 --> 00:22:45,130
ensimmäisten sulkujen ja viimeinen suluissa

370
00:22:45,130 --> 00:22:47,860
jotka vastaavat väitteet näppäysfunktio.

371
00:22:47,860 --> 00:22:53,320
Joten olemme ohimennen tätä toimintoa, voimme kopioida tämä rivi koodia täällä,

372
00:22:53,320 --> 00:22:55,450
ja joka tekee täsmälleen sama asia.

373
00:22:55,450 --> 00:22:57,290
Ja nyt meillä ei ole tätä satunnainen fadeTheBox toiminto

374
00:22:57,290 --> 00:22:59,960
joka on istumisesta ilman mitään näkyvää syytä.

375
00:22:59,960 --> 00:23:02,070
Toiminto määriteltiin anonyymisti, sillä ei ole nimeä.

376
00:23:02,070 --> 00:23:08,060
Se vain toteuttaa kun klikkaa laatikon painiketta.

377
00:23:08,060 --> 00:23:12,180
Niin virkistävää kerran, vielä kerran, ja voit nähdä, että se toimii edelleen.

378
00:23:12,180 --> 00:23:16,700
Ja se miten luoda tapahtumia.

379
00:23:16,700 --> 00:23:19,190
>> On olemassa paljon erilaisia ​​tapahtumia, joita voimme käyttää.

380
00:23:19,190 --> 00:23:23,540
Aion siirtyä takaisin käyttämään konsolin vain näyttää, miten nämä toimivat.

381
00:23:23,540 --> 00:23:28,210
Tunnukset kullekin näistä vastaavat jokaiseen laatikkoon.

382
00:23:28,210 --> 00:23:33,020
Joten tämä laatikko on click tunnus, tämä on keskeinen tunnus, ja tämä on mouse ID.

383
00:23:33,020 --> 00:23:36,120
Vielä yksi asia on, että tämä toiminta toiminto, eikä kirjoittamalla sitä joka kerta,

384
00:23:36,120 --> 00:23:41,610
Olen itse meni eteenpäin ja määritteli tämän toiminnan toiminnon tänne.

385
00:23:41,610 --> 00:23:46,860
Se sama asia kuin hideTheBox toiminto.

386
00:23:46,860 --> 00:23:51,340
Se saa tähän kohtaan ja joko haalistuu se pois tai katoaa sen sisään

387
00:23:51,340 --> 00:23:54,110
Ja siksi emme voi käyttää sitä tässä.

388
00:23:54,110 --> 00:24:00,350
Jos siis klikkaa tämän napsauttamalla tunnus, haluamme tehdä laatikko katoaa tai sen leviämisen.

389
00:24:00,350 --> 00:24:03,610
Se on sama asia kuin painike, joka meillä oli viime liukumäki.

390
00:24:03,610 --> 00:24:07,450
Nyt kun me kutsumme, että voimme klikata tästä ja poistuu ruudusta,

391
00:24:07,450 --> 00:24:10,160
napsauta sitä uudelleen ja ruutuun tulee uudelleen näkyviin.

392
00:24:10,160 --> 00:24:12,480
Se on melko yksinkertainen. Tuplaklikkaa ei sama asia,

393
00:24:12,480 --> 00:24:15,660
paitsi se vaatii tuplaklikkaa.

394
00:24:15,660 --> 00:24:19,030
Joten jos klikkaat sitä kerran ja napsauta uudelleen mitään ei tapahdu,

395
00:24:19,030 --> 00:24:21,140
mutta jos tuplaklikkaa nopeasti, se tulee katoavat.

396
00:24:21,140 --> 00:24:23,310
Jos tuplaklikkaa uudelleen, se tulee takaisin.

397
00:24:23,310 --> 00:24:25,250
Niin, että on melko yksinkertainen.

398
00:24:25,250 --> 00:24:31,170
Näppäimistötulo on outoa, en usko, että se todella toimii tässä esimerkissä

399
00:24:31,170 --> 00:24:37,670
koska painettuna, näppäin ja painamalla näppäintä ja muut keskeiset toimet

400
00:24:37,670 --> 00:24:47,190
aktivoida ole väliä mitä elementti voit sitoa sen.

401
00:24:47,190 --> 00:24:51,410
Esimerkiksi vaikka olen varmasti avain alas kehon tai jotain muuta kokonaan,

402
00:24:51,410 --> 00:24:55,950
niin se olisi silti aktivoida riippumatta - se ei ole erityinen.

403
00:24:55,950 --> 00:25:00,190
En tarvitse klikkaamalla tästä ja paina näppäintä tehdä mitään katoavat.

404
00:25:00,190 --> 00:25:04,470
Se aktivoidaan riippumatta siitä, mitä elementti Olen tällä hetkellä sisään

405
00:25:04,470 --> 00:25:06,880
Joten nämä eivät todellisuudessa toimi tässä esimerkissä

406
00:25:06,880 --> 00:25:13,180
koska se ei tunnista minua syöttämällä syöttää näppäimistön div.

407
00:25:13,180 --> 00:25:15,740
>> Mutta jos tarkastellaan hiiritoiminnot

408
00:25:15,740 --> 00:25:19,620
ensimmäinen on leijuvat, ja se voi tehdä joitakin tämän CSS.

409
00:25:19,620 --> 00:25:24,280
Jos käytät CSS, voit luoda sen niin, että jos viet yli jotain,

410
00:25:24,280 --> 00:25:28,940
sitten sen tyyli muuttuu.

411
00:25:28,940 --> 00:25:32,170
Mutta käyttämällä jQuery voit muuttaa tyylejä muita asioita.

412
00:25:32,170 --> 00:25:37,120
Niinpä esimerkiksi, aiomme soittaa toimia jos viet yli tämän div.

413
00:25:37,120 --> 00:25:39,660
Tämä tarkoittaa, että jos me viet yli sen, niin ruutu katoaa.

414
00:25:39,660 --> 00:25:42,430
Jos siirrymme pois, ruutuun tulee uudelleen näkyviin.

415
00:25:42,430 --> 00:25:45,090
Jos me kutsumme tätä ja viet sen yli, laatikko ei häviä,

416
00:25:45,090 --> 00:25:47,050
ja heti kun siirrymme pois, se tulee takaisin.

417
00:25:47,050 --> 00:25:49,750
Jos me kutsumme tätä hover toiminto hiiren tunnus,

418
00:25:49,750 --> 00:25:54,380
joka vastaa tähän ruutuun, niin jos me hääriä ruutuun

419
00:25:54,380 --> 00:26:00,440
Sitten laatikko todella katoaa - se on hieno nyt, mutta -

420
00:26:00,440 --> 00:26:06,310
jos siirrymme pois, se tulee uudelleen näkyviin. Juuri nyt se on taaksepäin jostain syystä.

421
00:26:06,310 --> 00:26:12,720
Hiiri syöttää ja hiiren liikkeellä toiminnot ovat hieman samanlainen, mutta hieman eri.

422
00:26:12,720 --> 00:26:16,470
Hiiri kirjoittaa vain aktivoituu, kun hiiri siirtyy ruutuun, odotetusti.

423
00:26:16,470 --> 00:26:19,210
Joten jos muutat sitä, se tulee katoavat.

424
00:26:19,210 --> 00:26:23,210
Mutta se ei näkyviin, kun siirrät pois, sinun täytyy muuttaa takaisin päälle sen tulla takaisin.

425
00:26:23,210 --> 00:26:25,590
Mukana on myös hiiren liikkeellä toiminto, joka aktivoi

426
00:26:25,590 --> 00:26:29,300
aina, kun hiiri on vieläkin läsnä ruutuun.

427
00:26:29,300 --> 00:26:32,430
Joten se vain pitää käynnissä, hiipumassa sisään ja ulos.

428
00:26:32,430 --> 00:26:35,660
Ja se on todella kirjautumalla - näyttää siltä kuin se olisi juuri hiipumassa sisään ja ulos,

429
00:26:35,660 --> 00:26:39,140
mutta se on oikeastaan ​​kirjautumisen paljon enemmän toimia kuin tämä,

430
00:26:39,140 --> 00:26:43,550
joten kun olet siirtynyt pois se täytyy vain pitää käynnissä, koska se kirjata kuin tuhat heistä.

431
00:26:43,550 --> 00:26:46,620
Ehkä ei tuhat. Ehkä viisi.

432
00:26:46,620 --> 00:26:50,200
Se lokit enemmän.

433
00:26:50,200 --> 00:26:53,280
Lähtökohtana on, kaikki hiiritoiminnot, on paljon niitä.

434
00:26:53,280 --> 00:26:55,480
Voit lukea toisilla, mutta ne ovat kaikki hieman erilaisia,

435
00:26:55,480 --> 00:26:57,700
ja voit valita kumpi tarvitset

436
00:26:57,700 --> 00:27:02,130
kumpi tiettyyn tarkoitukseen yrität tehdä.

437
00:27:02,130 --> 00:27:05,060
>> Seuraava asia aion puhua on AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, tiedän emme kata Javascriptin niin paljon syvyyttä tänä vuonna,

439
00:27:09,340 --> 00:27:11,770
joten olen juuri menossa puhua AJAX yleensä hetkeksi.

440
00:27:11,770 --> 00:27:15,210
AJAX on lyhenne sanoista Asynchronous JavaScript ja XML.

441
00:27:15,210 --> 00:27:19,030
Se on pohjimmiltaan, esimerkiksi silloin, kun olet Facebookissa ja se työntää sinulle ilmoituksen,

442
00:27:19,030 --> 00:27:23,060
että koska AJAX on käynnissä selaimessasi.

443
00:27:23,060 --> 00:27:25,800
Parin sekunnin välein selaimessasi on oikeastaan

444
00:27:25,800 --> 00:27:29,420
menossa Facebookin palvelimiin, pyytäen heitä, sinulla on jotain uutta minulle,

445
00:27:29,420 --> 00:27:31,980
ja sitten se tulee takaisin sinulle.

446
00:27:31,980 --> 00:27:36,320
Näin voit lähettää pyyntöjä palvelimelle

447
00:27:36,320 --> 00:27:38,660
joutumatta ladata sivua.

448
00:27:38,660 --> 00:27:42,040
Joten yleensä, jos olet vain PHP ja tietokanta,

449
00:27:42,040 --> 00:27:45,480
sinun täytyy päivittää sivu ennen kuin voit saada uutta tietoa palvelimelta.

450
00:27:45,480 --> 00:27:48,770
Mutta AJAX, voit vetää tätä uutta tietoa jatkuvasti,

451
00:27:48,770 --> 00:27:52,250
tai vedä sitä, kun klikkaat painiketta tai jotain sellaista.

452
00:27:52,250 --> 00:27:56,140
Joten tämä antaa meille mahdollisuuden lähettää pyyntöjä ilman ladata sivu,

453
00:27:56,140 --> 00:27:58,130
ja voimme käyttää joko GET tai POST-pyyntöjä.

454
00:27:58,130 --> 00:28:05,370
>> GET pyyntöjä, esimerkiksi jos haluat ottaa Google.com

455
00:28:05,370 --> 00:28:10,900
ja tehdä q = testi. Se on heille kyselyn testi.

456
00:28:10,900 --> 00:28:15,890
Ja se on GET-pyyntöä, koska se kulkee näissä parametreja URL itse.

457
00:28:15,890 --> 00:28:19,250
POST pyyntö on kuin jos lähetät ne postitse.

458
00:28:19,250 --> 00:28:22,500
Se on kuin laitat sen kirjeen ja lähettää sen pois ne,

459
00:28:22,500 --> 00:28:25,140
mutta he eivät itse nähdä sisällön. He eivät näy URL.

460
00:28:25,140 --> 00:28:31,040
Et voi kirjoittaa suoraan sitä, sinun tulee lähettää se melkein salaa.

461
00:28:31,040 --> 00:28:33,880
Se on viesti.

462
00:28:33,880 --> 00:28:38,660
Mutta käyttämällä jQuery, voit tehdä GET ja POST-pyyntöjä

463
00:28:38,660 --> 00:28:42,740
paljon helpommin kuin normaalisti voisi käyttää pelkkää JavaScript.

464
00:28:42,740 --> 00:28:50,140
Voit kysellä API käyttäen GET, ja voit myös tarkistaa kirjautumistietoja.

465
00:28:50,140 --> 00:28:54,400
Seuraavalla sivulla, olen luonut tämän, joka kysyy: "Mitä lounaaksi?"

466
00:28:54,400 --> 00:28:58,230
käyttäen Harvard ruokaa API, joten katsotaanpa vetää tuon.

467
00:28:58,230 --> 00:29:01,840
Tämä on vain esimerkki siitä, miten voit käyttää jQuery tehdä GET pyynnön API

468
00:29:01,840 --> 00:29:04,200
ja saada tiedot takaisin siitä.

469
00:29:04,200 --> 00:29:07,090
Joten haluamme menu tänään

470
00:29:07,090 --> 00:29:10,560
ja haluamme nähdä, mitä lounaaksi.

471
00:29:10,560 --> 00:29:16,500
Tässä URL luoda GET pyynnön jQuery.

472
00:29:16,500 --> 00:29:18,600
käytät $. saada toiminto.

473
00:29:18,600 --> 00:29:22,290
Ensimmäinen argumentti on URL, niin mitä olet istä.

474
00:29:22,290 --> 00:29:27,200
Sitten seuraava argumentti on toiminto, joka suoritetaan, kun GET-pyyntö on täydellinen.

475
00:29:27,200 --> 00:29:29,980
Joten voit lähettää pois joitakin pyynnön palvelimelle, odota sen tulla takaisin.

476
00:29:29,980 --> 00:29:33,770
Kun se ei tullut takaisin, aiot ryhtyä toimiin, joilla tietoja, jotka ovat takaisin palvelimelle.

477
00:29:33,770 --> 00:29:37,520
Mennään eteenpäin ja koodaamiseen tämän hyvin.

478
00:29:37,520 --> 00:29:42,110
En koodata tämän joko tarkoituksella.

479
00:29:42,110 --> 00:29:46,660
Tässä TODO. Ensinnäkin, katsotaanpa käytä tapahtuma sitova

480
00:29:46,660 --> 00:29:50,820
niin, että kun tätä painiketta painetaan, lähetämme pois GET-pyynnön.

481
00:29:50,820 --> 00:29:53,410
Ja kun GET-pyynnön palaa joitakin tietoja,

482
00:29:53,410 --> 00:29:57,290
aiomme kirjoittaa tähän aterian tiedot ID div.

483
00:29:57,290 --> 00:30:02,860
Ensinnäkin, nyt valita ruokaa button ID.

484
00:30:02,860 --> 00:30:07,320
Kun se on napsautetaan, haluamme tehdä jotain.

485
00:30:07,320 --> 00:30:11,930
Haluan vain tehdä nimetön fuction, kuten ennenkin.

486
00:30:11,930 --> 00:30:15,550
Voiko kääri ne aaltosulkeita,

487
00:30:15,550 --> 00:30:18,530
ja kun tätä painiketta painetaan, haluamme lähettää GET-pyynnön

488
00:30:18,530 --> 00:30:20,750
tarkistaa, mitä lounaaksi.

489
00:30:20,750 --> 00:30:24,970
Voit tehdä sen, voimme vain kirjoittaa $. Päästä.

490
00:30:24,970 --> 00:30:28,850
Tämä on jQuery toiminnon tai dollarin merkki.

491
00:30:28,850 --> 00:30:31,430
Se kestää pari argumentteja. Ensimmäinen on URL-osoite,

492
00:30:31,430 --> 00:30:34,450
toinen on takaisinkutsufunktio, toiminto, joka kutsutaan

493
00:30:34,450 --> 00:30:37,740
kun tähän pyyntöön todella palauttaa.

494
00:30:37,740 --> 00:30:39,890
Toivotaan vain rakentaa URL ensin.

495
00:30:39,890 --> 00:30:44,650
Voimme saada sen API Daavid kirjoitti ylös.

496
00:30:44,650 --> 00:30:51,360
Going täällä, voimme nähdä, että se food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
ja sitten vain kulkea parametrien nimet, jotka haluat.

498
00:30:54,140 --> 00:30:57,760
Joten parametri 1 on arvo 1.

499
00:30:57,760 --> 00:31:00,910
Se näyttää päivämäärä-, aloitusajankohta on oletusarvoisesti tänään

500
00:31:00,910 --> 00:31:03,110
jos et anna mitään, ja päättymispäivä myös oletusarvot

501
00:31:03,910 --> 00:31:05,930
tähän päivään, jos et anna mitään.

502
00:31:05,930 --> 00:31:10,790
Sitähän me haluamme. Haluamme vain saada tietoa tänään.

503
00:31:10,790 --> 00:31:12,950
>> Haluamme muodossa olevan JSON.

504
00:31:12,950 --> 00:31:15,570
Se on vain mielivaltainen, voit käyttää mitä tahansa muodossa, että haluat.

505
00:31:15,570 --> 00:31:18,950
Voit käyttää CSV, mutta JSON on JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
Se on erittäin helppo JavaScript ymmärtää mitä se tarkoittaa,

507
00:31:24,150 --> 00:31:27,110
ja voimme tulostaa sen helpommin niin.

508
00:31:27,110 --> 00:31:30,490
Joten sitä pyytävät JSON, ja antaa pyynnöstä lounas.

509
00:31:30,490 --> 00:31:37,660
Joten ateria = lounas. Vain kirjoittaa ylös, että URL, menemme takaisin tänne.

510
00:31:37,660 --> 00:31:41,290
Ei valikoita. Ensimmäinen parametri on lähtö = JSON

511
00:31:41,290 --> 00:31:44,640
koska se, mitä haluamme, ja erotat parametrit "ja".

512
00:31:44,640 --> 00:31:48,940
Toinen parametri on - En muista.

513
00:31:48,940 --> 00:31:52,170
Ateria. Ja haluamme ateria = lounas.

514
00:31:52,170 --> 00:31:57,390
Voit testata tätä URL kirjoittamalla se selaimen ja menee sitä.

515
00:31:57,390 --> 00:32:03,120
Se antaa sinulle tuotos. Se on vain nippu tavaraa, joka on lounaaksi.

516
00:32:03,120 --> 00:32:10,410
Se on tässä ruma muodossa. Haluamme tulostaa sen päälle meidän sivun paremmin muodossa.

517
00:32:10,410 --> 00:32:12,580
Joten URL on oikein, nyt meidän täytyy vain kirjoittaa funktio

518
00:32:12,580 --> 00:32:18,300
soittaa takaisin, kun pyyntö on onnistunut.

519
00:32:18,300 --> 00:32:20,430
Tämä toiminto todella ottaa argumentti. Se on tietoa.

520
00:32:20,430 --> 00:32:25,650
Tiedot on mitä tulee takaisin GET-pyynnön jälkeen GET-pyyntö on tehty.

521
00:32:25,650 --> 00:32:28,860
Voimme tehdä aaltosulkeiden, täällä me kirjoittaa Nimetön toiminto

522
00:32:28,860 --> 00:32:33,900
joka suorittaa käyttäen, että tiedot, kun saamme tiedot takaisin.

523
00:32:33,900 --> 00:32:37,840
Joten tietoja, kun kirjoitit URL-osoitteen,

524
00:32:37,840 --> 00:32:41,540
tämä on mitä tietoja tulee näyttämään. Se tulee olemaan tämän valtavan merkkijono.

525
00:32:41,540 --> 00:32:48,610
Mutta hyvä asia on, JavaScript voi jäsentää sen avulla JSON.parse toimintoa.

526
00:32:48,610 --> 00:32:54,950
Joten luoda uusi muuttuja nimeltä jäsentää tietoa.

527
00:32:54,950 --> 00:32:57,060
Ja jäsentää tietoa on joukko esineitä.

528
00:32:57,060 --> 00:33:04,200
Jokainen esine sisältää esimerkiksi - No, katsomaan.

529
00:33:04,200 --> 00:33:08,980
Se on päivä, ateria, luokka, resepti, tämä kaikki muut jutut.

530
00:33:08,980 --> 00:33:10,860
Joten haluan vain tulostaa nimi kullekin.

531
00:33:10,860 --> 00:33:13,790
Katsotaanpa kerrata koko joukko tavaraa, että saamme takaisin sen,

532
00:33:13,790 --> 00:33:17,570
ja vain tulostaa jokainen - tulostaa nimi jokainen.

533
00:33:17,570 --> 00:33:22,670
Tämä on silmukka.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript on tästä apua syntaksin jossa voit luoda muuttujan ja silmukka yli array,

535
00:33:26,030 --> 00:33:30,150
ja var i on vain iteraattoria, joten sen sijaan, tehdä var i = 0,

536
00:33:30,150 --> 00:33:40,290
i oli pienempi kuin pituus, i + +, voit vain tehdä var i jäsentää tietoa.

537
00:33:40,290 --> 00:33:47,060
Tässä esimerkissä jäsentää tietoa (i) vastaavat alkion

538
00:33:47,060 --> 00:33:49,850
array, varsinaisen objektin.

539
00:33:49,850 --> 00:33:51,720
Ja haluamme saada nimi pois.

540
00:33:51,720 --> 00:33:54,170
Joten haluan vain tehdä nimi.

541
00:33:54,170 --> 00:33:57,000
Ja viimeinen asia on, me aiomme olla jQuery uudelleen.

542
00:33:57,000 --> 00:34:02,660
Oikeastaan ​​lisätä sen div, tämä ateria info div joka on tällä hetkellä tyhjä.

543
00:34:02,660 --> 00:34:05,430
Joten valita että.

544
00:34:05,430 --> 00:34:13,870
Käytämme jQuery ja valitse ateria info div tunnus tai aterian info tunnus, sorry.

545
00:34:13,870 --> 00:34:16,580
Haluamme liittää tähän.

546
00:34:16,580 --> 00:34:21,030
Jos emme koe, esimerkiksi se vain korvata sen joka kerta.

547
00:34:21,030 --> 00:34:29,190
Joten voimme vain liittää tähän.

548
00:34:29,190 --> 00:34:31,889
Nykyinen alkio, saamme nimi pois,

549
00:34:31,889 --> 00:34:38,159
ja me liittää sen loppuun aterian info ID div.

550
00:34:38,159 --> 00:34:40,120
Ja sitten vain tehdä se näyttää puhtaampaa,

551
00:34:40,120 --> 00:34:51,550
me myös liittää rivinvaihdon joten se ei ole kaikki yhdellä rivillä.

552
00:34:51,550 --> 00:34:55,280
Joten jos kaikki menee hyvin, että olisi hyvä -

553
00:34:55,280 --> 00:34:57,220
ensinnäkin, kun tätä painiketta painetaan,

554
00:34:57,220 --> 00:35:00,070
se lähettää pois GET pyynnön tälle URL.

555
00:35:00,070 --> 00:35:02,500
Kun data tulee takaisin, se tulee jäsentää sitä,

556
00:35:02,500 --> 00:35:06,950
käännä se JSON, lenkki koko joukko edustavat kyseistä tietoa,

557
00:35:06,950 --> 00:35:10,310
ja sitten liittää nimi ja rivinvaihdon

558
00:35:10,310 --> 00:35:16,500
jokaiselle riville tämä ateria tiedot ID joka oli aiemmin tyhjä.

559
00:35:16,500 --> 00:35:18,910
Niin menee takaisin tälle sivulle, me virkistää,

560
00:35:18,910 --> 00:35:23,690
click, selvittää - se ei toimi. Se on ikävää.

561
00:35:23,690 --> 00:35:25,830
Ja tämä on virheenkorjaus tulee sisään

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

563
00:35:30,070 --> 00:35:57,210
Onpa kiinnostavaa.

564
00:35:57,210 --> 00:35:59,720
Okei, no, sen sijaan viettää aikaa tehdä tätä, olen juuri menossa

565
00:35:59,720 --> 00:36:07,070
vedä tehnyt tiedosto minulla, joka on valmistunut versio.

566
00:36:07,070 --> 00:36:13,710
En ole varma, mikä ero on, mutta voimme vain avata tähän asti sijaan.

567
00:36:13,710 --> 00:36:19,740
Ja menemme AJAX, ja tämän pitäisi toimia oikein.

568
00:36:19,740 --> 00:36:21,730
Sitä oli lounaaksi tänään,

569
00:36:21,730 --> 00:36:24,870
ei missään erityisessä järjestyksessä, lainausmerkit sen ympärille, joten se ei ole kaunein.

570
00:36:24,870 --> 00:36:27,090
Mutta tietysti, jos olit tekemässä tätä opinnäytetyön,

571
00:36:27,090 --> 00:36:30,120
voisitte tehdä se näyttää paremmalta.

572
00:36:30,120 --> 00:36:32,530
Mutta se on vain yksinkertainen esimerkki siitä, miten teet GET-pyynnön.

573
00:36:32,530 --> 00:36:34,580
Ja jos katsomme itse koodi, arvelisin, olen melko varma,

574
00:36:34,580 --> 00:36:39,690
se on edelleen melko sama.

575
00:36:39,690 --> 00:37:04,990
Ai niin, unohdin muuntaa se merkkijono, se on siinä.

576
00:37:04,990 --> 00:37:07,920
Ei, se ei edelleenkään toimi. Riippumatta, tässä on todellinen päätökseen koodi

577
00:37:07,920 --> 00:37:10,300
mitä tämän pitäisi näyttää,

578
00:37:10,300 --> 00:37:16,400
ja se sama asia kuin mitä juuri toteutettu.

579
00:37:16,400 --> 00:37:22,760
Kun klikkaat painiketta, se käyttää GET JSON automaattisesti jäsentää tietoa.

580
00:37:22,760 --> 00:37:29,190
Se vie dataa takaisin sen, ja silmukoiden läpi koko joukko

581
00:37:29,190 --> 00:37:32,770
ja tulostaa - mitä on lounaaksi tänään, nimi se,

582
00:37:32,770 --> 00:37:38,020
ja liittää rivinvaihdon jokaisen rivin jälkeen.

583
00:37:38,020 --> 00:37:41,100
Näin käytät GET toimintoa.

584
00:37:41,100 --> 00:37:44,040
>> Voit myös käyttää POST, joka minulla ei ollut aikaa

585
00:37:44,040 --> 00:37:47,940
kirjoittaa ylös esimerkiksi sitä, mutta voimme tarkastella asiakirjoja.

586
00:37:47,940 --> 00:37:53,220
Jos tarkastellaan jquery.post,

587
00:37:53,220 --> 00:37:55,510
voit nähdä, että se on melkein sama asia.

588
00:37:55,510 --> 00:38:01,650
Sinulla on URL, mutta sen sijaan kulkee parametrit -

589
00:38:01,650 --> 00:38:03,990
vain laittamalla ne merkkijono URL itse

590
00:38:03,990 --> 00:38:06,300
sinun on läpäistävä tässä datamuuttujan

591
00:38:06,300 --> 00:38:11,990
joka on pohjimmiltaan joukko, sanakirja, joka kartat parametrien arvoihin.

592
00:38:11,990 --> 00:38:17,690
Ohitat että, ja joka lähettää ne käyttäen POST.

593
00:38:17,690 --> 00:38:20,790
Ja kun olet, että voit olla menestys toiminto

594
00:38:20,790 --> 00:38:23,930
joka suorittaa kun tietoja tulee takaisin.

595
00:38:23,930 --> 00:38:26,430
Muuten, se on täsmälleen sama. Joten käyttäen POST,

596
00:38:26,430 --> 00:38:29,970
saatat haluta käyttää POST, esimerkiksi jos sinulla on syöttölomake

597
00:38:29,970 --> 00:38:35,780
annat ihmiset syöttää salasanoja, ja lähettää ne salasanat pois

598
00:38:35,780 --> 00:38:41,850
to back-end script, tarkistaa tietokannasta onko käyttäjä kelvollinen vai ei.

599
00:38:41,850 --> 00:38:46,700
Voit tehdä, että kaikki jQuery sen sijaan, että sivu päivittyy ollenkaan.

600
00:38:46,700 --> 00:38:52,160
Niin minä toteutettu blogi, näytin teille aiemmin.

601
00:38:52,160 --> 00:38:59,530
Jos menemme pääteportaalikehien ja kirjaudu ulos, kirjaudu ulos,

602
00:38:59,530 --> 00:39:02,600
Kirjaudu ulos ei toimi.

603
00:39:02,600 --> 00:39:13,360
No, haluan vain sen avaaminen uuteen ikkunaan.

604
00:39:13,360 --> 00:39:16,580
Tässä on unohtunut, ja aioin kirjoittaa jotain satunnaisia.

605
00:39:16,580 --> 00:39:18,590
Se ei toimi, mutta voit nähdä, että emme

606
00:39:18,590 --> 00:39:20,840
oikeastaan ​​tarvitse päivittää sivua ollenkaan.

607
00:39:20,840 --> 00:39:24,610
Koodi, jos haluat katsoa sitä,

608
00:39:24,610 --> 00:39:37,460
on kaikkien saatavilla täällä.

609
00:39:37,460 --> 00:39:45,680
Joten koodi kirjoitin viime vuonna joskus.

610
00:39:45,680 --> 00:39:47,790
Kuten näette tästä, lähetämme POST pyynnön.

611
00:39:47,790 --> 00:39:50,400
Minulla on tiedosto nimeltä login.php loppupäätä,

612
00:39:50,400 --> 00:39:53,860
joka tarkistaa, jos salasana on voimassa.

613
00:39:53,860 --> 00:39:56,000
Parametrit ohitamme vuonna salasanalla, kartoitetaan

614
00:39:56,000 --> 00:40:00,030
tulo, joka on tähän kenttään hetkellä.

615
00:40:00,030 --> 00:40:04,110
Ja kun data tulee takaisin, voimme tarkistaa.

616
00:40:04,110 --> 00:40:07,680
Jos tiedot ovat vääriä, niin sanotaan väärän salasanan, paina se alas,

617
00:40:07,680 --> 00:40:09,580
ja vain tehdä se katoaa jälkeen.

618
00:40:09,580 --> 00:40:12,320
Muuten ladata admin sivulle.

619
00:40:12,320 --> 00:40:15,080
Ja tämä kaikki tehtiin käyttäen JSON.

620
00:40:15,080 --> 00:40:18,510
Tässä monta riviä koodia, voit vain siirtää tietoja loppupäätä,

621
00:40:18,510 --> 00:40:21,020
onko se oikein, tarkista onko kirjautunut sisään oikein,

622
00:40:21,020 --> 00:40:24,200
ja oikeastaan ​​vastata siihen, suuntaamalla henkilön oikean sivun

623
00:40:24,200 --> 00:40:29,760
tai et pakota heitä kirjautua sisään ja kertoa heille, että heillä oli väärä salasana.

624
00:40:29,760 --> 00:40:33,040
Niin, että esimerkki siitä, miten voit käyttää jQuery POST

625
00:40:33,040 --> 00:40:37,010
lähettää POST pyynnön selkää varten

626
00:40:37,010 --> 00:40:42,400
tarkistaa, onko joku kirjautunut sisään oikein.

627
00:40:42,400 --> 00:40:44,820
>> Okei, niin että kaikki esimerkit minulla oli, ja kaikki jutut halusin kattamiseksi.

628
00:40:44,820 --> 00:40:47,110
Nämä ovat suuria asioita, jQuery avulla voit tehdä:

629
00:40:47,110 --> 00:40:52,640
valitse elementtejä, muuttaa niitä käyttäen DOM manipulointi,

630
00:40:52,640 --> 00:40:56,340
Voit lisätä tehosteita, aktivoi asioita tietyistä tapahtumista,

631
00:40:56,340 --> 00:41:00,430
ja myös tehdä AJAX pyyntöjä hyvin saumattomasti ja helposti.

632
00:41:00,430 --> 00:41:02,840
Joten kiitos tulossa tai katsella,

633
00:41:02,840 --> 00:41:06,230
ja jos sinulla on kysyttävää, juuri minulle. Niin?

634
00:41:06,230 --> 00:41:12,730
[Opiskelija] Takaisin kun kävi ilmi, sinulla oli JSON jälkeen POST pyynnön lainausmerkkeihin,

635
00:41:12,730 --> 00:41:15,170
ja olin juuri mietin, mitä se teki.

636
00:41:15,170 --> 00:41:20,070
>> Joo, näen. Kysymys oli, että esimerkiksi juuri näytin,

637
00:41:20,070 --> 00:41:25,790
oli sana JSON lainausmerkkeihin -

638
00:41:25,790 --> 00:41:31,690
Minä vain vetää sen taas - noin POST-toiminto.

639
00:41:31,690 --> 00:41:43,320
Olen vain vetämällä se näyttää.

640
00:41:43,320 --> 00:41:46,890
Joten tässä on tämä POST pyyntö, ja siellä tämä JSON lainausmerkkeihin.

641
00:41:46,890 --> 00:41:50,280
Se vain kertoo, mitä odotamme ulostulon.

642
00:41:50,280 --> 00:41:54,070
Jos siis kulkea JSON kuin datasta tyyppi,

643
00:41:54,070 --> 00:41:56,070
se ei ole vaatimus, mutta jos hyväksymme sen,

644
00:41:56,070 --> 00:41:58,590
Sitten saadaan automaattisesti jäsentää JSON.

645
00:41:58,590 --> 00:42:00,600
Meidän ei siis tarvitse soittaa JSON jäsentää toiminto sitä,

646
00:42:00,600 --> 00:42:02,620
se tulee vain tapahdu automaattisesti.

647
00:42:02,620 --> 00:42:05,150
Ja jos katsomaan asiakirjat POST,

648
00:42:05,150 --> 00:42:09,850
on tämä tietotyyppi muuttujan, tyyppi odotettavan datan palvelimelta.

649
00:42:09,850 --> 00:42:12,660
Sen oletusarvona on älykäs arvaus, joka voi olla väärässä,

650
00:42:12,660 --> 00:42:15,520
joten voit jättää sen tyhjäksi, mutta se on vain tyyppistä tietoa

651
00:42:15,520 --> 00:42:21,680
koodauksessa, että käytät, onko se JSON tai XML tai jotain muuta.

652
00:42:21,680 --> 00:42:25,280
>> Muita kysymyksiä?

653
00:42:25,280 --> 00:42:27,300
Selvä. Jos sinulla on kysyttävää, ota yhteyttä sähköpostitse minulle

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

655
00:42:30,830 --> 00:42:34,860
ja dioja ja koodin pitäisi olla saatavilla verkossa melko pian.

656
00:42:34,860 --> 00:42:42,810
Onnea opinnäytetöitä, toivottavasti käytät jQuery.

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