目錄

事件

事件綁定

常用事件

阻止后續事件執行

補充

each

.data()

---

事件

事件綁定

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

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

普通綁定，沒有選擇器，當新增事件，不會響應

$("#i1").on("input propertychange", function () {alert($(this).val());})

冒泡事件，ul里所有li部件都響應事件，包括新增的

$('ul').on('mouseenter', 'li', function() {//綁定鼠標進入事件$(this).addClass('hover'); });

常用事件

click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})

阻止后續事件執行

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

補充

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；

伏筆...

.data()

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

.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對應的數據

摘抄自：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-10-0

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的04-1.jQuery事件与补充each/data的全部內容，希望文章能夠幫你解決所遇到的問題。

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