jQuery學習筆記（三）

標籤：元素   style   val   prevent   透明度   class   載入   隊列   over   

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() 可代替所有動畫方法

 

jQuery學習筆記（三）