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(); 。这句代码会把匹配的选择器的背景颜色和字体颜色变成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()方法，这个方法我会在下一篇博客中详细介绍。并且在下一篇博客中，我会介绍一下针对特定元素的扩展。
