Kot smo že govorili, lahko na jQuery gledamo kot na knjižico »izberi in opravi«. Kar nekaj smo se pogovarjali o izbiri, zato se zdaj pogovorimo o nekaterih dejanjih. Ne pozabite, da je vzorec v bistvu videti tako:
// Select something! $(".something") // Do something! .hide();Namesto da bi delali z bolj teoretičnimi primeri, se premaknemo naravnost v nekaj resničnega sveta. Našli smo to pisalo Drewa Barontinija in ga razcepili.
Oglejte si obrazec za kreditno kartico Pen Chris Coyier (@chriscoyier) na CodePen
V našem primeru smo privzeto skrili obrazec kreditne kartice. Nato smo ustvarili povezavo, s katero lahko kliknete, da povlečete navzgor in navzdol obrazec kreditne kartice. Mi izberite povezavo, nato pa naredite z slideToggle na obrazcu. Izberite in naredite!
O dogodkih se še nismo veliko pogovarjali, toda to je velik del jQueryja. Dogodek je nekaj podobnega klikom miške, pritiskom na tipke, pomikanjem itd. Del "naredi" v "izberi in naredi" se pogosto zgodi po dogodku. Ne skrbite, veliko se bomo pogovarjali o dogodkih, še preden bo ta serija končana. Za zdaj samo vedite, da je on () najboljši / standardni način za povezovanje dogodkov v jQueryju. Vezava, kar pomeni »pazi na ta dogodek na tem elementu ali naboru elementov«.
Osnovni načrt:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));V našem primeru je bila povezava dobesedno povezava.
preklop
Povezave zgoščene povezave privzeto delujejo v katerem koli brskalniku tako, da se okno pomakne navzdol do elementa z ID-jem, ki ustreza tej povezavi zgoščevanja. Včasih je to dobro. Všeč mi je, kako ustvarja pomensko povezavo med to povezavo in tem elementom. Torej je brez kakršnega koli JavaScript povezava v bistvu še vedno smiselna (še posebej, če jo naslovite pametno).
Toda včasih je to vedenje preskakovanja razpršene povezave neprijetno. V JavaScript ga lahko preprečimo z uporabo prevenDefault. Všečkaj to:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));O tem bomo še govorili.
Seveda je lastna dokumentacija jQueryja čudovit vir za vse vidike jQueryja (metode).
Mislim, da zelo osnovno razumevanje tega »izberi in naredi« in dogodkov v resnici odpira svet razumevanja v JavaScript. Vem, da je zame. Na koncu tega predvajanja zaslona dosežemo vrhunec trenutne zasnove CSS-trikov in vidimo, kje se JavaScript očitno uporablja za odziv na nekatere dogodke klikov in spreminjanje uporabniškega vmesnika. Zelo zelo podobne stvari tistim, kar smo počeli v prejšnji predstavitvi. Na primer, nastavitev aktivnega razreda za stvari, ki jih kliknete, na primer:
Glej pisalo d6f7161a5931397b4f24195a315d52f3 Chrisa Coyierja (@chriscoyier) na CodePen