<!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;
400px;
height: 150px;
background-color: #ccc;
overflow: auto;
}
input{
border: 1px solid black;
font-size: 40px;
397px;
height: 50px;
}
button{
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==6){
//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>