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方法的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  3. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  6. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  7. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  8. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  10. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. Maven 私有库和本地库的安装与配置 Sonatype Nexus + Maven

    环境:CentOS 7.0 Final.JDK8.Sonatype Nexus.Maven 虚拟机模拟IP:192.168.16.167 备注:root权限用户操作 前提:已安装 JDK8 并配置好了 ...

  2. 关于Java虚拟机内存原型的基本知识

    Java虚拟机内存原型的六个部分: 1.寄存器:我们在程序中无法控制 2.栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 3.堆:存放用new产生的数据 4.静态域:存放在 ...

  3. Lubuntu , ubuntu 搜索文件

    使用命令行方式搜索 $ locate your_filename

  4. PHP获取系统时间不对的解决办法(转载)

    原地址:https://blog.csdn.net/u012124764/article/details/51450958 使用PHP获取系统时间,发现时间不对,是因为PHP默认的时区是UTC,应该将 ...

  5. MapReduce计算每年最大值

    1. 测试文件生成程序,参考 https://www.cnblogs.com/jonban/p/10555364.html MapReduce程序示例如下: 2. 新建Maven项目  hadoop ...

  6. Git永久删除commit--[非教程]

    假设当前分支为master,当前的commit情况如下,现在需要删除commit_id_2和commit_id_4: commit_id_1 commit_id_2 commit_id_3 commi ...

  7. C# is运算符

    一.C# is运算符 is运算符用于检查对象是否与给定类型兼容(兼容表示对象是该类型,或者派生于该类型). is运算符用来检查对象(变量)是否属于某种数据类型,如int.string.bool.dou ...

  8. Python——配置环境的导出与导入

    导出Python环境安装包[root@bogon ~]# pip freeze > packages.txt 这将会创建一个 packages.txt文件,其中包含了当前环境中所有包及各自的版本 ...

  9. 设置禁止网络连接后,jdbc如何连接到数据库

    设置禁止网络连接,可在my.ini文件中添加如下两行 skip-networking enable-named-pipe 可以通过 SHOW VARIABLES LIKE '%skip_ne%' 来查 ...

  10. Linux相关知识

    1.设置代理 sudo vi /etc/apt/apt.conf Acquire::http::Proxy "http://proxy_address:8080/"; 2.生成 s ...