1. 常用事件

1. hover #鼠标悬停监听

2. keydown和keyup #键盘按键 按下/抬起
3. change #监听值的改变 全部输入完失去焦点后
4. focus和blur # 获取焦点/失去焦点 监听焦点，光标所在位置
5. input #监听input框内值改变事件，输入或删除途中
6. click #点击监听

keydown和keyup事件组合示例：

#	姓名	操作
	Egon	上线 下线 停职
	Alex	上线 下线 停职
	Yuan	上线 下线 停职
	EvaJ	上线 下线 停职
	Gold	上线 下线 停职

按住shift键批量操作

按住shift键批量操作

　　hover事件示例：

hover事件

　　实时监听input输入值变化示例：

input值变化事件

2. 事件绑定的方式

1. .on( events [, selector ],function(){})
2. click(function(){…})
3. . on("事件名称", function(){…})

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

3.移除事件

1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

4.阻止后续事件执行

1. return false; // 常见阻止表单提交等

注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});

5.页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){
// 在这里写你的JS代码…
})

简写：

$(function(){
// 你在这里写你的代码
})

文档加载完绑定事件，并且阻止默认事件发生：

姓名 密码

登录校验示例

6. 事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

语法：

.on("事件名称", "选择器", function(){…})

特点：

1. 利用事件冒泡的特点
2. 基于一个已经存在的标签给未来的标签添加事件处理函数

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

自定义动画示例：　　

点赞特效简单示例

1.each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

010
120
230
340

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1"); // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

2. .data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k"); //移除元素上存放k对应的数据

示例：

模态框编辑的数据回填表格