鋒利的jQuery（5）事件和動畫

賈朋亮博客 2014-05-16

展開全文

1. 加載DOM

　　　　$(document).ready(function(){

　　　　　　//code

　　　　});

　　//簡寫

　　　　$(function(){

　　　　})

　　與window.onload的區(qū)別：jquery的ready函數(shù)在DOM樹加載完后即可執(zhí)行，而window.onload則必須等待網(wǎng)頁中所有元素加載完后才執(zhí)行。window.onload只能執(zhí)行一次，而ready可執(zhí)行多次。

　　　　window.onload=function(){

　　　　};

　　jquery中與window.onload等同的函數(shù)是：

　　　　$(window).load(function(){

　　　　});

2. 事件綁定：為某個元素綁定事件而完成相應(yīng)的功能。

　　bind(type,[,data],fn)

　　2.1 函數(shù)說明：

　　　　第一參數(shù)type是事件類型：可以是：click,dbclick,blur,focus,load,resize,scroll,unload,mouseup,mousedown,

　　　　mousemove,mouseenter,mouseout,mouseleave,changeselect,submit,keydown,keyup,keypress,error等,也可以是自定義事件。

　　　　第二個參數(shù)是可選參數(shù)：作為event.data屬性值傳遞給事件對象。

　　　　第三個參數(shù)是用來綁定的處理函數(shù)。

　　例如：$("#pannel h5.head).bind("click",function(){
　　　　　//code 為id=panel的div內(nèi)的且class=head的H5元素綁定click事件

　　　　　});

　　2.2. 簡寫事件綁定：

　　　　$("#panel h5.head").click(function(){

　　　　　　//code

　　　　});

3. 合成事件

　　3.1 hover方法：模擬鼠標懸停事件

　　　　eg:

　　　　$("#panel h5.head").hover(function(){

　　　　　　//code 鼠標劃過

　　　　},function(){

　　　　　　//code鼠標劃出

　　　　}

　　3.2 toggle()方法：用于模擬鼠標連續(xù)單擊事件 ;還可以用于切換的元素的可見狀態(tài)。

　　　　toggle(fn1,fn2,fn3,...)

4. 事件冒泡：網(wǎng)頁中存在嵌套元素，且其中的元素綁定了同一個事件，內(nèi)層嵌套元素觸發(fā)該事件，外層嵌套元素也會跟著觸發(fā)該事件，且順序為內(nèi)層到外層。

　　4.1 事件冒泡引發(fā)的問題：

　　　　4.1.1 使用事件對象

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

　　　　　　　　//...事件對象

　　　　　　});

　　　　4.1.2 停止冒泡事件：

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

　　　　　　　　event.stopPropagation();

　　　　　　　　//或者return false;

　　　　　　});

　　　　4.1.3 阻止默認行為：

　　　　　　$("element").bind("click",function(){

　　　　　　　　event.preventDefault();

　　　　　　　　//或者用：return false;

　　　　　　})

5. 事件對象的屬性：

　　5.1 event.type()方法：獲取到事件的類型：

　　　　$("a").click(function(event){

　　　　　　alert(event.type()); //獲取事件的類型，返回"click"

　　　　　　return false;

　　　　});

　　5.2 event.target()：獲取到觸發(fā)事件的元素

　　5.3 event.pageX()和event.pageY：獲取到光標相對與頁面的x坐標和y坐標。

　　5.4 event.which()：在鼠標單擊事件中獲取鼠標的左中右鍵；在鍵盤事件中獲取鍵盤的按鍵；

　　　　$("body").mousedown(function(event){

　　　　　　alert(event.which); //1=鼠標左鍵，2=鼠標中鍵，3=鼠標右鍵；

　　　　});

6. 移除事件

　　6.1 移除按鈕元素以前注冊的事件

　　　　$("#btn").bind("click",myfun1=function(){}.bind("click",myfun2=function(){});

　　　　$("#delAll").click(function(){

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

　　　　});

　　　6.2 移除按鈕元素其中的一個事件：

　　　　$("#del").click(function(){

　　　　　　$("#btn").unbind("click",myFun1);

　　　　})

7. 模擬操作：

　　7.1 常用模擬函數(shù)：trigger()方法，注意該方法應(yīng)用于綁定函數(shù)之后。

　　　　$("#btn").trigger("click"); // 用戶進入頁面后，就觸發(fā)click事件，而不需要用戶主動點擊。

　　　　簡寫：$("#btn").click();

　　7.2 觸發(fā)自定義事件：

　　　　$("#btn").bind("myClick",function(){

　　　　　　$("#test").append("<p>我的自定義事件.</p>");

　　　　});

　　　　觸發(fā)事件：

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

　　7.3 傳遞數(shù)據(jù)：

　　　　trigger("type"[,data])，第一個參數(shù)為事件類型，第二個參數(shù)為傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組形式傳遞。

　　　　$("#ben").bind("myClick",function(event,message1,message2){

　　　　　　$("#test").append("<p>+message1+message2+"</p>");

　　　　});

　　　　觸發(fā)事件：

　　　　$("#btn").trigger("myClick",["我的自定義”,"事件"]);

　　7.4 執(zhí)行默認操作：trigger()方法執(zhí)行后，會執(zhí)行瀏覽器的默認操作。

　　　　$("input").trigger("focus"); //不僅會觸發(fā)<input>元素綁定的focus事件，瀏覽器也會使<input>元素得到焦點

　　　　如果執(zhí)行觸發(fā)綁定的事件，而不想執(zhí)行瀏覽器的默認操作，可用:

　　　　$("input").triggerHandler("focus"); //不會得到焦點；

8. 其他用法：

　　8.1 綁定多個事件：

　　　　$("div").bind("mouseover mouseout",function(){

　　　　　　$(this).toggleClass("over");

　　　　});// 當光標滑入<div>元素時，該元素的class切換為”over"；當光標滑出<div>時切換為先前的值。等同與下面的代碼：

　　　　$("div).bind("mouseover",function(){

　　　　　　$(this).toggleClass("over");

　　　　}).bind("mouseout",function(){

　　　　　　$(this).toggleClass("over");

　　　　});

　　8.2 添加事件命名空間，便于管理。如刪除事件時，只需指定命名空間即可，而不存在命名空間的事件不受影響。

　　　　$("div").bind("click.plugin",function(){

　　　　　　$("body").append("<p>click事件</p>");

　　　　});bind("mouseover.plugin",function(){
　　　　　　$("body").append("<p>mouseover事件</p>");

　　　　});bind("dbclick",function(){

　　　　　　$("body").append("<p>dbclick事件</p>");

　　　　});

　　　　$("button").click(function(){

　　　　　　$("div").unbind(".plugin");

　　　　});

　　8.3 相同事件名稱，不同命名空間執(zhí)行方法。

　　　　$("div").bind("click",function(){

　　　　　　$("body").append("<p>click事件</p>");

　　　　}).bind("click.plugin",function(){

　　　　　　$("body").append("<p>click.plugin事件</p>");

　　　　});

　　　　$("button").click(function(){

　　　　　　$("div").trigger("click!"); //點擊<button>會觸發(fā)click事件，不會觸發(fā)click.plugin事件，trigger("click!")后面的感嘆號的作用時匹配不包含在命名空間中的click事　　　　　　　　　　　　//件。要觸發(fā)兩者，改成trigger("click")即可。

　　　　});

9. jQuery中的動畫：用jQuery做動畫要求要在標準模式下，否則可能會引起動畫抖動。標準模式即要求文件頭部包含如下的DTD定義：

　　<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　9.1 show()方法和hide()方法：同時修改元素的高度，寬度和不透明度。

　　　　$("element").show("slow"); //運行代碼后，元素將在600ms內(nèi)慢慢顯示出來。"normal"=400ms，"fast”=200ms，如果用時間作為參數(shù)就不需要加引號。

　　9.2 fadeIn()方法和fadeOut()方法:只改變元素的不透度。

　　9.3 slideUp()方法和slideDown()方法:只改變元素的高度。

　　9.4 自定義動畫 animate()

　　　　animate(params,speed,callback);

　　　　　　params:一個包含樣式屬性及值的映射，比如{property1:"value1",property2,"value2",...}

　　　　　　speed:速度參數(shù)，可選。

　　　　　　callback:在動畫完成后執(zhí)行的函數(shù)，可選。