02 jQuery中的事件、動畫、複合函數

jQuery中的事件

在JavaScript中，經常使用的基礎事件有鼠標事件、鍵盤事件、window事件、表單事件、事件綁定和處理函數的語法格式以下

語法q

　　事件名 = "函數名()"；    或者        DOM對象.事件名 = 函數；

一、載入事件

$(function () {});    //推薦使用 $(document).ready(function () {});   //推薦使用 window.onload = function () {}    

 

二、鼠標事件

click()  　　　　　　 觸發將函數綁定到指定元素的click事件　　　　　　鼠標單擊時

mouseover() 　　　  觸發將函數綁定到指定元素的mouseover事件　　　鼠標指針移過期　　　　

mouseout() 　　　　觸發將函數綁定到指定元素的mouseout事件　　　  鼠標指針移出時

mouseenter()　　　 觸發將函數綁定到指定元素的mouseenter事件　　   鼠標指針進入時

mouseleave()　　    觸發將函數綁定到指定元素的mouseleave事件　　  鼠標指針離開時

mouseover() 和 mouseenter()的區別：mouseover()包含子元素綁定，而mouseenter不包含子元素綁定

三、鍵盤事件

keydown()　　　     觸發或將函數綁定到指定元素的keydown事件　　鍵盤按下時

keyup()　　　　      觸發或將函數綁定到指定元素的keyup事件　　 　釋放按鍵時

keypress()　　　     觸發或將函數綁定到指定元素的keypress事件　　產生可打印的字符時

 

$(document).keydown(function (event){ if (event.keyCode == "13") {    //按Enter事件
            alert("確認要提交嗎？"); } });

 

四、瀏覽器事件

此事件是當瀏覽器窗口大小發生變化時而觸發來完成頁面的一些特效

語法

$(selector).resize();

綁定事件與移除事件

在jQuery中，若是須要爲匹配的元素同時綁定多個事件，則可使用bing()方法，其語法格式以下

語法

bind(type,[data],fn);

bind() 方法有三個參數，其中參數data不是必需的，以下表所示

type　　　　事件類型　　　主要包括click、mouseover、mouseout等基礎事件，此外，仍是可自定義事件

[data]　　　 可選參數　　　做爲event.data屬性值傳遞事件對象的額外數據對象，該參數不是必需的

fn　　　　　處理函數　　　用來綁定處理函數

 

綁定單個事件

$("#btn").bind("click", function() { alert('綁定單擊事件'); });

綁定多個事件

$("#btn").bind({ "mouseover":function(){ alert('事件一'); }, "mouseout":function () { alert('事件二'); } });

 

移除事件

語法

unbind([type],[fn]);

[type]　　　　事件類型　　　　主要包括click、mouseover、moseout 等基礎事件外，此外，還能夠是自定義事件

[fn]　　　　　處理函數　　　　用來處理綁定的處理函數

若是沒有參數則是移除全部被bind()綁定的函數

 

 綁定多個事件的函數還有不少，例如經常使用的鏈式編程或on()

 

綁定事件---on()

$( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); 或 $( "#dataTable tbody" ).on( "click", function() { console.log( $( this ).text() ); });

其用法和bind()相似

 

綁定多個事件--鏈式編程

$("#btn").click(function(){ console.log("單擊"); }).mouseover(function(){ console.log("鼠標懸浮"); });

 

 jQuery中的動畫

一、show()、hide()

前期學過顯示和隱藏，其實shwo() 和 hide() 也是一種動畫，當加入參數時效果明顯

show()　　　  顯示　　　　用於顯示元素其原理至關於css("display","block")

hide()　　　　隱藏　　　　用於顯示元素其原理至關於css("display","none")

show() 和 hide() 中的三個參數：

一、[duration]速度，默認400毫秒，也可用字符串表示("slow","normal","fast")

 

二、[easing] 一個字符串，指示要在過渡中使用哪一個緩動函數

三、[complete] 回調函數，指當顯示完後隱藏後執行的函數

經常使用的的是show() 、show([duration],[complete]) 或 hide() 、hide([duration],[complete])

/* show() */
$("#btn").click(function (){ //第一種顯示，第一個參數爲數字
$("#dv").show(1000,function(){ alert("我已經顯示完成了"); }); //第二種顯示，第一個參數爲字符串
$("#dv").show("fast",function(){ alert("我已經顯示完成了"); }); //第三種顯示，無參
    $("#dv").show(); });  

hide()用法也和show()同樣

 

二、