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时已经取消使用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");
});
});
多个事件绑定同一个函数
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
多个事件绑定不同函数
$(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"]);
});
});
传递数据到函数
function handlerName(event)
{
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
适用于未创建的元素
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
相关文章
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
本文结合W3School的文档，分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异，并给出了图文对比教程，非常的简单实用，有需要的朋友可以参考下2014-11-11
easyui是一种基于jQuery的用户界面插件集合，easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能，本篇文章给大家整理有关jquery Easyui快速开发的技巧，需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jqGrid表格底部汇总、合计行footerrow处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
ajax联动框想必大家早有所耳闻，接下来将介绍jquery实现另一种形式的联动框，右边的联动框用jquery生成，仿照上篇的js方法修改的，感兴趣的你可以参考下希望可以帮助到你2013-03-03
这篇文章主要介绍了jQuery实现的原图对比窗帘效果,需要的朋友可以参考下2014-06-06
使用jQuery设置disabled属性与移除disabled属性
Readonly只针对input和textarea有效，而disabled对于所有的表单元素都有效，下面为大家介绍下使用jQuery设置disabled属性2014-08-08
这篇文章给大家总结了使用jq获取元素值的常见写法,文中给大家介绍了详细的代码示例,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
这篇文章主要给大家推荐一款jQuery插件模板，这是本人最喜欢的一款了，原因很简单，使用方便，可选择性也比较多。有需要的小伙伴参考下吧2015-01-01
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
本篇文章主要介绍了EasyUI修改DateBox和DateTimeBox的默认日期格式示例，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
本文主要给大家讲述的是如何使用jquery+easeing实现仿flash的载入动画的方法，附上示例代码，非常细致全面，这里推荐给大家，希望对大家熟练使用jQuery有所帮助。2015-03-03
最新评论