- 相關(guān)推薦
jQuery定義插件的方法
有些WEB開發(fā)者，會(huì)引用一個(gè)JQuery類庫(kù)，然后在網(wǎng)頁(yè)上寫一寫$("#")，$(".")，寫了幾年就對(duì)別人說(shuō)非常熟悉JQuery。我曾經(jīng)也是這樣的人，直到有一次公司里的技術(shù)交流，我才改變了自己對(duì)自己的看法。
擴(kuò)展jquery的時(shí)候。最核心的方法是以下兩種：
$.extend(object) 可以理解為jquery添加一個(gè)靜態(tài)方法
$.fn.extend(object) 可以理解為jquery實(shí)例添加一個(gè)方法
$.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． 定義作用域：
為插件定義一個(gè)私有作用域。外界代碼不能直接訪問(wèn)插件內(nèi)部。插件內(nèi)部代碼不受外界干擾，也不會(huì)污染到全局變量。
//step 定義JQuery的作用域(function ($) {})(jQuery);
2. 為插件添加擴(kuò)展方法：
//step01 定義JQuery的作用域(function ($) { //step02 插件的擴(kuò)展方法名稱 $.fn.easySlider = function (options) { }})(jQuery);
3. 設(shè)置默認(rèn)值：
//step 定義JQuery的作用域(function ($) { //step-a 插件的默認(rèn)值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴(kuò)展方法名稱 $.fn.easySlider = function (options) { //step-b 合并用戶自定義屬性，默認(rèn)屬性 var options = $.extend(defaults, options); }})(jQuery);
其中：var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，并把值賦給了options。
在插件環(huán)境中，就表示用戶設(shè)置的值，覆蓋了插件的默認(rèn)值；如果用戶沒(méi)有設(shè)置默認(rèn)值的屬性，還是保留插件的默認(rèn)值。
4. 支持jquery選擇器：
//step 定義JQuery的作用域(function ($) { //step-a 插件的默認(rèn)值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴(kuò)展方法名稱 $.fn.easySlider = function (options) { //step-b 合并用戶自定義屬性，默認(rèn)屬性 var options = $.extend(defaults, options); //step 支持JQuery選擇器 this.each(function () { }); }})(jQuery);
5 ．支持JQuery的鏈接調(diào)用：
為了能達(dá)到鏈接調(diào)用的效果必須要把循環(huán)的每個(gè)元素return
//step 定義JQuery的作用域(function ($) { //step-a 插件的默認(rèn)值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴(kuò)展方法名稱 $.fn.easySlider = function (options) { //step-b 合并用戶自定義屬性，默認(rèn)屬性 var options = $.extend(defaults, options); //step 支持JQuery選擇器 //step 支持鏈?zhǔn)秸{(diào)用 return this.each(function () { }); }})(jQuery);
6. 插件里的方法：
在插件里定義的方法，外界不能直接調(diào)用，我在插件里定義的方法也沒(méi)有污染外界環(huán)境。
//step01 定義JQuery的作用域(function ($) { //step03-a 插件的默認(rèn)值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step06-a 在插件里定義方法 var showLink = function (obj) { $(obj).append(function () { return "(" + $(obj).attr("href") + ")" }); } //step02 插件的擴(kuò)展方法名稱 $.fn.easySlider = function (options) { //step03-b 合并用戶自定義屬性，默認(rèn)屬性 var options = $.extend(defaults, options); //step4 支持JQuery選擇器 //step5 支持鏈?zhǔn)秸{(diào)用 return this.each(function () { //step06-b 在插件里定義方法 showLink(this); }); }})(jQuery);
通過(guò)以上內(nèi)容給大家介紹了jQuery定義插件的方法，希望大家喜歡。
【jQuery定義插件的方法】相關(guān)文章：
CAD出現(xiàn)形未定義,文字不顯示的處理方法09-05
兒童社會(huì)工作的定義03-06
工程項(xiàng)目施工管理定義03-29
盤點(diǎn)嵌入式名詞簡(jiǎn)單的理解和定義01-30
也談企業(yè)發(fā)展戰(zhàn)略：戰(zhàn)略的定義和價(jià)值04-10
詳細(xì)解答CSS中相同元素不同結(jié)構(gòu)重復(fù)定義的問(wèn)題08-29
跳繩的鍛煉方法09-13
古琴的保養(yǎng)方法11-17
激勵(lì)員工的方法09-03