您的位置:首页 > Web前端 > JQuery

JQUERY插件其实这么回事!

2012-11-18 18:02 260 查看
今天在博客园逛了一圈收获颇丰啊!!那就写篇博客来庆祝一下,这样太土了,要不来个jquery插件吧!!嘻嘻~~~~~

表格隔行变色以及鼠标移上去之后变色的插件----(兴奋中,这是抄人家的,咱是借鉴的!!)

(function($){
$.fn.tableUI=function(options)
{
var defaults=
{
evenClass:"evenClass",
oddClass :"oddClass",
activeClass :"activeClass"
}

var options = $.extend(defaults,options);
this.each(function()
{
var thistable = $(this);
$(thistable).find("tr:even").addClass(options.evenClass);
$(thistable).find("tr:odd").addClass(options.oddClass);
$(thistable).find("tr").bind("mouseover",function()
{
$(this).addClass(options.activeClass);
});
$(thistable).find("tr").bind("mouseout",function()
{
$(this).removeClass(options.activeClass);
});
});
};
})(jQuery);

$().ready(function(){
$("table").tableUI();
});


  就像某位大神说的,其实jQuery插件模式可以仿照一个模版来:

(function($)
  {
    $.fn.plusName=function()
      {
        var defaults={};
        var options=$.extend(defaults,options);
        this.each(function(){});
      };
  }
)(jQuery)


 这个模版中有三点需要格外注释下:

1->(function($))(jQuery)  2->$.fn.plusName   3->$.extend()


1、这是一个闭包函数,只在加载完这个程式序列后,直接以jQuery为参数直接传入执行。

2、这是一个插件函数,简单来说就是用这个指定的函数,所有jquery封装的对象都具有这个方法,就像$("selector").addClass()中addClass()一样

3、这个函数在程式中是这样写的$.extend(defaults,options),表达的意思是如果有options就用options,没有就默认用defaults,也就是初始化的参数。

今天先写到这里,关于闭包会专门有个专题来讲,会坚持写下去....
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: