jq插件的编写中(jquery.extend、jquery.fn与jquery.fn.extend的使用区别)

本文链接：https://blog.youkuaiyun.com/weixin_38197312/article/details/71436731

本文介绍了jQuery中三种常用的方法扩展方式：使用$.extend()为jQuery添加静态方法，使用$.fn为jQuery原型添加方法，以及使用$.fn.extend()为jQuery原型添加多个方法。通过示例展示了这些方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.jquery.extend的用法是对jquery对象进行方法的扩展，实则为jquery的一个属性。相当于为jQuery类添加类方法，可以理解为添加静态方法。如：

jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});

//调用方法
jQuery.min(3,4); //  3 
jQuery.max(7,8); //  8

//例如：$.ajax  应该就是使用这种方法。

2.jquery.fn相当与jquery.prototype（jquery的原型），写法如下：

(function($){
    $.fn.插件名= function(){
         // 插件代码写在这里 
     }
     return this;  //便于链式调用
})(jQuery);

//调用方法
$('选择器').pluginName()

3.jquery. fn.extend相当于 jquery.prototype.extend的用法，就是对jquery的原型的扩展。

(function($){
    $.fn.extend({          
        event1:function() {            
              $(this).click(function(){                 
                     alert($(this).val());           
               })          
         },
         event2:function(){
            //方法的代码写在这
        }       
    })
    return this;  //便于链式调用
})(jQuery);

//调用方法，原理现将jquery实例化，然后再调用原型上的方法。
$("#input1").event1();
$("#input1").event2();