jQuery on()方法使用技巧詳解
jQuery on()方法是官方推薦的綁定事件的一個方法。
$(selector).on(event,childSelector,data,function,map)
由此擴展開來的幾個以前常見的方法有.
bind()
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
$("p").on("click",function(){
alert("The paragraph was clicked.");
});
delegate()
$("#div1").on("click","p",function(){
$(this).css("background-color","pink");
});
$("#div2").delegate("p","click",function(){
$(this).css("background-color","pink");
});
live()
$("#div1").on("click",function(){
$(this).css("background-color","pink");
});
$("#div2").live("click",function(){
$(this).css("background-color","pink");
});
以上三種方法在jQuery1.8之后都不推薦使用，官方在1.9時已經(jīng)取消使用live()方法了，所以建議都使用on()方法。
tip:如果你需要移除on()所綁定的方法，可以使用off()方法處理。
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
tip:如果你的事件只需要一次的操作，可以使用one()這個方法
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
trigger()綁定
$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
多個事件綁定同一個函數(shù)
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
多個事件綁定不同函數(shù)
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
綁定自定義事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
傳遞數(shù)據(jù)到函數(shù)
function handlerName(event)
{
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
適用于未創(chuàng)建的元素
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
相關(guān)文章
在提交表單前、焦點轉(zhuǎn)移后或者 keyup 時往往需要對輸入的文本就行檢驗，如果輸入內(nèi)容不符合相關(guān)約定則要進行提示或警告，有一個叫 jCallout 的插件可以輕松實現(xiàn)該功能，該插件基于 jQuery 使用，所以使用前需要添加引用 jQuery2013-09-09
下面的內(nèi)容只是自己的一些理解,水平有限,難免有錯,望指正2011-09-09
這篇文章主要介紹了jQuery菜單插件用法,以一個實例形式較為詳細的分析了jquery菜單插件的完整使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
基于jQuery實現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的，只能供大家選擇，今天小編給大家分享基于jQuery實現(xiàn)select下拉選擇可輸入附源碼下載，需要的朋友參考下2016-02-02
jquery ajax異步提交表單數(shù)據(jù)的方法
這篇文章主要為大家詳細介紹了jquery ajax異步提交表單數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細介紹下使用jQuery實現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
jquery 面包屑導(dǎo)航 具體實現(xiàn)，需要的朋友可以參考一下2013-06-06
昨天看到一個園友的blog中有個頁面下滾后出現(xiàn)用于"回到頁面頂部"按鈕的效果, 感覺挺不錯的, 所以自己也寫了一個, 用jQuery寫是再簡單不過了. 下面就直接給出代碼了2011-06-06
在 jQuery UI 的最近更新中增加了自動完成控件 AutoComplete，這為我們提供了又一個強大的開發(fā)工具，這里介紹一下這個控件的使用方式。2011-06-06
jQuery插件Tooltipster實現(xiàn)漂亮的工具提示
Tooltipster是一個jQuery插件用于快速創(chuàng)建HTML5校驗并且靈活的Tooltips。它可以通過CSS來改變外觀，箭頭的位置之后，鼠標(biāo)，延遲/期間的外觀都可以被定義。2015-04-04