之前讲了这么多的原生JS，这次换换口味吧，讲讲曾经风靡一时的JS库——JQuery。
一、jQuery事件绑定的方法
1. 直接使用事件方法
【jQuery对象】.【事件名】(【方法】)
比如给一个按钮添加点击事件：
<!--HTML-->
<input type="button" id="btn" value="按钮" />
//JS
$('#btn').click(function(){
console.log('你点击了按钮！');
});
2. bind()
【jQuery对象】.bind("【事件名】",【方法】)
上面例子中的JS代码可以写成下面这样：
//JS
$('#btn').bind("click",function(){
console.log('你点击了按钮！');
});
相应的取消绑定可使用unbind()方法。
3. on()
【jQuery对象】.on("【事件名】",【方法】)
上面例子中的JS代码可以写成下面这样：
//JS
$('#btn').on("click",function(){
console.log('你点击了按钮！');
});
相应的取消绑定可使用off()方法。
需要注意的是，on()和off()是从jQuery1.7+版本才开始有的。
二、jQuery事件绑定的种类
1. 多个选择器绑定同一个事件
$("【选择器1】,【选择器2】").on("【事件名】",【方法】)
<!--HTML-->
<input type="button" id="btn1" value="按钮一" />
<input type="button" id="btn2" value="按钮二" />
//JS
$('#btn1,#btn2').on('click',function(){
console.log('你点击了按钮！');
});
2. 多个事件绑定同一个方法
【jQuery对象】.on("【事件名1】 【事件名2】",【方法】)
<!--HTML-->
<input type="button" id="btn" value="按钮" />
//JS
$('#btn').on('click mouseover',function(){ // 这时候鼠标移入按钮或点击按钮都会执行后面的方法
console.log('你点击了按钮！');
});
3. 多个事件绑定不同方法
【jQuery对象】.on({ "【事件名1】" :【方法1】, "【事件名2】" :【方法2】})
<!--HTML-->
<input type="button" id="btn" value="按钮" />
//JS
$('#btn').on({
'click': function(){
console.log('你点击了按钮！');
},
'mouseover': function(){
console.log('你移入了按钮！');
}
});
