jQuery中的事件與動畫

加載DOM：

$(document).ready()方法,能夠縮寫成$(function(){}),$(document)也能夠簡寫成$() 與傳統的window.onload有所不一樣

1: onload方法將會在網頁中全部元素被加載到瀏覽器後才執行 .ready方法將會在dom徹底就緒時就能夠被調用,並不等於全部元素關聯的文件已經下載完畢

2: onload函數只能保存一個對函數的引用,而ready能夠保存多個引用

事件的綁定:

bind(type,[data],fn)

綁定元素的事件,type爲html事件類型（blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、errror）,js的形式(去除on),data爲傳遞的參數(可選),fu爲監聽的函數

注意data須要使用[]進行包裝,在監聽函數中使用一個參數進行捕獲,e.data獲取數組形式後,進行訪問,也能夠使用簡寫的進行綁定事件（像click、mouseover、mouseout這類事件，程序中常會用到）

 

實例

 

當點擊鼠標時，隱藏或顯示 p 元素：

$("button").bind("click",function(){
  $("p").slideToggle();
});

同時綁定多個事件的方法:

$(function () {
                $("li").bind("mouseover", function() {
                    $(this).css("background", "pink");
                }).bind("mouseout", function() {
                    $(this).css("background", "");
                });

$("li").hover(

　　　　　　　　　　　　function () {  //mouseover
                          $(this).css("background", "pink");
                     },
                      function () { //mouseout
                         $(this).css("background", ""); } );

 

參數	描述
event	必需。規定添加到元素的一個或多個事件。 由空格分隔多個事件。必須是有效的事件。
data	可選。規定傳遞到函數的額外數據。
function	必需。規定當事件發生時運行的函數。

 

 

 

 

 

 

 

移除綁定：

 

unbind([type],[fn]) 移除元素上指定類型的事件,也能夠不帶參數,移除該元素全部的事件.也能夠帶兩個參數,移除指定事件 ,類型上,不一樣的監聽函數(一個事件能夠有多個監聽函數) 獲取監聽事件函數的方法,在開啓監聽時: $("btn").bind("click",myfun=function(){....}); //移除時,就能夠使用myfun進行移除

 

實例

 

移除全部 p 元素的事件處理器：

 

$("button").click(function(){
  $("p").unbind();
});

若是沒有規定參數，unbind() 方法會刪除指定元素的全部事件處理程序。

 

one(...) 相似bind的使用,指定監聽的事件類型,已經對於的函數,區別在於one只會觸發一次後,就被自動移除

實例

當點擊 p 元素時，增長該元素的文本大小：

 

$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});

 

控制元素顯示和隱藏

動畫

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

這個就是 'show( speed, [callback] )' 無動畫的版本。若是選擇的元素是可見的，這個方法將不會改變任何東西。不管這個元素是經過hide()方法隱藏的仍是在CSS裏設置了display:none;，這個方法都將有，show()等同於$(selector).css("display","block"),除了能夠控制元素的顯示外，它還能定義顯示元素時的效果，如顯示速度。

 

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

隱藏顯示的元素

這個就是 'hide( speed, [callback] )' 的無動畫版。若是選擇的元素是隱藏的，這個方法將不會改變任何東西。

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

easing:(Optional) 用來指定切換效果，默認是"swing"，可用參數"linear"

fn:在動畫完成時執行的函數，每一個元素執行一次。

 

animate

用於建立自定義動畫的函數。

animate(params,[speed],[easing],[fn])

params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

easing:要使用的擦除效果的名稱(須要插件支持).默認jQuery提供"linear" 和 "swing".

fn:在動畫完成時執行的函數，每一個元素執行一次。

語法：

$(selector).animate({params},speed,callback);

jQuery animate() - 操做多個屬性

請注意，生成動畫的過程當中可同時使用多個屬性：

實例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});