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

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

?

25. 事件綁定

bind( type [ ,data],fn);

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

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

第三個參數為綁定的處理函數

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

?

26. 合成事件

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

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

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

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

?

27. 事件冒泡

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

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

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

?? iii 阻止默認行為? preventDefault()

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

?????? Returnfalse;

?

28. 事件對象的屬性

?? event.type? 事件類型

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

??event.target? 獲取觸發事件的元素?? event.relatedTarget 相關元素

?? event.pageX? event.pageY 獲取光標相對于頁面的x坐標和y坐標

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

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

?

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

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

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

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

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

?

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

?

31. 模擬操作

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

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

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

iv 如果只想觸發綁定的focus事件，而不想執行瀏覽器默認操作，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 速度參數，可選

??? iiicallback? 在動畫完成時執行的函數，可選

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

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

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

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

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

?

37. 綜合動畫，通過聯是方式對這些效果進行排隊

?

38. 動畫回調函數, 實現動畫的排隊，將動畫寫在animate() 中的callback()函數中即可

?

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

?ClearQueue 是否清空未執行完的動畫隊列，gotoEnd 是否將正在執行的動畫跳轉到末狀態

? 如果直接$element.stop()，立即停止正在執行的動畫，以當前狀態執行接下來的動畫

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

?

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

?

41. 延遲動畫　delay(ms)

?

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。