如何編寫自己的jquery插件 Jquery的插件主要分為三類： 1、封裝對象方法的插件：大部分插件都是封裝對象的插件 2、封裝全局函數(shù)的插件：將獨(dú)立的函數(shù)添加到j(luò)query的命名空間之下。Jquery.ajax()和jquery.trim()就是jquery內(nèi)部作為全局函數(shù)的插件添加到內(nèi)核上去的。 3、選擇器插件：擴(kuò)充自己喜歡的一些選擇器。 編寫Jquery插件的基本要點(diǎn)： 、一般命名的時候最好是按照jquery.[插件名].js命名。 、所有的對象都應(yīng)當(dāng)附加到j(luò)query.fn對象上，所有的全局函數(shù)應(yīng)該附加到j(luò)query對象本身上 、通過this.each()來便利對象，這里的this指向的是當(dāng)前選擇器通過選擇器獲取的jquery對象 、所有的方法或者函數(shù)插件都要以分號結(jié)尾，否則壓縮的話就會出現(xiàn)問題，有時候甚至要在頭部也要加上“;”,以免不規(guī)范的代碼給寫的插件帶來影響。 插件應(yīng)當(dāng)返回一個jquery對象，以便可以進(jìn)行鏈?zhǔn)讲僮?#xff0c;除非你是要返回某個特定類型的參數(shù)，比如字符串和數(shù)組。 要注意$和jquery兩個符號的沖入，可以利用閉包這種技術(shù)來回避這個問題。 允許使用內(nèi)部函數(shù)，而且，這些內(nèi)部函數(shù)可以訪問他們所在的外部函數(shù)中聲明的局部變量參數(shù)和聲明的其他的內(nèi)部函數(shù)，當(dāng)其中一個這樣的內(nèi)部函數(shù)在包含他們的外部函數(shù)之外被調(diào)用時，就會形成閉包。 “閉包”是一個很復(fù)雜的概念，對于編寫jquery插件其實(shí)是有一個模板的，這個模板中就有用到閉包的概念。 常見的jquery插件的都是有如下的格式的： ;(function($){ $.fn.yourName = function(options){ //各種屬性、參數(shù) 　　} var options = $.extend(defaults, options);//定義參數(shù) this.each(function(){ //插件實(shí)現(xiàn)代碼 }); }; })(jQuery); 注解： (1)、“;(function($){ })(jQuery);”使用了匿名函數(shù)，表示在方法體內(nèi)的”$”表示的就是”jquery”,為了有更好的兼容性，所以在前面添加一個分號 ,這里的$符號是作為匿名函數(shù)的形參 (2)、$.extend(defaults, options);表示的是如果options中的參數(shù)總是有值的話，那么options中的值將會代替defaults中的值。舉個例子來說： Var setting={validate:true,limit:5,name:foo}; Var options={validate:fasle,name:tom}; Var newoptions=$.extend(setting，options)； 那結(jié)果就是newoptions={validate:false,limit:5,name:tom}. 所以Jquery.extend()(或者是$.extend())經(jīng)常來設(shè)置插件的一些默認(rèn)的參數(shù)。 還有就是$.extend()用來擴(kuò)展方法，和jquery.fn.extend()一樣都是可以的，他們的區(qū)別在于：前者不使用jquery的方法，而后者使用了jquery的方法，就像 addClass(),remove()等。所以可想而知大部分的現(xiàn)有插件都是jquery.fn.extend()進(jìn)行擴(kuò)展的。 function foo(options){ 　　options=jquery.extend({ 　　Name：“bar”, 　　Length：5， 　　dataType:”xml” 　　},options); }; 如果options參數(shù)傳入的值為空，那么就可以使用默認(rèn)設(shè)置的值。 例子: ;(function($)){ 　　$.fn.extend({ 　　 “functionname”：function(options){//某個方法名 　　Options=$.extend({ 　　odd:”odd”, 　　even:”even” 　　},options); 　　//可以通過options.元素名稱來獲取元素之，如options.odd 　　//some codes 　　$(“.table”).addClass(“”);//為某個元素添加樣式等等 　　} 　　//一個方法結(jié)束 　　//另一個方法 this.cleartb = function() {//同時你也可以這么寫，這里cleartb就是方法的名稱 $('#emed_tb01').remove();//方法要做的事情 } 　　}); } 那我們在使用的時候就可以： $(“#id_”).cleartb();//選中id為“id_”的元素執(zhí)行上面插件中的cleartb的方法。 下面給出一個完整的插件的例子供參考：這個插件是一個消息提示的插件， ;(function($){ $.fn.manhuaTip = function(options) {//擴(kuò)展函數(shù)manhuaTip var defaults = {//默認(rèn)值 Event : "click", timeOut : 2000 }; var options = $.extend(defaults,options);//以傳參覆蓋 var $tip = $(this);//選定操作的jquery元素為當(dāng)前選中的元素 $tip.live(options.Event,function(e){ var type = $(this).attr('ty'); var msg = $(this).attr('msg'); var tipHtml = ''; if (type =='loading'){ tipHtml = '<img alt="" src="../images/loading.gif">'+(msg ? msg : '正在提交您的請求，請稍后...'); } else if (type =='notice'){ tipHtml = '<span class="gtl_ico_hits"></span>'+msg } else if (type =='error'){ tipHtml = '<span class="gtl_ico_fail"></span>'+msg } else if (type =='succ'){ tipHtml = '<span class="gtl_ico_succ"></span>'+msg } if ($('.msgbox_layer_wrap')) { $('.msgbox_layer_wrap').remove(); } if (st){ clearTimeout(st); } $("body").prepend("<div class='msgbox_layer_wrap'><span id='mode_tips_v2' style='z-index: 10000;' class='msgbox_layer'><span class='gtl_ico_clear'></span>"+tipHtml+"<span class='gtl_end'></span></span></div>"); $(".msgbox_layer_wrap").show(); var st = setTimeout(function (){ $(".msgbox_layer_wrap").hide(); clearTimeout(st); },options.timeOut); }); } })(jQuery)

轉(zhuǎn)載于:https://blog.51cto.com/3001448/1206171

總結(jié)

以上是生活随笔為你收集整理的[置顶]       编写自己的JQUERY插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。