JQuery是一種自動化的JavaScript庫,它可以方便地處理文檔對象模型(DOM),從而實現各種動態效果。與JavaScript相比,JQuery對于開發者提供了更為便捷的API,例如:JQuery中的on函數,可以方便地為HTML元素或其它對象添加事件處理器。
JQuery中的on函數具有多種參數,這些參數分別指定了事件類型,事件目標以及事件處理器。首先,來看一下on函數常用的兩種參數形式:
$(selector).on(event, function)
$(selector).on(event, childSelector, function)
第一種形式的on函數,最常用的參數是一個事件類型和一個處理器函數。比如,可以為一個按鈕添加click事件處理器:
$("button").on("click", function(){ alert("按鈕被點擊了"); });
第二個參數表示選擇器的字符串,用于確定元素的后代元素(子元素、孫子元素等)。這種方式可以讓我們在某個對象的子元素上添加事件處理器:
$("ul").on("click", "li", function(){ $(this).toggleClass("done"); });
上述代碼將li元素的done類名在選中和取消選中之間切換,實現了一個簡單的代辦事項列表。
除了上述兩個參數,on函數還支持更多選項來控制它的行為,例如,可以指定事件循環的順序:
$(selector).on({ mouseenter: function(){ $(this).css("background-color", "yellow"); }, mouseleave: function(){ $(this).css("background-color", "transparent"); } });
上述代碼將鼠標指針懸停在選擇器指定的元素上時,改變背景顏色。離開元素時,背景顏色會變為透明。
總之,在JQuery中,on函數是一個非常有用的函數,通過不同的參數組合,我們可以方便地為元素添加事件處理器,實現各種動態效果。
上一篇瀏覽器css文件調不出來
下一篇jquery on 傳值