jQuery學習筆記（三）

jQuery中的事件和動畫

 

jquery中的事件

• 加載DOM

二者等價但有細微區別

 $(document).ready(function(){//編寫代碼}) 在DOM徹底就緒時就能夠被調用。可重複使用

簡寫  $(function(){//...｝) 或者 $().ready(function(){//...}) 

$(window).load(function(){//編寫代碼}) 是在網頁中全部的元素(包括元素的關聯文件)徹底加載到瀏覽器後才執行，即JavaScript此時才能夠訪問網頁中的任何元素。會自動覆蓋。

• 事件綁定

 bind(type[.data].fn); 調用格式

type事件類型參數：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error或者自定義事件

data:可選參數 ：做爲event.data屬性值傳遞給事件對象的額外數據對象

fn參數：用來綁定的處理函數

• 合成事件

1.hover()方法 用於模擬光標懸停事件，代替bind("mouseenter")和bind("mouseleave")

 $("selector").hover(enter,leave) 

2..toggle()方法 用於模擬鼠標連續點擊事件，特殊用法：切換元素可見狀態

 $("selector").toggle(fn1,fn2,...,fnN) 

3.高亮樣式

 .highlight{background:#ff3300;} 

• 事件冒泡

事件對象 ： $("element").bind("click",function(event){//event:事件對象...}) 

當單擊element元素時，事件對象被建立，這個對象只有事件處理函數才能訪問到。事件處理函數執行完畢後，事件對象就被銷燬了。

中止事件冒泡：event.stopPropagation()

阻止默認行爲：event.preventDefault()

同時對事件對象中止冒泡和默認行爲：return false；

• 事件對象的屬性

even.type 獲取事件類型

event.stopPropagation() 中止事件冒泡

event.preventDefault() 阻止默認行爲

even.target 獲取到觸發事件的元素

event.relatedTarget 訪問事件相關元素

event.pageX / event.pageY 獲取光標相對於頁面的x座標和y座標

event.which 在鼠標單擊事件中獲取鼠標的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵（返回值1=鼠標左鍵；2=鼠標中鍵；3=鼠標右鍵）

event.metaKey 鍵盤事件中獲取<ctrl>按鍵

• 移除事件

1.unbind()方法  $("selector").unbind(type.[data])

type 事件類型

data 要移除的函數

a）若是沒有參數，則刪除全部綁定的事件

b）若是提供了事件類型參數，則只刪除該類型的綁定事件

c）若是把在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除

2.one()方法  $("selector").one(type,[data].fn) 

當處理函數觸發一次後，當即被刪除。

• 模擬操做

1. 經常使用模擬  $("#btn").trigger("click");  當頁面裝載完畢後，就會馬上輸出想要的效果

2.觸發自定義事件  $("#btn").trigger(「myClick」) 

3.傳遞數據  $("#btn").trigger(type，[data]) 

• 其餘用法

1.綁定多個事件類型  ("selector").bind("type1 type2",function(){//...}) 

2.添加事件命名空間  $("selector").bind("type.命名空間",function(){//...}) 

3.匹配全部不包含在命名空間內的click方法  $("selector").trigger("type!") 

---

 

jQuery中的動畫

• show()方法和hide()方法

 $("selector").show()   $("selector").hide() 

1.沒有參數時等同於經過設置display的樣式

2.傳入參數後，.show()和.hide()方法同時動畫改變元素的width,height和透明屬性

3.傳入參數控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast爲200毫秒，normal爲400毫秒，slow爲600毫秒）

•  fadeIn()方法和fadeOut()方法

 $("selector").fadeIn()  $("selector").fadeOut() 

只改變元素的不透明度

• slideUp()方法和sliDown()方法

 $("selector").slideUp()   $("selector").slideDown() 

只改變元素高度

• 自定義動畫方法animate()

 $("selector").animate(params,speed,callback); 

a）params:一個包含樣式屬性及值的映射，好比{property1:"value1",property2:"value2",...}

b）speed:速度參數，可選

c）callback:在動畫完成時執行的參數（即回調函數），可選

• 動畫回調函數

因css()方法不會加入動畫隊列中，則會立刻執行。如若要在動畫最後改變selector的css，須要利用回調函數，回調函數適用於jQuery全部的動畫效果方法。

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

1.中止元素的動畫 結束當前動畫，如隊列中存在下一個動畫則當即執行下一個動畫

 $("selector").stop([clearQueue][,gotoEnd]) 

clearQueue參數爲Boolean值（true or false），是否清空當前元素接下來還沒有執行完的動畫隊列

gotoEnd參數爲Boolean值（true or false），是否將正在執行的動畫直接到達末狀態

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

if(!$("element").is(":animated")){ //判斷元素是否正處於動畫狀態
 //若是當前沒有進行動畫，則添加新動畫
}

• 其餘動畫方法

 toggle(speed,[callback]); 切換元素的可見狀態，如元素隱藏則切換爲可見，反之亦然

 slideToggle(speed,[callback]); 經過高度變化來切換元素的可見性

 fadeTo(speed,opacity,[callback])  把元素的不透明度以漸進方式調整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度將內容調整到20%透明度

• 動畫方法歸納

toggle() 用來代替hide()和show()
slideToggle() 用來代替slideUp()和slideDown()
animate() 可代替全部動畫方法