11.58 事件
11.581 事件綁定方法與解綁
綁定事件：
//
綁定方式一：
$('.box1').click(
function
() {
alert(
'綁定方式一'
)
});
?
//
綁定方式二：
$('.box1').on("click",
function
() {
alert(
'綁定方式一'
)
});
?
//
綁定方式三：
$('.box1').bind('click',{'a':'b'}
function
(e) {
alert(
'綁定方式二'
);
console.log(e.data);
});
?
$(
'.box1').bind('mouseover mouseout',
function
() {
//
綁定多個事件做同一件事
console.log('綁定多個事件做同一件事'
)
});
$(
'.box1'
).bind({
'mouseup':
function
() {
console.log(
'mouseover'
);
},
'mousedown':
function
() {
console.log(
'mouseout'
);
}
});
解綁事件：
//
移除事件，unbind沒有參數(shù)則代表移除所有事件
setTimeout(
function
() {
$(
'.box1').unbind('mouseover'
);
},
3000
);
?
setTimeout(
function
() {
$(
'.box1'
).unbind();
},
10000
)
?
.off(
"click",
function
(){
xxxxx
})
11.582 綁定事件示例
點擊事件：click
//
click與dblclick只應(yīng)該存在一個，大多數(shù)都是單擊事件
$('.box1').click(
function
(event)
//
console.log(event.type); // event.type事件的類型為：click
console.log(event.target);
//
event.target指的是點擊的那個元素
})
$(
'.box1').dblclick(
function
(event) {
console.log(event.target);
//
event.target指的是點擊的那個元素
})
鼠標(biāo)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
$('.box1').mousedown(
function
(event) {
console.log(
'按照鼠標(biāo)左鍵不松手'
);
});
$(
'.box1').mouseup(
function
(event) {
console.log(
'按照鼠標(biāo)左鍵松手'
);
});
?
$(
'.box1').mousemove(
function
(event) {
console.log(
'移動鼠標(biāo)'
, event.pageX, event.pageY);
});
$(
'.box1').mouseover(
function
(event) {
console.log(
'元素以及該元素的子元素在鼠標(biāo)移入時都會觸發(fā),當(dāng)前的div是：'
, event.target.innerText);
});
?
$(
'.box1').mouseout(
function
(event) {
console.log(
'元素以及該元素的子元素在鼠標(biāo)離開時都會觸發(fā)，當(dāng)前的div是：'
, event.target.innerText);
});
$(
'.box1').mouseenter(
function
(event) {
console.log(
'元素以在鼠標(biāo)移入時都會觸發(fā)(與子元素?zé)o關(guān)),當(dāng)前的div是：'
, event.target.innerText);
});
$(
'.box1').mouseleave(
function
(event) {
console.log(
'元素以在鼠標(biāo)移入時都會觸發(fā)(與子元素?zé)o關(guān))，當(dāng)前的div是：'
, event.target.innerText);
});
對于input框：focus、blur、input
input能夠?qū)崟r檢測 textarea ， input:text ， input:password ， input:search 這幾個元素的內(nèi)容變化，但I(xiàn)E9以下版本不支持，需要使用IE特有的onpropertychange事件替代，使用jQuery庫的話直接使用on同時綁定這兩個事件即可
$('#inp').on("focus",
function
() {
console.log(
'鼠標(biāo)聚焦'
);
});
$(
'#inp').on("blur",
function
() {
console.log(
'鼠標(biāo)失去焦點'
);
});
//
當(dāng)input框的值發(fā)生變化時，實時觸發(fā)
$("#inp").on("input",
function
() {
console.log($(
this
).val());
})
$(
"#i1").on("input propertychange",
function
() {
alert($(
this
).val());
})
按鍵：keydown、keyup
$('#inp').keydown(
function
(e) {
console.log(e.keyCode);
});
$(window).on(
"keydown",
function
(e) {
//
獲取用戶按下那個按鍵
console.log(e.keyCode);
if
(e.keyCode === 16
){
flag
=
true
;
}
});
?
$(
'#inp').keyup(
function
(event) {
//
綁定一個按鍵抬起的事件
console.log('鍵盤按鍵彈起'
);
});
$(window).on(
"keyup",
function
(e) {
console.log(e.keyCode);
if
(e.keyCode === 16
){
flag
=
false
;
}
});
change:
//
表單事件change
$('#inp').change(
function
() {
console.log(
this
.value);
//
失去焦點時就會得到值
});
$(
'input[name=sex]').change(
function
(event) {
console.log(
this
.value);
});
$(
'#select').change(
function
() {
console.log(
this
.value);
});
選中checkbox框：select
//
表單事件select,CheckBox框被選中時觸發(fā)
$('#inp1').select(
function
() {
console.log(
this
.value);
});
$(
'#inp2').select(
function
() {
console.log(
this
.value);
});
提交事件：submit
//
表單事件submit
$('#form').submit(
function
(event) {
console.log($(
'input[name=user]'
).val());
console.log($(
'input[name=pwd]'
).val());
event.preventDefault();
});
hover:不能使用on綁定hover事件
//
hover事件
$(".father").hover(
//
鼠標(biāo)移到.father上時讓.son添加一個.show
function
() {
$(
this
).find(".son").addClass("show"
);
},
function
() {
//
鼠標(biāo)移出.father上時讓.son移除一個.show
$(
this
).find(".son").removeClass("show"
);
})
11.583 事件冒泡應(yīng)用之事件委托
添加的事件不能用于動態(tài)增加事件,例如之前我們在做表格的增刪改時，每新增一行內(nèi)容都需要重新綁定事件，基于事件委托就可以解決該問題
事件委托是通過事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件
$('ul').on('mouseover','li',
function
(e) {
$(e.target).css(
'background-color','#ddd').siblings().css('background-color','white'
);
//
e.stopPropagation();
return
false
;
})
?
$(
"table").on("click", ".delete",
function
() {
//
刪除按鈕綁定的事件
})
11.584 頁面加載完成執(zhí)行
$(document).ready(
function
(){
在這里寫你的JS代碼...
})
?
簡寫:
$(
function
(){
你在這里寫你的代碼
})
與window.onload()函數(shù)的區(qū)別：window.onload()函數(shù)有覆蓋現(xiàn)象，必須等待著圖片資源加載完成之后才能調(diào)用，且只能使用一次；jQuery的這個入口函數(shù)沒有函數(shù)覆蓋現(xiàn)象，文檔加載完成之后就可以調(diào)用（建議使用此函數(shù)），可以使用多次
11.59 動畫效果
1
、show() 顯示隱藏的匹配元素 語法：show(speed,callback)
參數(shù)：
speed：三種預(yù)定速度之一的字符串(
'slow','normal','fast')或表示動畫時長的毫秒值（如：1000毫秒==
1秒）
callback:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次
2
、hide
hide(speed,callback)跟show使用方法類似，表示隱藏顯示的元素?？梢酝ㄟ^show（）和hide（）方法，來動態(tài)控制元素的顯示隱藏
3
、toggle
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
?
1
、slideDown 通過高度變化（向下增大）來到動態(tài)地顯示所有匹配的元素，在顯示完成后觸發(fā)一個回調(diào)函數(shù)用法和參數(shù)跟上面類似
2
、slideUp 通過高度變化（向上減?。﹣韯討B(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調(diào)函數(shù)。用法和參數(shù)跟上面類似
3
、slideToggle 通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個回調(diào)函數(shù)跟toggle用法類似
?
1、fadeIn/fadeOut 通過不透明度的變化來實現(xiàn)所有匹配元素的淡入/
淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化
2
、fadeTo 把所有匹配元素的不透明度以漸進(jìn)方式調(diào)整到指定的不透明度，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù)。這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。
3、fadeToggle 通過不透明度的變化來開關(guān)所有匹配元素的淡入和淡出效果，并在動畫完成后可選地觸發(fā)一個回調(diào)函數(shù),這個動畫只調(diào)整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發(fā)生變化。實現(xiàn)淡入淡出的效果就是使用此方
animate、stop、delay
1
、animate 概念：用于創(chuàng)建自定義動畫的函數(shù) 語法：animate(params,[speed],[fn])
參數(shù)：
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合
speed:三種預(yù)定速度之一的字符串(
"slow","normal", or "fast")或表示動畫時長的毫秒數(shù)值(如：1000
)
fn:在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。
?
2
、stop 概念：停止所有在指定元素上正在運行的動畫 語法：stop([clearQueue],[jumpToEnd])
參數(shù)：
clearQueue:如果設(shè)置成true，則清空隊列?？梢粤⒓唇Y(jié)束動畫。
gotoEnd:讓當(dāng)前正在執(zhí)行的動畫立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等
?
3、delay 概念：用來做延遲的操作 語法：delay(1000)，一秒之后做后面的操作
11.510 .each()
//
為每一個li標(biāo)簽添加class="c1"
$("li").each(
function
(){
$(
this
).addClass("c1"
);
});
?
//
使用內(nèi)置$.each()進(jìn)行迭代
var
arry=[11,22,33,44
];
$.each(arry,
function
(k,v){
console.log(k,v);
});
注意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式迭代的過程。當(dāng)這種情況發(fā)生時，它通常不需要顯式地循環(huán)的 .each()方法
也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：
$("li").addClass("c1");
//
對所有標(biāo)簽做統(tǒng)一操作
終止each循環(huán)
return
false
；
11.511 .data()
.data(key, value): 在匹配的元素上存儲任意相關(guān)數(shù)據(jù)/保存一些狀態(tài)。
$("div").data("k",100);
//
給所有div標(biāo)簽都保存一個名為k，值為100
.data(key): 返回匹配的元素集合中的第一個元素的給定名稱的數(shù)據(jù)存儲的值
$("div").data("k");
//
返回第一個div標(biāo)簽中保存的"k"的值 100
.removeData(key): 移除存放在元素上的數(shù)據(jù)，不加key參數(shù)表示移除所有保存的數(shù)據(jù)
$("div").removeData("k");
//
移除元素上存放k對應(yīng)的數(shù)據(jù)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
