JQUERY插件其实这么回事!
2012-11-18 18:02
260 查看
今天在博客园逛了一圈收获颇丰啊!!那就写篇博客来庆祝一下,这样太土了,要不来个jquery插件吧!!嘻嘻~~~~~
表格隔行变色以及鼠标移上去之后变色的插件----(兴奋中,这是抄人家的,咱是借鉴的!!)
就像某位大神说的,其实jQuery插件模式可以仿照一个模版来:
这个模版中有三点需要格外注释下:
1、这是一个闭包函数,只在加载完这个程式序列后,直接以jQuery为参数直接传入执行。
2、这是一个插件函数,简单来说就是用这个指定的函数,所有jquery封装的对象都具有这个方法,就像$("selector").addClass()中addClass()一样
3、这个函数在程式中是这样写的$.extend(defaults,options),表达的意思是如果有options就用options,没有就默认用defaults,也就是初始化的参数。
今天先写到这里,关于闭包会专门有个专题来讲,会坚持写下去....
表格隔行变色以及鼠标移上去之后变色的插件----(兴奋中,这是抄人家的,咱是借鉴的!!)
(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,也就是初始化的参数。
今天先写到这里,关于闭包会专门有个专题来讲,会坚持写下去....
相关文章推荐
- jquery插件为什么要这么写(function($){})(jQuery)
- jQuery插件开发 - 其实很简单
- jQuery插件开发 - 其实很简单
- jQuery插件开发 - 其实很简单
- 插件基础篇6:jQuery 插件开发 其实很简单
- jQuery的jsonp跨域是这么回事.
- jquery原来是这么回事
- Jquery插件原来就这么简单
- 【转】jQuery插件开发 - 其实很简单
- Jquery插件原来就这么简单
- 其实就是这么回事
- 强烈推荐:240多个jQuery插件
- 基于bootstrap的响应式jQuery滚动新闻插件 _bootstrapNew
- 20个强大的jQuery翻书插件【 jQuery flipbook】
- jquery 弹窗插件 layer
- jQuery文字和图片列表滚动插件
- jquery中下拉多选插件jquery.multiSelect的使用
- qTip2 精致的jQuery提示信息插件
- 实例:jQuery formValidator表单验证插件
- jQuery.hhLRSlider 左右滚动图片插件