第四章，jQuery中的事件和動畫

24. ?$(document).ready(function(){})?? 簡寫?? $(function(){})

?

25. 事件綁定

bind( type [ ,data],fn);

第一個參數(shù)為事件類型，e.g. blurfocus click load……

第二個參數(shù)為可選參數(shù)，作為event.data屬性值傳遞給事件對象的額外參數(shù)

第三個參數(shù)為綁定的處理函數(shù)

簡寫綁定函數(shù)：$.bind(“click”,function(){})?? -----??$.click(function(){})

?

26. 合成事件

?? ?i?? hover()?? hover(enter,leave); 模擬光標(biāo)懸停事件

?????? $.hover(function(){ } , function(){ })

??? ii? toggle()??toggle(fn1,fn2,…fnN);? 模擬鼠標(biāo)連續(xù)單擊事件

??????? toggle()在jQuery中還有另外一個作用：切換元素可見狀態(tài)?? $.toggle();

?

27. 事件冒泡

?? i 事件對象（防止事件冒泡到上一級）

???? $(“element”).bind(“click”,function(event){?? });

?? ii 停止事件冒泡 stopPropagation()

?? iii 阻止默認(rèn)行為? preventDefault()

????? 如果想同時對事件對象停止冒泡和默認(rèn)行為，可以在事件處理函數(shù)中返回false

?????? Returnfalse;

?

28. 事件對象的屬性

?? event.type? 事件類型

?? event.preventDefault();??? event.stopPropagation()

??event.target? 獲取觸發(fā)事件的元素?? event.relatedTarget 相關(guān)元素

?? event.pageX? event.pageY 獲取光標(biāo)相對于頁面的x坐標(biāo)和y坐標(biāo)

?? event.which 在鼠標(biāo)點擊事件中獲取鼠標(biāo)左（1），中（2），右鍵（3）

??event.metaKey? 在鍵盤事件中獲取ctrl鍵

?

29. 移除事件 unbind([type],[data]);

???? 第一個參數(shù)為事件類型，第二個參數(shù)為將要移除的函數(shù)

??? i? 如果沒有參數(shù)，則刪除所有綁定事件

??? ii? 如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件

??? iii? 兩個參數(shù)都有時，只有這個特定的事件處理函數(shù)會被刪除

?

30. 只需要觸發(fā)一次的事件?? one( type,[data],fn);

?

31. 模擬操作

? i? 常用模擬 $.trigger(“click”)

? ii? 觸發(fā)自定義事件 $.trigger(“myClick”)

iii 傳遞數(shù)據(jù)?? $.tigger(“myClick”,[“自定義”，“事件”])；

iv 如果只想觸發(fā)綁定的focus事件，而不想執(zhí)行瀏覽器默認(rèn)操作，triggerHandler()

?

32. 其他方法

?i 為元素一次性綁定多個事件，

?? $(“div”).bind(“mouseovermouseout”,function(){ $(this).toggleClass(“over”)});

?ii 添加事件命名空間

?? $(“div”).bind(“mouseover.plugin”,function(){$(this).toggleClass(“over”)});? 【Page.119】

?

33. ?show()?show(“slow / normal/fast”)??show(“1000”)

?? hide()?? hide(“slow / normal/fast”)?? hide(“1000”)

?

34.? fadeIn() 升高不透明度,? fadeOut()降低不透明度

?

35.? slideUp()元素由下到上縮短隱藏，? slideDown()元素由上至下延伸顯示

?

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

?? animate(params,? speed,? callback)

??? i params 一個包含樣式屬性及值的映射

??? ii speed 速度參數(shù)，可選

??? iiicallback? 在動畫完成時執(zhí)行的函數(shù)，可選

?? e.g. $(this).animate({left:”50px”},300);

?? 累加動畫：$(this).animate({left:”+=50px”},300);

?? 多重動畫：$(this).animate({left:”+=50px”，height:”200px”},300); (同時發(fā)生的)

????????????? $(this).animate({left:”50px”},300)；

??????????? ??$(this).animate({height: ”200px”},300);（按順序進(jìn)行，先向左，后放高）

?

37. 綜合動畫，通過聯(lián)是方式對這些效果進(jìn)行排隊

?

38. 動畫回調(diào)函數(shù), 實現(xiàn)動畫的排隊，將動畫寫在animate() 中的callback()函數(shù)中即可

?

39. 停止元素的動畫?? stop([clearQueue],[gotoEnd]), 參數(shù)可取值為true/false

?ClearQueue 是否清空未執(zhí)行完的動畫隊列，gotoEnd 是否將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)

? 如果直接$element.stop()，立即停止正在執(zhí)行的動畫，以當(dāng)前狀態(tài)執(zhí)行接下來的動畫

?Stop(false,true),可以讓動畫直接到最終狀態(tài)（正在執(zhí)行的）

?

40. 判斷元素是否處于動畫狀態(tài)? $element.is(“:animated”)

?

41. 延遲動畫　delay(ms)

?

42. 其他動畫，slideToggle() 通過高度變化切換匹配元素的可見性，

???????????? fadeTo() 把元素的不同明度以漸進(jìn)方式調(diào)整到指定的值 fadeTo(ms? ocpacity)

?? ?????????fadeToggle() 通過不透明度變化來切換匹配元素的可見性

總結(jié)

以上是生活随笔為你收集整理的锋利的jQuery总结（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。