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