jQuery中on()方法用法实例详解

2014-06-28  来源:本站原创  分类:jquery  人气:5 

这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下

本文实例分析了jQuery on()方法的用法。分享给大家供大家参考。具体分析如下:

一、jQuery on()方法的使用:

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

二、jQuery on()方法的优点:

1、提供了一种统一绑定事件的方法

2、仍然提供了.delegate()的优点,当然如果需要你也可以直接用.bind()

三、与.bind(), .live(), .delegate()的比较:

1、其实.bind(), .live(), .delegate()都是通过.on()来实现的

bind: function( types, data, fn ) {

        return this.on( types, null, data, fn );

    },

    unbind: function( types, fn ) {

        return this.off( types, null, fn );

    },
    live: function( types, data, fn ) {

        jQuery( this.context ).on( types, this.selector, data, fn );

        return this;

    },

    die: function( types, fn ) {

        jQuery( this.context ).off( types, this.selector || "**", fn );

        return this;

    },
    delegate: function( selector, types, data, fn ) {

        return this.on( types, selector, data, fn );

    },

    undelegate: function( selector, types, fn ) {

        // ( namespace ) or ( selector, types [, fn] )

        return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );

    }

2、用.bind()的代价是非常大的,它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

3、不要再用.live()了,它已经不再被推荐了,而且还有许多问题

4、.delegate()会提供很好的方法来提高效率,同时我们可以添加一事件处理方法到动态添加的元素上。

5、我们可以用.on()来代替上述的3种方法

四、jQuery on()方法的使用示例

1、绑定click事件,使用off()方法移除on()所绑定的方法

复制代码 代码如下:

$(document).ready(function(){

$("p").on("click",function(){

$(this).css("background-color","pink");

});

$("button").click(function(){

$("p").off("click");

});

});

2、多个事件绑定同一个函数

复制代码 代码如下:

$(document).ready(function(){

  $("p").on("mouseover mouseout",function(){

    $("p").toggleClass("intro");

  });

});

3、多个事件绑定不同函数

复制代码 代码如下:

$(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");}  

  });

});

4、绑定自定义事件

复制代码 代码如下:

$(document).ready(function(){

  $("p").on("myOwnEvent", function(event, showName){

    $(this).text(showName + "! What a beautiful name!").show();

  });

  $("button").click(function(){

    $("p").trigger("myOwnEvent",["Anja"]);

  });

});

5、传递数据到函数

复制代码 代码如下:

function handlerName(event) 

{

  alert(event.data.msg);

}
$(document).ready(function(){

  $("p").on("click", {msg: "You just clicked me!"}, handlerName)

});

6、适用于未创建的元素

复制代码 代码如下:

$(document).ready(function(){

  $("div").on("click","p",function(){

    $(this).slideToggle();

  });

  $("button").click(function(){

    $("<p>This is a new paragraph.</p>").insertAfter("button");

  });

});

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章
  • jQuery中on()方法用法实例详解 2014-06-28

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本文实例分析了jQuery on()方法的用法.分享给大家供大家参考.具体分析如下: 一.jQuery on()方法的使用: on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydo

  • jQuery中unbind()方法用法实例 2014-10-07

    这篇文章主要介绍了jQuery中unbind()方法用法,实例分析了unbind()方法的功能.定义及移除被选元素的事件处理程序的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中unbind()方法用法.分享给大家供大家参考.具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件. unbind()方法如果不带参数,则删除所有绑定的事件. 此方法如果提供了事件类型作为参数,则只删除该类型的绑定事件. 如果把在绑定时传递的处理函数作为第二个参数,则只

  • jQuery中innerHeight()方法用法实例 2013-10-04

    这篇文章主要介绍了jQuery中innerHeight()方法用法,实例分析了innerHeight()方法的功能.定义及获取第一个匹配元素内部区域高度的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中innerHeight()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域高度. 包括内补白(padding).不包括边框border). 也就是说内部区域的宽度等于width和padding之和. 此方法对可见和隐藏元素均有效. 可以结合innerWidth

  • jQuery中dequeue()方法用法实例 2013-10-09

    这篇文章主要介绍了jQuery中dequeue()方法用法,实例分析了dequeue()方法的功能.定义.使用技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery中dequeue()方法用法.分享给大家供大家参考.具体分析如下: 此函数能够从队列最前端移除一个队列函数,并执行它.建议和queue()函数一起学习. 语法结构: $(selector).dequeue(queueName) 参数列表: 参数 描述 queueName 可选.队列的名称. 默认是

  • jQuery中live()方法用法实例 2013-11-01

    这篇文章主要介绍了jQuery中live()方法用法,实例分析了live()方法的功能.定义及为匹配元素添加一个或多个事件,并规定当这些事件发生时运行函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中live()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 特别说明:jQuery1.9已经删除此方法. 语法结构: $(selector).live(type,data,function) 参数列表: 参数 描

  • jQuery中clearQueue()方法用法实例 2013-11-10

    这篇文章主要介绍了jQuery中clearQueue()方法用法,实例分析了clearQueue()方法的功能.定义及进行清空队列操作的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery中clearQueue()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够清空对象上尚未执行的所有队列. 如果不带参数,则默认清空的是动画队列.这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过queue()创建的队列. 语法结构: $(se

  • jQuery中add()方法用法实例 2013-11-17

    这篇文章主要介绍了jQuery中add()方法用法,实例分析了add()方法的功能.定义及匹配元素中添加与表达式匹配的元素使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中add()方法用法.分享给大家供大家参考.具体分析如下: 此函数在匹配元素中添加与表达式匹配的元素. add()函数返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加. 语法: 语法一: $(selector).add(expr,context) 参数 描述 expr 可选.用于匹配元素的选择

  • jQuery中addClass()方法用法实例 2013-11-26

    这篇文章主要介绍了jQuery中addClass()方法用法,实例分析了addClass()方法的功能.定义及向匹配元素添加一个或多个类的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中addClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法向匹配元素添加一个或多个类. 此方法有多个语法形式. 语法结构一: 为匹配元素添加指定的类名.如果要一次性添加多个类名,它们之间要用空格分隔. $(selector).addClass(class) 参数列表: 参数 描述 cl

  • jQuery中find()方法用法实例 2013-11-30

    这篇文章主要介绍了jQuery中find()方法用法,实例分析了find()方法的功能.定义及获取匹配元素后代元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中find()方法用法.分享给大家供大家参考.具体分析如下: 此方法获得匹配元素集合中所有元素的子元素,并通过选择器.jQuery 对象或元素删选. find()方法是获取匹配元素后代元素的好方法. 注意:children()只获取一级子元素,而find()将查找所所有子元素. 语法结构一: $(selector).find

  • jQuery中next方法用法实例 2013-12-02

    这篇文章主要介绍了jQuery中next方法用法,实例分析了jQuery中next方法的功能.定义及相关使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中next方法用法.分享给大家供大家参考.具体分析如下: 这里演示jQuery中next的用法,可取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合. 这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素. 可以用一个可选的表达式进行筛选 <!DOCTYPE html PUBLIC "-//W3C//DT

  • jQuery中children()方法用法实例 2013-12-05

    这篇文章主要介绍了jQuery中children()方法用法,实例分析了children()方法的功能.定义及过滤所匹配子元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中children()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合. 可以通过可选的表达式来过滤所匹配的子元素. 注意:find()将查找所所有子元素,而children()只获取一级子元素. 语法结构: $(selector).children

  • jQuery中delegate()方法用法实例 2013-12-16

    这篇文章主要介绍了jQuery中delegate()方法用法,实例分析了delegate()方法的功能.定义及为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中delegate()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 语法结构: $(selector).delegate(childofselector,type,data,fun

  • jQuery中scrollTop()方法用法实例 2013-12-19

    这篇文章主要介绍了jQuery中scrollTop()方法用法,实例分析了scrollTop()方法的功能.定义及返回或设置匹配元素的滚动条的垂直偏移量时的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中scrollTop()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的滚动条的垂直偏移量. 语法结构一: 当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部的偏移量. $(selector).scrollTop() 实例代码: 复制代码

  • jQuery中replaceAll()方法用法实例 2013-12-26

    这篇文章主要介绍了jQuery中replaceAll()方法用法,实例分析了replaceAll()方法的功能.定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下 本文实例讲述了jQuery中replaceAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法用匹配元素去替换指定的内容. replaceAll()方法的作用和replaceWith()方法是完全一样的. 语法结构: $(content).replaceAll(selector) 参数列表: 参数 描述 conten

  • jQuery中first()方法用法实例 2014-01-07

    这篇文章主要介绍了jQuery中first()方法用法,实例分析了first()方法的功能.定义及获取匹配元素集合中的第一个元素时的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中first()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取匹配元素集合中的第一个元素. 语法结构: $(selector).first() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=

  • jQuery中bind()方法用法实例 2014-01-11

    这篇文章主要介绍了jQuery中bind()方法用法,实例分析了bind()方法的功能.定义及为匹配元素的特定事件绑定事件处理方法的技巧,需要的朋友可以参考下 本文实例讲述了jQuery中bind()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的特定事件绑定事件处理方法. 在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构一: $(selector).bind(type,data,function) 参数列表: 参数 描述 t

  • jQuery中prevUntil()方法用法实例 2014-01-24

    这篇文章主要介绍了jQuery中prevUntil()方法用法,实例分析了按条件查找匹配元素之前所有的同辈元素的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中prevUntil()方法用法.分享给大家供大家参考.具体分析如下: 此函数查找匹配元素之前所有的同辈元素,直到遇到expr表达式.DOM元素或者jQuery元素匹配的那个元素为止. 可以使用可选的表达式对同辈元素集合进行筛选. 注意:祖先元素中并不包含expr表达式.DOM元素或者jQuery元素匹配的元素. 语法: 语法

  • jQuery中innerWidth()方法用法实例 2014-02-09

    这篇文章主要介绍了jQuery中innerWidth()方法用法,实例分析了innerWidth()方法的功能.定义及获取第一个匹配元素内部区域宽度的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中innerWidth()方法用法.分享给大家供大家参考.具体分析如下: 获取第一个匹配元素内部区域宽度. 包括内补白(padding).不包括边框border).也就是说内部区域的宽度等于padding和border之和. 此方法对可见和隐藏元素均有效. 可以结合innerHeight()

  • jQuery中nextUntil()方法用法实例 2014-02-19

    这篇文章主要介绍了jQuery中nextUntil()方法用法,实例分析了nextUntil()方法的功能.定义及匹配同辈元素的技巧与注意事项,需要的朋友可以参考下 本文实例讲述了jQuery中nextUntil()方法用法.分享给大家供大家参考.具体分析如下: 此函数查找指定元素之后所有的同辈元素,直到遇到匹配的那个元素为止,但不包括此匹配的元素. 语法结构一: $(selector).closest(expr, filter) 参数列表: 参数 描述 expr 用于筛选匹配元素的表达式. f

  • jQuery中parentsUntil()方法用法实例 2014-02-24

    这篇文章主要介绍了jQuery中parentsUntil()方法用法,实例分析了parentsUntil()方法的功能.定义及根据条件查找匹配元素的所有的祖先元素使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中parentsUntil()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素的所有的祖先元素,直到遇到expr表达式.DOM元素或者jQuery元素匹配的那个元素为止. 取得祖先元素集合可以通过筛选表达式进行筛选. 注意:祖先元素中并不包含expr表达式.DO