学习编写jquery插件—美化表格

当了这么久的码农，也用了无数次别人写的插件，是时候该学习学习自己动手写插件了。今天先借用别人写的超简单、实用的美化表格小插件，来学习下jquery插件的编写。

写插件之前先想好插件要实现的功能，这里写的美化表格插件就是让表格的奇偶行颜色不同，然后鼠标移到某行上，某行可以高亮显示。

接下来想想插件的实现原理，美化表格无非就是找到表格的奇偶行，然后添加不同的class，活动行高亮显示也很简单，只要判断mouseover事件，然后添加一个class，mouseout的时候，再去掉这个class即可。

其实写jquery插件都有一个通用的框架，看别人写的插件就会发现，大多套用了这个通用的框架模板。

(function($){
$.fn.yourName=function(options){
var defaults={
//各种属性、参数
}
var options=$.extend(defaults,options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

有了这个框架，接下来开始写功能的实现，给美化表格的插件起个名字，就叫jquery.tableUI.js吧,方法名就是tableUI啦。

首先定义参数和属性，这里涉及到奇偶行、活动行，所以定义三个class名称，就叫做：evenRowClass、oddRowClass和activeRowClass。

(function($){
$.fn.tableUI=function(options){
var defaults={
//各种属性、参数
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options=$.extend(defaults,options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

var options = $.extend(defaults, options);
其实就是合并多个对象为一个，将options对象合并到defaults对象中，再赋值给options变量。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
需要的属性参数写好了，开始写实现的代码吧
思路就是找到奇数行和偶数行（感谢jQuery提供了类似tr:even这种写法，使其及其简单），然后添加上相应的class。然后再给所有的tr，绑定mouseover和mouseout事件即可。代码如下：

(function($){
$.fn.tableUI=function(options){
var defaults={
//各种属性、参数
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options=$.extend(defaults,options);
this.each(function(){        //这里面的this为jquery对象，而不是dom对象
//插件实现代码
var thisTable=$(this);
//设置奇偶行颜色
thisTable.find("tr:even").addClass(options.evenRowClass);
thisTable.find("tr:odd").addClass(options.oddRowClass);
//设置活动行颜色
thisTable.find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
thisTable.find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);

this.each(function(){}),这里面的this指jquery对象，而不是dom对象。为什么这里的this是jquery对象而不是dom对象，因为this永远指向调用该方法（函数）的那个对象(call，apply方法除外)。这里面tableUI是通过$(".table_solid") 调用的，所以tableUI方法里面的this为jquery对象。

最后在插件上方，写上插件的名称、版本号、完成日期、作者等注释信息，就算大功告成了。

最后给页面的table调用这个方法：

$(function(){
$(".table_solid").tableUI();
});