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的.on方法的更多相关文章
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- jquery.on()超级方法
$.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- [转]jQuery的each方法的几种常用的用法
下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下: var arr = [ "one", "two", "three&quo ...
- jquery中$.ajax方法提交表单
function postdata(){ //提交数据函数 $.ajax({ //调用jqu ...
- JS,JQuery的扩展方法
转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 ...
随机推荐
- AOP术语分析
初看这么多术语,一下子都不好接受,慢慢来,很快就会搞懂. 通知.增强处理(Advice) 就是你想要的功能,也就是上说的安全.事物.日子等.你给先定义好,然后再想用的地方用一下.包含Aspect的一段 ...
- 07、Spark集群的进程管理
07.Spark集群的进程管理 7.1 概述 Spark standalone集群模式涉及master和worker两个守护进程.master进程是管理节点,worker进程是工作节点.spark提供 ...
- IOS 数据加密总结(及MD5加密)
数据安全总结 1.网络数据加密1> 加密对象:隐私数据,比如密码.银行信息2> 加密方案* 提交隐私数据,必须用POST请求* 使用加密算法对隐私数据进行加密,比如MD53> 加密增 ...
- 广搜,智能拼图(ZOJ1079)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=79 解题报告: 思路简单,写法太难. #include <std ...
- 字符串反转,栈模拟(ZOJ1151)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=151 这里可以用栈模拟,也可以用STL,reverse();函数. 但 ...
- AJAX(三):GET与POST
1.使用场景get是最常见的请求类型,最常用于向服务器查询某些信息仅次于get的是post请求,通常用于向服务器发送应该被保存的数据 2.使用get请求经常会发生一个错误,就是查询字符串的个是有问题, ...
- 继续折腾LNK 2005错误
这次是因为要把一个很久的老项目改成使用Unicode字符集,又一次遇到了LNK 2005错误 先说说怎么把老项目改成Unicode字符集吧,首先要有足够的信心能把项目改好,比如我这次改的项目,也不算很 ...
- jQuery UI datepicker z-index默认为1 怎么处理
最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...
- iOS程序猿如何快速掌握 PHP,化身"全栈攻城狮"?
这是一篇以 iOS 开发人员的视角写给广大iOS 程序猿的 PHP 入门指南.在这篇文章里我努力去发掘 objectiv-c 与 php 之间的共性,来帮助有一定 iOS 开发经验的攻城狮来快速上手一 ...
- 私有maven库发布及使用流程
## 私有maven库发布流程 ### 环境配置 - idea环境下,如果使用内置maven,需要手动生成settings.xml,并关联. - 操作如下 - 生成settings.xml 右键pom ...