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

1、jQuery中的事件：

　　一、加載DOM：

　　　　jQuery：$(document).ready();

　　　　JavaScript:window.onload();

　　　　$(window).load(function(){

　　　　})　　等價於

　　　　window.onload = function(){}

　　簡寫方式：

　　（1）$(document).ready(functon(){})

　　（2）$().ready(functon(){})

　　（3）$(function(){})

　　二、事件綁定：

　　　　bind();

　　三、合成事件：

　　（1）hover() ：用於模擬光標懸停事件。

　　（2）toggle() ：用於模擬鼠標連續單擊事件。另外一做用，切換元素的可見狀態。

　　四、事件冒泡：

　　　　event.stopPropagation();　　//中止事件冒泡

　　　　event.preventDefault();　　//阻止默認行爲

　　　　改寫爲：

　　　　return false;

　　　事件捕獲：

　　　　jQuery不支持事件捕獲，須要使用JavaScrip原生實現。

　　五、事件對象的屬性：

　　（1）event.type

　　（2）event.stopPropagation();

　　（3）event.preventDefault();

　　（4）event.target

　　（5）event.relatedTarget

　　（6）event.pageX、event.pageY

　　（7）event.which

　　（8）event.metaKEY

　　六、移除事件：

　　　　unbind();

　　　　one();

　　七、模擬操做：

　　　　trigger(type,[data]);　　//參數：類型、傳遞的數據

　　　　$("btn").trigger("click");　　簡化寫法：

　　　　$("btn").click();

　　　　注意：經常使用模擬、觸發自定義事件、傳遞數據、具備執行默認操做的功能，例如：

　　　　　　   $("input".trigger("focus");　　//觸發元素綁定的focus事件，也會使input元素自己獲得焦點（瀏覽器的默認操做）

　　　　　　  triggerHandler() ：只觸發綁定的focus事件，不執行瀏覽的默認操做。

　　八、其它用法：

　　　　bind();

　　　　（1）綁定多個事件類型。

　　　　（2）添加事件命名空間，便於管理。

　　　　（3）相同事件名稱，不一樣命名空間執行方法，trigger("click!");。

2、jQuery中的動畫：

　　（1）show();　　//同時修改元素的多個樣式屬性，高度、寬度、不透明度。

　　　　　　將元素的display樣式設置爲先前的顯示狀態（block 或 inline，或其餘除了 none 以外的值）

　　　　　　.show("slow") ：元素將在600毫秒內慢慢的顯示出來。其它的關鍵字還有 normal 和 fast（長度分別爲400毫秒和200毫秒），還能夠指定一個數字，單位是毫　　　　　　　秒。方法 hide();也是適用的。show(600)方法會從上到下增大內容的高度，從左到右增大內容的寬度，同時增長內容的不透明度，直到內容徹底顯示。

　　（2）hide();

　　　　　　將元素設置css樣式，display/none，等價於，.css("display","none")

 

　　（3）fadeIn();　　//改變元素的不透明度。增長不透明度。

　　（4）fadeOut　　//在指定的時間內下降元素的不透明度，直到元素徹底消失（display:none）。

 

　　（5）slideUp();　　//改變元素的高度。元素又下到上縮短隱藏。　　

　　（6）slideDown();　　//若是一個元素的display屬性爲none，調用該方法，這個元素將從上至下延伸顯示

　　注意：jQuery中的任何動畫效果，均可以指定3種速度參數，即 slow 、normal 和 fast（時間分別是0.6秒、0.4秒、0.2秒），當使用速度關鍵字時要加引號，例如：show("slow");若是用數字做爲時間的參數，不須要加引號，單位是毫秒，例如：show(1000);。

 

二、自定義動畫方法：

　　animate();

　　//簡單動畫、累加累減動畫、多重動畫（[1]、同時執行多個動畫，[2]、按順序執行多個動畫，動畫隊列。）、綜合動畫。

三、動畫回調函數：

　　回調函數適用於jQuery中全部的動畫效果方法。

四、中止動畫和判斷是否處於動畫狀態：

　　（1）中止元素的動畫：

　　　　stop([clearQueue],[gotoEnd]);

　　　　　　參數clearQueue和gotoEnd都是可選參數，爲Boolean值（true或false）。

　　　　　　參數clearQueue表明是否要狀況未執行完的動畫隊列。

　　　　　　參數gotoEnd表明是否直接將正在執行的動畫跳轉到末狀態。

　　（2）判斷元素是否處於動畫狀態：

　　　　$("element").is(":animate");

　　（3）延遲動畫：

　　　　delay();

五、其餘動畫方法：

　　（1）toggle(); ：切換元素的可見狀態。

　　（2）slideToggle(); ：經過高度變化來切換匹配元素的可見性。只調整元素的高度。

　　（3）faseTo(); ：把元素的不透明度以漸進方式調整到指定的值。只調整元素的不透明度。

　　（4）fadeToggle(); ：經過不透明度變化來切換匹配元素的可見性。只調整元素的不透明度。

六、動畫方法歸納：

　　改變樣式屬性：

方法名	說明
hide() 和 show()	同時修改多個樣式屬性，即高度、寬度、不透明度
fadeIn() 和 fadeOut()	只改變不透明度
slideUp() 和 slideDown()	只改變高度
fadeTo()	只改變不透明度
toggle()	用來代替hide()和show()方法，因此會同時修改多個樣式屬性，即高度、寬度和不透明度
slideToggle()	用來代替slideUp() 和 slideDown()，因此只能改變高度
fadeToggle()	用來代替fadeIn() 和 fadeOut()方法，因此只能改變不透明度

　　　　　　　　　特別注意：

animate()

自定義動畫方法，能夠用它代替因此的動畫方法