JQuery插件的开发是有一套成熟的规范的: 主要由以下几部分组成:
(function($){})(jQuery)
最外层的封装
$.fn
$.fn = JQuery.prototype。
在插件制作中,所有的对象方法都添加到$.fn对象中
$.extend和$.fn.extend()
extend(dest,src1,src2):将src1,src2合并到dest中,属性名相同的则后面的自动覆盖前面的,因此常用于default值的设置 extend(boolean dest,src1,src2):如果第一个参数为布尔值,则决定是否深层覆盖,如果为true,则嵌套的对象也将进行覆盖
$.extend(src) //该方法将src合并到jquery的全局对象中,为JQuery添加了一个静态方法,可以用$.src()直接执行
$.fn.extend(src) //该方法将src合并到jquery的实例对象中,只有JQuery的实例才可以调用,比如$("#input").src()
this.each(function(){ })
编写该扩展方法执行的函数
example:
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
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);