[Powered by Google Translate] [Seminaari: jQuery]
[Vipul Shekhawat, Harvardin yliopisto]
[Tämä on CS50.] [CS50.TV]
Jos olet jälkeen pitkin kotona, voit itse käyttää minun dioja verkossa
menemällä tätä linkkiä.
Se TjjRWj, on bit.ly.
Voit myös vain mennä URL suoraan,
joka on cloud.cs50.net / ~ vshekhawat, joka on minun nimeni,
ja jQuery.
Olen erittäin rohkaista teitä seurata mukana, jos olet katsomassa kotona,
ja jos olet täällä, myös, koska tämä on melko interaktiivinen esitys.
>> Joten tänään aion puhua jQuery, ja ensimmäinen kysymys on,
mikä on jQuery?
Tänä vuonna, tiedän te ole katettu JavaScript
niin yksityiskohtaisesti kuin olemme viime vuosina.
JavaScript on ensinnäkin vain client-side kieli
että käytät ajaa skriptejä ja koodin jokaisen käyttäjän koneella.
Joten sinulla on palvelin, joka tarjoaa web-sivuja ihmisiä,
mutta saatat haluta tehdä juttuja heidän koneensa,
pyytävät kone lähettää pyyntöjä palvelimelle 30 sekunnin välein tai jotain.
Voit tehdä sen JavaScriptin avulla.
JQuery vain tarjoaa enemmän toimintoja päälle JavaScript
joka tekee ylimääräistä tavaraa sinulle.
Jos tarkastellaan sisällön päälle,
että kuvataan joitakin juttuja, että pystyt tekemään.
Joten kaiken kaikkiaan, se luotiin tammikuussa 2006.
Se oli aluksi suunniteltiin ja elokuussa 2005.
Se on ollut jo pari vuotta, ja se on todella osa uuden Web 2.0 liikkuvuutta
joka on tehty Internetin niin kiiltävä.
Se on yleisimmin käytetty JavaScript-kirjaston.
Yli 19,6 miljoonaa sivustot käyttävät sitä, ja käyttö on edelleen kasvussa
mukaan builtwith.com, joka ilmeisesti viime vuonna,
on juuri ollut jatkuvassa kasvussa melko lineaarisesti.
Joukossa 10 miljoonaa sivustoja, siellä on vielä -
noin 40% heistä on tällä hetkellä käytetään.
Facebook käyttää sitä, paljon muut sivustot tällä hetkellä käyttää sitä.
Voit tarkastella näitä tilastoja oman, jos haluat.
Ja voit kertoa sen legit, koska se on perusta ja 13 hallituksen jäsentä,
yhdessä tiimin 20 henkilöä, jotka työskentelevät sen säännöllisesti.
Joten se on hyvin laajalti käytetty, se on. Org URL, se on hieno,
se on spin-off muita juttuja, joten se on iso juttu.
>> Miksi sinun pitäisi käyttää sitä? JQuery on erittäin kevyt.
Se tarkoittaa, että ei ole valtava tiedosto. Voit ladata
minified tiedosto, joka ei kaikki valkoinen tila ja kommentteja, ja se on vain 32 kt.
Joten se on helppo vain nakata päälle Web-sivulla
ja vain alkaa käyttää sitä.
Se on myös erittäin tehokkaasti kirjoitettu, joten se ei vie paljon -
se ei hidasta sivuston paljon, kun käytät sitä.
Sen avulla voit toteuttaa asioita, jotka olivat aiemmin mahdottomia.
On joitakin toimintoja,
kuten animaatioiden, jotka normaalisti olisi hyvin, hyvin vaikea tehdä.
Mutta jQuery he oikeastaan ​​hyvin yksinkertainen.
Ja on olemassa joitakin asioita, jotka ovat ärsyttäviä tehdä,
mahdollista JavaScript, kuten lähettämällä POST pyyntö,
vaan lähettää pyynnön palvelimelle, sinun täytyy kirjoittaa
viisi tai kuusi tai seitsemän riviä koodia.
Nyt voit tehdä sen riviäkään koodia, ja yksi toiminto puhelun.
Se todella helpottaa paljon tavaraa, että olet tekemässä.
Ja kaikki siistit tyypit käyttävät sitä. Siihen mennessä, tarkoitan minua.
Minun opinnäytetyön viime vuonna, mikä on news.whrb.org,
joka on radioasema, olen luonut tämän blogin
joka isännöi kaikki osoittaa, että olemme tehneet ja MP3-tiedostoja heille.
Voit selata aiemmin osoittaa,
ja se kaikki tapahtuu käyttämällä jQuery. Voit kertoa
koska kaikki nämä animaatiot lähinnä.
Joten jos sinulla on - jos luot uuden postitse
näet nämä pikku slideDowns, että kaikki tapahtuu käyttämällä jQuery.
Ja tämä fade - niin tuollaista kaikki on tehty käyttäen jQuery,
ja sinun ei tarvitse jatkuvasti ladata sivu navigoida sivuston.
Toinen cool juttu, joka on tehty käyttäen jQuery on esittelyn.
Käytän tätä avoimen lähdekoodin juttu nimeltä scrolldeck,
jossa joku kirjoitti päälle jQuery.
Jos todella katsoa lähde, voit nähdä, että
he käyttävät tätä dollarin merkki; dollarimerkkiä
käytetään jQuery merkiksi siitä, että toiminto on jQuery toiminto.
Joten he määritellään kääre päälle jQuery
jonka avulla voit tehdä esityksen näin,
ja voit nähdä, että täällä he myös alkuperäisen jQuery tiedosto,
joka on mitä sinun täytyy sisällyttää, jos haluat käyttää jQuery
omassa verkkosivuilla.
>> Liikuttavaa, että miten se asennetaan?
Voit vain mennä jQuery.com ja ladata tiedoston,
lisätä sen Web-hakemistoon ja sisällyttää se.
Joten päälle, pää tag HTML-tiedoston
teidän tärkein HTML-tiedoston, vain Koodirivin
kanssa oikea versio version jQuery käytät.
Voit ladata sen menemällä jQuery.com,
klikkaa "Lataa jQuery" ja sinulla on se. Siinä kaikki.
Ja todella, voimme katsoa, ​​miltä se näyttää.
Jos klikkaat ladata täältä, jQuery on tämä.
Se on vain yksi iso JavaScript-tiedoston, joka tekee kaikki taika juttuja sinulle.
Tämä on minified versio, joka ei voi lukea lainkaan.
Voit myös katsoa kehitysversio, joka on luettavissa
mutta silti hyvin, hyvin pitkä.
Se on paljon tavaraa siellä.
Voit myös linkittää Googlen isännöi version.
Niin, että saat avulla voit vain luottaa Google tarjoamaan sitä.
Ne tarjoavat kaikki version, aina saatavilla.
Joten voit todennäköisesti luottaa Google isäntä sen sinulle.
Tai voit linkittää jQuery oma uusin versio.
Heillä on URL, joka on aina päivitetty uusimpaan versioon.
Se on jQuery-uusin, ja siellä on yksi ongelma, että
joka on, että jos päivitetty jQuery ja joidenkin edellä toiminnallisuuden
he olivat tulee degeneroitunut tai vanhentunut,
se ei - se voi alkaa saa enää tueta.
Joten jos kirjoitat sivuston avulla versiota 1.8.2,
mennessä versio 2.7 tulee ulos
joitakin toimintoja kirjoitit eivät enää toimi.
Joten se on parempi vain ladata 32 kB tiedoston,
laita se Web-sivulla, ja se tulee toimimaan ikuisesti.
>> Aion mennä eteenpäin ja alkaa puhua toiminnallisuuden jQuery.
Ensimmäinen asia on valitsimia. Tämä on mitä jQuery oli alun perin tarkoitus antaa.
Ja voit klikata asiakirjat katsomaan
yksityiskohtaiset asiakirjat valitsimet aion olla kattavat.
Ideana valitsimet on, että voit valita HTML-elementtejä sivulla.
Elementtejä sivulla on tunnukset ja luokat ja muita tunnistetietoja näkökohtia heille.
Mukana on myös - He ovat eri järjestyksessä.
Osan ajasta he sisäkkäin toisiaan.
JQuery voit rakentaa yksinkertaisia ​​kyselyjä, jotka hakevat elementtejä sivulla.
Sitten voit käsitellä näitä elementtejä käyttäen jQuery toimintoja,
joka on manipulointia osassa saamme myöhemmin.
Voit muuttaa HTML, muuttaa CSS,
voit myös animoida ja lisätä toimintoja, jotka aktivoivat tiettyjä tapahtumia.
Niinpä esimerkiksi, jos jotain napsautetaan, haluat jotain tapahtuu,
voit tehdä sen käyttämällä jQuery samoin.
Ja on valtava määrä tapoja valita elementtejä.
Useimmat niistä en ole koskaan käyttänyt, mutta on perustiedot niistä,
jotka ovat melko tärkeitä.
Elementti valitsin, esimerkiksi jos olet juuri valinnut mitään
että on div - Minulla on itse asiassa koodi auki tämän dian esityksen.
Niinpä esimerkiksi, tässä ensimmäinen dia.
Täällä meillä on div. Jos me itse valita kaikki divs sivulla,
se täytyy vain antaa meille erilaisia ​​kaikki divs olemassa tähän tiedostoon.
ID valitsin voit valita mitään tiettyä ID.
Joten jos tämä esimerkiksi, tämä asia on tunnus "mitä"
ja jos emme tätä # mitä sijaan joidenkin tunnus,
se vain palauttavat array, joka on yksi tekijä ja se on, että osa sivun.
Voimme myös yhdistää valitsimet tällä tavalla ottaa
valita vain asioita tunnukset, jotka ovat divs.
Niin joo. Valitse vain divs, joilla on kyseinen tunnus.
Luokassa käytät vain piste, se on sama asia kuin CSS.
Jälkeläinen myös toimii, joten jos sinulla on luokassa
ja se on sisäkkäisiä osia sen sisällä - niin, esimerkiksi
on jonkin verran luokkaan ja se on ankkuri tag linkki toiselle sivulle,
voit käyttää tätä syntaksia hakea linkkiä.
Voit myös valita useita asioita samanaikaisesti, vain erota ne pilkuilla
käytä valitsin haluat ja valitset ne kaikki kerralla, yhdessä array.
Ja sitten siellä on myös ei valitsin, joten voit valita kaikki divs
joilla ei ole tiettyjä luokkaan.
Ja tämä on vain hyödyllinen tapa saada johdatus miten tämä valinta toimii.
Näytän joitakin konkreettisia esimerkkejä toisessa.
>> Advanced valitsimia - nämä ovat vain muutamia esimerkkejä.
On olemassa kymmeniä näistä, mutta jos haluat valita kaikki kuvan tunnisteet
joissakin elementti, niin et vain: kuva.
Jos haluat valita jopa elementtejä, esimerkiksi jos on 20 niistä,
haluat valita 0, 2, 4, 6 ja niin edelleen,
teet: jopa, tai voit myös tehdä: outoa.
Nämä ovat pseudo valitsimet, mikä tarkoittaa, että ne itse asiassa laskea
joka toinen elementti sijaan juuri menossa ja valitsemalla ne kaikki.
Voit myös - jokainen elementti voi olla myös erityisiä ominaisuuksia.
Niinpä esimerkiksi, class = keskellä on myös ominaisuus.
Tämän ankkurointimerkki, href, hypertekstiviittausta, on ominaisuus myös.
Joten voit valita jotain, että linkkejä tietylle sivulle tai vain - se on todella yleistä.
Voit valita mitä tahansa ominaisuus, että haluat.
Ja sitten myös, ominaisuus sisältää.
Jos esimerkiksi halusi valita kaikki Tuloyksiköiden
että on sana "pass", kuten nimi niitä,
jos sivulla on syöttää tekstiä lohko
sitä kutsutaan "salasana" Se olisi yksi tapa voit valita että.
Ja siellä on paljon enemmän. Voit mennä eteenpäin ja katsoa asiakirjat
ja nähdä konkreettisia esimerkkejä siitä, miten se toimii.
>> Seuraava asia on DOM manipulointi.
Kun olemme valitse elementtejä, me haluamme todella tehdä juttuja heidän kanssaan.
Toistaiseksi emme ole katsonut lainkaan, mutta jos tarkastellaan asiakirjat,
siellä on todella paljon, että voisimme tehdä.
Tässä vaiheessa aiomme valita elementtejä esittelyn
ja manipuloida niitä käyttämällä jQuery.
Koska tämä on toteutettu jQuery, meillä on pääsy jQuery kirjasto,
ja voimme käyttää näitä toimintoja tämän koodin.
Yksi hyödyllinen asia, että et voi tietää on konsoli.
Ja Google Chrome on mitä käytän. Voit painaa alt-komento J
tai alt ohjaus J avata konsoli.
Firefox Minusta käsky siirtyminen K tai valvonnan siirtyminen K.
Safari sinun täytyy mennä muuttamaan joitakin asetuksia.
Ei linkkiä, jos haluat tehdä sen, mutta suosittelen saada Chrome tai Firefox.
Joten avata konsoli, se on täällä.
Sen avulla voit pohjimmiltaan vain tehdä mitä haluat.
Joten voit vain kirjoittaa luoda muuttuja nimeltä x,
x = 5, katsotaanpa mitä x + 2 on.
Voit jopa tehdä jotain CS + Katsotaanpa, x + 45, joka on CS50.
Voit vain tehdä joitakin tyypillisiä JavaScript juttuja.
Mutta voit myös tehdä jQuery täällä.
>> Joten katsokaa tämä ensimmäinen osa tästä.
Aiomme luoda muuttujan kutsutaan HTML, joka on merkkijono.
Se on kohta tag se, että kutsutaan joitakin uuden tekstin.
Joten meillä on tämä HTML, se on jokin uusi teksti, kohdassa tageja.
Nyt todella haluavat lisätä sen sivulle.
Otan sen käyttöön niin, että HTML tässä kohdassa, tämä otsikko täällä, on append tunnus.
Jos valitsemme append tunnus ja sitten liittää se
HTML muuttuja Olen juuri luonut,
se lisää, että HTML lopussa, heti tämän kohdan tag.
Joten jos teemme sen - olemme valinneet tämän kohdan
ja me olemme kutsuneet append toimintoa HTML muuttuja Olen vain lisännyt,
se lisää, että uusi teksti tuolla sivulla.
Voimme myös liittää alkuun, mikä tarkoittaa, että se menee ennen, alussa, että elementti.
Siksi on olemassa uusi teksti alussa ja sen jälkeen.
Voin mennä eteenpäin ja päivittää päästä eroon tästä juttuja olen juuri tehnyt.
Mutta se on esimerkki siitä, miten voit käyttää prepend ja liittää menetelmät
manipuloida juttuja sivulla, lisätä joitakin HTML.
>> Voit myös vaihtaa luokkaa.
Takaisin tähän tyyliin tiedosto, olen luonut tämän voitosta luokan
että on tekstin väri punainen, jotkut taustaväri ja tekstin varjo.
Se näyttää hirvittävän, mutta voin todella -
Tämä kohta vastaa luokan tunnus.
Joten en voi lisätä luokan voitto.
Voin toteuttaa tämän konsolin,
ja lisää, että luokka, ja nyt se näyttää hirvittävän, odotetusti.
CSS automaattisesti saa soveltaa luokkaa, että olet -
jos on CSS-luokka, se automaattisesti saa soveltaa
jos muutat luokan elementti.
Sitten voimme vain poistaa sen käyttämällä Remove Class.
Joten jos sinulla on joitakin ennalta luokkia kuten punainen tai korostettuna
ja sitten haluat hakea ne, elementtejä,
sinun ei tarvitse tehdä kaikki CSS tyyli joka kerta.
Voit vain lisätä luokan elementti, ja sitten siitä tulee automaattisesti -
se automaattisesti etsiä sopiva kyseiseen luokkaan.
Voimme myös poistaa asioita, joten aion valita kaikki divs
sivulla ja poistaa ne.
Mikä on, että tulee näyttämään?
Se tulee näyttämään mitään, joten ei ole oikeastaan ​​mitään jäljellä.
Oma esitys on mennyt.
En voi virkistää ja tuoda sen takaisin, onneksi
koska se on juuri käynnissä kerran,
mutta se on esimerkki poistaa, jos haluat tuhota elementti pois sivulta.
>> Voit myös korvata, ja aion valita kaikki kappalemerkkaukset sivulla
ja mennä sisälle ja vaihda mitä tekstiä ne ovat niitä
vain sana "testaus."
Jos teet tämän, voit korvata jokainen kappale sivu testauksen.
Jep. He kaikki korvataan testaus.
Niin, että esimerkki päästä tekstin ja kirjoittamalla sen päälle.
Voit myös hakea tietoa, ja tämä on todella siistiä kenttiin.
Jos sinulla on syötelaatikon että ihmiset kirjoittavat jutut,
ihmiset kirjoittavat juttuja siihen,
täällä me valita tulo, tuotantopanoksia tunnisteen tyyppi tekstiä.
Tässä tapauksessa on vain yksi syöttö-ruutuun koko esityksen,
joten meidän täytyy vain valita ensimmäinen, ja sitten me kutsumme Val toiminto sitä.
Joka palauttaa arvon, ja syötekentästä
arvo on vain mitä sattuu olemaan sisällä.
Joten jos teemme tämän, se vain palauttaa merkkijonon kamaa.
Ja jos me kutsumme sitä uudelleen kirjoittamista enemmän tavaraa, se muuttuu enemmän tavaraa.
Se on yksi hyvä tapa käyttää elementtejä syötekentästä ja tarkista,
tämä voimassa oleva sähköpostiosoite, on tämä kelvollinen päivämäärä, esimerkiksi.
Voit vain hakea tavaraa heti, kun ihmiset kirjoittavat sen,
ja sitten tarkistaa, onko se voimassa, lähettää sen takaisin palvelimelle, tehdä mitä haluat sen kanssa.
Ja se miten käyttää mitä sisällä ne laatikot.
>> Voit myös muokata CSS suoraan, joten sen sijaan lisäämällä
luokka, joka on joitakin tiettyjä ominaisuuksia,
voit vain lisätä mitä CSS haluat jotain.
Joten valitse runko, joka on koko esityksen,
ja väri on ominaisuus, joka määrittelee, mitä värejä teksti on.
Jos muutamme sen punaiseksi, kaikki teksti sivun muuttuu punaiseksi.
Voimme tehdä jotain taustaväri sininen,
siellä mennään, se on kaunis.
Voit tehdä mitä haluat tämän.
Käyttämällä CSS omaisuus, voit todella muuttaa miten tahansa näyttää milloin tahansa.
Seuraava asia on vaikutuksia.
Vaikutukset ovat periaatteessa sama asia kuin muuttamalla CSS,
mutta he todella tarjoavat ylimääräistä animaatio siihen.
Joten sen sijaan vain näyttämällä tai piilottamalla jotain tai värin muuttaminen
voit itse tehdä animoituja.
Tässä asiakirjat, jos haluat vilkaista laajan asiakirja sitä.
Mutta aion kattaa tärkeimmät.
On piilottaa ja näyttää ominaisuuksia.
Näytä / piilota ID tosiasiallisesti vastaa tämän koko ruutuun
Eli jos piilottaa sen, se vain katoaa.
Ja voin näyttää sen uudelleen, jos haluan tehdä tulla takaisin.
Ja se takaisin. Se ei oikeastaan ​​häviä,
En oikeastaan ​​poistaa sen sivun, olen vain asettaa CSS omaisuutta näkyvyyttä piilotettu
niin et näe sitä enää.
Mukana on myös dia ylös ja työnnä alas, että voit olla tätä.
Se liukuu ylös katoaa, ja sen jälkeen se katoaa
voit liu'uta se alas, jotta se tulee takaisin. Ja nyt se on takaisin.
Mukana on myös tämän fade vaikutus, joka - fade ID vastaa tähän ruutuun.
Jos minä häivyttää se ulos, niin se tulee hiljalleen.
Voin myös häivyttää sitä, ja se tulee takaisin.
Voit myös tehdä Fade to, joka on nimenomaan häivyttää toiminto.
Voit olla se haalistu mihinkään tiettyyn peittävyyttä, että haluat.
Joten jos häivyttää se hitaasti 0,5, niistä tulee puoli näkyvissä.
Voin tehdä sen mennä 0,1, ja takaisin 1 tehdä täysin uudelleen näkyviin.
Se on vain yksi animaatio, että voit tehdä.
>> On myös toggle vaikutuksia.
Joten aion valita toggle tunnus, joka vastaa tähän ruutuun,
ja että div voit soittaa toggle, jos se on näkyvissä se tulee näkymätön,
jos se on näkymätön se tulee näkyviin uudelleen.
Joten Soitin äsken tämän toiminnon pois kahdesti; ensimmäinen oli
sama asia kuin hide, toinen puhelu oli sama asia kuin show.
Ja voit myös tehdä tämän kanssa fade toggle,
joka ei sama asia, paitsi se todella haalistuu.
Ja sama juttu dia vaihtaa.
On kahlittu vaikutuksia sekä, mikä tarkoittaa
Jos valitset elementti ja vain soittaa joukko animaation menetelmien sitä,
jos halusi häivyttää, liu'uta sitten,
ja sitten piilottaa ja sitten häivyttää, se tekee niistä peräkkäin.
Niin katosi, tuli takaisin - jostain syystä, hide ei tapahtunut.
Kokeillaan sitä. Joo, niin se hiipui ja sitten se liukui pois.
Ja siellä on runsaasti enemmän. Voit käyttää animoida toimintoa
luoda omia animaatioita, mikä on melko monimutkainen,
mutta se tarjoaa sinulle ääretön laajennettavuus.
Voit tehdä mitä tahansa animaation haluat.
Voit myös käyttää jono jonottaa useita animaatioita kerrallaan.
Joten jos haluat jotain lentää sivulla
dian ylhäältä oikealta alhaalla vasemmalla, voit tehdä sen,
ja vain nippu toimia menossa yksi toisensa jälkeen.
>> Seuraava asia aiomme puhua on tapahtumia.
Tapahtumat voit - niin pitkälle, olemme juuri kirjoittamalla asioita konsoliin
ja tämä on yksi tapa tehdä tämän tapahtua,
mutta todellinen sivulla, et aio pystyä
tehdä käyttäjän tyypin asioita konsoliin.
Haluat asioita tapahtuu automaattisesti.
Sillä, että sinun täytyy käyttää tapahtumia, jotka aktivoivat joitakin tiettyjä tapahtuma tapahtuu.
Voit tarkistaa asiakirjat täydelliset tiedot.
Katsotaanpa. Haluamme näyttää tai piilottaa ruutuun
mutta nyt tämä painike ei tee mitään, koska en ole toteuttaa sitä vielä.
Aion mennä todellinen HTML-sivulle.
Tässä liukumäki. On div liukumäki.
Se on luokan liukumäki.
Ei tekstiä. Nyt on tämä laatikko ja laatikko painike.
Miten voisimme itse tehdä tämän katoavat?
Ensinnäkin, nyt kirjoittaa toiminto, joka tekee box ID katoavat.
Tämä on syntaksi funtion, haluan vain kutsua sitä hideTheBox.
Se ei ota mitään perusteluja, koska ei ole perusteluja otettava.
Voimme valita box ID.
Joten käyttäen jQuery valitse, voimme valita box ID,
ja sitten vain tehdä se katoaa.
Tehdään se häivyttää.
Jos me juoksimme tämän toiminnon todellinen konsoli,
voisimme määritellä tämän tehtävän, voimme soittaa hideTheBox, ja se toimii.
Mutta haluamme sen tapahtuvan, kun painiketta on todella painetaan.
Voit tehdä, että meidän on käytettävä tapahtumaa.
Sitoa tapahtuman tiettyjä painiketta tai jotain toimintaa tapahtuu,
meidän on valittava elementti, joka tapahtuma laukaisee -
tai joka laukaisee tapahtuman, sorry.
>> Joten ensinnäkin, nyt valitse laatikko painike tunnus
koska se on painike, ja nyt, että painike,
haluamme luoda animaation, kun se napsautetaan.
Joten ei tämä näppäysfunktio.
Sen avulla voit sitoa toinen toiminto sen.
Tämä toiminto ottaa toisen toiminnon argumenttina
voimme kulkea hideTheBox toiminto,
ja kun tätä painiketta napsautetaan, että toiminto suoritetaan automaattisesti.
Joten tämä toimii, jos säästämme tämän, minä virkistää,
ja - yksi sekunti, olen pahoillani.
Haluan korjata tämän todella nopeasti.
Okei. Siellä me mennä. Joten nyt laatikko on katoamassa kun klikkaa painiketta.
Voimme myös muuttaa vain fadeToggle,
muuttaa se vain piilottaa tai näyttää ruutuun
ja tämä toimii myös liikaa, jos me virkistää.
Voimme piilottaa sen, voimme myös näyttää sen, ja että jatkaa.
Toinen asia, mitä voimme tehdä on, emme oikeastaan ​​tarvitse määritellä tämän hideTheBox toiminto
ennen kutsumme näppäysfunktio.
Joten sen sijaan määritellä toiminnon ja soittaa hideTheBox,
me vain aio kutsua sitä, jos tämä asia on napsautetaan.
Joten voimme määritellä sen nimettömänä täällä,
joka on ominaisuus, että JavaScript on.
Voit määrittää toiminnon, kun normaalisti sanoisimme toiminto hideTheBox
argumenteilla, vaan voimme vain sanoa toimia argumentteja ei
Aloita kihara ahdin määritellä toiminnon,
lähellä, että kihara ahdin, ja sitten vain määritellä funktio täällä,
ensimmäisten sulkujen ja viimeinen suluissa
jotka vastaavat väitteet näppäysfunktio.
Joten olemme ohimennen tätä toimintoa, voimme kopioida tämä rivi koodia täällä,
ja joka tekee täsmälleen sama asia.
Ja nyt meillä ei ole tätä satunnainen fadeTheBox toiminto
joka on istumisesta ilman mitään näkyvää syytä.
Toiminto määriteltiin anonyymisti, sillä ei ole nimeä.
Se vain toteuttaa kun klikkaa laatikon painiketta.
Niin virkistävää kerran, vielä kerran, ja voit nähdä, että se toimii edelleen.
Ja se miten luoda tapahtumia.
>> On olemassa paljon erilaisia ​​tapahtumia, joita voimme käyttää.
Aion siirtyä takaisin käyttämään konsolin vain näyttää, miten nämä toimivat.
Tunnukset kullekin näistä vastaavat jokaiseen laatikkoon.
Joten tämä laatikko on click tunnus, tämä on keskeinen tunnus, ja tämä on mouse ID.
Vielä yksi asia on, että tämä toiminta toiminto, eikä kirjoittamalla sitä joka kerta,
Olen itse meni eteenpäin ja määritteli tämän toiminnan toiminnon tänne.
Se sama asia kuin hideTheBox toiminto.
Se saa tähän kohtaan ja joko haalistuu se pois tai katoaa sen sisään
Ja siksi emme voi käyttää sitä tässä.
Jos siis klikkaa tämän napsauttamalla tunnus, haluamme tehdä laatikko katoaa tai sen leviämisen.
Se on sama asia kuin painike, joka meillä oli viime liukumäki.
Nyt kun me kutsumme, että voimme klikata tästä ja poistuu ruudusta,
napsauta sitä uudelleen ja ruutuun tulee uudelleen näkyviin.
Se on melko yksinkertainen. Tuplaklikkaa ei sama asia,
paitsi se vaatii tuplaklikkaa.
Joten jos klikkaat sitä kerran ja napsauta uudelleen mitään ei tapahdu,
mutta jos tuplaklikkaa nopeasti, se tulee katoavat.
Jos tuplaklikkaa uudelleen, se tulee takaisin.
Niin, että on melko yksinkertainen.
Näppäimistötulo on outoa, en usko, että se todella toimii tässä esimerkissä
koska painettuna, näppäin ja painamalla näppäintä ja muut keskeiset toimet
aktivoida ole väliä mitä elementti voit sitoa sen.
Esimerkiksi vaikka olen varmasti avain alas kehon tai jotain muuta kokonaan,
niin se olisi silti aktivoida riippumatta - se ei ole erityinen.
En tarvitse klikkaamalla tästä ja paina näppäintä tehdä mitään katoavat.
Se aktivoidaan riippumatta siitä, mitä elementti Olen tällä hetkellä sisään
Joten nämä eivät todellisuudessa toimi tässä esimerkissä
koska se ei tunnista minua syöttämällä syöttää näppäimistön div.
>> Mutta jos tarkastellaan hiiritoiminnot
ensimmäinen on leijuvat, ja se voi tehdä joitakin tämän CSS.
Jos käytät CSS, voit luoda sen niin, että jos viet yli jotain,
sitten sen tyyli muuttuu.
Mutta käyttämällä jQuery voit muuttaa tyylejä muita asioita.
Niinpä esimerkiksi, aiomme soittaa toimia jos viet yli tämän div.
Tämä tarkoittaa, että jos me viet yli sen, niin ruutu katoaa.
Jos siirrymme pois, ruutuun tulee uudelleen näkyviin.
Jos me kutsumme tätä ja viet sen yli, laatikko ei häviä,
ja heti kun siirrymme pois, se tulee takaisin.
Jos me kutsumme tätä hover toiminto hiiren tunnus,
joka vastaa tähän ruutuun, niin jos me hääriä ruutuun
Sitten laatikko todella katoaa - se on hieno nyt, mutta -
jos siirrymme pois, se tulee uudelleen näkyviin. Juuri nyt se on taaksepäin jostain syystä.
Hiiri syöttää ja hiiren liikkeellä toiminnot ovat hieman samanlainen, mutta hieman eri.
Hiiri kirjoittaa vain aktivoituu, kun hiiri siirtyy ruutuun, odotetusti.
Joten jos muutat sitä, se tulee katoavat.
Mutta se ei näkyviin, kun siirrät pois, sinun täytyy muuttaa takaisin päälle sen tulla takaisin.
Mukana on myös hiiren liikkeellä toiminto, joka aktivoi
aina, kun hiiri on vieläkin läsnä ruutuun.
Joten se vain pitää käynnissä, hiipumassa sisään ja ulos.
Ja se on todella kirjautumalla - näyttää siltä kuin se olisi juuri hiipumassa sisään ja ulos,
mutta se on oikeastaan ​​kirjautumisen paljon enemmän toimia kuin tämä,
joten kun olet siirtynyt pois se täytyy vain pitää käynnissä, koska se kirjata kuin tuhat heistä.
Ehkä ei tuhat. Ehkä viisi.
Se lokit enemmän.
Lähtökohtana on, kaikki hiiritoiminnot, on paljon niitä.
Voit lukea toisilla, mutta ne ovat kaikki hieman erilaisia,
ja voit valita kumpi tarvitset
kumpi tiettyyn tarkoitukseen yrität tehdä.
>> Seuraava asia aion puhua on AJAX.
AJAX, tiedän emme kata Javascriptin niin paljon syvyyttä tänä vuonna,
joten olen juuri menossa puhua AJAX yleensä hetkeksi.
AJAX on lyhenne sanoista Asynchronous JavaScript ja XML.
Se on pohjimmiltaan, esimerkiksi silloin, kun olet Facebookissa ja se työntää sinulle ilmoituksen,
että koska AJAX on käynnissä selaimessasi.
Parin sekunnin välein selaimessasi on oikeastaan
menossa Facebookin palvelimiin, pyytäen heitä, sinulla on jotain uutta minulle,
ja sitten se tulee takaisin sinulle.
Näin voit lähettää pyyntöjä palvelimelle
joutumatta ladata sivua.
Joten yleensä, jos olet vain PHP ja tietokanta,
sinun täytyy päivittää sivu ennen kuin voit saada uutta tietoa palvelimelta.
Mutta AJAX, voit vetää tätä uutta tietoa jatkuvasti,
tai vedä sitä, kun klikkaat painiketta tai jotain sellaista.
Joten tämä antaa meille mahdollisuuden lähettää pyyntöjä ilman ladata sivu,
ja voimme käyttää joko GET tai POST-pyyntöjä.
>> GET pyyntöjä, esimerkiksi jos haluat ottaa Google.com
ja tehdä q = testi. Se on heille kyselyn testi.
Ja se on GET-pyyntöä, koska se kulkee näissä parametreja URL itse.
POST pyyntö on kuin jos lähetät ne postitse.
Se on kuin laitat sen kirjeen ja lähettää sen pois ne,
mutta he eivät itse nähdä sisällön. He eivät näy URL.
Et voi kirjoittaa suoraan sitä, sinun tulee lähettää se melkein salaa.
Se on viesti.
Mutta käyttämällä jQuery, voit tehdä GET ja POST-pyyntöjä
paljon helpommin kuin normaalisti voisi käyttää pelkkää JavaScript.
Voit kysellä API käyttäen GET, ja voit myös tarkistaa kirjautumistietoja.
Seuraavalla sivulla, olen luonut tämän, joka kysyy: "Mitä lounaaksi?"
käyttäen Harvard ruokaa API, joten katsotaanpa vetää tuon.
Tämä on vain esimerkki siitä, miten voit käyttää jQuery tehdä GET pyynnön API
ja saada tiedot takaisin siitä.
Joten haluamme menu tänään
ja haluamme nähdä, mitä lounaaksi.
Tässä URL luoda GET pyynnön jQuery.
käytät $. saada toiminto.
Ensimmäinen argumentti on URL, niin mitä olet istä.
Sitten seuraava argumentti on toiminto, joka suoritetaan, kun GET-pyyntö on täydellinen.
Joten voit lähettää pois joitakin pyynnön palvelimelle, odota sen tulla takaisin.
Kun se ei tullut takaisin, aiot ryhtyä toimiin, joilla tietoja, jotka ovat takaisin palvelimelle.
Mennään eteenpäin ja koodaamiseen tämän hyvin.
En koodata tämän joko tarkoituksella.
Tässä TODO. Ensinnäkin, katsotaanpa käytä tapahtuma sitova
niin, että kun tätä painiketta painetaan, lähetämme pois GET-pyynnön.
Ja kun GET-pyynnön palaa joitakin tietoja,
aiomme kirjoittaa tähän aterian tiedot ID div.
Ensinnäkin, nyt valita ruokaa button ID.
Kun se on napsautetaan, haluamme tehdä jotain.
Haluan vain tehdä nimetön fuction, kuten ennenkin.
Voiko kääri ne aaltosulkeita,
ja kun tätä painiketta painetaan, haluamme lähettää GET-pyynnön
tarkistaa, mitä lounaaksi.
Voit tehdä sen, voimme vain kirjoittaa $. Päästä.
Tämä on jQuery toiminnon tai dollarin merkki.
Se kestää pari argumentteja. Ensimmäinen on URL-osoite,
toinen on takaisinkutsufunktio, toiminto, joka kutsutaan
kun tähän pyyntöön todella palauttaa.
Toivotaan vain rakentaa URL ensin.
Voimme saada sen API Daavid kirjoitti ylös.
Going täällä, voimme nähdä, että se food.cs50.net/api/1.3/menus,
ja sitten vain kulkea parametrien nimet, jotka haluat.
Joten parametri 1 on arvo 1.
Se näyttää päivämäärä-, aloitusajankohta on oletusarvoisesti tänään
jos et anna mitään, ja päättymispäivä myös oletusarvot
tähän päivään, jos et anna mitään.
Sitähän me haluamme. Haluamme vain saada tietoa tänään.
>> Haluamme muodossa olevan JSON.
Se on vain mielivaltainen, voit käyttää mitä tahansa muodossa, että haluat.
Voit käyttää CSV, mutta JSON on JavaScript Object Notation.
Se on erittäin helppo JavaScript ymmärtää mitä se tarkoittaa,
ja voimme tulostaa sen helpommin niin.
Joten sitä pyytävät JSON, ja antaa pyynnöstä lounas.
Joten ateria = lounas. Vain kirjoittaa ylös, että URL, menemme takaisin tänne.
Ei valikoita. Ensimmäinen parametri on lähtö = JSON
koska se, mitä haluamme, ja erotat parametrit "ja".
Toinen parametri on - En muista.
Ateria. Ja haluamme ateria = lounas.
Voit testata tätä URL kirjoittamalla se selaimen ja menee sitä.
Se antaa sinulle tuotos. Se on vain nippu tavaraa, joka on lounaaksi.
Se on tässä ruma muodossa. Haluamme tulostaa sen päälle meidän sivun paremmin muodossa.
Joten URL on oikein, nyt meidän täytyy vain kirjoittaa funktio
soittaa takaisin, kun pyyntö on onnistunut.
Tämä toiminto todella ottaa argumentti. Se on tietoa.
Tiedot on mitä tulee takaisin GET-pyynnön jälkeen GET-pyyntö on tehty.
Voimme tehdä aaltosulkeiden, täällä me kirjoittaa Nimetön toiminto
joka suorittaa käyttäen, että tiedot, kun saamme tiedot takaisin.
Joten tietoja, kun kirjoitit URL-osoitteen,
tämä on mitä tietoja tulee näyttämään. Se tulee olemaan tämän valtavan merkkijono.
Mutta hyvä asia on, JavaScript voi jäsentää sen avulla JSON.parse toimintoa.
Joten luoda uusi muuttuja nimeltä jäsentää tietoa.
Ja jäsentää tietoa on joukko esineitä.
Jokainen esine sisältää esimerkiksi - No, katsomaan.
Se on päivä, ateria, luokka, resepti, tämä kaikki muut jutut.
Joten haluan vain tulostaa nimi kullekin.
Katsotaanpa kerrata koko joukko tavaraa, että saamme takaisin sen,
ja vain tulostaa jokainen - tulostaa nimi jokainen.
Tämä on silmukka.
>> JavaScript on tästä apua syntaksin jossa voit luoda muuttujan ja silmukka yli array,
ja var i on vain iteraattoria, joten sen sijaan, tehdä var i = 0,
i oli pienempi kuin pituus, i + +, voit vain tehdä var i jäsentää tietoa.
Tässä esimerkissä jäsentää tietoa (i) vastaavat alkion
array, varsinaisen objektin.
Ja haluamme saada nimi pois.
Joten haluan vain tehdä nimi.
Ja viimeinen asia on, me aiomme olla jQuery uudelleen.
Oikeastaan ​​lisätä sen div, tämä ateria info div joka on tällä hetkellä tyhjä.
Joten valita että.
Käytämme jQuery ja valitse ateria info div tunnus tai aterian info tunnus, sorry.
Haluamme liittää tähän.
Jos emme koe, esimerkiksi se vain korvata sen joka kerta.
Joten voimme vain liittää tähän.
Nykyinen alkio, saamme nimi pois,
ja me liittää sen loppuun aterian info ID div.
Ja sitten vain tehdä se näyttää puhtaampaa,
me myös liittää rivinvaihdon joten se ei ole kaikki yhdellä rivillä.
Joten jos kaikki menee hyvin, että olisi hyvä -
ensinnäkin, kun tätä painiketta painetaan,
se lähettää pois GET pyynnön tälle URL.
Kun data tulee takaisin, se tulee jäsentää sitä,
käännä se JSON, lenkki koko joukko edustavat kyseistä tietoa,
ja sitten liittää nimi ja rivinvaihdon
jokaiselle riville tämä ateria tiedot ID joka oli aiemmin tyhjä.
Niin menee takaisin tälle sivulle, me virkistää,
click, selvittää - se ei toimi. Se on ikävää.
Ja tämä on virheenkorjaus tulee sisään
Index.html, rivi 1.
Onpa kiinnostavaa.
Okei, no, sen sijaan viettää aikaa tehdä tätä, olen juuri menossa
vedä tehnyt tiedosto minulla, joka on valmistunut versio.
En ole varma, mikä ero on, mutta voimme vain avata tähän asti sijaan.
Ja menemme AJAX, ja tämän pitäisi toimia oikein.
Sitä oli lounaaksi tänään,
ei missään erityisessä järjestyksessä, lainausmerkit sen ympärille, joten se ei ole kaunein.
Mutta tietysti, jos olit tekemässä tätä opinnäytetyön,
voisitte tehdä se näyttää paremmalta.
Mutta se on vain yksinkertainen esimerkki siitä, miten teet GET-pyynnön.
Ja jos katsomme itse koodi, arvelisin, olen melko varma,
se on edelleen melko sama.
Ai niin, unohdin muuntaa se merkkijono, se on siinä.
Ei, se ei edelleenkään toimi. Riippumatta, tässä on todellinen päätökseen koodi
mitä tämän pitäisi näyttää,
ja se sama asia kuin mitä juuri toteutettu.
Kun klikkaat painiketta, se käyttää GET JSON automaattisesti jäsentää tietoa.
Se vie dataa takaisin sen, ja silmukoiden läpi koko joukko
ja tulostaa - mitä on lounaaksi tänään, nimi se,
ja liittää rivinvaihdon jokaisen rivin jälkeen.
Näin käytät GET toimintoa.
>> Voit myös käyttää POST, joka minulla ei ollut aikaa
kirjoittaa ylös esimerkiksi sitä, mutta voimme tarkastella asiakirjoja.
Jos tarkastellaan jquery.post,
voit nähdä, että se on melkein sama asia.
Sinulla on URL, mutta sen sijaan kulkee parametrit -
vain laittamalla ne merkkijono URL itse
sinun on läpäistävä tässä datamuuttujan
joka on pohjimmiltaan joukko, sanakirja, joka kartat parametrien arvoihin.
Ohitat että, ja joka lähettää ne käyttäen POST.
Ja kun olet, että voit olla menestys toiminto
joka suorittaa kun tietoja tulee takaisin.
Muuten, se on täsmälleen sama. Joten käyttäen POST,
saatat haluta käyttää POST, esimerkiksi jos sinulla on syöttölomake
annat ihmiset syöttää salasanoja, ja lähettää ne salasanat pois
to back-end script, tarkistaa tietokannasta onko käyttäjä kelvollinen vai ei.
Voit tehdä, että kaikki jQuery sen sijaan, että sivu päivittyy ollenkaan.
Niin minä toteutettu blogi, näytin teille aiemmin.
Jos menemme pääteportaalikehien ja kirjaudu ulos, kirjaudu ulos,
Kirjaudu ulos ei toimi.
No, haluan vain sen avaaminen uuteen ikkunaan.
Tässä on unohtunut, ja aioin kirjoittaa jotain satunnaisia.
Se ei toimi, mutta voit nähdä, että emme
oikeastaan ​​tarvitse päivittää sivua ollenkaan.
Koodi, jos haluat katsoa sitä,
on kaikkien saatavilla täällä.
Joten koodi kirjoitin viime vuonna joskus.
Kuten näette tästä, lähetämme POST pyynnön.
Minulla on tiedosto nimeltä login.php loppupäätä,
joka tarkistaa, jos salasana on voimassa.
Parametrit ohitamme vuonna salasanalla, kartoitetaan
tulo, joka on tähän kenttään hetkellä.
Ja kun data tulee takaisin, voimme tarkistaa.
Jos tiedot ovat vääriä, niin sanotaan väärän salasanan, paina se alas,
ja vain tehdä se katoaa jälkeen.
Muuten ladata admin sivulle.
Ja tämä kaikki tehtiin käyttäen JSON.
Tässä monta riviä koodia, voit vain siirtää tietoja loppupäätä,
onko se oikein, tarkista onko kirjautunut sisään oikein,
ja oikeastaan ​​vastata siihen, suuntaamalla henkilön oikean sivun
tai et pakota heitä kirjautua sisään ja kertoa heille, että heillä oli väärä salasana.
Niin, että esimerkki siitä, miten voit käyttää jQuery POST
lähettää POST pyynnön selkää varten
tarkistaa, onko joku kirjautunut sisään oikein.
>> Okei, niin että kaikki esimerkit minulla oli, ja kaikki jutut halusin kattamiseksi.
Nämä ovat suuria asioita, jQuery avulla voit tehdä:
valitse elementtejä, muuttaa niitä käyttäen DOM manipulointi,
Voit lisätä tehosteita, aktivoi asioita tietyistä tapahtumista,
ja myös tehdä AJAX pyyntöjä hyvin saumattomasti ja helposti.
Joten kiitos tulossa tai katsella,
ja jos sinulla on kysyttävää, juuri minulle. Niin?
[Opiskelija] Takaisin kun kävi ilmi, sinulla oli JSON jälkeen POST pyynnön lainausmerkkeihin,
ja olin juuri mietin, mitä se teki.
>> Joo, näen. Kysymys oli, että esimerkiksi juuri näytin,
oli sana JSON lainausmerkkeihin -
Minä vain vetää sen taas - noin POST-toiminto.
Olen vain vetämällä se näyttää.
Joten tässä on tämä POST pyyntö, ja siellä tämä JSON lainausmerkkeihin.
Se vain kertoo, mitä odotamme ulostulon.
Jos siis kulkea JSON kuin datasta tyyppi,
se ei ole vaatimus, mutta jos hyväksymme sen,
Sitten saadaan automaattisesti jäsentää JSON.
Meidän ei siis tarvitse soittaa JSON jäsentää toiminto sitä,
se tulee vain tapahdu automaattisesti.
Ja jos katsomaan asiakirjat POST,
on tämä tietotyyppi muuttujan, tyyppi odotettavan datan palvelimelta.
Sen oletusarvona on älykäs arvaus, joka voi olla väärässä,
joten voit jättää sen tyhjäksi, mutta se on vain tyyppistä tietoa
koodauksessa, että käytät, onko se JSON tai XML tai jotain muuta.
>> Muita kysymyksiä?
Selvä. Jos sinulla on kysyttävää, ota yhteyttä sähköpostitse minulle
klo vshekhawat@college.harvard.edu,
ja dioja ja koodin pitäisi olla saatavilla verkossa melko pian.
Onnea opinnäytetöitä, toivottavasti käytät jQuery.
[CS50.TV]