很简单，不解释。
3.2 链式操作
链式操作？都听过吧。。。比如下面这一句话：
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
就是能在当前的元素后面通过“.” 来实施更多的操作。这个动作特别的潇洒。
那我们要怎么才能实现这种效果呢？很简单，我能只需要把对象回去就可以了。请注意上面的第六点：插件应该返回一个JQuery对象，以便保证插件的可链式操作。
我们依旧看刚刚的例子：

(function ($) { $.fn.hoverElement = function () { return this.each(function () { $(this).hover( function () { $(this).addClass("Add"); }, function () { $(this).removeClass("Remove"); } ); }) } })(jQuery);

代码都一样，唯一区别的是：this.each(function () { 这个前面加了一个 return。这样就实现了我们的链式操作。
然后 你这样：

$(document).ready(function () { $(".hoverText").hoverElement().css("color","yellow"); });

能看到 文字已经变成了yellow色的了。

对于一个商业插件来说，自定义插件的样式是必不可少的。我们可以通过我们自己输入不同的样式，来改变开发者的默认样式。比如说最常见的 width、height、url、color等等。要是没有这些自定义的东西，那开发者开发的插件的利用价值就大大的减小了。

OK， 下面的这个实例的意思是 当我们hover一个对象的时候，它能改变它的text、background、foreground三个属性，也就是文本、背景色、前景色。用户可以设 定他自己想设定的值，而不是固定死的。当然，如果用户没有设置，我们会给他一个默认值。
定义这类插件的开发框架是：
$.fn.YouPlugin = function (options) {...}
为了防止一些偷懒的人，我们需要设置一些默认值，当它没有设置的时候，我们就用这些默认值。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
那默认值和用户传进来的值是怎么联合在一起的呢？这个就需要我们在开篇的时候讲到的$.extend()知识了。
var obj = $.extend(defaultVal, options);
这样子的话，就把用户自定义的值覆盖了默认用户的值。如果用户没定义值，就用系统自定义的。
代码如下：

(function ($) { $.fn.textHover = function (options) {//options 经常用这个表示有许多个参数。 var defaultVal = { Text: 'Your mouse is over', ForeColor: 'red', BackColor: 'gray' }; //默认值 var obj = $.extend(defaultVal, options); return this.each(function () { var selObject = $(this);//获取当前对象 var oldText = selObject.text();//获取当前对象的text值 var oldBgColor = selObject.css("background-color");//获取当前对象的背景色 var oldColor = selObject.css("color");//获取当前对象的字体的颜色 selObject.hover(function () {//定义一个hover方法。 selObject.text(obj.Text);//进行赋值 selObject.css("background-color", obj.BackColor);//进行赋值 selObject.css("color", obj.ForeColor);//进行赋值 }, function () { selObject.text(oldText); selObject.css("background-color", oldBgColor); selObject.css("color", oldColor); } ); }); } })(jQuery);

代码也很简单，上面都有些了解释，此刻不在罗嗦。
怎么用呢？很简单。

<div> Mouse over here..... </div> <div> Mouse over here..... </div>

$(document).ready(function () { $('#div1').textHover({ Text: 'I am going to over..', ForeColor: 'yellow', BackColor: 'Red' }); $('#div2').textHover({ Text: 'I am second div...' }); });

就能看到效果了。
希望对你们有帮助。
OK，到现在为止，应该一个插件开发的基本要素就这些了。本来后面还有一个比较复杂的代码，一起发的，等下一节吧！
源码下载