jQuery库扩展

最近练习一个小应用，体会到jQuery库的强大和方便，以及将一些js代码封装为jQuery插件的便利。所以简单总结一下jQuery库扩展的相关要素。

常见jQuery插件的形式如下：

//为了有更好的兼容性，开始处有个分号
;(function($){    //此处将$作为匿名函数的形参
  /*这里放置代码，可以使用$作为jQuery的缩写别名*/
})(jQuery);       // 这里将jQuery作为实参传递给了匿名函数

一.jQuery插件机制

jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。

1.jQuery.fn.extend()——封装jQuery对象方法的插件（可以发挥jQuery选择器的强大优势）

（1）：

;(function($){
     $.fn.extend({
         pluginName:function(opt,callback){
          //插件代码
         }
     })     
})(jQuery);

（2）：

;(function($){
    $.fn.pluginName = function(){        
          //插件代码
         };   
})(jQuery);

上述定义了一个jQuery函数，形参是$，函数定义完后将jQuery这个实参传递进去，并且立即调用执行。这样在写jQuery插件时，也可以使用$这个别名，而不会和prototype引起冲突。

2.jQuery.extend()——封装全局函数的插件（给jQuery类添加类方法，例如$.AJAX()）

（1）：

将函数放到jQuery命名空间之下。可以批量完成。

;(function($){
     $.extend({        
            pluginName1:function(value){
                //插件代码
             }
            pluginName2:function(value){
              //插件代码           
             }
           ......
      })     
})(jQuery);

jQuery.extend({ 
    foo: function() { 
        alert('This is a test.'); 
    }, 
    foo2: function(param) { 
        alert('This function takes a parameter, which is "' + param +'".'); 
    } 
}); 

调用方法：
jQuery.foo(); 
jQuery.foo2('param');

note:   a:jQuery.extend()方法除了扩展jQuery对象之外，还可以用于扩展已有的Object对象。

            b:jQuery.extend()方法常被用于设置插件方法的一系列默认参数

function foo(options){
   options = jQuery.extend({
         name: "foo",
         length:4,
         dataType:"xml"  /*默认参数*/
     },options);     /*options为传递的参数*/       
};

（2）：避免某些函数或者变量名与其他jQuery插件冲突，可以将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = { 
    foo: function() { 
        alert('This is a test.'); 
    }, 
    foo2: function(param) { 
        alert('This function takes a parameter, which is "' + param +'".'); 
    } 
}; 

调用方法：
$.myPlugin.foo(); 
$.myPlugin.foo2('param'); 

二.jQuery插件基本要点

1.jQuery插件的文件命名推荐jquery.[插件名].js。

2.所有的对象方法应当附加到jQuery.fn对象上，所有的全局函数都应当附加到jQuery对象本身上。

3.插件内部，this指向的是当前通过选择器获取的jQuery对象，区别于一般方法那样，例如click()方法，内部this指代的是DOM元素。

4.可以通过this.each来遍历所有元素。

5.jQuery插件还有一种称为选择器插件，可以扩充一些自己需要的或者喜欢的选择器。

6.避免在插件内部使用$作为jQuery对象的别名，应当使用完整的jQuery来表示，以避免冲突。当然可以使用闭包来回避这个问题，使插件内部继续使用$ 作为jQuery对象的别名。