事件
on方法可以将一个事件绑定在jQuery对象上，当你的操作触发了这些事件时，便会调用你所绑定的函数。
例如，给某个超链接绑定点击事件。
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3 <script src="./js/jquery-1.12.0.js"></script>
4 <script>
5 $(document).ready(function(){
6 var a = $(‘a‘);
7 a.on(‘click‘, function(){
8 alert(‘Hello Word‘);
9 });
10 });
11 </script>
12 <title>Event</title>
13 </head>
14 <body>
15 <a href="#0">Click</a>
16 </body>
除了用on()以外，还可以直接用click来绑定点击事件。
<script>
$(document).ready(function(){
var a = $(‘a‘);
a.click(function(){
alert(‘Hello‘);
});
});
</script>
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
其中，ready仅作用于document对象上，在页面DOM树构建完成后触发。
正如上述代码所示，除了能够用on绑定ready事件外，ready事件也可以像click一样被简写。甚至能被更简单的写为：
1 <script>
2 $(function(){
3 var a = $(‘a‘);
4 a.click(function(){
5 alert(‘Hello‘);
6 });
7 });
8 </script>
而且这种写法更为常见。
如果想获得事件的其他内容，可以在function传入变量e来获取。
取消绑定：
和on()相反的是，off()可以帮我们取消jQuery对象上的事件绑定，
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3 <script src="./js/jquery-1.12.0.js"></script>
4 <script>
5 $(function(){
6 var a = $(‘a‘);
7 a.click(function(){
8 alert(‘Hello‘);
9 });
10 var bt = $(‘button‘);
11 bt.click(function(){
12 a.off(‘click‘);
13 alert(‘event_off‘);
14 });
15 });
16 </script>
17 <title>Event</title>
18 </head>
19 <body>
20 <a href="#0">Click</a>
21 <button>event_off</button>
22 </body>
点击Button时取消了链接的点击事件，再点击链接不会出现提示框。
实际上，这里我们将a链接上的点击事件绑定函数全部取消了，如果只想取消某一个函数，那么我们在绑定时，就不能够采用匿名函数。并且在取消时，将函数对象也作为参数传入。
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3 <script src="./js/jquery-1.12.0.js"></script>
4 <script>
5 $(function(){
6 var click_f2 = function(){
7 alert(‘hello 2‘);
8 };
9 var a = $(‘a‘);
10 a.click(function(){
11 alert(‘Hello‘);
12 });
13 a.click(click_f2);
14
15 var bt = $(‘button‘);
16 bt.click(function(){
17 a.off(‘click‘,click_f2);
18 alert(‘click_f2 off‘);
19 });
20 });
21 </script>
22 <title>Event</title>
23 </head>
24 <body>
25 <a href="#0">Click</a>
26 <button>event_off</button>
27 </body>
这段代码中，我们只取消绑定了click_f2，而Hello仍然正常提示。同时我们可以发现绑定事件响应的先后顺序是根据绑定的先后来的。
事件通常是由用户操作触发，如果我们希望代码可以直接触发事件，则可用trigger()，这样能够避免我们写很多重复的代码。
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3 <script src="./js/jquery-1.12.0.js"></script>
4 <script>
5 $(function(){
6 var a = $(‘a‘);
7 a.click(function(){
8 alert(‘Hello‘);
9 });
10
11 var bt = $(‘button‘);
12 bt.click(function(){
13 a.trigger(‘click‘);
14 });
15 });
16 </script>
17 <title>Event</title>
18 </head>
19 <body>
20 <a href="#0">Click</a>
21 <button>event_off</button>
22 </body>
当我们点击按钮时，我们在代码内部触发了a的点击事件，因此也能弹出Hello。
动画：
我们已经知道了通过show()和hide()方法，可以让一个jQuery对象消失或者隐藏。但是当我们给方法传入一个参数时，页面就能呈现渐变的效果，一般传入的参数是毫秒数，但是‘slow‘和‘fast‘也能作为参数传入。
show()和hide()是对象由左上角逐渐收起或是展开，而slideUp()和slideDown()则是垂直方向的收起和展开。
fadeIn()和fadeOut()表示渐入渐出的效果。
同时，jQuery还通过animate()支持自定义动画效果。给animate传入最终的CSS样式和变化的时间，则可以在指定时间内渐变成最后的样式。同时，animate还能够传入回调函数，在动画结束后被调用。
1 <head>
2 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3 <title>Animate</title>
4 <script src=‘./js/jquery-1.12.0.js‘></script>
5 <script>
6 $(function(){
7 var bt = $(‘button‘);
8 var div = $(‘#test-animate‘);
9 bt.click(function(){
10 div.animate({
11 width: ‘256px‘,
12 height: ‘256px‘
13 },3000,function(){
14 alert(‘animate done‘);
15 });
16 });
17 });
18 </script>
19 </head>
20 <body>
21 <div id=‘test-animate‘></div>
22 <button>change CSS</button>
23 </body>