jQuery插件開發
一般來說，jQuery插件的開發分為兩種：一種是掛在jQuery命名空間下的全局函數，也可稱為靜態方法；另一種是jQuery對象級別的方法，即掛在jQuery原型下的方法，這樣通過選擇器獲取的jQuery對象實例也能共享該方法。
一、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的私有函數目前允許的插件內部使用。
以上就是本文的全部內容，希望對大家有所幫助，謝謝對武林網的支持！
新聞熱點
疑難解答
