jQuery 4 事件和動畫

一．事件

具體事件	描述
滑鼠事件
click()	觸發、或将函數綁定到指定元素的單擊事件
dblclick()	觸發、或将函數綁定到指定元素的輕按兩下事件
focus()	觸發、或将函數綁定到指定元素的獲得焦點事件
blur()	觸發、或将函數綁定到指定元素的失去焦點事件
mousedown()	觸發、或将函數綁定到指定元素的按下滑鼠按鈕事件
mouseup()	觸發、或将函數綁定到指定元素的松開滑鼠按鈕事件
mousemove()	觸發、或将函數綁定到指定元素的指針移動事件
mouseenter()	觸發、或将函數綁定到指定元素的指針進入元素事件
mouseleave()	觸發、或将函數綁定到指定元素的指針離開元素事件，常常與mouseenter()共同使用
mouseover()	觸發、或将函數綁定到指定元素的指針位于上方事件
mouseout()	觸發、或将函數綁定到指定元素的指針移開事件，常常與mouseover()共同使用
mouseenter，mouseleave與mouseover，moseout的差別： mouseenter，mouseleave：隻有在滑鼠指針進入/離開被選元素時，才會觸發 mouseover，moseout：滑鼠指針位于之上/移開被選元素及其包含元素，都會觸發
鍵盤事件
keydown()	觸發、或将函數綁定到指定元素的按下鍵盤按鈕事件
keyup()	觸發、或将函數綁定到指定元素的松開鍵盤按鈕事件
keypress()	觸發、或将函數綁定到指定元素的按下鍵盤按鈕事件
與 keypress 事件相關的事件順序： 1.keydown -鍵按下的過程 2.keypress - 鍵被按下 3.keyup -鍵被松開 keypress 事件與 keydown事件類似。當按鈕被按下時發生該事件。然而，keypress事件不會觸發所有的鍵（比如 ALT、CTRL、SHIFT、ESC）。請使用keydown()方法來檢查這些鍵。
表單事件
focus()	觸發、或将函數綁定到指定元素的獲得焦點事件
blur()	觸發、或将函數綁定到指定元素的失去焦點事件
change()	觸發、或将函數綁定到指定元素的 change 事件元素的值發生改變時，會發生 change 事件（僅适用于表單字段）。該事件僅适用于text，以及textarea和select元素。
select()	觸發、或将函數綁定到指定元素的 select 事件當 textarea 或text類型的input元素中的文本被選擇（标記）時，會發生select事件
submit()	觸發、或将函數綁定到指定元素的 submit 事件。當送出表單時，會發生 submit 事件。該事件隻适用于<form>元素。 <form>···<input type="submit" value="送出"></form> $("form").submit(function(){···});
出錯事件
error()	觸發、或将函數綁定到指定元素的 error 事件. 當元素遇到錯誤（沒有正确載入）時，發生 error 事件。
文檔/視窗事件
ready()	文檔就緒事件（當 HTML 文檔就緒可用時）
load()	觸發、或将函數綁定到指定元素的 load 事件。指定的元素已加載時，會發生 load 事件
unload()	觸發、或将函數綁定到指定元素的 unload 事件當發生以下情況下，會觸發 unload 事件： ·點選某個離開頁面的連結 ·在位址欄中鍵入了新的 URL ·使用前進或後退按鈕 ·關閉浏覽器視窗 ·重新加載頁面
resize()	觸發、或将函數綁定到指定元素的 resize 事件。當調整浏覽器視窗大小時，發生 resize 事件。
scroll()	觸發、或将函數綁定到指定元素的 scroll 事件。當使用者滾動指定的元素時，會發生 scroll 事件。
操作事件	描述
event事件
event.preventDefault()	阻止事件的預設動作。
event.isDefaultPrevented()	傳回 event 對象上是否調用了event.preventDefault()。
event.pageX	相對于文檔左邊緣的滑鼠位置。
event.pageY	相對于文檔上邊緣的滑鼠位置。
event.result	包含由被指定事件觸發的事件處理器傳回的最後一個值。
event.timeStamp	該屬性傳回從 1970 年1月1 日到事件發生時的毫秒數。
event.target	觸發該事件的 DOM 元素。
event.type	描述事件的類型。
event.which	訓示按了哪個鍵或按鈕。
其他事件
bind()	向比對元素附加一個或更多事件處理器
unbind()	從比對元素移除一個被添加的事件處理器
delegate()	向比對元素的目前或未來的子元素附加一個或多個事件處理器 $(selector).delegate(childSelector,event,data,function)
undelegate()	删除由 delegate() 方法添加的一個或多個事件處理程式。
one()	向比對元素添加事件處理器。每個元素隻能觸發一次該處理器。 $("p").one("click",function(){});
hover()	模拟光标懸停事件，光标移動到元素上，觸發第1個函數，光标移出元素時，觸發第2個函數
toggle()	綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。
trigger()	觸發()内的事件，比如：$("button").trigger("click");模拟點選了button按鈕，可簡寫為$("button").click();
triggerHandler()	觸發被選元素的指定事件類型。但不會執行浏覽器預設動作，也不會産生事件冒泡。且隻影響第一個比對元素
live()	為目前或未來的比對元素添加一個或多個事件處理器
die()	移除所有通過 live() 函數添加的事件處理程式。

1.了解事件

JavaScript和HTML之間的互動是通過使用者和浏覽器操作頁面時引發的事件來處理的。當文檔或者他的某些元素發生變化時，浏覽器會自動生成一個事件。例如：當浏覽器裝載完一個文檔，或使用者點選某個按鈕，都會生成事件。

2.加載DOM

當浏覽器頁面加載完畢，浏覽器會通過JavaScript為DOM元素加載事件。正常JavaScript代碼中，通常使用window.onload方法。在jQuery中使用$(document).ready()方法。

二者差別：

window.onload	$(document).ready()
執行時機	必須網頁所有内容都加載完畢(包括圖檔)才能執行	網頁DOM結夠繪制完畢就執行，可能DOM内容(圖檔，文字等)還沒加載完畢
編寫個數	隻能有一個 window.onload = function(){};	可以有多個 $(document).ready(function(){···}); $(document).ready(function(){···});
簡寫	沒有簡寫	$().ready( function(){···} ); 或$( function(){···} );

3.jQuery 名稱沖突

jQuery 使用 $符号作為jQuery的簡介方式。

某些其他 JavaScript 庫中的函數（比如 Prototype）同樣使用$符号。

jQuery 使用名為 noConflict()的方法來解決該問題。

var jq=jQuery.noConflict(); //幫助您使用自己的名稱（比如 jq）來代替 $ 符号。

4.單獨檔案中的函數

如果您的網站包含許多頁面，并且您希望您的 jQuery 函數易于維護，那麼請把您的 jQuery 函數放到獨立的.js檔案中。

當我們在教程中示範 jQuery 時，會将函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的檔案中會更好，就像這樣（通過src屬性來引用檔案）：

執行個體

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

5.jQuery 是為處理 HTML事件而特别設計的，遵循以下原則，使代碼恰當且更易維護

·把所有 jQuery 代碼置于事件處理函數中

·把所有事件處理函數置于文檔就緒事件處理器中

·把 jQuery 代碼置于單獨的.js檔案中

·如果存在名稱沖突，則重命名 jQuery 庫

6.綁定事件

①格式：bind( "type" , [data ,] fn);

參數：

type為事件類型，包括上面的具體事件click、dblclick、focus、blur、mousedown、mouseup、mousemove、mouseenter、mouseleave、mouseover、mouseout、keydown、keyup、keypress、change、select、submit、error、load、unload、resize、scroll。

data為可選參數，作為event.data屬性值傳遞給事件對象的額外資料對象

fn為用于綁定的處理函數

②使用：

//綁定一個事件
$("button").bind("click",function(){
  $("p").slideToggle();
});
//改變綁定對象
$("button").bind("mouseenter",function(){  //綁定事件mouseenter
  $("p").show();
});
$("button").bind("mouseleave",function(){  //修改為綁定事件mouseleave
  $("p").hide();
});
//綁定多個事件，格式：$(selector).bind("event1 event2" , function{···});
$("button").bind( "click mouseover" , function(){
    $("p").slideToggle();
});
//綁定多個事件，格式：$(selector).bind("event" , function{···}).bind("event" , function{···})
$("button").bind( "click" , function(){
    $("p").slideToggle();
  }) .bind("mouseover" , function(){
    $("body").css("background-color","red");
  }) .bind("mouseout" , function(){
    $("body").css("background-color","#FFFFFF");
});
//綁定多個事件，格式：$(selector).bind({event:function, event:function, ···})
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});
//添加事件命名空間
$("div").bind("click.plugin" , function(){});
$("div").bind("mouseover.plugin" , function(){});
$("button").click(function(){
  $("div").unbind(".plugin"); //"plugin"命名空間被删除，在其中的click mouseover也被删除
  $("div").unbind("click").unbind("mouseover");  //與上面效果相同
});

③簡寫：

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

可以簡寫為：$("button").click(function(){});

7.合成事件

jQuery有兩個合成事件，hover()和toggle()。

①hover()

模拟光标懸停事件，光标移動到元素上，觸發第1個函數，光标移出元素時，觸發第2個函數

格式：hover(enterfn , leavefn);

使用：

$("button").hover(function(){
  $("p").show();
},function(){
  $("p").hide();
});

②toggle() ['tɑɡl]開關，切換

模拟滑鼠連續單擊事件，第1次單擊，觸發fn1；···第n次單擊，觸發fnN；第n+1次單擊，觸發fn1;···

格式：toggle(fn1 , fn2 , fn3 ···);

使用：

$("button").toggle(function(){
  $("p").show();
},function(){
  $("p").hide();
});

8.事件冒泡

①什麼是冒泡

當存在嵌套元素，且這些元素被綁定了同一事件時，當内部元素被觸發時，外部元素也被觸發。這時會按照從内到外的順序響應事件，成為冒泡。

例如：

<body>
  <div>
  外層div元素
<span>内層span元素</span>
  外層div元素
  </div>
</body>
$("body").click(function(){alert("body元素被點選")});
$("div").click(function(){alert("div元素被點選")});
$("span").click(function(){alert("span元素被點選")});

當點選span元素時，div和body的事件也會觸發，click事件按照以下順序“冒泡”：

1<span>

2<div>

3<body>

②冒泡引發的問題

比如上文，我們不想當點選span時，div和body的事件被觸發。jQuery中提供了stopPropagation()方法來停止冒泡事件。

解決方法：

$("span").click(function(event){ //event事件對象

alert("span元素被點選")

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

});

$("div").click(function(event){ //event事件對象

alert("div元素被點選")

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

});

9.移除事件

格式：$(selector).unbind(event,function)

event	可選。規定删除元素的一個或多個事件，由空格分隔多個事件值。
function	可選。規定從元素的指定事件取消綁定的函數名。

例如：

<div id="text"></div>
<button id="btn1">bind</button>
<button id="btn2">unbind</button>
 
$("#btn1").bind("click",fn1 = function(){
  $("#text").append("<p>我的綁定函數1</p>");
}).bind("click",fn2 = function(){
  $("#text").append("<p>我的綁定函數2</p>");
}).bind("click",fn3 = function(){
  $("#text").append("<p>我的綁定函數3</p>");
});
 
$("#btn2").click(function(){ $("#btn1").unbind() });   //删除所有事件
$("#btn2").click(function(){ $("#btn1").unbind("click") });   //删除所有click事件
$("#btn2").click(function(){ $("#btn1").unbind("click",fn1) });   //删除click且函數名fn1的事件

二．動畫

方法

描述

顯示和隐藏(上下滑動且漸變透明度)

适用于通過 jQuery 隐藏的元素，或display:none的元素（但不适用于visibility:hidden的元素）

hide()

hide([speed,] [callback]);

隐藏被選的元素

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為0

callback可選，show函數執行完之後，要執行的函數。

show()

hide([speed,] [callback]);

顯示被選的元素

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為0

callback可選，show函數執行完之後，要執行的函數。

toggle()

toggle([speed,][callback,][switch])

對被選元素進行隐藏和顯示的切換

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為0

callback可選，show函數執行完之後，要執行的函數。

switch可選，選擇時true隻能顯示，false隻能隐藏。且選擇時speed，callback不能選

顯示和隐藏(上下滑動)

适用于通過 jQuery 隐藏的元素，或display:none的元素（但不适用于visibility:hidden的元素）

slideDown()

slideDown([speed,] [callback]);

通過調整高度來滑動顯示被選元素

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為normal

callback可選，show函數執行完之後，要執行的函數。

slideUp()

slideUp([speed,] [callback]);

通過調整高度來滑動隐藏被選元素

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為normal

callback可選，show函數執行完之後，要執行的函數。

slideToggle()

slideToggle([speed,] [callback]);

對被選元素進行滑動隐藏和滑動顯示的切換

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為normal

callback可選，show函數執行完之後，要執行的函數。

顯示和隐藏(漸變透明度)

适用于通過 jQuery 隐藏的元素，或display:none的元素（但不适用于visibility:hidden的元素）

fadeIn()

fadeIn([speed,] [callback]);

逐漸改變被選元素的不透明度，淡入從隐藏到可見

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為normal

callback可選，show函數執行完之後，要執行的函數。

fadeOut()

fadeOut([speed,] [callback]);

逐漸改變被選元素的不透明度，淡出從可見到隐藏

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為normal

callback可選，show函數執行完之後，要執行的函數。

fadeTo()

fadeTo([speed,]opacity[,callback])

把被選元素逐漸改變至給定的不透明度

speed可選(毫秒，”slow”，”normal”，”fast”)，不選為normal

opacity必選，透明度，0.00 - 1.00之間

callback可選，show函數執行完之後，要執行的函數。

自定義動畫

animate()

對被選元素應用“自定義”的動畫

stop()

停止在被選元素上運作動畫

queue()

顯示被選元素的排隊函數

dequeue()

運作被選元素的下一個排隊函數

clearQueue()

對被選元素移除所有排隊的函數（仍未運作的）

delay()

對被選元素的所有排隊函數（仍未運作）設定延遲

1.animate()

該方法通過CSS樣式将元素從一個狀态改變為另一個狀态。CSS屬性值是逐漸改變的，這樣就可以建立動畫效果。

文法：

$(selector).animate({params},speed,callback);

·必需的 params 參數定義形成動畫的CSS屬性。

·可選的 speed 參數規定效果的時長。（毫秒"slow" "normal" "fast"）不選normal

·可選的 callback 參數是動畫完成後所執行的函數名稱。

①可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！如：

backgroundPosition，outlineWidth，letterSpacing，wordSpacing，lineHeight，textIndent，

borderWidth，borderBottomWidth，borderLeftWidth，borderRightWidth，borderTopWidth，borderSpacing，

margin，marginBottom，marginLeft，marginRight，marginTop，

padding，paddingBottom，paddingLeft，paddingRight，paddingTop，

height，width，maxHeight，maxWidth，minHeight，minWidth，font，fontSize，

bottom，left，right，top，

注1：當使用animate()時，必須使用Camel标記法書寫所有的屬性名，比如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。

注2：隻有數字值可建立動畫（比如"margin:30px"）。字元串值無法建立動畫（比如"background-color:red"）。

注3：也可以定義相對值（該值相對于元素的目前值）。需要在值的前面加上+=或-=。

當使用相對值時，可以多次點選，值多次增加。

注4：使用bottom，left，right，top屬性時，要把元素position設定為relative或absolute。

例如：

$(“button”).click(function(){
  $("div").animate({ left:'250px'}, “slow”);
  $("div").animate({ marginLeft:'+=50px'}, “slow”);
  $("div").animate({ height:'+=150px' }, “slow”);
});

②同時執行多個動畫，以逗号隔開

$(“button”).click(function(){
  $("div").animate({ left:'250px', marginLeft:'+=50px', height:'+=150px'}, “slow”);
});

③按順序執行多個動畫

$(“button”).click(function(){
  $("div").animate({ left:'250px'}, “slow”);
  $("div").animate({ width:'+=50px'}, “slow”);
  $("div").animate({ height:'+=50px' }, “slow”);
});
或
$(“button”).click(function(){
  $("div").animate({ left:'250px'}, “slow”)
        .animate({ width:'+=50px'}, “slow”)
        .animate({ height:'+=50px' }, “slow”);
});

④動畫回調函數，在動畫完成之後實作這個函數。

$(“button”).click(function(){
  $("div").animate({ left:'250px'}, “slow”)
        .animate({ width:'+=50px'}, “slow”)
        .animate({ height:'+=50px' }, “slow”);
  $("div").css( {‘left’:'0px', ‘width’:’10px’,’height’:’100px’});
});
//不能達到效果，會立刻執行.css操作，之後再動畫。
$(“button”).click(function(){
  $("div").animate({ left:'250px'}, “slow”)
        .animate({ width:'+=50px'}, “slow”)
        .animate({ height:'+=50px' }, “slow”,function(){
            $("div").css( {‘left’:'0px', ‘width’:’10px’,’height’:’100px’});  
  });
});
//能達到效果，動畫完成之後執行.css操作。

2.stop()

當動畫沒運作完畢，再次出發動畫時，會将第一次的動畫運作完畢，在運作第二次的動畫。但我們有時需要停止未運作完畢的動畫。需要使用stop()。

格式：stop(stopAll,goToEnd)

stopAll	可選。規定是否停止被選元素的所有加入隊列的動畫。
goToEnd	可選。規定是否允許完成目前的動畫。該參數隻能在設定了 stopAll 參數時使用。
stop()或stop(false)或stop(false,fasle)	立即停止目前正在進行的動畫，并運作之後的動畫
stop(true)或stop(true,false)	立即停止被選元素的所有加入隊列的動畫
stop(true,true)	立即停止被選元素的所有加入隊列的動畫，并直接到達目前動畫的末狀态
stop(false,true)	到達目前動畫的末狀态，并運作之後的動畫

//例如：
$("#start").click(function(){
    $("#box").animate({height:300,width:300},2000);
            .animate({height:50,width:50},2000);
});
$("#stop").click(function(){
    $("#box").stop();
});
//或：
$("#start").click(function(){
$("#box").stop(true)
        .animate({height:300,width:300},2000)
            .animate({height:50,width:50},2000);
});

3.判斷元素是否處于動畫狀态

隻有元素不是動畫狀态，點選運作動畫才有效，否者，點選無效。

if(!($(元素).is(":animate")){  
  //如果目前沒有進行動畫，則添加新動畫
}

jQuery 4 事件和動畫jQuery 4 事件和動畫一．事件二．動畫

jQuery 4 事件和動畫

一．事件

1.了解事件

2.加載DOM

3.jQuery 名稱沖突

4.單獨檔案中的函數

5.jQuery 是為處理 HTML事件而特别設計的，遵循以下原則，使代碼恰當且更易維護

6.綁定事件

①格式：bind( "type" , [data ,] fn);

②使用：

③簡寫：

7.合成事件

①hover()

②toggle() ['tɑɡl]開關，切換

8.事件冒泡

①什麼是冒泡

②冒泡引發的問題

9.移除事件

二．動畫

1.animate()

①可以用 animate() 方法來操作所有 CSS 屬性嗎？

②同時執行多個動畫，以逗号隔開

③按順序執行多個動畫

④動畫回調函數，在動畫完成之後實作這個函數。

2.stop()

3.判斷元素是否處于動畫狀态

繼續閱讀