jQuery和DOM

$(document).ready和window.onload的區別

www.cnblogs.com/fengchaoran…

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);