Jquery III

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>

Posted

in

by

Tags: