通过了上一篇的讲解，相信你对于开发“实用函数”jQuery插件的基本技巧有了一定的认识。比如通过即时执行函数来正确使用$函数，通过$.extend()函数实现配置对象的合并。在这一篇中将讲解更常用的一种扩展jQuery的方法。即给jQuery包装集（jQuery对象）添加方法。在这里说明，本文所说的jQuery包装集和jQuery对象是同一个概念。都是通过$()函数获得的JS对象。但包装集这个说法显然更能说明其真实含义，毕竟多数时候$()都会返回多个DOM对象的封装。
1. 初步认识
我们先来看看原有的jQuery包装集如何调用对象方法执行相应的操作。
$("a").css("color", "red");
这段代码先获得一个包装集包装了所有的a对象，然后将所有的a对象添加红色显示。我们今天所说的这种插件很容易就能写出来。比如我们可以添加一个方法叫做setColorToRed()。可以直接将选定的元素设置成红色。可以这样写
(function($) {
$.fn.setColorToRed = function() {
this.css("color", "red"); // this 直接指代包装集对象
return this; // 返回this，保证可以链式调用其它方法
}
})(jQuery);
$("a").setColorToRed(); // 直接设置所有a为红色
jQuery中 $.fn 是 $.prototype的别名，因此我们把方法添加到$.fn上就相当于给jQuery对象原型添加方法。最后方法中返回this，保证了方法支持链式调用。
2. jQuery对象级插件的通常做法。
这种类型的插件在很多时候都对选择的DOM进行了增强。所谓增强可以理解为给选定的HTML添加CSS类、添加新的HTML标签等等。比如有一个插件叫做showDialog。在页面中有这样的一个HTML标签
<div id="dialog"></div>
在执行
$("#dialog").showDialog({
title : "警告",
content : "系统运行错误！"
});
之后HTML会变成
<div id="dialog"></div> <div id="dialog" class="dialog-container"> <h1 class="dialog-title">标题></h1> <div class="dialog-content"> <p>系统运行错误！</p> </div> <button>确定</button> </div>
通过jQuery的一系列操作很容易生成上述的HTML代码并插入到DOM文档树中。再配合一定的CSS样式就可以显示出一个对话框出来。这样就带给我们一个编写jQuery对象插件的一般思路。
第一步：写出完整的HTML文件和CSS文件，包含用到的图片。并在浏览器中调好最终效果
第二步：通过jQuery插件代码中动态的在我们选择的DOM对象中添加需要的HTML代码和相应的CSS类。注意尽量添加CSS类而不要添加ID属性，因为有可能在同一个页面调用多次你的插件，就会产生多个ID相同的DOM 节点。
在配合上一篇中学到的相关知识。可以给出通用的创建对象级别插件的模板代码：
(function($) {
var settings = {
def1 = "def1",
def2 = "def2",
// 更多的默认配置
};
$.fn.myPlugin = function(options) {
settings = $.extend(settings, options || {}); // 合并默认和用户配置
// 这里return也是为了保证链式调用
// 并且each方法会遍历所有DOM对象，使得我们可以单个处理包装集中的所有DOM对象
return this.each(function() {
// 这里的this是一个DOM对象
init(this);
});
//如果你的插件很复杂，使用更多的函数分割逻辑是个好方法
function init(target) {
//这里写插件的逻辑，可以动态添加DOM节点和为节点添加CSS样式等
}
}
})(jQuery);
最后总结一下，jQuery的对象插件扩展一般都是添加新的DOM节点，来增强页面效果。在编写代码前一定要先写出静态的HTML代码和CSS样式。
