绑定事件的其他方法 以及 取消绑定 事件：：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').bind('click mouseover',function () {
alert('hello!');
$(this).unbind('mouseover');
})
})
</script>
</head>
<body>
<input type="button" name="" value="press me" id="btn">
</body>
</html>
自定义事件：除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
//给#btn绑定hello事件
$('#btn').bind('hello',function () {
alert('hello!');
});
$('#btn').bind('click',function () {
alert('click');
});
//触发hello事件
$('#btn2').click(function () {
$('#btn').trigger('hello');
$('#btn').trigger('click');
});
});
</script>
</head>
<body>
<input type="button" name="" value="press me" id="btn">
<input type="button" name="" value="press me2" id="btn2">
</body>
</html>
1.click事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click事件</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//重复切换sty样式
$('.box').toggleClass('sty');
});
})
</script>
<style type="text/css">
.box{
200px;
height:200px;
background-color: hotpink;
}
.sty{
background-color: chartreuse;
}
</style>
</head>
<body>
<input type="button" name="" value="切换" id="btn">
<div class="box"></div>
</body>
</html>
2.mouseover（）：鼠标进入；mouseout（）：鼠标离开；（进入/离开子元素也触发）
moseenter() : 鼠标进入；mouseleave()：鼠标离开。（进入/离开子元素不触发）
3. 页面滚动事件：
$(window).scroll(function){ ...... }
4. blur() 元素失去焦点、focus() 元素获得焦点、change() 表单元素的值发生变化
5. mouseup()松开鼠标、mousedown() 按下鼠标、mousemove() 鼠标在元素内部移动
6. keydown() 按下键盘、keypress()按下键盘、keyup() 松开键盘
7. resize() 浏览器窗口大小发生改变
8. submit() 用户提交表单
9.toggle() 根据鼠标点击的次数，依次运行多个函数
10. unload() 用户离开页面的事件