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 定义类对象方法扩展 ...
随机推荐
- Maven 私有库和本地库的安装与配置 Sonatype Nexus + Maven
环境:CentOS 7.0 Final.JDK8.Sonatype Nexus.Maven 虚拟机模拟IP:192.168.16.167 备注:root权限用户操作 前提:已安装 JDK8 并配置好了 ...
- 关于Java虚拟机内存原型的基本知识
Java虚拟机内存原型的六个部分: 1.寄存器:我们在程序中无法控制 2.栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3.堆:存放用new产生的数据 4.静态域:存放在 ...
- Lubuntu , ubuntu 搜索文件
使用命令行方式搜索 $ locate your_filename
- PHP获取系统时间不对的解决办法(转载)
原地址:https://blog.csdn.net/u012124764/article/details/51450958 使用PHP获取系统时间,发现时间不对,是因为PHP默认的时区是UTC,应该将 ...
- MapReduce计算每年最大值
1. 测试文件生成程序,参考 https://www.cnblogs.com/jonban/p/10555364.html MapReduce程序示例如下: 2. 新建Maven项目 hadoop ...
- Git永久删除commit--[非教程]
假设当前分支为master,当前的commit情况如下,现在需要删除commit_id_2和commit_id_4: commit_id_1 commit_id_2 commit_id_3 commi ...
- C# is运算符
一.C# is运算符 is运算符用于检查对象是否与给定类型兼容(兼容表示对象是该类型,或者派生于该类型). is运算符用来检查对象(变量)是否属于某种数据类型,如int.string.bool.dou ...
- Python——配置环境的导出与导入
导出Python环境安装包[root@bogon ~]# pip freeze > packages.txt 这将会创建一个 packages.txt文件,其中包含了当前环境中所有包及各自的版本 ...
- 设置禁止网络连接后,jdbc如何连接到数据库
设置禁止网络连接,可在my.ini文件中添加如下两行 skip-networking enable-named-pipe 可以通过 SHOW VARIABLES LIKE '%skip_ne%' 来查 ...
- Linux相关知识
1.设置代理 sudo vi /etc/apt/apt.conf Acquire::http::Proxy "http://proxy_address:8080/"; 2.生成 s ...