第4章，jQuery中的事件和動畫註意：使用的jQuery版本為1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法，jQuery中使用$(document).ready()方法。 1、執行時機 window.onload方法在網頁所有元素都載入完畢之後才 ...

第4章，jQuery中的事件和動畫

註意：使用的jQuery版本為1.7.1

jQuery中的事件

JavaScript中通常使用window.onload方法，jQuery中使用$(document).ready()方法。 1、執行時機 window.onload方法在網頁所有元素都載入完畢之後才執行，$(document).ready()方法在DOM完全就緒就可以被調用由於$(document).ready()方法內註冊事件，只要DOM就緒就會被執行，因此有可能此時元素的關聯文件還未下載完，例如圖片的寬高可能無效。為解決此問題，使用jQuery另一個方法-----load()方法。load()方法會在元素的onload事件綁定一個處理函數。

$(window).load(function(){
     //編寫代碼
});

等價於：

window.onload = function(){
     //編寫代碼
};

2、多次使用 windows.onload()方法不能保存多個函數引用，而$(document).ready()可以 3、簡寫形式

$(document).ready(function(){
     //編寫代碼
});

簡寫：

$(function(){
     //編寫代碼
});

$(document)也可以簡寫為$()，當$()不帶參數時，預設參數就是document，因此還可以簡寫：

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

3種方式都是一樣的功能

事件綁定

使用bind()方法來對匹配元素進行特定事件綁定，調用格式：

bind(type [,datd] ,fn);

第一個參數是事件類型，包括：blur、focus、load、resize、scroll等等，當然也可以是自定義名稱第二個參數是可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象第三個參數則是用來綁定的處理函數使用：

$("#panel h5.head").bind("click",function(){
     // coding
});

合成事件

jQuery有兩個合成事件---hover()、toggle()，類似ready()，hover()和toggle()都是jQuery自定義方法 1、hover()方法 hover(enter,leave) 用於模擬游標懸停事件，當游標移動到元素上，觸髮指定的第一個函數，移出元素，觸髮指定的第二個函數 2、toggle()方法 toggle(fn1,fn2,fn3.....)，在jQuery1.9被移除用於模擬滑鼠連續點擊事件，第1次點擊觸發第一個函數，第2次點擊觸發第二個函數，第3次點擊觸發第三個，依次類推，重覆調用

事件冒泡

停止事件冒泡 使用event.stopPropagation()可以停止事件冒泡 阻止預設行為 網頁中的元素有自己的預設行為，例如點擊超鏈接會跳轉、單擊提交按鈕，表單會提交，有時需阻止事件預設行為 jQuery中提供了preventDefault()方法來阻止預設行為 event.preventDefault() 註：若想對事件對象停止冒泡和預設行為，可以在事件處理函數中返回false，這是對在事件對象上同時調用stopPropagation和preventDefault的一種簡寫方式

事件對象屬性

1、event.type，獲取事件的類型 2、event.preventDefault()，阻止預設行為 3、event.stopPropagation()，阻止事件冒泡 4、event.target，獲取觸發事件的元素 5、event.relatedTarget，在標準DOM中，mouseout和mouseout所發生的元素可以通過event.target來訪問，相關元素可以通過event.relatedTarget訪問 6、event.pageX和event.pageY，用於獲取游標相對於頁面的x坐標和y坐標，若頁面有滾動條，還要加上滾動條的寬高 7、event.which，在滑鼠事件中獲取滑鼠的左（1）、中（2）、右鍵（3），在鍵盤事件中獲取鍵盤的按鍵 8、event.metaKey，鍵盤事件中獲取<ctrl>按鍵更多屬性訪問：http://docs.jquery.com/Events/jQuery.Event

移除事件

1、移除按鈕元素上以前註冊的事件使用unbind()方法，語法結構：

unbind([type],[data]);

第一個參數是事件類型，第二個參數是要移除的函數（1）若沒有參數，刪除所有綁定事件（2）若提供了事件類型作為參數，則只刪除該類型的綁定事件（3）若都傳遞，則只有這個特定的事件處理函數會被刪除註：對於只需要觸發一次，之後就解綁的情況，jQuery提供了one()方法，可以為元素綁定處理函數，觸發一次之後，立即刪除 one()方法的結構與bind()方法類似，使用方法也與bind()方法類似，語法結構：

one(type [,data] ,fn);

模擬操作

1、常用模擬

使用trigger()方法完成模擬操作：

$("#btn").trigger("click");     // 觸發id為btn的click事件
// 也可以簡化：
$("#btn").click();

2、觸發自定義事件

trigger()方法不僅可觸發瀏覽器支持的具有相同名稱的事件，也可以觸發自定義名稱的事件例：

$('#btn').bind("myClick",function(){
    $('#test').append("<p>我的自定義事件</p>");
});
$('#btn').trigger("myClick");

3、傳遞數據

$('#btn').bind("myClick",function(event,message1,message2){
    $('#test').append("<p>"+message1+message2+"</p>");
});
$('#btn').trigger("myClick",["我的自定義","事件"]);

4、執行預設操作

trigger()方法觸發事件後，還會執行瀏覽器預設操作

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

不僅會觸發綁定在input上的事件，也會使input元素獲得焦點使用triggerHandler()方法可以只觸發事件，而不執行瀏覽器預設操作

$('input').triggerHandler("focus");

只會觸發綁定事件，不會是input元素獲得焦點

其他用法

1、綁定多個事件類型

$(function(){
     $("div").bind("mouseout mouseover",function(){
          //do something 
     });
};

2、添加事件命名空間，便於管理

$(function(){
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("mouseover.plugin",function(){
        $('body').append("<p>mouseover事件</p>");
    });
    $('div').bind("dbclick",function(){
        $('body').append("<p>dbclick事件</p>");
    });
    $('button').click(function(){
        $('div').unbind(".plugin");
    });
});

在所綁定的事件後面添加命名空間，刪除時只需要指定命名空間即可，單擊<button>後，plugin的命名空間被刪除，而不再plugin空間中的dbclick事件依然存在

3、相同事件名稱，不同命名空間執行方法

$(function(){
    $('div').bind("click",function(){
        $('body').append("<p>click事件</p>");
    });
    $('div').bind("click.plugin",function(){
        $('body').append("<p>click.plugin事件</p>");
    });
    $('button').click(function(){
        $('div').trigger("click!"); //註意感嘆號
    });
});

單擊<div>元素後，會同時觸發click事件和click.plugin事件，若只單擊<button>則只觸發click事件，不觸發click.plugin事件，註意trigger("click!")後面的感嘆號的作用是匹配所有不包含命名空間中的click方法若兩者都要觸發，改為如下代碼：

$("div").trigger("click");

jQuery中的動畫

1、show()方法和hide()方法 （1）show()方法和hide()方法調用hide()方法會將該元素的display樣式改為“none” 元素隱藏後可以使用show()方法將元素的display樣式設置為先前的顯示狀態（2）show()方法和hide()方法讓元素動起來希望調用show()方法時元素慢慢地顯示出來，可以為show()方法指定一個速度參數，例如，速度關鍵字“slow”

$(“element”).show("slow");

元素會在600ms內慢慢顯示，還有normal（400ms），fast（200ms），還可以指定一個數字（單位是毫秒）

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().show("slow");
    },function(){
        $(this).next().hide(1000);
    });
});

2、fadeIn()方法和fadeOut()方法 fadeIn(),fadeOut()只改變元素的不透明度，fadeOut()會在指定的時間內降低元素的不透明度，直至元素完全消失（display:none），fadeIn()相反。

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().fadeOut();
    },function(){
        $(this).next().fadeIn();
    });
});

也可以使用關鍵字和指定時間參數，單位毫秒 3、slideUp()方法和slideDown()方法 這兩個方法只會改變元素的高度，若一個元素的display為none，slideDown()會將這個元素自上而下延伸顯示，slideUp()正好相反

$(function(){
    $("#panel h5.head").toggle(function(){
        $(this).next().slideDown();
    },function(){
        $(this).next().slideUp();
    });
});

一樣可以使用關鍵字和指定時間參數，單位毫秒

自定義動畫方法animate()

animate(params, speed, callback);

（1）params：一個包含樣式屬性及值的映射，例：{property:"value",property:"value1",....} （2）speed：速度參數，可選（3）callback：動畫完成時執行的函數，可選 1、自定義簡單動畫

<div id="panels"></div>

#panels{
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #0050d0;
    background: #96e555;
    cursor: pointer;
}

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
    });
});

三秒之內，div右移500px，只會移動一次 2、累加、累減動畫

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"+=500px"},3000);
    });
});

3、多重動畫（1）同時執行多個動畫

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px",width:"200px",height:"200px"},3000);
    });
});

這是同時執行的動畫（2）按順序執行多個動畫把多個動畫拆開即可

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000);
        $(this).animate({width:"200px"},3000);
        $(this).animate({height:"200px"},3000);
    });
});

鏈式寫法：

$(function(){
    $("#panels").click(function(){
        $(this).animate({left:"500px"},3000)
                .animate({width:"200px"},3000)
                .animate({height:"200px"},3000);
    });
});

4、綜合動畫

$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px",width:"200px"},3000)
                .fadeOut("slow");
    });
});

5、動畫回調函數若想在最後完成時改變CSS樣式，而不是淡出，則需要使用回調函數，而不是將css()方法寫在fadeOut()方法的位置，因為css()方法並不會加入動畫隊列

$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .animate({top:"200px",width:"200px"},3000,function(){
                    $(this).css("border","5px solid blue");
                });
    });
});

註：callback回調函數適合jQuery的所有動畫效果

停止動畫和判斷是否處於動畫狀態

1、停止元素的動畫 使用stop()方法

stop([clearQueue],[gotoEnd]);

參數均為可選參數，為boolean值 clearQueue表示是否清空動畫隊列，gotoEnd表示直接將正在執行的動畫跳轉到末狀態如果直接使用stop()方法，則會立即停止正在執行的動畫，若還有動畫等待執行，則以當前狀態繼續執行下一個動畫 2、判斷元素是否處在動畫狀態

if(!$("element").is(":animate")){
    //do something
}

3、延遲動畫 使用delay()方法可以對動畫進行延遲操作

$(function(){
    $("#panels").css("opacity","0.5");//設置不透明度
    $("#panels").click(function(){
        $(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
                .delay(1000)     // 延遲的是下一個動畫
                .animate({top:"200px",width:"200px"},3000);
    });
});

其他動畫方法

1、toggle(speed,[callback])方法 2、slideToggle(speed,[easing],[callback]); 3、fadeTo(speed,opacity,[callback]); 4、fadeToggle(speed,[easing],[callback]); 1、toggle() 可切換元素的可見狀態

$("#panel h5.head").click(function(){
    $(this).next().toggle();
});