先来看这么一段代码：
$('span.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');
$('a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');
$('p a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');
作为你一懒癌晚期的程序员，怎么容忍这么一段重复的代码呢？而且有可能很多都需要这样的配置
特么逗我.jpg
能不能考虑先写个函数来调用设置，然后在<a href="http://www.jb51.net/article/42816.htm">这里</a>搜到如下
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。
那好，这样的话就好办了，针对上面的需求我们可以使用这个扩展一个highlight1()
$.fn.highlight1 = function () {
// this已绑定为当前jQuery对象:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
于是，开头的那段代码可以改写：
$('span.hl').highlight1();
$('a.hl').highlight1();
$('p a.hl').highlight1();
可是，这样写太死板了，只要一个属性不一致就要重新弄一个函数，就会有一堆的highlight2，highlight3等等。那我是不是可以传入一个参数，让函数内部去选择显示啥属性，那改造一下函数
$.fn.highlight2 = function(options) {
var bgcolor = options && options.backgroundColor || '#fffceb';
var color = options && options.color || '#d85030';
this.css('backgroundColor', bgcolor).css('color', color);
return this;
}
// 上面的代码改为
$('span.hl').highlight2( { backgroundColor: '#00a8e6', color:'#ffffff' } );
$('a.hl').highlight2( { color: '#00a8e6', backgroundColor: '#fff8de' } );
$('p a.hl').highlight2();
另外一种方法是使用$.extend(target, obj1, obj2, ...)，把多个obj1的属性合并到一个target对象中，碰到同名属性，则后面对象的属性优先级更高。
var opts = $.extend({}, $.fn.highlight.defaults, options);
到这里，我们的大部分工作已经做好了，只是有些小问题，如果我仅仅只想改变其中一个设置呢，那看下最终的版本吧！
$.fn.highlight = function(options) {
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
// 我们将这个方法公开出来，这样可以直接设置其不同的属性
$.fn.highlight.defaults = {
color: '#d85030',
backgroundColor: '#fff8de'
};
示例：
$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';
$('#test-highlightEx span').highlight();
至此，我们已经了解到jQuery的扩展是怎么回事了
参考
<a href="http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014356468967974219593d94f64d06b370c87fc38eade4000">扩展-廖雪峰的官方博客</a>
