jQuery和DOM

jQuery事件繫結

bind(type, [data], fn)   //type 事件型別  [,data]：傳遞給處理函式進行處理的額外資料 fn:用來繫結的處理函式

$("div").bind("click",function(){});   // 繫結一個事件

$("div").bind("mouseover mouseout",function(){}); //同時繫結多個事件

合成事件：hover()和toggle()

hover()方法

hover(enter,leave); //用於模擬游標懸停事件，當滑鼠移到元素上的時候會觸發enter函式，當滑鼠離開元素的時候會觸發leave函式。

toggle()方法

toggle([fn1],[fn2],[fn3])

//1，用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的click事件。

//2,toggle()方法另一個功能是顯示的時候隱藏，隱藏的時候顯示。

事件物件

在jQuery中使用事件物件，只需為函式新增一個引數。

$("element").bind("click", function(event){  //event：事件物件

      //函式處理語句

}) 

停止事件冒泡

使用event.stopPropagation()方法來停止事件冒泡。

組織預設行為

使用event.preventDefault()方法來阻止元素的預設行為。

同時對事件物件停止冒泡和預設行為

使用return false這種簡單方式就可以，不用以上兩句。

常用的事件物件屬性

event.type 用於獲取事件型別，比如click

event.target  觸發的元素

event.pageX 獲取到游標相對於頁面的x座標

event.pageY獲取到游標相對於頁面的y座標

event.which 獲取滑鼠的左中右鍵，分別為1，2，3.

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

移除事件

語法：unbind([type],[data]);//1,如果沒有引數，則刪除所有的繫結事件

  2.如果提供了事件型別作為引數，則只刪除該型別的繫結事件

  3.如果把在繫結時傳遞的處理函式作為第二個引數，則只有這個特定的時間處理函式被刪除。

模擬操作

在jQuery中，可以使用trigger()方法完成模擬操作。例如：

$("#btn").trigger("click");  //模擬點選事件

觸發自定義事件

$("#btn").bind("myclick",function(){//函式體});

$("#btn").trigger("myclick");

傳遞資料

$("#btn").bind("myclick").function(event,msg1,msg2){

      $("#test").append("<p>"+msg1+msg2+"</p>);

});

$("#btn").triger("myclick",["我的自定義","事件"]);

jQuery實現動畫與特效

jQuery庫提供了豐富的動畫效果，通過使用可以給網頁新增非常精彩的視覺效果，給使用者一種全新的體驗。

1,show([speed,[easing],[fn]]),hide([speed,[easing],[fn]])

元素的顯示和隱藏，同時修改多個樣式屬性即寬度、高度和不透明度。

2,toggle([speed],[easing],[fn])用來替代show()和hide()方法

3,slideDown([speed],[easing],[fn]),slideUp([speed],[easing],[fn])

元素從上至下和從下至上顯示，只改變高度。

4,slideToggle([speed],[easing],[fn])用來替代slideDown()和slideUp()

5,fadeIn([speed],[easing],[fn])和fadeOut([speed],[easing],[fn])

元素淡入和淡出顯示，只改變不透明度

6,fadeTo([speed],[easing],[fn])元素淡入指定不透明度的效果，只改變不透明度

7,fadeToggle([speed],[easing],[fn])用來代替fadeIn()和fadeOut()

自定義動畫方法animate()

很多情況下，上面提供的動畫方法無法滿足使用者的各種需求，那麼就要對動畫有更多的控制，可以使用animate()方法來自定義動畫。

語法：animate(params,speed,callback)

1.params:一個包含樣式屬性及值的對映，比如{property1:"value",...}

2.speed:速度引數，可選

3.callback：動畫完成時執行的函式，可選

示例：

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

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

                 .animate({height:"200px"},3000);

}); //此動畫是多重動畫，動畫按順序進行。先右移動再高度放大。

停止動畫

語法：stop([clearQueue],[goToEnd])

1.clearQueue：如果設定成true，則清空未執行完的動畫佇列。可以立即結束動畫。

2.gotoEnd:讓當前正在執行的動畫立即完成

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

if(!$("element").is(":animated")){}

延時動畫

語法：delay(duration)

$('#foo').slideUp(300).delay(800).fadeIn(400);