<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="js/jquery.js"></script>
<style>
.me{ border: 1px solid red;
margin-top: 75px;
width: 400px;
height: 150px;
background-color: #ccc;
overflow: auto; }
input{
border: 1px solid black;
font-size: 40px;
width: 397px;
height: 50px;
}
button{
width: 100px;
height: 50px;
}
</style> <script type="text/javascript">
//页面加载完成简写形式
$(function(){ //on是用于为选中元素绑定事件的函数，它有两个参数，一个事件，第二个执行的方法
$("div").on("mouseover",function(){ $("div").css("background-color","lightgreen")
}); $("div").on("mouseout",function(){ $(this).css("background-color","#ccc")
}); $("input[type='text']").on("keydown",function(){ $(this).css("background-color","blue"); });
$("input[type='text']").on("keyup",function(){ $(this).css("background-color","white");
var v = $(this).val();
if(v.length==){
//trigger 触发button的点击事件
$("button").trigger("click");
} }); //利用one函数 为对象绑定一次性事件 ,一次性事件：只触发一次
$("button").one("click",function(){ alert("数据已提交"); }); //利用off()函数解除事件绑定
$("*").off();//解绑全部事件
$("*").off("click");//解绑单击事件
}) </script>
</head>
<body>
<div class="me" >
事件测试案例
<input type="text" /><br>
<button>提交</button> </div>
</body>
</html>