彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > jQuery中on()方法用法实例详解,jquery实例

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

发布时间:2019-08-31 08:19编辑:学会党委浏览(180)

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

    本文实例分析了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()方法的用法。分享给大家供大家参考。具体分析如下: 一、jQuery on()方法的...

    本文实例分析了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、多个事件绑定同一个函数

    本文由彩世界平台发布于学会党委,转载请注明出处:jQuery中on()方法用法实例详解,jquery实例

    关键词: