庇护祝福的分享

Be worthy

JQuery插件开发

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);