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()方法，这个方法我会在下一篇博客中详细介绍。并且在下一篇博客中，我会介绍一下针对特定元素的扩展。
原文地址：https://www.cnblogs.com/xbqianduan/p/8214675.html