jQuery.extend 與 jQuery.fn.extend方法的區別是什么

這篇文章給大家介紹jQuery.extend 與 jQuery.fn.extend方法的區別是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

jQuery是一個JavaScript類，如$("#input1") 生成一個 jQuery類的實例。

jQuery為開發插件提拱了兩個方法：jQuery.fn.extend()和jQuery.extend()。

1、jQuery.extend()

(1)擴展 jQuery 類本身，為jQuery類添加類方法（靜態方法）

jQuery.extend({
　　add: function(a, b) { alert(a + b); }
});
jQuery.add(10,20); //30

(2)jQuery.extend(object, object1, [objectN])用一個或多個其他對象來擴展一個對象，返回被擴展的對象

var obj = { name: 'Alice', age: 25, career: "teacher" };
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(obj, object); //obj = { name: 'Bruce', age: 25, career: "doctor" }

2、jQuery.fn.extend()

把對象掛載到 jQuery 的 prototype 屬性，來擴展一個新的 jQuery 實例方法，也就是通過這個 extend 添加的新方法，實例化的 jQuery 對象都能使用，因為它是掛載在 jQuery.fn 上的方法。

查看jQuery源碼可發現，jQuery.fn = jQuery.prototype。jQuery.fn掛在原型上，由于對原型的修改會影響所有實例，因此fn上的方法會對每一個jQuery實例有效。

對jQuery.fn的擴展，就是為jQuery類添加成員函數，jQuery類的實例可以使用這個成員函數。

jQuery.fn.extend({
   clickFunc: function() {
      $(this).click(function(){
         alert($(this).val());
      });
   }
});
$("#input1").clickFunc(); //輸出文本框的文本

3、jQuery.extend()與 jQuery.fn.extend()的區別

jQuery.extend()是為jQuery類添加類方法（靜態方法），需要通過jQuery類來調用（直接使用 $.xxx 調用）；

jQuery.fn.extend()是為jQuery類添加成員函數（實例方法），所有jQuery實例都可以直接調用（需要使用 $().xxx 調用）。

關于jQuery.extend 與 jQuery.fn.extend方法的區別是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。