Jquery學習之事件和動畫

 一.jquery中的事件

1.執行時機

jquery中使用$(document).ready()方法代替window.onload。區別在於window.onload在網頁中的全部元素（包括元素的全部關聯文件）徹底加載到瀏覽器中才開始執行，而$(document).ready()在DOM徹底就緒時就能夠被調用。解決方法是另一個頁面加載方法load()，load()會在元素的onload事件中綁定一個處理函數。若是處理函數綁定在元素上，會在元素的內容加載完畢後觸發，若是綁定給window對象，會在全部內容加載完畢後觸發。

$(window).load(function{})等價於window.onload=function(){}

多個事件的綁定以及簡寫

格式：$(document).ready(function(){  })只需屢次追加新的行爲便可

簡寫$(function(){  })   ；也能夠簡寫把document省略，即$().ready(function(){})

2.事件綁定

使用bind()方法來匹配元素進行特定事件的綁定，調用格式bind(type,[.data],fn);

第一個參數是事件類型，包括：blue、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、moseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等

第二個參數是可選參數，做爲even.data屬性值傳遞給事件對象的額外數據對象

第三個參數用來綁定的處理函數。

bind()方法的簡寫例：$("#panel h5.head").bind("mouseover",function(){})

$("#panel h5.head").mouseover(function(){})與ready()的簡寫類似

3.合成事件

jquery中的兩個合成事件hover()方法和toggle()方法，都屬於jquery自定義的方法。

hover(enter,leave)；用於模擬光標懸停事件。當光標移動到元素上時，會觸發指定的第一個函數(enter)；當光標移出這個元素時，觸發指定的第二個元素(leave)；

toggle(fn1,fn2,fn3,fn4...fnN)方法；用於模擬鼠標連續單機事件。第一次單擊元素觸發第一個元素，再次單擊同一元素觸發指定的第二個函數，入果有更多元素則依次觸發。直到最後一個，隨後的每次單擊重複對這幾個函數的輪番調用。

toggle()還有個做用是切換元素的課件狀態能夠替代show(),hide()方法，（我的不同意使用，沒有前者可讀）

4.事件冒泡

若是一個元素嵌套在另一個元素裏而且都綁定了click事件，單擊後，會按照DOM層次像水泡同樣不斷向上直至頂端。

函數中使用事件對象只須要爲函數添加一個參數代碼以下

$("element").bind("click",function(event){//...});單擊element元素,事件對象就被建立了，且事件對象只有事件處理函數能訪問到，處理完畢後就被銷燬。//事件對象

中止事件冒泡能夠阻止事件中其餘對象的事件處理函數被執行。用stopPropagation()

只需在函數最後用event.stopPropagation();中止事件冒泡便可，也能夠用return false代替//中止事件冒泡

在jquery中用preventDefault()方法阻止默認元素行爲。例如表單提交。也能夠用return false代替

5.事件對象屬性

 (1)event.type該方法用於獲取事件的類型。

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

alert(event.type)；//獲取事件類型  return false;//阻止連接跳轉}）以上代碼運行後輸出"click"

(2)event.preventDefault  jquery進行封裝可兼容各類瀏覽器，而javascript此方法在IE瀏覽器中無效

(3)event.stopPropagation   與(2)相同

(4)event.target用於獲取到觸發事件的元素。

$("a[href='http://google.com']").click(function(event)){var tg=event.target;//獲取事件對象

alert(tg.href);return false;}  輸出"http://google.com"

(5)event.relatedTarget

(6)event.pageX和event.pageY該方法的做用是獲取到光標相對於頁面的x座標和y座標。

(7)event.which該方法的做用是在鼠標單擊事件中獲取到鼠標的左中右鍵，在鍵盤事件中獲取鍵盤的按鍵。

(8)event.metaKey爲鍵盤事件中獲取<ctrl>按鍵

6.移出事件

unbind([type],[data])第一個是事件類型，第二個是將要移除的函數

a.若是沒有參數則刪除全部綁定的事件；b.若是提供了事件類型做爲參數，則只刪除該類型的綁定事件;c.若是在綁定時傳遞的處理函數做爲第二個參數，則只刪除這個特定的事件處理函數

one(type,[data],fn)方法爲元素綁定處理函數，處理函數觸發一次後當即被刪除。只要第一次的單擊處理函數執行，以後的單擊無效

7.模擬操做   $("$btn").trigger("click")用戶進入頁面後觸發click事件，簡化語法$("$#btn").click()

trigger不只可以支持觸發瀏覽器支持的具備相同名稱的事件，也能夠觸發自定義名稱事件

傳遞數據

執行默認操做   若是隻想觸發綁定的事件，不想執行瀏覽器的默認操做，能夠用triggerHandler()方法如$("input").triggerHandler("focus")  此操做觸發input元素上綁定的特定事件，同時取消對此事件的默認操做，即值觸發事件。不獲得焦點

8.其餘用法a.綁定多個事件類型b.添加事件命名空間c.相同事件名稱，不一樣命名空間執行方法

二.jquery中的動畫

 1.show()和hide()

此兩種類容控制內容顯示隱藏。注意：hide()操做第一步記住display當前值block或inline等，第二部把值改成none；作jquery動畫要求在標準模式下；能夠爲這兩個函數設置一個參數，fast:200;normal:400;slow:600;或者單位爲毫秒的數字；不過會慢慢增大或減小內容高度寬度及不透明度。

2.fadeIn()和fadeOut()此兩方法只改變元素的不透明度，fadeOut在指定的一段時間內下降元素的不透明度，直到元素徹底消失fadeIn()則相反

3.slideUp()和slideDown()只改變高度，若是一個元素的display屬性爲none ，使用slideDown()元素將由上至下延伸顯示，slideUp()相反,由下至上隱藏。動畫均可以指定三種參數slow,normal,fast，時間分別是0.6,0.4,0.2，秒，使用速度關鍵字要加引號，若是是數字就不需

4.自定義動畫方法animate()

語法animate(params,speed,callback);

params:一個包含樣式屬性及值得映射，如{property1:"value"，property2:"value2"...}；speed：速度參數，可選；callback:在動畫完成時執行的函數，可選。

a.自定義簡單動畫

爲了能更改元素的left ,top等樣式屬性，position樣式設置爲relative或者absolute

例如設置爲relative時$(function(){

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

$(this).animate({left:"500px"},3000);//加入animate()方法，使元素3秒內向右移動500像素。

});

b.累加、累減動畫500px前加上+=或者-=

c.多重動畫

例:$("#myImg").click(function(){

$(this).animate({left:"500px",height:"200px"},3000);

});

});

按順序執行多個動畫，只須要把代碼拆開而後按順序寫

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

$(this).animate({height:"200px"},3000);由於animate是對同一個jQuery對象操做，因此也能夠改成鏈式寫法$(this).animate({left:"500px"},3000).animate({height:"200px"},3000);

4.綜合動畫

5.動畫回調函數

若是想在最後一步改變元素樣式並不能獲得預期效果，css()方法會在執行動畫的時候就開始執行，由於css()方法並不會加入動畫隊列中，使用回調函數callback對非動畫方法實現排隊。只要把css()方法卸載最後一個動畫的回調函數裏。

callback回調函數適用於全部jquery動畫效果方法，$("#element").slideDown("normal",function(){//效果完成後作其餘事}）；

6.中止動畫和判斷是否處於動畫狀態

a.中止元素動畫

若是須要在某處中止動畫，須要使用stop()方法，stop()方法的語法結構爲：stop([clearQueue],[gotoEnd]);參數都爲可選，爲boolean值，第一個表明是否要清空未執行完的動畫隊列，第二個表明是否直接將正在執行的動畫跳轉到末狀態。

直接使用stop()方法，會當即中止當前正在進行的動畫，若是接下來還有動畫等待繼續進行，則以當前狀態開始接下來的動畫。

stop(true)對多個動畫的組合，會在中止第一個動畫後，後續未執行的動畫隊列也都將清空。

後一個動畫須要基於前一個動畫的末狀態時能夠經過stop(false,true)使得中止當前動畫並直接到達當前動畫的末狀態。

也能夠二者結合起來使用stop(true,true)，即中止當前動畫並直接到達末狀態，並清空隊列。

b.判斷元素是否處於動畫狀態

if(!$(element).is(":animated")){//判斷元素是否處於動畫狀態//入股偶沒有則添加新動畫}

c.延遲動畫

可使用delay()方法對動畫進行延遲操做，在animate(0方法後加.delay(1000)

4.其餘4個專門用於交互的動畫方法

toggle(),slideToggle,fadeTo(),fadeToggle()