美文网首页
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扩展方法,插件开发

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