Ako sme už hovorili, jQuery možno považovať za knižnicu „select and do“. O výbere sme už hovorili dosť, takže poďme teraz k niektorým činom. Pamätajte, že vzor v zásade vyzerá takto:
// Select something! $(".something") // Do something! .hide();Namiesto práce s teoretickejšími príkladmi sa dostávame priamo k niečomu skutočnému. Našli sme toto pero od Drewa Barontiniho a rozvetvili sme ho.
Prečítajte si formulár kreditnej karty Pen od Chrisa Coyiera (@chriscoyier) na stránke CodePen
V našom príklade sme predvolene skryli formulár kreditnej karty. Potom sme vytvorili odkaz, na ktorý môžete kliknúť a vysunúť a zasunúť formulár kreditnej karty. My vyberte odkaz, a potom urobiť si slideToggle na formulári. Vyberte a urobte!
O udalostiach sme sa ešte veľmi nerozprávali, ale to je veľká časť jQuery. Udalosť je niečo ako kliknutie myšou, stlačenie klávesu, rolovanie atď. Časť „robiť“ v rámci „výberu a vykonania“ sa často deje po udalosti. Nebojte sa, veľa si povieme o udalostiach skôr, ako bude táto séria hotová. Zatiaľ vedzte, že on () je najlepší / štandardný spôsob viazania udalostí v jQuery. Bind, čo znamená „sledujte túto udalosť na tomto prvku alebo množine prvkov.“
Základný plán:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));V našom príklade bol odkaz doslova odkazom.
prepínať
Štandardne fungujú hašovacie odkazy v ľubovoľnom prehliadači tak, že sa okno posúva nadol k prvku s ID, ktoré sa zhoduje s týmto hash odkazom. Niekedy je to dobré. Páči sa mi, ako vytvára sémantické spojenie medzi týmto odkazom a týmto prvkom. Takže bez použitia JavaScriptu má odkaz v podstate stále zmysel (najmä ak ho nadpisujete inteligentným spôsobom).
Ale niekedy je to skákanie pomocou hashového odkazu nepríjemné. Môžeme tomu zabrániť v JavaScripte pomocou preventDefault. Páči sa ti to:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));O tom, čo sa chystá, si ešte povieme.
Samozrejme, vlastná dokumentácia jQuery je fantastickým zdrojom pre všetky „do“ aspekty jQuery (metódy).
Myslím si, že úplne základné pochopenie tohto „výberu a vykonania“ a udalostí skutočne otvára svet porozumenia v jazyku JavaScript. Viem, že to urobilo pre mňa. Na konci tohto screencastu vyvrcholíme súčasným dizajnom CSS-Tricks a uvidíme, kde sa jasne používa JavaScript, aby reagoval na niektoré udalosti kliknutí a zmenil UI. Veľmi podobné veci, aké sme robili v predchádzajúcom ukážke. Napríklad nastavenie aktívnej triedy na veci, na ktoré kliknete, napríklad takto:
Pozrite si pero d6f7161a5931397b4f24195a315d52f3 od Chrisa Coyiera (@chriscoyier) na stránke CodePen