亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

jQuery插件--表格隔行變色

標簽:
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);



點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消