萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Jquery插件編寫簡明教程

Jquery插件編寫簡明教程

 這篇文章主要介紹了Jquery插件編寫簡明教程,jquery插件開發實例,需要的朋友可以參考下

 代碼如下: /*  1.jQuery插件文件名推薦命名為 jquery.[插件名].js 以免和其他javascript庫插件混淆。例如命名為jquery.color.js  2.所有的對象方法名都應當附加到jQuery.fn對象上而所有的全局函數都應當附加到jQuery對象本身上。  3.在插件內部,this指向的是當前通過選擇器獲取的jquery對象,而不像一般方法哪樣,例如chick()方法,內部的this指向的dom元素  4.可以通過this.each來遍歷所有元素  5.所有的方法或函數插件,都應當以分號結尾,否者壓縮的時候可能出現問題,為了更穩妥一些,甚至可以在插件頭部先加上一個分號,  以免他人不規范的代碼給查詢帶來影響。  6.插件應該返回一個jquery對象,以保證插件可鏈式操作。除非插件需要返回的是一些需要回去的量,例如字符串或者數組  7.避免在插件內部使用$作為jquery對象的別名,而應使完整的jquery來表示,這樣可以避免沖突。當然,也可以利用閉包這種技巧來回避  這兒問題,使插件內部繼續使用$作為jquery的別名。  */    //;為了更好的兼容性,開始有個分號  ;(function($){//此處將$作為匿名函數的形參   //$.fn.extend 擴展插件   $.fn.extend({       "color":function(value){//color 自己寫的插件方法名        //jQuery提供了css方法可以直接寫成this.css("屬性","值");         return this.css("color",value);       }   });    })(jQuery);//這裡將jquery作為實參傳遞給匿名函數      function red(){   alert($("#div").color()+"證明插件可用");   alert($("#div").color("red")+"證明插件返回了一個Jquery對象");   $("#div").color("red");  }   在HTML使用插件示例:    代碼如下:<body>       <div id="div" onclick="red()">dddddddddddddddd</div>   </body>  
copyright © 萬盛學電腦網 all rights reserved