jQuery扩展方法,插件开发

2020-06-01  本文已影响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);
    }
  });
});
上一篇下一篇

猜你喜欢

热点阅读