jquery中各个事件应用实例

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>jquery_shijian_function.html</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//chang function test
				$(".change").change(function(){
					$(this).css("background-color","#EEFF22");
				});

				//toggle function test
				$(".toggle").toggle(
					function(){
						$("body").css("background-color","green");
					},
					function(){
						$("body").css("background-color","red");
					},
					function(){
						$("body").css("background-color","yellow");//注意yellow的写法，后面不能丢了w
					},
					function(){
						$("body").css("background-color","blue");
					}
				);

				//bind function/ mouseover/ mouseout test
				$(".bind").bind(
					{
						click:function(){$("p.bind_p").slideToggle("slow");},
						mouseover:function(){$("body").css("background-color","green");},
						mouseout:function(){$("body").css("background-color","blue");},
						// mousemove:function(){$("body").css("background-color","red");}
						// mouseup:function(){("body").css("background-color","red");}
					}
				);

				$(document).mousemove(function(e){
					$(".span").text("X:"+e.pageX+" , Y:"+e.pageY);
				});
			});
		</script>
	</head>
	<body>
		<div><!--class="change"不能放在此里面，因为其改变的是框内的背景颜色-->
			Input anything:<input type="text" name="inputtext" class="change">
			<select class="change">
				<option value="choice">choice</option>
				<option value="baidu">baidu</option>
				<option value="google">google</option>
				<option value="tecent">tecent</option>
			</select>
		</div>
		<br>
		<div>
			<button type="button" class="toggle">点击改变背景颜色</button>
		</div>
		<br>
		<div>
			<p class="bind_p">This is the bind test.</p>
			<button class="bind" type="button">bind application</button>
		</div>
		<br>
		<div>
			<p>鼠标指针位于：<span class="span"></span></p>
		</div>
	</body>
</html>