jQuery定義插件的方法
有些WEB開發(fā)者,會引用一個JQuery類庫,然后在網(wǎng)頁上寫一寫$("#"),$("."),寫了幾年就對別人說非常熟悉JQuery。我曾經(jīng)也是這樣的人,直到有一次公司里的技術(shù)交流,我才改變了自己對自己的看法。
擴展jquery的時候。最核心的方法是以下兩種:
$.extend(object) 可以理解為jquery添加一個靜態(tài)方法
$.fn.extend(object) 可以理解為jquery實例添加一個方法
$.extend(object)
例子:
/* $.extend 定義與調(diào)用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun: function () { alert("執(zhí)行方法一"); } });//定義 $.fun();//調(diào)用 $.fn.extentd(object) /* $.fn.extend 定義與調(diào)用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun: function () { alert("執(zhí)行方法"); } }); $(this).fun(); //等同于 $.fn.fun = function () { alert("執(zhí)行方法三"); } $(this).fun();
定義jquery插件的基本結(jié)構(gòu)
1. 定義作用域:
為插件定義一個私有作用域。外界代碼不能直接訪問插件內(nèi)部。插件內(nèi)部代碼不受外界干擾,也不會污染到全局變量。
//step 定義JQuery的作用域 (function ($) { })(jQuery);
2. 為插件添加擴展方法:
//step01 定義JQuery的作用域 (function ($) { //step02 插件的擴展方法名稱 $.fn.easySlider = function (options) { } })(jQuery);
3. 設(shè)置默認值:
//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。
在插件環(huán)境中,就表示用戶設(shè)置的值,覆蓋了插件的默認值;如果用戶沒有設(shè)置默認值的屬性,還是保留插件的默認值。
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的鏈接調(diào)用:
為了能達到鏈接調(diào)用的效果必須要把循環(huán)的每個元素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 支持鏈?zhǔn)秸{(diào)用 return this.each(function () { }); } })(jQuery);
6. 插件里的方法:
在插件里定義的方法,外界不能直接調(diào)用,我在插件里定義的方法也沒有污染外界環(huán)境。
//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 支持鏈?zhǔn)秸{(diào)用 return this.each(function () { //step06-b 在插件里定義方法 showLink(this); }); } })(jQuery);
通過以上內(nèi)容給大家介紹了jQuery定義插件的方法,希望大家喜歡。
- 基于jQuery通過jQuery.form.js插件實現(xiàn)異步上傳
- 基于jQuery通過jQuery.form.js插件使用ajax提交form表單
- jquery.form.js實現(xiàn)將form提交轉(zhuǎn)為ajax方式提交的方法
- jquery.form.js用法之清空form的方法
- 解決3.01版的jquery.form.js中文亂碼問題的解決方法
- 基于jQuery實現(xiàn)選取月份插件附源碼下載
- jquery插件jquery.confirm彈出確認消息
- jQuery焦點圖插件SaySlide
- Jquery插件easyUi實現(xiàn)表單驗證示例
- jQuery插件之jQuery.Form.js用法實例分析(附demo示例源碼)
相關(guān)文章
jQuery+ajax實現(xiàn)動態(tài)執(zhí)行腳本的方法
這篇文章主要介紹了jQuery+ajax實現(xiàn)動態(tài)執(zhí)行腳本的方法,分析了jQuery+Ajax實現(xiàn)腳本的動態(tài)加載與執(zhí)行的技巧,需要的朋友可以參考下2015-01-01Jquery 過濾器(first,last,not,even,odd)的使用
Jquery 過濾器,顧名思義就是過濾一些不需要的元素,主要有first,last,not,even,odd等等,下面有個使用示例,大家可以感受下2014-01-01jQuery模擬360瀏覽器切屏效果幻燈片(附demo源碼下載)
這篇文章主要介紹了jQuery模擬360瀏覽器切屏效果幻燈片,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作示例
這篇文章主要介紹了JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作,涉及jquery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11jquery PrintArea 實現(xiàn)票據(jù)的套打功能(代碼)
下面小編就為大家?guī)硪黄猨query PrintArea 實現(xiàn)票據(jù)的套打功能(代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03jQuery學(xué)習(xí)筆記之控制頁面實現(xiàn)代碼
每一段jQuery對應(yīng)一段html代碼,以標(biāo)記為準(zhǔn)則,css為共用代碼,每段代碼需獨立運行。html和css代碼在文章尾部,如下例2012-02-02