1、編寫jquery插件要遵循命名規範，通常情況下，jquery插件采用這種模式進行命名：jquery.pluginName.js，壓縮版為：jquery.pluginName.min.js

2、編寫jquery插件的方式有3種，第一種是通過jquery函數的原型屬性來編寫插件。第二種是采用jQuery.extend()方法。第三種是使用強大的jQuery UI Widget Factory編寫插件。這裏我選擇用jQuery函數的原型屬性來編寫。

　　2.1 jQuery源碼中有這樣一句代碼：jQuery.fn = jQuery.prototype = { //jquery goes here// }，這句代碼的意思是，把jQuery函數的原型對象賦值給jQuery的fn屬性，在jQuery.fn屬性上添加方法就相當於在jQuery的原型對象上添加方法。我們就是通過jQuery.fn來編寫jQuery插件。

　　2.2 一個小例子：

1 (function($){
2     $.fn.highlight1= function(){
3     　　this.css(‘backgroundColor‘, ‘#fffceb‘).css(‘color‘, ‘#d85030‘);  
4     　　return this;
5     }
6 })(jQuery);

　　 在這個例子中，我們為jquery擴展了一個highlight1()方法，我們可以像調用jQuery默認的方法那樣調用我們擴展的這個highlight1()方法。 1 $(selector).highlight1();

　　　　這樣，一個簡單的jQuery插件就編寫完成了。可能有的朋友會疑惑，為什麽要renturn this？原因是我們自己擴展的jQuery方法也要能支持jQuery最精髓的地方—鏈式調用。return this就是讓我們自己擴展的jQuery方法也支持連是調用。因為這裏的this也是一個jQuery對象，所以返回它就可以接著鏈式調用其他方法了。

　　2.3 對上述例子的完善。

　　　　 上面的例子有個不太完善的地方，調用highlight1()方法的時候，只能將匹配的元素的背景和字體顏色變成我們預先設置好的顏色，這樣不好。最好是能讓用戶自定義他們想要的顏色，接下來我們修改一下highlight1()方法。具體方法是我們可以給方法加一個參數，讓用戶自己把參數用對象傳進去。

 1  (function($){
 2      $.fn.highlight2= function(options){ 
 3          //要考慮到各種情況;
 4          //options為undefined;
 5          //options只有部分key;
 6          var bgcolor = options && options.backgroundColor || ‘#fffceb‘;
 7          var color = options && options.color || ‘#d85030‘;
 8          this.css(‘backgroundColor‘, bgcolor).css(‘color‘, color);  
 9          return this;
10     }
11 })(jQuery);

　　　　用戶可以像jQuery的css()方法那樣給highlight2()方法傳參數，來自己制定背景和字體顏色：

1 $(selector).highlight({
2     backgroundColor:‘#ccc‘,
3     color:‘#ff0000‘ 
4 });

　　　　我們也可以讓用戶修改默認值，用戶設置默認值後再調用highlight2()方法就不用每次都傳值了。

 1 (function($){
 2     $.fn.hightlight3 = function(){
 3         // 合並默認值和用戶設定值:
 4         var opts = $.extend({}, $.fn.highlight.defaults, options);
 5         this.css(‘backgroundColor‘, opts.backgroundColor).css(‘color‘,     
 6         opts.color);
 7         return this;
 8     }
 9 
10     //設定默認值
11     $.fn.highlight3.defaults = {
12         color:"#d85030",
13         backgroundColor:"#fff8de"
14     }
15 })(jQuery)
16 
17 //用戶使用時，只需一次性設定默認值
18 $.fn.highlight3.defaults.color = ‘#fff‘;
19 $.fn.highlight3.defaults.backgroundColor = ‘#000‘;
20 
21 //然後調用highlight3()方法就可以了，匹配元素的背景和字體顏色就都是用戶自己定義的默認值了
22 $(selector).highlight3();

　　　　這樣，我們的highlight()方法就比較完美了。

　　　　也許你註意到了，在最終版的highlight()方法中，用到了$.extend()方法，這個方法我會在下一篇博客中詳細介紹。並且在下一篇博客中，我會介紹一下針對特定元素的擴展。

編寫自己的jquery插件之基礎