一、jQuery擴展

　　1、$.extend(object)

　　類似于.Net的擴展方法，用于擴展jQuery。然后就可以用$.的方式調用。

$(function(){$.extend({ fun1: function () { alert("為jQuery擴展一個fun1函數!"); } });$.fun1();})

　　2、$.fn.extend(object)

　　擴展jQuery的對象。

$.fn.extend({ fun2: function () { alert("執行方法2"); } });$("#id1").fun2();

　　可以用google來看看：

　　

　　上面的寫法等同于:

$.fn.fun2 = function () { alert("執行方法2"); }$(this).fun2();

二、私有域

　　其定義方式如下：

(function ($) { })(jQuery); //相當于 var fn = function (xxoo) { }; fn(jQuery);

　　以下代碼彈出123。

$(function(){var fn = function (xxoo) { };fn(alert(123));})

?

三、定義插件的基本步驟

　　1、定義作用域

　　開發一個jQuery插件，首先要把插件的代碼與外界隔離開來，外部的代碼不允許直接訪問插件內部的代碼，插件內部的代碼也不影響外部。

//步驟1 定義插件私有作用域(function ($) {})(jQuery);

　　這樣就能保證插件內部的代碼與外界隔離了。

　　2、擴展jQuery

　　定義了作用域之后，為了能夠讓外部調用，就需要將插件擴展到jQuery。

//步驟1 定義私有作用域(function ($) {//步驟2 插件的擴展方法名稱$.fn.MyFrame = function (options) {}})(jQuery);

　　3、默認值

　　定義了jQuery插件之后，如果希望某些參數具有默認值，那么可以以這種方式來指定。

//步驟1 定義私有作用域(function ($) {//步驟3 插件的默認值屬性var defaults = {Id: '#id1',};//步驟2 插件的擴展方法名稱$.fn.MyFrame = function (options) {//步驟3 合并用戶自定義屬性，默認屬性(如果options為空，則使用defaults)var options = $.extend(defaults, options);}})(jQuery);

　　4、支持jQuery選擇器

//步驟1 定義私有作用域(function ($) {//步驟3 插件的默認值屬性var defaults = {Id: '#id1',};//步驟2 插件的擴展方法名稱$.fn.MyFrame = function (options) {//步驟3 合并用戶自定義屬性，默認屬性(如果options為空，則使用defaults)var options = $.extend(defaults, options);}//步驟4 支持jQuery選擇器this.each(function () {});})(jQuery);

　　5、支持jQuery的鏈式調用

//步驟1 定義私有作用域(function ($) {//步驟3 插件的默認值屬性var defaults = {Id: '#id1',};//步驟2 插件的擴展方法名稱$.fn.MyFrame = function (options) {//步驟3 合并用戶自定義屬性，默認屬性(如果options為空，則使用defaults)var options = $.extend(defaults, options);}//步驟4 支持jQuery選擇器//步驟5 支持鏈式調用(將步驟4返回)return this.each(function () {});})(jQuery);

　　6、插件內部方法

　　

//步驟1 定義私有作用域(function ($) {//步驟3 插件的默認值屬性var defaults = {Id: '#id1',};//步驟6 在插件里定義函數var MyFun = function (obj) {alert(obj);}//步驟2 插件的擴展方法名稱$.fn.MyFrame = function (options) {//步驟3 合并用戶自定義屬性，默認屬性(如果options為空，則使用defaults)var options = $.extend(defaults, options);}//步驟4 支持jQuery選擇器//步驟5 支持鏈式調用(將步驟4返回)return this.each(function () {//步驟6 在插件里定義函數MyFun(this);});})(jQuery);

　　由于作用域關系，步驟6的私有函數目前允許的插件內部使用。

　　本文乃筆記，原文來自：http://www.cnblogs.com/xcj26/p/3345556.html

總結

以上是生活随笔為你收集整理的jQuery插件开发方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。