之前講了這么多的原生JS，這次換換口味吧甥绿，講講曾經(jīng)風(fēng)靡一時的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('你點擊了按鈕洗出！');
});
相應(yīng)的取消綁定可使用unbind()方法。
3. on()
【jQuery對象】.on("【事件名】",【方法】)
上面例子中的JS代碼可以寫成下面這樣：
//JS
$('#btn').on("click",function(){
console.log('你點擊了按鈕图谷！');
});
相應(yīng)的取消綁定可使用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(){ // 這時候鼠標(biāo)移入按鈕或點擊按鈕都會執(zhí)行后面的方法
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('你移入了按鈕！');
}
});
