Opi jQuery tekemällä
Opi jQuery tekemällä — Opi jQueryä puhelimellasi: kirjoita ketju ja katso, miten oikea sivu reagoi
Opi jQuery tekemällä on iOS- ja Android-sovellus, jonka käytön voi aloittaa ilmaiseksi ja joka opettaa jQuery JavaScript -kirjastoa — DOM-käsittelyä, tapahtumia, tehosteita ja AJAXia — aloittelijoille, opiskelijoille ja jQuery-sivustoja ylläpitäville kehittäjille. Jokaisella oppitunnilla on live-editori ja sivun esikatselu, ja jQuery 3.7.1 on sisäänrakennettu, joten kirjoittamasi koodi suoritetaan puhelimessa myös offline-tilassa. AI-mentori vastaa valitsinta, virhettä tai AJAX-kutsua koskeviin kysymyksiin.
- Hinta
- Ilmainen, Pro-päivitys
- Alustat
- iOS ja Android
- Kielet
- 22
- Ikäluokitus
- 4+
- Vaatimukset
- iOS 15.1 tai uudempi


Jos tunnet CSS-valitsimen, osaat jo suurimman osan jQuerystä.
jQuery lainaa valitsimensa CSS:stä ja antaa sinun ketjuttaa toimintoja tuloksen perään. Se tekee DOMiin, tapahtumiin ja asynkroniseen koodiin tutustumisesta helppoa sekä tarjoaa käytännöllisen taidon monille olemassa oleville verkkosivustoille, jotka ovat yhä riippuvaisia siitä.
Mikä se on
Opi jQuery tekemällä on iOS- ja Android-kurssisovellus jQuery JavaScript -kirjastolle. Se sisältää 22 kurssia ja 48 oppituntia tasoilla A1–C1, live-JavaScript-editorin sekä sivun esikatselun, joka toimii laitteella ja johon jQuery 3.7.1 on sisäänrakennettu, 20 virheenkorjaustehtävää, 20 ohjattua HTML- ja CSS-projektia, 50 haastattelukysymystä, 50 visailukysymystä ja 91 kohdan lunttilapun. AI-mentori selittää valitsimet, virheet ja AJAX-kutsut selkokielellä.
Sovelluksen sisältö
Miltä se näyttää





Kurssi
Mitä jQuery-kurssi sisältää
CoddyKitin jQuery-kurssilistasta koottu sisältö alkaa ensimmäisestä $-kutsusta ja etenee plugineihin, testaukseen ja työskentelyyn modernin JavaScriptin rinnalla.
Tervetuloa jQueryyn ja ensimmäiset askeleet
Mikä jQuery on, minkä todellisen ongelman se ratkaisi ja miksi niin monet sivustot käyttävät sitä edelleen. Sen jälkeen tutustutaan ensimmäiseen ketjutukseen ja perusteisiin aloittelijoille.
Elementtien valinta ja DOM-rakenteessa liikkuminen
Elementtien valinta, edistyneet attribuutti- ja pseudo-luokkavalitsimet sekä DOM-rakenteessa siirtyminen elementistä toiseen.
DOM-muokkaus ja tyylit
Elementtien luominen, lisääminen, siirtäminen ja poistaminen kahdella kurssilla sekä CSS:n ja luokkien muuttaminen koodista.
Tapahtumat ja delegointi
Tapahtumien hallinta, myöhemmin lisättyjen elementtien tapahtumadelegointi ja mukautettujen tapahtumien hallinta.
Animaatiot ja tehosteet
Perusanimaatiot, monimutkaiset animaatiot ja mukautetut tehosteet, kuten ketjutetut sarjat ja mukautettu easing.
Lomakkeet, data ja templatointi
Dynaaminen sisältö data-attribuuttien ja templatoinnin avulla sekä edistynyt lomakkeiden käsittely ja validointi.
AJAX, Deferred-objektit ja promiset
AJAX-toiminnot ja etädatankäsittely sekä Deferred-objektit ja promiset asynkronisen koodin hallintaan.
Pluginit, suorituskyky ja testaus
Mukautetut valitsimet ja suodatus, kestävien pluginien kehittäminen, suorituskyky ja parhaat käytännöt, jQueryn integrointi modernin JavaScriptin kanssa sekä jQuery-sovellusten testaus.
Miten se toimii
Näin oppitunti toimii
Jokaisella oppitunnilla lyhyt selitys on sijoitettu itse suorittamasi koodin viereen, joten ajatus tulee testattua ennen kuin siirryt eteenpäin.
Lue yksi lyhyt oppitunti
Avaa aihe ja lue lyhyt selitys valitsimesta, tapahtumasta tai tehosteesta. Oppitunnit ovat riittävän lyhyitä bussimatkan aikana suoritettaviksi, ja kurssi etenee ensimmäisestä ketjusta plugineihin ja testaukseen.
Kirjoita ketju ja katso, miten sivu reagoi
Live-editorissa kirjoitat HTML:ää, CSS:ää ja jQueryä ja suoritat ne saman tien. Editori suorittaa koodisi uudelleen, kun lopetat kirjoittamisen, eikä palvelinta tai build-vaihetta tarvita. Sivun esikatselu näyttää tuloksen.
Korjaa bugi ja kysy sitten mentorilta
Tehtävissä saat korjattavaksesi rikkinäistä koodia ja etsit virheen: klikkikäsittelijä, jossa this on window, jatkuvasti liukuva valikko tai kahdesti käynnistyvä tallennus. Kun jokin käsite tai virhe ei tunnu selvältä, AI-mentori selittää sen uudelleen yksinkertaisemmin.
Mitä se sisältää
Mitä sovellus sisältää
22
Kurssia, A1–C1
22 kurssia ja 48 oppituntia, jotka alkavat $-funktiosta ja ensimmäisestä ketjustasi ja etenevät valitsimiin, DOM-käsittelyyn, tapahtumiin, animaatioihin, lomakkeisiin, AJAXiin, plugineihin ja suorituskykyyn.
3.7.1
jQuery sisäänrakennettuna
Sivun esikatselu toimii laitteella, ja jQuery 3.7.1 on mukana, joten editori toimii myös offline-tilassa.
20
Virheenkorjaustehtävää
Todentuntuisia korjattavia bugeja, kuten ketju, joka päättyy merkkijonoon, tai poistopainike, joka toimii vain ensimmäisillä riveillä.
20
Ohjattua sivuprojektia
Kaksikymmentä HTML- ja CSS-projektia, joissa rakennetaan merkintä, jonka parissa valitsimesi myöhemmin toimivat.
91
Lunttilappu ja visailut
91 kohdan lunttilappu valitsimille, tapahtumille, tehosteille ja AJAX-metodeille sekä 50 visailukysymystä ja 50 haastattelukysymystä.
AI
AI-mentori
Kysy valitsimesta, virheestä tai AJAX-kutsusta ja saat vastauksen selkokielellä. Ilmaiseen tilaukseen sisältyy 3 kysymystä päivässä.
Taustaa
Kannattaako jQueryä vielä opetella, ja mihin sitä käytetään?
jQuery on JavaScript-kirjasto, joka helpottaa verkkosivun elementtien valitsemista, niiden muuttamista, klikkauksiin reagoimista ja tietojen lataamista ilman sivun uudelleenlatausta. Uudemmat kehykset ovat vallanneet monia uusia projekteja, mutta suuri osa olemassa olevista verkkosivustoista käyttää yhä jQueryä. Siksi sen koodin lukeminen, korjaaminen ja laajentaminen on edelleen käytännöllinen verkkokehitystaito. Se on myös helppo tapa tutustua DOMiin, tapahtumiin ja asynkroniseen JavaScriptiin ennen suurempiin työkaluihin siirtymistä.
$-funktio ja ketjuttaminenyksi rivi, useita toimintoja
Kun kutsut $-funktiota valitsimella, se palauttaa jQuery-olion, ja lähes jokainen metodi palauttaa saman olion uudelleen. Tämän ansiosta voit esimerkiksi valita listan, lisätä luokan ja häivyttää sen näkyviin yhtenä luettavana rivinä neljän erillisen lauseen sijaan.
ValitsimetCSS-osaaminen siirtyy suoraan
Luokka-, id-, attribuutti- ja pseudoluokkavalitsimet toimivat pitkälti samalla tavalla kuin tyylitiedostossa. Traversal-metodit kulkevat sitten elementistä sen vanhempiin, lapsiin tai sisaruksiin, joten niiden avulla löydät oikean rivin sivulta, jolla on satoja samankaltaisia rivejä.
Tapahtumien delegointiratkaisu myöhemmin lisättäville elementeille
Painikkeeseen liitetty käsittelijä toimii vain painikkeilla, jotka olivat olemassa koodin suoritushetkellä. Kun liität sen vanhempaan elementtiin ja suodatat valitsimen perusteella, se toimii myös myöhemmin lisätyillä riveillä. Tämä on klassinen syy siihen, että poistopainike toimii vain vanhoilla riveillä.
Mihin this viittaayleinen virhe
jQuery-käsittelijän sisällä this tarkoittaa elementtiä, joka vastaanotti tapahtuman, mutta nuolifunktio tai väärään kohtaan sijoitettu callback voi muuttaa tämän. Käsittelijän virheenkorjaus tilanteessa, jossa this onkin muuttunut windowksi, on tyypillinen ensimmäinen oikea bugi.
AJAX ja promisettietoja ilman uudelleenlatausta
$.ajax() lähettää pyynnön ja antaa sivun päivittyä, kun vastaus saapuu. Deferred-oliot ja promiset järjestävät useita tällaisia pyyntöjä niin, että yksi vaihe odottaa toista sen sijaan, että callbackit sisäkkäistyisivät.
Sopivuus
Kenelle se sopii – ja kenelle ei
Se sopii sinulle, jos
- Osaat hieman HTML:ää ja CSS:ää ja haluat saada sivut reagoimaan klikkauksiin ja lomakkeisiin
- Ylläpidät jQueryllä rakennettua sivustoa ja sinun on luettava ja korjattava sen koodia
- Valmistaudut front end -haastatteluun, jossa legacy-jQueryä esiintyy edelleen
- Haluat kirjoittaa koodia puhelimella ja nähdä sivun esikatselun heti
- Opit parhaiten lyhyissä jaksoissa ja haluat kysellä neuvoja mentorilta
Se ei ole oikea työkalu sinulle, jos
- Haluat oppia modernin frameworkin, kuten Reactin; tämä sovellus opettaa jQueryä ja DOM:ia
- Tarvitset kaikki kurssit ilmaisina: ensimmäinen kurssi, ensimmäinen projekti ja kaksi missiota ovat ilmaisia, ja Pro avaa loput
- Odotat mainoksetonta ilmaista versiota, koska Pro poistaa mainokset
Kysymykset
Usein kysytyt kysymykset
Mikä on paras tapa oppia jQueryä puhelimella?
Tehokkainta on kirjoittaa koodia ja nähdä sivun muuttuvan sen sijaan, että vain lukisit valitsimista. Opi jQuery tekemällä tarjoaa jokaisella lyhyellä oppitunnilla reaaliaikaisen editorin ja sivun esikatselun. jQuery 3.7.1 on sisäänrakennettu, joten koodi toimii laitteella, ja AI Mentor selittää kaiken epäselvän. Voit aloittaa ilmaiseksi iOS- ja Android-laitteilla.
Onko jQuery sama asia kuin JavaScript?
Ei. JavaScript on ohjelmointikieli, kun taas jQuery on JavaScriptillä kirjoitettu kirjasto, joka lyhentää tavallisia tehtäviä, kuten elementtien valintaa, klikkauksiin reagoimista ja AJAX-pyyntöjen lähettämistä. Opi jQuery tekemällä opettaa jQueryä JavaScript-editorissa, joten harjoittelet molempia yhdessä ja näet, miten ketjutus vastaa tavallista DOM-koodia.
Kannattaako jQueryä vielä opetella?
Monet tiimit valitsevat uusiin projekteihin muita työkaluja, mutta suuri osa olemassa olevista verkkosivustoista käyttää edelleen jQueryä. Siksi tällaisen koodin lukeminen ja korjaaminen on käytännöllinen taito. jQuery on myös helppo tapa tutustua DOM:iin, tapahtumiin ja asynkroniseen JavaScriptiin. Opi jQuery tekemällä sisältää työhaastattelukysymyksiä front end -tehtäviin, joissa legacy-jQueryä esiintyy edelleen.
Onko Opi jQuery tekemällä saatavilla iPhonelle ja Androidille?
Kyllä. Opi jQuery tekemällä on saatavilla App Storessa iPhonelle (iOS 15.1 tai uudempi) ja Google Playssa Androidille. Käyttöliittymä on saatavilla 22 kielellä, kuten englanniksi, espanjaksi, saksaksi, ranskaksi, portugaliksi, japaniksi, koreaksi, arabiaksi, hindiksi ja turkiksi. Kirjoittamasi koodi pysyy kuitenkin kaikilla kielillä jQuery- ja JavaScript-koodina.
Voinko suorittaa jQuery-koodia sovelluksessa ilman internetyhteyttä?
Kyllä editorissa. jQuery 3.7.1 on sisäänrakennettu Opi jQuery tekemällä -sovellukseen, joten sivun esikatselu toimii laitteella myös offline-tilassa. AI Mentoria käyttävät ominaisuudet tarvitsevat internetyhteyden.
Mitä aiheita jQuery-kurssi käsittelee?
22 kurssia etenevät $-funktiosta ja valitsimista DOM-muokkaukseen, tyyleihin, tapahtumiin ja delegointiin, animaatioihin, lomakkeisiin, AJAXiin, Deferred-objekteihin ja promiseihin. Lisäksi käsitellään mukautettuja valitsimia, pluginien kirjoittamista, suorituskykyä, jQueryn integrointia modernin JavaScriptin kanssa ja testausta.
Mitä debuggausmissiot ovat?
Ne ovat 20 harjoitusta, joissa saat eteensi rikkinäistä jQuery-koodia ja sinun on löydettävä virhe samalla tavalla kuin työelämässä. Esimerkkejä ovat klikkauksen käsittelijä, jossa this on window, merkkijonoon päättyvä ketjutus, poistopainike, joka toimii vain vanhoilla riveillä, valikko, joka jatkaa liukumista poistuttuasi, ja tallennus, joka suoritetaan kahdesti.
Pitääkö JavaScript tai HTML osata ensin?
HTML:n ja CSS:n perusteiden tuntemisesta on hyötyä, koska jQuery-valitsimet toimivat merkintöjen parissa ja perustuvat CSS:ään. Opi jQuery tekemällä sisältää myös 20 ohjattua HTML- ja CSS-sivuprojektia, joten voit rakentaa merkinnät, joita valitsimesi käyttävät. Kurssi alkaa ensimmäisestä ketjutuksesta.
Onko Opi jQuery tekemällä ilmainen?
Voit aloittaa ilmaiseksi: saat käyttöösi ensimmäisen kurssin, ensimmäisen ohjatun projektin, kaksi missiota, editorin, tietovisat, haastattelukysymykset, lunttilapun ja 3 AI Mentor -kysymystä päivässä. Ilmaisessa versiossa näytetään mainoksia. Pro avaa kaikki kurssit, projektit ja missiot, sertifikaattikokeen sekä rajoittamattoman AI Mentorin ja poistaa mainokset. Se on saatavilla viikko-, kuukausi- tai vuositilauksena tai kertaluonteisena elinikäisenä ostoksena. Kurssin lopussa suoritettava sertifikaattikoe kuuluu Pro-versioon.
Onko sovellus jQueryn kanssa sidoksissa?
Ei. jQuery on OpenJS Foundationin tavaramerkki, ja Opi jQuery tekemällä on itsenäinen oppimissovellus, jolla ei ole yhteyttä OpenJS Foundationiin eikä OpenJS Foundation ole sitä hyväksynyt.
Aloita
Kirjoita ensimmäinen jQuery-ketjusi jo tänään
Aloittaminen on ilmaista iOS:llä ja Androidilla, 22 kielellä.
Lisää CoddyKitilta
Saatavilla alustoilla iOS ja Android.