Johdanto
HTML -, CSS -, ja JavaScript ovat kolme perustavanlaatuinen kielillä web. Rakennamme sivustoja, HTML, tyyli niitä CSS, ja lisätä vuorovaikutteisia toimintoja JavaScript. Itse asiassa, useimmat animaatioita, ja kaikki toiminta, joka tapahtuu seurauksena käyttäjä klikkaamalla, leijuu, tai vieritys on rakennettu JavaScript.
jQuery on ”kirjoita vähemmän, tee enemmän” JavaScript-kirjasto. Se ei ole ohjelmointikieli, vaan työkalu, jolla tehdään yhteisten JavaScript-tehtävien kirjoittamisesta tiiviimpää., jQuery on lisäetuna on rajat selain yhteensopiva, joten voit olla varma lähtö koodi tulee tehdä niin kuin on tarkoitettu tahansa moderni selain.
vertaamalla yksinkertaista ” Hello, World!”ohjelma sekä JavaScript ja jQuery, voimme nähdä eron, miten ne molemmat on kirjoitettu.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Tämä lyhyt esimerkki osoittaa, kuinka jQuery voidaan saavuttaa sama lopputulos kuin tavallinen JavaScript on ytimekäs tavalla.,
Tavoitteet
Tässä oppaassa oletetaan, että ei ole aiempaa tietoa, jQuery, ja se kattaa seuraavat aiheet:
- Miten asenna jQuery web-hanke.
- tärkeiden web-kehityskonseptien kuten API: n, DOM: n ja CDN: n määritelmät.
- Yleiset jQuery-valitsimet, tapahtumat ja vaikutukset.
- esimerkkejä kokeillakseen kirjoituksessa opittuja käsitteitä.
Esitiedot
Ennen kuin aloitat tässä oppaassa tarvitset seuraavat:
- perustiedot HTML ja CSS., Sinun pitäisi jo tietää, miten perustaa yksinkertainen sivusto ja on käsitys CSS valitsimet, kuten tunnukset, luokat, ja pseudo-elementtejä.
- ymmärrys ohjelmoinnin perusteista. Kun se on mahdollista alkaa kirjoittaa jQuery ilman kehittynyttä osaamista JavaScript, perehtyneisyys käsitteet, muuttujat ja tietotyypit sekä matematiikka ja logiikka auttaa merkittävästi.
Määrittäminen jQuery
jQuery on JavaScript-tiedosto, jonka voit linkittää HTML. JQuery voidaan sisällyttää projektiin kahdella tavalla:
- Lataa paikallinen kopio.,
- Linkitä tiedostoon Content Delivery Networkin (CDN) kautta.
Huomautus: Sisällöntoimitusverkko (CDN) on useiden palvelimien järjestelmä, joka toimittaa verkkosisältöä käyttäjälle maantieteellisen sijainnin perusteella. Kun linkität isännöityyn jQuery-tiedostoon CDN: n kautta, se saattaa saapua käyttäjälle nopeammin ja tehokkaammin kuin jos isännöit sitä omalla palvelimellasi.
käytämme CDN: ää viittaamaan jqueryyn esimerkeissämme. JQueryn uusin versio löytyy Googlen isännöimistä kirjastoista., Jos sen sijaan haluat ladata sen, voit saada kopion jQuery virallisilla verkkosivuilla.
aloitamme tämän harjoituksen luomalla pienen web-projektin. Se koostuu style.css css/ hakemisto scripts.js js/ hakemistoon, ja tärkein index.html root-hanke.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlaluksi, tehdä HTML-luuranko ja tallenna se index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Linkki jQuery CDN juuri ennen sulkeutuvaa </body> – tagin, jonka jälkeen oman mukautetun JavaScript-tiedoston scripts.js.
JavaScript-tiedoston (scripts.js) on oltava mukana alla jQuery-kirjaston dokumentti tai se ei toimi.
Huomautus: Jos haluat ladata paikallinen kopio jQuery, tallenna se js/ kansion ja linkittää sen osoitteeseen js/jquery.min.js.,
tässä vaiheessa jQuery-kirjastoa Ladataan nyt sivustoosi, ja sinulla on täysi pääsy jQuery-sovellusliittymään.
Huomautus: Sovellusohjelmointirajapinta (API) on käyttöliittymä, jonka avulla ohjelmistoohjelmat voivat olla vuorovaikutuksessa keskenään. Tässä tapauksessa, API jQuery sisältää kaikki tiedot ja asiakirjat, jotka tarvitaan käyttää jQuery.
käyttäen jQuery
ytimessään jQuerya käytetään yhdistämään HTML-elementtejä selaimessa DOM: n kautta.,
Dokumenttiobjektimalli (Dom) on menetelmä, jolla JavaScript (ja jQuery) vuorovaikutuksessa HTML: n kanssa selaimessa. Nähdäksesi tarkalleen, mitä DOM on, selaimessasi, napsauta hiiren oikealla painikkeella nykyistä Web-sivua valitse tarkasta. Tämä avaa kehittäjän työkaluja. HTML-koodi näet tässä on DOM.
jokaista HTML – elementtiä pidetään solmuna DOM-objektissa, johon JavaScript voi koskea. Nämä esineet on järjestetty puiden rakenne, jossa <html> lähempänä root, ja jokainen sisäkkäisiä elementti on oksa edelleen pitkin puu., JavaScript voi lisätä, poistaa ja muuttaa mitään näistä elementeistä.
Jos napsautat sivustoa uudelleen hiiren kakkospainikkeella ja napsautat Näytä sivun lähdettä, näet verkkosivun RAW HTML-lähdön. Aluksi on helppo sekoittaa Dom HTML-lähdekoodiin, mutta ne ovat erilaisia – sivulähde on juuri se, mitä HTML-tiedostoon kirjoitetaan. Se on staattinen ja ei muutu, ja ei vaikuta JavaScript. DOM on dynaaminen ja voi muuttua.
uloin kerros DOM, kerros, joka kietoo koko <html> solmu, on document object., Alkaa manipuloida sivun, jQuery, meidän on varmistettava, että asiakirja on ”valmis” ensin.
Luo tiedosto scripts.js oman js/ hakemistoon ja kirjoita seuraava koodi:
$(document).ready(function() { // all custom jQuery will go here});Kaikki jQuery-koodi voit kirjoittaa on kääritty edellä koodi. jQuery tunnistaa tämän valmiudessa niin, että koodi mukana sisälle tämä toiminto toimii vain, kun DOM on valmis JavaScript-koodi suoritetaan., Vaikka joissakin tapauksissa JavaScriptiä ei ladata ennen kuin elementit on renderoitu, mukaan lukien tämä lohko pidetään parhaana käytäntönä.
tämän artikkelin johdannossa nähtiin yksinkertainen ” Hei, maailma!” komentosarja. Aloittaa tämä kirjoitus ja tulostaa tekstiä selaimen jQuery, ensin meidän täytyy luoda tyhjä lohko-tason kappale-elementti, jossa ID – demo soveltaa sitä.
...<body><p></p>...jQuery on nimeltään kanssa ja edustaa dollari-merkki ($)., Käytämme DOM kanssa jQuery käyttäen enimmäkseen CSS syntaksi, ja soveltaa toimintaa menetelmällä. Perus jQuery esimerkki seuraa tätä muotoa.
$("selector").method();Koska TUNNUS on edustaa hash symboli (#) CSS, meidän tulee käyttää demo ID-valitsimella #demo. html() on menetelmä, joka muuttaa HTML sisällä elementti.
we ’re now going to put our custom” Hello, World!”program inside the jQuery ready() wrapper., Lisää tämä rivi scripts.js tiedosto nykyisen toiminto:
$(document).ready(function() { $("#demo").html("Hello, World!");});Kun olet tallentanut tiedoston, voit avata index.html tiedosto selaimessa. Jos kaikki toimi oikein, näet lähdön Hello, World!.
valitsimet
valitsimet ovat sitä, miten kerromme jquerylle, mitä elementtejä haluamme työstää. Useimmat jQuery valitsimet ovat samat kuin mitä olet perehtynyt CSS, muutaman jQuery-erityisiä lisäyksiä., Voit katsoa koko luettelon jQuery-valitsimista niiden virallisilla asiakirjasivuilla.
käyttää valitsimen, käytä jQuery symboli $, jonka jälkeen suluissa ().
$("selector")Double-lainattu jouset ovat mieluummin jQuery tyyli opas, vaikka yhden lainattu jouset ovat usein käyttää yhtä hyvin.
alla on lyhyt katsaus joihinkin yleisimmin käytettyihin valitsimiin.,
Yleensä, luokat ja tunnukset ovat mitä tulet kohtaamaan kaikkein — luokkaa, kun haluat valita useita elementtejä ja tunnuksia, kun haluat valita vain yksi.
jQuery Events
” Hello, World!”esimerkiksi, koodi juoksi heti, kun sivu ladattu ja asiakirja oli valmis, ja siksi ei tarvinnut käyttäjän vuorovaikutusta. Tässä tapauksessa olisimme voineet kirjoittaa tekstin suoraan HTML: ään häiritsemättä jQuerya. Meidän on kuitenkin hyödynnettävä jQuerya, jos haluamme saada tekstin näkyviin sivulle napin painalluksella.,
Palata index.html tiedosto ja lisää <button> elementti. Käytämme tätä painiketta kuunnella meidän click tapahtuma.
...<body><button>Click me</button><p></p>käytämme click() tapa soittaa toiminto, joka sisältää meidän ”Hei, Maailma!” koodi.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Tässä on lopullinen koodi.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Tallenna scripts.js tiedosto ja päivitä index.html selaimessa., Nyt kun klikkaat painiketta, ” Hei, maailma!”teksti ilmestyy.
tapahtuma on milloin tahansa käyttäjän vuorovaikutuksessa selaimen kanssa. Yleensä tämä tehdään hiirellä tai näppäimistöllä. Juuri luomassamme esimerkissä käytettiin klikkaustapahtumaa. Virallisista jQuery-dokumenteista voit katsoa täydellisen luettelon jQuery-tapahtumatavoista. Alla on lyhyt katsaus joihinkin yleisimmin käytettyihin tapahtumamenetelmiin.
tehdä kuvia, animoida tai häivyttää kuin käyttäjä rullaa alas näytön, käytä scroll() menetelmä., Voit poistua valikosta käyttäen ESC – näppäintä, käytä keydown() menetelmä. Tehdä pudotusvalikosta, harmonikka valikosta, käytä click() menetelmä.
tapahtumien ymmärtäminen on olennaista dynaamisen verkkosivusisällön luomisessa jQueryn kanssa.
jQuery Vaikutuksia
jQuery vaikutuksia työtä käsi kädessä tapahtumat, jonka avulla voit lisätä animaatioita ja muuten manipuloida elementtejä sivulla.
teemme esimerkin, jossa avaamme ja suljemme popup-peittokuvan., Kun voisimme käyttää kaksi Tunnukset – avata päällekkäin ja toinen lähellä sitä – me sen sijaan käyttää luokan avata ja sulkea overlay, jolla on sama funktio.
Poista nykyinen <button>ja <p> – tagien sisällä kehon index.html tiedosto ja lisää seuraava HTML-dokumentti:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...meidän style.css tiedoston, voimme käyttää minimaalinen määrä CSS piilottaa overlay display: none center ja sen ruudulla.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}Takaisin scripts.js tiedosto, aiomme käyttää toggle() menetelmä, joka vaihtaa CSS display kiinteistön välillä none ja block, piilossa ja näytetään overlay, kun napsautetaan.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Päivitä index.html. Voit nyt vaihtaa näkyvyyttä modaali klikkaamalla painikkeita., Voit muuttaa toggle() ja fadeToggle() tai slideToggle() nähdä muutamia muita sisäänrakennettu jQuery vaikutuksia.
alla on lyhyt katsaus joihinkin yleisimmin käytettyihin vaikutusmenetelmiin.
-
toggle()– Vaihtaa: vaihtaa näkyvyyttä elementti tai elementtejä.show()jahide()eivät liittyvät yksi-tapa vaikutuksia. -
fadeToggle()– Fade Vaihtaa: vaihtaa näkyvyyttä ja elävöittää peittävyyttä elementti tai elementtejä.,fadeIn()jafadeOut()eivät liittyvät yksi-tapa vaikutuksia. -
slideToggle()Dian Toggle vaihtaa näkyvyyttä elementti tai elementit, joilla on liukuva vaikutus.slideDown()jaslideUp()eivät liittyvät yksi-tapa vaikutuksia. -
animate()– Animoida suorittaa mukautettuja animaatio vaikutuksia CSS omaisuutta elementti.,
käytämme jQuery tapahtumia kuuntelemaan käyttäjän vuorovaikutusta, kuten hiiren painalluksella, ja käytämme jQuery vaikutuksia edelleen manipuloida elementtejä kerran, että toiminta tapahtuu.
Johtopäätös
tässä oppaassa opimme, miten valita ja manipuloida elementtejä, jQuery, ja miten tapahtumia ja vaikutuksia yhdessä tehdä interaktiivinen www kokemus käyttäjälle.
täältä, sinun pitäisi olla syvempää ymmärrystä ominaisuuksia jQuery, ja olla oma tapa kirjoittaa oman koodin.