jQuery插件--表格隔行变色-创新互联

插件分俩种：

·类级别组件开发：

     ---即给JQuery命名空间下添加新的全局函数，也称静态方法。形式如下：

jQuery.myPlugin = function (){           //do something};

例如：$.ajax(options); $.type();

·对象级别组件开发

      ---挂在JQuery原型下的方法，通过选择器获取的JQuery对象实例能共享该方法，称为动态方法。形式如下：

//$.fn == $.prototype$.fn.myPlugin = function () {          //do somthing};

例如：.addClass(); .attr();

同时，插件也要保持JQuery链式调用的特性，链式调用的形式如下：

$.fn.myPlugin = function (){

     return this.each(function (){  //return实现链式调用

             //do something

     });

};

----------------------------------以上就是插件机制---------------------------------

 下面实现一个简单的表格隔行变色插件：

 //为了更好的兼容性，前面有个分号(function($){
    $.fn.tableUI = function(options){        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow",
            clickRowClass:"clickRow"
        }        var options = $.extend(defaults, options);//$.extend(option...)返回一个对象.
        //为了实现链式调用，用return返回对象
        return this.each(function(){            //缓存this
            var thisTable = $(this);
            $(thisTable).find("tr:even").addClass(options.evenRowClass);
            $(thisTable).find("tr:odd").addClass(options.oddRowClass);
            $(thisTable).find("tr").bind("mouseover",function(){
                $(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
            });
            $(thisTable).find("tr").bind("mouseout",function(){
                $(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
            });
            $(thisTable).find("tr").bind("click",function(){
                $(this).addClass(options.clickRowClass);
            });
        });
    };
})(jQuery);

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。