jquery插件开发

jQuery插件的开发包括两种：

 

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法,这样通过选择器获取的jQuery对象实例也能共享该方法。下面就两种函数的开发做详细的说明。

 

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

2、对象级别的插件开发

对象级别插件95%的用户（针对包装集）的写法

第一种写法：

/**对象级别的插件

 * @author leech

 */

;(function($) {

  $.fn.extend({

    "fousColor":function(li_col) {

     var def_col = "#ccc";  //默认的颜色

     var lst_col = "#fff";  //失去焦点颜色

     //传进来的颜色参数是否为空

     li_col = (li_col == 'undefined') ? def_col : li_col;

     

     //遍历li中的元素

     $(this).find("li").each(function() {

       $(this).mouseover(function() {

         $(this).css("background-color", li_col) ;

       }).mouseout(function() {

         $(this).css("background-color", lst_col) ;

       }) ;

     }) ;

     return this;

    },

    

    //表格行换颜色

    "alterBgColor":function(opts) {

     //设置默认参数值

     opts = $.extend({

       odd:"odd",

       even:"even",

       selected:"selected"

     }, opts) ;

     

     $("tbody>tr:odd",this).addClass(opts.odd) ;

     $("tbody>tr:even",this).addClass(opts.even) ;

     

     $("tbody>tr",this).click(function() {

       //判断当前是否选中

       var hasSelected = $(this).hasClass(opts.selected) ;

       if(hasSelected) {

         $(this).removeClass(opts.selected).find(":checkbox").attr("checked",false) ;

       } else {

         $(this).addClass(opts.selected).find(":checkbox").attr("checked",true) ;

       }

     }) ;

     return this;

    }

  }); 

})(jQuery) ;

第二种写法：

/**

 * @author Administrator

 * 包装器方法

 */

(function($) {

  $.fn.focusColor = function(opts) {

    var settings = $.extend({

     def_col:"#ccc",

     lst_col:"#fff" 

    },opts||{});

    

    $(this).find("li").each(function() {

     $(this).mouseenter(function() {

       $(this).css("background-color", settings.def_col) ;

     }).mouseleave(function() {

       $(this).css("background-color", settings.lst_col) ;

     });

    });  

  };

})(jQuery);

全局函数的插件写法：

;(function($) {

  $.extend({

     ltrim :function( text ) {

       return (text ||  "").replace( /^\s+/g, "" )

     },

     rtrim :function rtrim(  text ) {

       return (text ||  "").replace( /\s+$/g, "" )

     }

  });

})(jQuery);

插件的编写一般应用闭包....