事件

on方法可以将一个事件绑定在jQuery对象上，当你的操作触发了这些事件时，便会调用你所绑定的函数。

例如，给某个超链接绑定点击事件。

1  2 
      3  4 12 13 14 15 Click16 

除了用on()以外，还可以直接用click来绑定点击事件。

鼠标事件

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 

而且这种写法更为常见。

如果想获得事件的其他内容，可以在function传入变量e来获取。

 

取消绑定：

和on()相反的是，off()可以帮我们取消jQuery对象上的事件绑定，

1  2 
      3  4 17 18 19 20 Click21 event_off22 

点击Button时取消了链接的点击事件，再点击链接不会出现提示框。

实际上，这里我们将a链接上的点击事件绑定函数全部取消了，如果只想取消某一个函数，那么我们在绑定时，就不能够采用匿名函数。并且在取消时，将函数对象也作为参数传入。

1  2 
      3  4 22 23 24 25 Click26 event_off27 

这段代码中，我们只取消绑定了click_f2，而Hello仍然正常提示。同时我们可以发现绑定事件响应的先后顺序是根据绑定的先后来的。

 

事件通常是由用户操作触发，如果我们希望代码可以直接触发事件，则可用trigger()，这样能够避免我们写很多重复的代码。

1  2 
      3  4 17 18 19 20 Click21 event_off22 

当我们点击按钮时，我们在代码内部触发了a的点击事件，因此也能弹出Hello。

 

动画：

我们已经知道了通过show()和hide()方法，可以让一个jQuery对象消失或者隐藏。但是当我们给方法传入一个参数时，页面就能呈现渐变的效果，一般传入的参数是毫秒数，但是'slow'和'fast'也能作为参数传入。

show()和hide()是对象由左上角逐渐收起或是展开，而slideUp()和slideDown()则是垂直方向的收起和展开。

fadeIn()和fadeOut()表示渐入渐出的效果。

同时，jQuery还通过animate()支持自定义动画效果。给animate传入最终的CSS样式和变化的时间，则可以在指定时间内渐变成最后的样式。同时，animate还能够传入回调函数，在动画结束后被调用。

1  2 
      3  4  5 19 20 21 
     
22 change CSS23