一、事件

常用事件

click(function(){...})    //單擊事件
hover(function(){...})  //鼠標經過事件   
blur(function(){...})    //失去光標
focus(function(){...})  //獲取光標
change(function(){...}) //修改事件
keyup(function(){...})  //松開鍵盤
keydown(function(){...})  //按下鍵盤

事件綁定

語法：

.on( events [, selector ],function(){})　

• events： 事件
• selector: 選擇器（可選的）
• function: 事件處理函數

移除事件

語法：

.off( events [, selector ][,function(){}])

• events： 事件
• selector: 選擇器（可選的）
• function: 事件處理函數

阻止後續事件執行

return false; // 常見阻止表單提交等

頁面載入

當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。這是事件模塊中最重要的一個函數，因為它可以極大地提高web應用程序的響應速度。

兩種寫法：

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})

簡寫：

$(function(){
// 你在這裏寫你的代碼
})

事件委托

事件委托是通過事件冒泡的原理，利用父標簽去捕獲子標簽的事件。

示例：

表格中每一行的編輯和刪除按鈕都能觸發相應的事件。

$("table").on("click", ".delete", function () {
  // 刪除按鈕綁定的事件
})

二、動畫效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（了解即可）
animate(p,[s],[e],[fn])

三、其他知識補充

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一個通用的叠代函數，它可以用來無縫叠代對象和數組。數組和類似數組的對象通過一個長度屬性（如一個函數的參數對象）來叠代數字索引，從0到length - 1。其他對象通過其屬性名進行叠代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循環的具體元素。
})

輸出：

010
120
230
340

.each(function(index, Element))：

描述：遍歷一個jQuery對象，為每個匹配元素執行一個函數。

.each() 方法用來叠代jQuery對象中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數)。由於回調函數是在當前DOM元素為上下文的語境中觸發的，所以關鍵字 this 總是指向這個元素。

// 為每一個li標簽添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

註意: jQuery的方法返回一個jQuery對象，遍歷jQuery集合中的元素 - 被稱為隱式叠代的過程。當這種情況發生時，它通常不需要顯式地循環的 .each()方法：

也就是說，上面的例子沒有必要使用each()方法，直接像下面這樣寫就可以了：

$("li").addClass("c1");  // 對所有標簽做統一操作

註意：

在遍歷過程中可以使用 return false提前結束each循環。

終止each循環

return false；

.date()

在匹配的元素集合中的所有元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

.data(key, value):

描述：在匹配的元素上存儲任意相關數據。

$("div").data("k",100);//給所有div標簽都保存一個名為k，值為100

.data(key):

描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值—通過 .data(name, value)或 HTML5 data-*屬性設置。

$("div").data("k");//返回第一個div標簽中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的數據，不加key參數表示移除所有保存的數據。

$("div").removeData("k");  //移除元素上存放k對應的數據

插件

jQuery.extend(object)

jQuery的命名空間下添加新的功能。多用於插件開發者向 jQuery 中添加新函數時使用。

示例：

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一個對象的內容合並到jQuery的原型，以提供新的jQuery實例方法。

<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery對象可以使用新添加的check()方法了。
$("input[type=‘checkbox‘]").check();
</script>

單獨寫在文件中的擴展：

(function(jq){
  jq.extend({
    funcName:function(){
    ...
    },
  });
})(jQuery);

JavaScript之事件及動畫