Kuten olemme puhuneet, jQuery voidaan ajatella "valitse ja tee" -kirjastona. Olemme puhuneet valinnasta melko vähän, joten nyt puhutaan joistakin teoista. Muista, että kuvio näyttää periaatteessa tältä:
// Select something! $(".something") // Do something! .hide();Teoreettisten esimerkkien kanssa työskentelemisen sijaan siirrymme suoraan johonkin todelliseen maailmaan. Löysimme tämän Drew Barontinin kynän ja haaroimme sen.
Katso Chris Coyierin (@chriscoyier) kynäluottokorttilomake CodePenistä
Esimerkissämme piilotimme luottokorttilomakkeen oletuksena. Sitten loimme linkin, jota napsauttamalla voit liukua ylös ja liu'uttaa luottokorttilomaketta alaspäin. Me valita linkin, niin tee slideToggle lomakkeelle. Valitse ja tee!
Emme ole vielä puhuneet paljon tapahtumista, mutta se on valtava osa jQueryä. Tapahtuma on jotain hiiren napsautuksia, näppäinpainalluksia, vierityksiä jne. "Valitse ja tee" -osan "tee" tapahtuu usein tapahtuman jälkeen. Älä huoli, puhumme paljon tapahtumista ennen tämän sarjan päättymistä. Toistaiseksi tiedät vain, että on () on paras / tavallisin tapa sitoa tapahtumia jQueryssä. Bind, eli "tarkkaile tätä tapahtumaa tältä elementiltä tai elementtijoukolta".
Perussuunnitelma:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Esimerkissämme linkki oli kirjaimellisesti linkki.
vaihda
Hajautuslinkit toimivat oletusarvoisesti missä tahansa selaimessa on, että ikkuna vierittää alas elementtiin, jonka tunnus on kyseinen hash-linkki. Joskus se on hyvä. Pidän siitä, miten se luo semanttisen yhteyden linkin ja kyseisen elementin välille. Joten ilman JavaScriptiä linkillä on silti oleellisesti merkitystä (varsinkin jos annat sille jotain älykästä).
Mutta joskus tämä hash-linkkihyppykäyttäytyminen on bummer. Voimme estää sen JavaScriptissa käyttämällä preventDefaultia. Kuten tämä:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Puhumme lisää siitä, että tulossa.
Tietysti jQueryn oma dokumentaatio on loistava resurssi kaikille jQueryn (metodit) "do" -näkökohdille.
Luulen, että tämän ”valitse ja tee” ja tapahtumien perustiedot todella avaavat ymmärtämisen maailman JavaScriptissä. Tiedän, että se teki minulle. Tämän kuvaruudun lopussa otamme huippunsa CSS-Tricksin nykyisessä suunnittelussa ja näemme, missä JavaScriptiä käytetään selvästi reagoimaan napsautustapahtumiin ja muuttamaan käyttöliittymää. Hyvin hyvin samanlaisia juttuja kuin mitä teimme edellisessä demossa. Esimerkiksi aktiivisen luokan asettaminen napsautettaville asioille, kuten tämä:
Katso Chris Coyierin (@chriscoyier) kynä d6f7161a5931397b4f24195a315d52f3 CodePenistä