Adresování událostí
bind – umožní registrovat různé typy událostí – dva parametry – even type (String) – jaký typ události se má registrovat, + funkce, která se má vykonat
$(document).ready(function(){ #("tlacitko").bind("click", function(){ $("p").toggle(2000); }) })
Nejnámější typy událostí:
click dblclick hover mousedown mouseup mouseenter mouseleave mousemove keydown keyup keypress submit resize
Odkazování na objekt, kde událost vznikla:
$(this)
Příklad – změna barvy textu po najetí myši:
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Karel jede na kole</title> <style> .on{ color:lime; } </style> <script src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("p").hover(function(){ $(this).addClass("on");}, function(){ $(this).removeClass("on");}) }) </script> </head> <body> <p> Text na schování. </p> <button id="tlacitko">schovej/zobraz</button> </body> </html>
Metoda each – udělá pro všechny prvky nějakého elementu
příklad: vypíše text podle kteréhokoliv vybraného elementu z výběrového nástroje:
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <script src="jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("select").change(function(){ var str = ""; $("select option:selected").each(function(index, element){ str += $(this).text() + " "; }); $("#vyber").text(str); }); }) </script> </head> <body> <select name="sweets" multiple="multiple"> <option>čokoláda</option> <option>marcipán</option> <option>žužu</option> </select> <p id="vyber"></p> </body> </html>