[jQuery]事件和動(dòng)畫(huà)詳解

1. 事件

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了平安免費(fèi)建站歡迎大家使用！

 1.1 加載DOM

在頁(yè)面加載完畢后，瀏覽器會(huì)通過(guò)JavaScript為DOM元素添加事件。在JavaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法和window.onload方法有相似的功能，但是在執(zhí)行時(shí)機(jī)方面是有區(qū)別的。window.onload方法是在網(wǎng)頁(yè)中所有的元素完全加載到瀏覽器后才執(zhí)行，而$(document).ready()方法注冊(cè)的事件處理程序，在DOM完成就緒時(shí)就可以被調(diào)用。

由于在$(document).ready()方法內(nèi)注冊(cè)的事件，只要DOM就緒就會(huì)被執(zhí)行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。要解決這個(gè)問(wèn)題，可以使用jQuery中另一個(gè)關(guān)于頁(yè)面加載的方法load()方法。load()方法會(huì)在元素的onload事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給window對(duì)象，則會(huì)在所有內(nèi)容加載完畢后觸發(fā)，例如：

$(window).load(function(){
});

每次調(diào)用$(document).ready()方法都會(huì)在現(xiàn)有的行為上追加新的行為，這些行為函數(shù)會(huì)根據(jù)注冊(cè)的順序依次執(zhí)行。它也可以簡(jiǎn)寫(xiě)為：

$(function(){
});

另外，$(document)也可以簡(jiǎn)寫(xiě)為$()，例如：

$().ready(function(){
}); 

1.2 事件綁定

在文檔裝載完成后，如果要為元素綁定事件來(lái)完成某些操作，可以使用bind()方法來(lái)對(duì)匹配元素進(jìn)行特定事件的綁定，例如：

bind(type[,data],fn);

第一個(gè)參數(shù)是事件類型，包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

第二個(gè)參數(shù)是可選參數(shù)，作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象。

第三個(gè)參數(shù)則是用來(lái)綁定的處理函數(shù)。

例如：

$("#mydiv").bind("click",function(){
 $(this).next("div.content").show();
});

與ready()方法一樣，bind()方法也可以多次調(diào)用。像click、mouseover和mouseout這類事件，在程序中經(jīng)常用到，jQuery為此也提供了一套簡(jiǎn)寫(xiě)方法，例如：

$("#mydiv").mouseover(function(){
 $(this).next("div.content").show();
});

1.3 合成事件

jQuery有兩個(gè)合成事件：hover()方法和toggle()方法。hover()方法的語(yǔ)法結(jié)構(gòu)為：

hover(enter,leave);

hover()方法用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)光標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。

toggle(fn1,fn2,...fnN);

toggle()方法用于模擬鼠標(biāo)連續(xù)單擊事件，第一次單擊元素，觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次單擊同一個(gè)元素時(shí)，則觸發(fā)指定的第2個(gè)函數(shù)，以此類推，直到最后一個(gè)。

 1.4 事件冒泡

在頁(yè)面上可以有多個(gè)事件，也可以多個(gè)元素響應(yīng)同一個(gè)事件。由于IE-DOM和標(biāo)準(zhǔn)DOM實(shí)現(xiàn)事件對(duì)象的方式不同，在不同瀏覽器中獲取事件對(duì)象比較困難。jQuery進(jìn)行了相應(yīng)的擴(kuò)展和封裝，從而使在任何瀏覽器中都能輕松獲取事件對(duì)象，例如：

$("element").bind("click",function(event){
});

停止事件冒泡可以阻止事件中其他對(duì)象的事件處理函數(shù)被執(zhí)行，在jQuery中提供了stopPropagation()方法來(lái)停止事件冒泡，例如： 

$("span").bind("click",function(event){
 var txt = $("#msg").html() + "<p>click!</p>";
 $("#msg").html(txt);
 event.stopPropagation();
});

網(wǎng)頁(yè)中的元素有自己默認(rèn)的行為，例如單擊超鏈接后會(huì)跳轉(zhuǎn)等。在jQuery中，提供了preventDefault()方法來(lái)阻止元素的默認(rèn)行為，例如：

$("#button").bind("click",function(event){
 var txt = $("#msg").html() + "<p>click!</p>";
 $("#msg").html(txt);
 event.preventDefault();
});

如果想同時(shí)對(duì)事件對(duì)象停止冒泡和默認(rèn)行為，可以在事件處理函數(shù)中返回false。

 1.5 事件對(duì)象的屬性

jQuery在遵循W3C規(guī)范的情況下，對(duì)事件對(duì)象的常用屬性進(jìn)行了封裝，使事件處理在各瀏覽器下都可以正常運(yùn)行而不需要進(jìn)行瀏覽器類型判斷。常用的方法如下：

1) event.type(): 獲取到事件的類型。

2) event.preventDefault(): 阻止默認(rèn)的事件行為。

3) event.stopPropagation(): 阻止事件的冒泡。

4) event.target(): 獲取到觸發(fā)事件的元素。

5) event.relatedTarget(): 獲取事件發(fā)生的相關(guān)元素。

6) event.pageX()/event.pageY(): 獲取到光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)和y坐標(biāo)。

7) event.which(): 在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵。

8) event.metaKey(): 鍵盤(pán)事件中獲取<ctrl>鍵。

9) event.originalEvent(): 指向原始的事件對(duì)象。

 1.6 移除事件

unbind()方法可以用于刪除元素的事件，語(yǔ)法結(jié)構(gòu)如下：

unbind([type][,data]);

如果沒(méi)有參數(shù)，則刪除所有綁定的事件。如果提供了事件類型，則只刪除該類型的綁定事件。如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參婁和，則只有這個(gè)特定事件處理函數(shù)才會(huì)被刪除，例如：

$("#delAll").click()(
 $("#btn").unbind("click");
);

one()方法的結(jié)構(gòu)與bind()方法類似，使用方法也與bind()方法相，語(yǔ)法結(jié)構(gòu)如下：

one(type[,data],fn);

使用one()方法為元素幫定事件后，只在第一次觸發(fā)時(shí)執(zhí)行，之后毫無(wú)作用。

 1.7 模擬操作

有時(shí)需要通過(guò)模擬用戶操作，來(lái)達(dá)到單擊效果，可以使用trigger()方法完成，例如：

$("#btn").trigger("click");

也可以直接用簡(jiǎn)化寫(xiě)法click()來(lái)達(dá)到同樣的效果。

trigger(type[,data])方法有兩個(gè)參數(shù)，第二個(gè)參數(shù)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組形式傳遞。

trigger()方法觸發(fā)事件后，會(huì)執(zhí)行瀏覽器默認(rèn)操作，例如：

$("input").trigger("focus");

以上代碼不僅會(huì)觸發(fā)focus事件，也會(huì)使input元素本身得到焦點(diǎn)，如果不想執(zhí)行瀏覽器默認(rèn)操作，可以使用另一個(gè)類似的方法triggerHandler()方法。

 2. 動(dòng)畫(huà)

 2.1 show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的動(dòng)畫(huà)方法。為一個(gè)元素調(diào)用hide()方法，會(huì)將該元素的display樣式改為"none"，例如：

$("#mydiv").hide();

當(dāng)把元素隱藏后，可以使用show()方法將元素的display樣式設(shè)置為先前的顯示狀態(tài)，例如：

$("#mydiv").show();

show()方法可以指定一個(gè)速度參數(shù)，例如，指定一個(gè)速度關(guān)鍵字"slow"，例如：

$("#mydiv").show("slow");

運(yùn)行該代碼后，元素將在600毫秒內(nèi)慢慢顯示，其他的速度關(guān)鍵字還有"normal"和"fast"，不僅如此，還可以為顯示速度指定一個(gè)數(shù)字，單位是毫秒。

 2.2 fadeIn()方法和fadeOut()方法

與show()方法不同的時(shí)，fadeIn()和fadeOut()方法只改變?cè)氐牟煌该鞫?。fadeOut()方法會(huì)在指定時(shí)間內(nèi)降低元素的不透明度，直到元素完全消失。fadeIn()方法則相反，例如：

$("#mydiv").fadeOut();

2.3 slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只會(huì)改變?cè)氐母叨取Ｈ绻粋€(gè)元素的display屬性值為"none"，當(dāng)調(diào)用slideDown()方法時(shí)，這個(gè)元素將由上至下延伸顯示。slideUp()方法正好相反，元素將由下到上縮短隱藏，例如：

$("#mydiv").slideDown();

2.4 自定義動(dòng)畫(huà)方法animate()

如果需要采取一些高級(jí)的自定義動(dòng)畫(huà)來(lái)解決更多控制的問(wèn)題，可以使用animate()方法來(lái)自定義動(dòng)畫(huà)，語(yǔ)法結(jié)構(gòu)為：

animate(params,speed,callback);

params包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...}，speed是可選的速度參數(shù)，callback是在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，例如：

$("#mydiv").animate({left:"+=500px"},300);

"+="符號(hào)或"-="符號(hào)即表示在當(dāng)前位置累加或者累減。如果需要同時(shí)執(zhí)行多個(gè)動(dòng)畫(huà)，可以寫(xiě)如下代碼：

$("#mydiv").animate({left:"500px",height:"200px"},3000);

如果只想按順序執(zhí)行動(dòng)畫(huà)，只需把代碼拆開(kāi)即可，例如：

$("#mydiv").animate({left:"500px"},3000);
$("#mydiv").animate({height:"200px"},3000);

或者：

$("#mydiv").animate({left:"500px"},3000).animate({height:"200px"},3000);

2.5 停止動(dòng)畫(huà)和判斷是否處于動(dòng)畫(huà)狀態(tài)

很多時(shí)候需要停止匹配元素正在進(jìn)行的動(dòng)畫(huà)，需要使用stop()方法，語(yǔ)法結(jié)構(gòu)為：

stop([clearQueue][,gotoEnd]);

參數(shù)clearQueue和gotoEnd都是可選的參數(shù)，為Boolean值，clearQueue代表是否要清空未執(zhí)行完的動(dòng)畫(huà)隊(duì)列，gotoEnd代表是否直接將正在執(zhí)行的動(dòng)畫(huà)跳轉(zhuǎn)到末狀態(tài)。

在使用animate()方法的時(shí)候，要避免動(dòng)畫(huà)積累而導(dǎo)致的動(dòng)畫(huà)與用戶的行為不一致，解決方法是判斷元素是否正處于動(dòng)畫(huà)狀態(tài)，例如：

if(!$("#mydiv").is("animated")){
}

2.6 其他動(dòng)畫(huà)方法

jQuery中還有3個(gè)專門用于交互的動(dòng)畫(huà)方法：toggle(speed,[callback])，slideToggle(speed,[callback]),fadeTo(speed,opacity,[callback])。

toggle()方法可以切換元素的可見(jiàn)狀態(tài)，例如：

$("#mydiv").click(function(){
 $(this).next("div.content").toggle();
});

slideToggle()方法通過(guò)高度變化來(lái)切換匹配元素的可見(jiàn)性，例如：

$("#mydiv").click(function(){
 $(this).next("div.content").slideToggle();
});

fadeTo()方法可以把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值，例如：

$("#mydiv").click(function(){
 $(this).next("div.content").fadeTo(600,0.2);
});

總結(jié)

以上所述是小編給大家介紹的[jQuery] 事件和動(dòng)畫(huà)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

新聞名稱：[jQuery]事件和動(dòng)畫(huà)詳解
標(biāo)題來(lái)源：http://muchs.cn/article42/iidhec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)