Událost je nějaká akce, která se na HTML stránce stane. Může to být třeba vaše kliknutí na cokoli, pohyb myší na nějaký prvek, stisknutí klávesy v zadávacím políčku apod. Já i vy většinou potřebujeme něco udělat, pokud některá taková událost nastane. Typickým příkladem může být schování nějakého prvku, pokud se na něco klikne. Schovávání už umíte z dílu Metody a efekty, takže ho můžeme krásně použít.
Událost se zapisuje tak, že vybereme nějaký prvek a tečkou na něj
přilepíme nějakou událost. Do závorky se pak napíše
function(){} a do složených závorek napíšeme kód, který se
má provést. Možná trochu krkolomné, ale rychle se to naučíte. Podívejte
se na příklad s událostí click():
$("#schovavac").click(function(){
$("#muj_odstavec").toggle();
});Příklad si můžete vyzkoušet.
Pokud se tedy klikne na prvek s ID schovavac, spustí se
událost, ve které je náš kód. tento kód zase spustí metodu
toggle() na prvek s ID muj_odstavec. Odstavec se tedy
zmizí nebo se objeví.
Názvy událostí jsou podobné jako přímo v Javasciptu, akorát nezačínají na on (například onclick). Jejich kompletní výčet sem ani nemá cenu psát, najdete ho v dokumentaci.
Co všechno lze s událostmi dělat? Ukážu několik dalších příkladů na různé události. V každém příkladu se zároveň naučíme něco nového o jQuery.
V tomto příkladu si mimojiné všimněte použití $(this).
Toto this vybere vždy prvek, kterého se událost týká. Událost
mouseover() se týká prvku #muj_odstavec, takže
v tomto případě $(this) zastupuje prvek
#muj_odstavec. Více o this si můžete přečíst v Profimagazínu.
Metoda css() má velmi jednoduché použití, přiřadí prvku
nějaký kaskádový styl, v našem případě červený rámeček.
$("#muj_odstavec").mouseover(function(){
$(this).css('border','1px solid red');
});
$("#muj_odstavec").mouseout(function(){
$(this).css('border','none');
});Pro druhý příklad jsem vybral jeden přímo z dokumentace jQuery.
Použijeme událost keyup(), která se vykoná, je-li zmáčknuta a
uvolněna nějaká klávesa.
$(document).keyup(function(event){
if (event.keyCode == 27) {
alert("Stiskli jste ESCAPE");
}
});Nejdřív bych chtěl upozornit na výběr prvku document.
Znamená to, že budeme pracovat s celým dokumentem a událost se bude tedy
detekovat na celém dokumentu.
Novinka pro nás je slovíčko event v závorkách funkce.
Díky němu pak můžeme zjistit, která konkrétní klávesa byla zmáčknuta.
V našem příkladu se ptáme, jestli byla zmáčknuta klávesa s kódem 27,
cože je klávesa ESCAPE. Příklad si vyzkoušejte.
V tomto příkladu bych vám chtěl ukázat hned 3 věci, které ještě neznáte. Nejdřív příklad:
$("#odkaz").click(function(e){
var leftVal = e.pageX + "px";
var topVal = e.pageY + "px";
$("#okenko").css({left:leftVal,top:topVal}).fadeIn(200);
});První věc je to malé éčko v závorce funkce. Jde o ten samý případ,
jako v předchozím příkladu (kde jsme však použili proměnnou
event a vy si tu proměnnou můžete pojmenovat jak chcete). Díky
tomuto éčku můžeme zjistit polohu kurzoru ve chvíli, kdy nastala událost,
tedy v tzv. moment kliku :) Potom pomocí zápisu e.pageX a
e.pageY zjistíme souřadnice. Ty potom použijeme při
polohování okénka pomocí CSS.
Další novinkou je zvláštní zápis v metodě CSS. Je to speciální
zápis, díky kterému můžete prvku přiřadit více CSS vlastností najedou.
Zápis je jednoduchý, stačí na to složené závorky a pak vždy vlastnost
dvojtečka hodnota čárka vlastnost dvojtečka hodnota a tak dále. Například
{font-size: "12em", font-color: "red"}. My jsme si v našem
příkladu nastavili vlastnosti top a left.
Třetí zajímaovstí je poslední řádek příkladu. Asi se divíte, že
jsem nejdříve vybral prvek (to už umíme), pak jsem mu přiřadil metodu
css() (to už také umíme), ALE pak jsem tam přilepil ještě za
další tečku další metodu. Jakto? Jde o další skvělou vlastnost
frameworku jQuery. Jmenuje se to řetězení a dovoluje nám to
krásně zkrátit a zjednodušit kód. Místo toho, aby psal toto:
$("#okenko").css({left:leftVal,top:topVal});
$("#okenko").fadeIn(200);napíšu toto:
$("#okenko").css({left:leftVal,top:topVal}).fadeIn(200);A udělá to to samé, jenom to vypadá přehledněji a jednodušeji. Prostě pokud chci s jedním prvkem udělat více věcí po sobě, nalepím to za sebe tečkami a ono se provede. Hezké ne?
Tak zbývá už jenom vyzkoušet si náš příklad. Aby se okénko opravdu
zobrazovalo na místě kurzoru, je nutné aby obsahovalo CSS vlastnost
position:absolute. To nám pak dovolí ho pozicovat pomocí
vlastností top a left. Pojďme si příklad vyzkoušet
do zkoušečky.
To je k událostem asi vše. Samozřejmě jako vždy, jQuery toho umí s událostmi mnohem víc. To už však nechám jen na vašem studiu a zájmu.
Protože jsem chtěl ukázat jQuery pro opravdové začátečníky, beru to hodně povrchově a proto nás už čeká jenom jeden a poslední díl. Bude však velmi zajímavý, bude o AJAXu.
Zajímají mě také vaše názory na seriál. Jste pořád v obraze? Pomohl vám nějak? Zkusili jste díky němu už jQuery někde použít? Povedlo se vám objevit další jeho funkce, které jsem v seriálu neuvedl?
Tento článek můžete tvítnout nebo fejsbůknout.
Šikovný seriál :)
U toho zvyrazneni okenka pri najeti mysi bych spise doporucoval udalost hover.
$(?#muj_odstavec?).hover(function(){
$(this).css(?border?,?1px solid red?); }, function(){
$(this).css(?border?,?none?); });
Kdyz jQuery, tak poradne :)
seriál je naprosto skvělý, nepomohl mi se orientovat v JS, který jsem se předtím neučil, ale zjistil jsem že hodně věcí jde dělat prostě jednoduše pomocí jQuery než patlat se s kódem o x řádcích.
tohle jsem hledala :-)
Dnes jsem objevil jQuery a je to opravdu bomba musím říct, i když jse se JS vždycky bál, hned jsem se ho pokoušel použít v praxi, ale tvrdě jsem narazil a nevím jak si s tím poradit. Chtěl jsem pomocí funkcí show a hide schovávat sudé řádky tabulky, ale jak se zdá, někde je chyba, po zobrazení se předtím schované řádky chovají jako plovoucí a nechce se jim vrátit zpět do tabulky. Pomohl by prosím někdo? Jak to vypadá se můžete podívat tady: http://www.sdruzeni.kvetakov.net/pokus.php
Mám otázku mám událost, které se týká divu má se provést efekt slide který mi beze všeho funguje, avšak se jedná o to že má jít na .klick function jenže na jiný div.asi tak kliknu na div A ale slide se mi provede u divu B.Děkuji za případnou odpověď.
serial je super. dik za nej. je to idealni vstup do krasy jQuery!
Ahoj, seriál se mi líbí, vše se mi jeví jasné, jen to budu zkoušet později. Snad by mne jen zajímalo, jaký je správný zápis do atributu ?href? u odkazu. Jestli to dobře chápu, tak veškeré akce vychází ze skriptu. Zatím to píšu z lenosti hledat. Kdo ví, možná na to přijdu hned v dalším článku :-)
Tak tohle je dar z nebes, po dlouhý době jsem se fakt nevyhnul nějakýmu JS a tak si říkám než to s?ní , aby to šlo v každým browseru, zkusíš nějakej framework. Volba padla na jQuery a? sehnat nějaký povídání ? tady je úplně nejlepší! Musím říct, že už jenom to prvotní koumání se vyplatilo, za tu dobu co sem vstřebával jQuery, bych to možná ani neodladil.
Hezký seriál, narazil jsem na něj náhodou a ihned se mi jQuery zalíbilo. Dík ;-)
Zdravím. Chtěl bych se zeptat na tu funkci click. Pochopil sem jí úplně
celou a zkoušel sem to udělat naopak. Že když kliknu na text tak se zobrazí
jiný text ale bohužel mi to nefunguje. $(document).ready(function(){
$(?#schovavac?).click(function(){
$(?#muj_odstavec?).toggle();
});
}); ahoj můžete mi poradit ?? nas.s@seznam.cz díky :-)
se tu nějak nezobrazujou html kody pls můžete mi to poslat na meil??
Zdravim,
chtěl bych se zeptat zda je možné pomocí jQuery neustále načítat obsah z nějakého skriptu, nemělo by to být vázáno na nějakou akci jako je klik nebo tak ale prostě neustále nebo v nějakém časovém intervalu?? a popř. pokud poradíte jak?
Díky moc
Tohle je ten nejlepší seriál, co jsem kdy viděl! Krásně stručné, přehledné, hlavně dobře strukturované a nezahltíš člověka moc velkým množstvím informací. Jen tak dále, jQuery jsem se dřív bál používat, ale teď už vůbec nemusím :)