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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读