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?
Š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 :)
Pěkný seriál. Jasný a přehledný. Jen tak dál !
Zjistil jsem, že se nejlíp naučím nové věci od lidí, kteří o programování vědí mnohem méně než já (z toho důvodu si ponechám stranou připomínky :) ). Dobrý úvod do jQuery. Teď už ta knihovna v mém systému nebude v podstatě jen jednoúčelovka :)
BTW: zvýrazňování raději řeším přímo pomocí CSS. Je to ještě elegantnější než s jQuery, a navíc to funguje i s vypnutým JavaScriptem.
Jen stručně: ?Díky, kámo!!!? :-)
Som spokojny na zaciatok to bolo super? Diky moc :))
Ahoj, s jQuery jsem chtel zacit uz dlouho, tento navod je skvelym uvodem do teto problematiky.. Dekuji za nej
Musim jen rict: DIKY!! Po dvou dnech velmi neuspesneho boje s JS jsem zacal pouzivat jQuery a najednou: jde to! :) DIKY DIKY DIKY MOC!!
Seriál je povedený, kombinace příkladů se živými ukázkami je velmi efektní pro začátek. Brzy jQuery budu aplikovat na své weby.
Ahoj, chci poděkovat za tento článek velmi mi pomohl! Skvělá práce díky.
Díky za tento výstižný tutorial, moc mi pomohl.
Taky děkuji za vysvětlující návody. Skvělá práce.
Děkuji za super návody.
Ahoj, diky za tutorial. JQ je uplne perfektni, konkretne u tohoto prikladu: jde napr. o zjistovani souradnic x, y mysi. Za pomoci klasickeho javascriptu to byl docela problem, ruzne prohlizece vracely ruzne hodnoty a u nekterych to byl docela problem. JQ toto resi a uplne elegantne.
dobrej typ, pomohlo.. dik
priklad 1:
lepsi variant je: var el=$(?#muj_odstavec?);
el.mouseover(function(){
el.css(?border?,?1px solid red?); }).mouseout(function(){
el.css(?border?,?none?); });
v tvem priklade se vytvori 4krat zbytecne jquery object
Ola, parádní web, přímo ukázkový. Plný užitečného materiálu, který mi velmi pomohl zorientovat se v jQuery, i přes to, že dříve JS nebyl zrovna můj kamarád. Zvláštní pochvalu uděluji za Adamovu zkoušečku, výborně provedené z Vaší i ?Adamovy? strany. Jediná výtka, kterou bych si dovolil zmínit: Je při nejmenším slušné, u odkazů přidávat parametr target=?_blank?. Čili otevírání odkazu v novém panelu prohlížeče. Je to jen upozornění na tento malý nedostatek, protože určitě nejen mě trošku vadí, že po editaci Vašeho kódu ve zkoušečce (testování atd.), pak člověk musí 10× zmáčknout tlačítko Zpět, aby se dostal zpět na Vaši stránku. Mnohem jednodušší, rychlejší a pohodlnější je prostě zavřít záložku. Celkově bych web shrnul jako velmi užitečný a chtěl bych poděkovat za mnoho zkušeností, které jste mi předal. ;-)
Jasný a výstižný. Moc díky !!!