Jak jsme již mluvili, jQuery lze považovat za knihovnu „select and do“. Mluvili jsme o výběru dost, takže pojďme si promluvit o některých věcech. Nezapomeňte, že vzor v podstatě vypadá takto:
// Select something! $(".something") // Do something! .hide();Spíše než pracovat s více teoretickými příklady, přesuneme se přímo do něčeho skutečného. Našli jsme toto pero od Drewa Barontiniho a rozvětvili ho.
Podívejte se na formulář kreditní karty Pen od Chrisa Coyiera (@chriscoyier) na CodePen
V našem příkladu jsme ve výchozím nastavení skryli formulář kreditní karty. Poté jsme vytvořili odkaz, na který můžete kliknout a posunout nahoru a dolů formulář kreditní karty. My vyberte odkaz, a pak udělat si slideToggle na formuláři. Vyberte a udělejte!
Dosud jsme toho moc nemluvili o událostech, ale to je velká část jQuery. Událost je něco jako kliknutí myší, stisknutí kláves, posouvání atd. Část „dělat“ v části „vybrat a udělat“ se často děje po události. Nebojte se, hodně si povíme o událostech, než bude tato série hotová. Zatím jen vím, že on () je nejlepší / standardní způsob, jak svázat události v jQuery. Vazba, což znamená „sledujte tuto událost u tohoto prvku nebo sady prvků.“
Základní plán:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));V našem příkladu byl odkaz doslova odkazem.
přepnout
Způsob, jakým hash odkazy fungují ve výchozím nastavení v libovolném prohlížeči, je ten, že okno se posune dolů k prvku s ID, které odpovídá danému hash odkazu. Někdy je to dobré. Líbí se mi, jak vytváří sémantické spojení mezi tímto odkazem a tímto prvkem. Takže bez jakéhokoli JavaScriptu má odkaz stále v podstatě smysl (zvláště pokud jej nadpisujete něčím chytrým).
Někdy je však toto chování při skákání hash odkazu nepříjemné. Můžeme tomu zabránit v JavaScriptu pomocí preventDefault. Takhle:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));O tom, co přijde, si ještě povíme.
Samozřejmě, vlastní dokumentace jQuery je fantastickým zdrojem pro všechny „do“ aspekty jQuery (metody).
Myslím, že základní pochopení tohoto „výběru a provedení“ a událostí skutečně otevírá svět porozumění v JavaScriptu. Vím, že to pro mě bylo. Na konci tohoto screencastu vyvrcholíme současným designem CSS-Tricks a uvidíme, kde se jasně používá JavaScript k reakci na některé události kliknutí a ke změně uživatelského rozhraní. Velmi podobné věci jako to, co jsme dělali v předchozím demu. Například nastavení aktivní třídy na věci, na které kliknete, například:
Podívejte se na pero d6f7161a5931397b4f24195a315d52f3 od Chris Coyier (@chriscoyier) na CodePen