jQuery定義插件的方法

jQuery定義插件的方法

　　有些WEB開發者，會引用一個JQuery類庫，然后在網頁上寫一寫$("#")，$(".")，寫了幾年就對別人說非常熟悉JQuery。我曾經也是這樣的人，直到有一次公司里的技術交流，我才改變了自己對自己的看法。

　　擴展jquery的時候。最核心的方法是以下兩種：

　　$.extend(object) 可以理解為jquery添加一個靜態方法

　　$.fn.extend(object) 可以理解為jquery實例添加一個方法

　　$.extend(object)

　　例子：

　　/* $.extend 定義與調用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.extend({ fun: function () { alert("執行方法一"); } });//定義$.fun();//調用$.fn.extentd(object)/* $.fn.extend 定義與調用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.fn.extend({ fun: function () { alert("執行方法"); } });$(this).fun();//等同于$.fn.fun = function () { alert("執行方法三"); }$(this).fun();

　　定義jquery插件的基本結構

　　1． 定義作用域：

　　為插件定義一個私有作用域。外界代碼不能直接訪問插件內部。插件內部代碼不受外界干擾，也不會污染到全局變量。

　　//step 定義JQuery的作用域(function ($) {})(jQuery);

　　2. 為插件添加擴展方法：

　　//step01 定義JQuery的作用域(function ($) { //step02 插件的擴展方法名稱 $.fn.easySlider = function (options) { }})(jQuery);

　　3. 設置默認值：

　　//step 定義JQuery的作用域(function ($) { //step-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴展方法名稱 $.fn.easySlider = function (options) { //step-b 合并用戶自定義屬性，默認屬性 var options = $.extend(defaults, options); }})(jQuery);

　　其中：var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，并把值賦給了options。

　　在插件環境中，就表示用戶設置的值，覆蓋了插件的默認值；如果用戶沒有設置默認值的屬性，還是保留插件的默認值。

　　4. 支持jquery選擇器：

　　//step 定義JQuery的作用域(function ($) { //step-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴展方法名稱 $.fn.easySlider = function (options) { //step-b 合并用戶自定義屬性，默認屬性 var options = $.extend(defaults, options); //step 支持JQuery選擇器 this.each(function () { }); }})(jQuery);

　　5 ．支持JQuery的鏈接調用：

　　為了能達到鏈接調用的效果必須要把循環的每個元素return

　　//step 定義JQuery的作用域(function ($) { //step-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴展方法名稱 $.fn.easySlider = function (options) { //step-b 合并用戶自定義屬性，默認屬性 var options = $.extend(defaults, options); //step 支持JQuery選擇器 //step 支持鏈式調用 return this.each(function () { }); }})(jQuery);

　　6. 插件里的方法：

　　在插件里定義的方法，外界不能直接調用，我在插件里定義的方法也沒有污染外界環境。

　　//step01 定義JQuery的作用域(function ($) { //step03-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step06-a 在插件里定義方法 var showLink = function (obj) { $(obj).append(function () { return "(" + $(obj).attr("href") + ")" }); } //step02 插件的擴展方法名稱 $.fn.easySlider = function (options) { //step03-b 合并用戶自定義屬性，默認屬性 var options = $.extend(defaults, options); //step4 支持JQuery選擇器 //step5 支持鏈式調用 return this.each(function () { //step06-b 在插件里定義方法 showLink(this); }); }})(jQuery);

　　通過以上內容給大家介紹了jQuery定義插件的方法，希望大家喜歡。

【jQuery定義插件的方法】相關文章：

jQuery中prev()方法用法07-16

jQuery中replaceAll()方法用法10-15

關于jQuery實現高亮顯示的方法介紹08-20

asp.net+jquery Jsonp使用方法介紹08-23

CAD中自定義填充圖案的方法07-12

關于jquery簡單圖片切換顯示效果實現方法介紹10-01

jQuery程序設計08-05

jquery提交按鈕的代碼07-28

JavaScript類定義原型方法的兩種實現的區別07-11

淺析jQuery 遍歷函數javascript08-06