美文网首页
jQuery扩展方法,插件开发

jQuery扩展方法,插件开发

作者: 亻火子 | 来源:发表于2020-06-01 10:03 被阅读0次

一、$.fn

$.fn.abc(), 即$.fn.abc()是对 jquery 扩展了一个 abc 方法,那么后面你的每一个jquery实例都可以引用这个方法。
如:

$(document).ready(function(){
  $.fn.abc = function () {
    $(this).click(function () {
      alert('我被点了');
    });
  };
 //$("#div").abc();
});

$("#div").abc();

二、$.fn.extend();

$.fn.extend();给jQuery对象添加方法。
代码如下:

$(document).ready(function(){
  $.fn.extend({
    clickAlert:function(){
        $(this).click(function(){
            alert('我被点了');
        });
    },
    //更多方法......
  });
  //$("#div").clickAlert();
});

三、$.extend();

$.extend();为扩展jQuery类本身,为类添加新的方法。
如:

$(document).ready(function(){
  $.extend({
    add:function(a,b){
        return a+b;
    }
  });
  //alert($.add(8,8));
});

为jQuery添加一个为add的方法,之后引入 jQuery的地方,就可以使用这个方法了,
如:$.add(8,8);//返回16

//进阶篇
$(document).ready(function(){
  $.fn.bindData = function (option) {
    $.extend(this, option);
    var self = this;
    $(this).off().click(function () {
        self.add(self.a, self.b);
    });
  };
  $("#div").bindData({
    a: 8,
    b: 8,
    add: function (numa, numb) {
      alert(numa+numb);
    }
  });
});

相关文章

  • jQuery

    插件开发 $.extend扩展jQuery方法,$.myFun()$.fn向jQuery添加新方法,$("#myD...

  • 如何开发插件

    jQuery插件开发模式 jQuery插件一般有三种开发方式: 通过$.extend来扩展jQuery 通过$.f...

  • jQuery扩展插件

    什么是jQuery插件? 扩展jQuery原型对象的一个方法(jQuery插件是jQuery对象的一个方法)jQu...

  • jQuery扩展方法,插件开发

    一、$.fn $.fn.abc(), 即$.fn.abc()是对 jquery 扩展了一个 abc 方法,那么后面...

  • jQuery插件

    1.jQuery插件 jQuery 插件简单的就是一个用于扩展 jQuery 的 prototype 对象的新方法...

  • jQuery.extend 函数使用详解

    JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一...

  • jQuery插件机制

    为了方便用户创建插件,jQuery提供了两种方法来扩展插件,分别是jQuery.extend()和jQuery.f...

  • jQuery的widget开发

    jQuery插件开发方式 主要有三种:通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新...

  • 2 jQuery的插件开发

    2 jQuery的插件开发 //总结:如果该方法与页面上的元素没有关系,该方法就为jQuery中全局的插件方法//...

  • jquery插件

    根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuer...

网友评论

      本文标题:jQuery扩展方法,插件开发

      本文链接:https://www.haomeiwen.com/subject/eejoahtx.html