[置頂]       編寫自己的JQUERY插件

如何編寫自己的jquery插件 Jquery的插件主要分為三類： 1、封裝對象方法的插件：大部分插件都是封裝對象的插件 2、封裝全局函數的插件：將獨立的函數添加到jquery的命名空間之下。Jquery.ajax()和jquery.trim()就是jquery內部作為全局函數的插件添加到內核上去的。 3、選擇器插件：擴充自己喜歡的一些選擇器。  編寫Jquery插件的基本要點： 、一般命名的時候最好是按照jquery.[插件名].js命名。 、所有的對象都應當附加到jquery.fn對象上，所有的全局函數應該附加到jquery對象本身上 、通過this.each()來便利對象，這里的this指向的是當前選擇器通過選擇器獲取的jquery對象 、所有的方法或者函數插件都要以分號結尾，否則壓縮的話就會出現問題，有時候甚至要在頭部也要加上“;”,以免不規范的代碼給寫的插件帶來影響。 插件應當返回一個jquery對象，以便可以進行鏈式操作，除非你是要返回某個特定類型的參數，比如字符串和數組。 要注意$和jquery兩個符號的沖入，可以利用閉包這種技術來回避這個問題。  允許使用內部函數，而且，這些內部函數可以訪問他們所在的外部函數中聲明的局部變量參數和聲明的其他的內部函數，當其中一個這樣的內部函數在包含他們的外部函數之外被調用時，就會形成閉包。  “閉包”是一個很復雜的概念，對于編寫jquery插件其實是有一個模板的，這個模板中就有用到閉包的概念。  常見的jquery插件的都是有如下的格式的： ;(function($){     $.fn.yourName = function(options){  //各種屬性、參數 　　}        var options = $.extend(defaults, options);//定義參數        this.each(function(){         //插件實現代碼        });     }; })(jQuery); 注解： (1)、“;(function($){    })(jQuery);”使用了匿名函數，表示在方法體內的”$”表示的就是”jquery”,為了有更好的兼容性，所以在前面添加一個分號 ,這里的$符號是作為匿名函數的形參 (2)、$.extend(defaults, options);表示的是如果options中的參數總是有值的話，那么options中的值將會代替defaults中的值。舉個例子來說： Var setting={validate:true,limit:5,name:foo}; Var options={validate:fasle,name:tom}; Var newoptions=$.extend(setting，options)； 那結果就是newoptions={validate:false,limit:5,name:tom}. 所以Jquery.extend()(或者是$.extend())經常來設置插件的一些默認的參數。 還有就是$.extend()用來擴展方法，和jquery.fn.extend()一樣都是可以的，他們的區別在于：前者不使用jquery的方法，而后者使用了jquery的方法，就像 addClass(),remove()等。所以可想而知大部分的現有插件都是jquery.fn.extend()進行擴展的。  function foo(options){ 　　options=jquery.extend({ 　　Name：“bar”, 　　Length：5， 　　dataType:”xml” 　　},options); }; 如果options參數傳入的值為空，那么就可以使用默認設置的值。  例子: ;(function($)){ 　　$.fn.extend({ 　　 “functionname”：function(options){//某個方法名 　　Options=$.extend({ 　　odd:”odd”, 　　even:”even” 　　},options); 　　//可以通過options.元素名稱來獲取元素之，如options.odd 　　//some codes 　　$(“.table”).addClass(“”);//為某個元素添加樣式等等 　　} 　　//一個方法結束 　　//另一個方法 this.cleartb = function() {//同時你也可以這么寫，這里cleartb就是方法的名稱     $('#emed_tb01').remove();//方法要做的事情 } 　　}); }  那我們在使用的時候就可以： $(“#id_”).cleartb();//選中id為“id_”的元素執行上面插件中的cleartb的方法。  下面給出一個完整的插件的例子供參考：這個插件是一個消息提示的插件，   ;(function($){     $.fn.manhuaTip = function(options) {//擴展函數manhuaTip         var defaults = {//默認值             Event : "click",             timeOut : 2000         };         var options = $.extend(defaults,options);//以傳參覆蓋         var $tip = $(this);//選定操作的jquery元素為當前選中的元素         $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)