jQuery on()方法使用技巧詳解
jQuery on()方法是官方推薦的綁定事件的一個方法。
$(selector).on(event,childSelector,data,function,map)
由此擴(kuò)展開來的幾個以前常見的方法有.
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)文章
淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
本文結(jié)合W3School的文檔，分析了jQuery中 wrap() wrapAll() 與 wrapInner()的差異，并給出了圖文對比教程，非常的簡單實用，有需要的朋友可以參考下2014-11-11
easyui是一種基于jQuery的用戶界面插件集合，easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應(yīng)用程序，提供必要的功能，本篇文章給大家整理有關(guān)jquery Easyui快速開發(fā)的技巧，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jqGrid表格底部匯總、合計行footerrow處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
jquery怎樣實現(xiàn)ajax聯(lián)動框(二)
ajax聯(lián)動框想必大家早有所耳聞，接下來將介紹jquery實現(xiàn)另一種形式的聯(lián)動框，右邊的聯(lián)動框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你2013-03-03
這篇文章主要介紹了jQuery實現(xiàn)的原圖對比窗簾效果,需要的朋友可以參考下2014-06-06
使用jQuery設(shè)置disabled屬性與移除disabled屬性
Readonly只針對input和textarea有效，而disabled對于所有的表單元素都有效，下面為大家介紹下使用jQuery設(shè)置disabled屬性2014-08-08
這篇文章給大家總結(jié)了使用jq獲取元素值的常見寫法,文中給大家介紹了詳細(xì)的代碼示例,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
這篇文章主要給大家推薦一款jQuery插件模板，這是本人最喜歡的一款了，原因很簡單，使用方便，可選擇性也比較多。有需要的小伙伴參考下吧2015-01-01
EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例
本篇文章主要介紹了EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
jquery+easeing實現(xiàn)仿flash的載入動畫
本文主要給大家講述的是如何使用jquery+easeing實現(xiàn)仿flash的載入動畫的方法，附上示例代碼，非常細(xì)致全面，這里推薦給大家，希望對大家熟練使用jQuery有所幫助。2015-03-03