如何创建一个jQuery插件

为什么要创建jQuery插件 ？ 因为这样代码可以复用。
我们有这样一个页面，页面上面有如下的文字(看源码)，我们想要的效果是，当鼠标移到链接的时候，用一个浮动的div来显示a标签的title内容.


这是通过js来完成的。假设有一个方法tooltip(), 你只需要调用这个方法就能达成你的愿望，就像这样：


 
     $('a.tooltip').tooltip({  
         rounded: true  
     });  
 


假设我们把插件命名为tooltip，则需要定义一个jQuery.tooltip.js文件。这样命名只是为了说明这是jQuery的插件，实际上你可以随便命名这个文件名。下面来开始写我们的插件：


(function($){ 
  #   ...code 
})(jQuery);


插件的代码必须包含在这个格式里。这里要注意，要确保你没有使用别的js库，否则这个美元符$，会发生冲突，如果要避免产生这种冲突，你最好在插件里都使用jQuery字符来代替美元符。

我们首先来定义插件函数：


$.fn.tooltip = function(options) {
     ...
}



然后设置默认的参数：


   var  
      defaults = { 
          background : '#e3e3e3', 
          color : 'black', 
          rounded: false 
     },


然后再用setting变量来接收用户自定义的参数，使用extend方法来merge这些参数。


settings = $.extend({}, defaults, options);



现在要开始写方法了，用户如果使用这个插件的时候，传入的jquery dom对象可能不只是一个元素，我们需要给每个class为tooltip的a标签都绑定好这个事件，那么就需要迭代了，这里jquery提供了each方法：


    this.each(function() { 
          var $this = $(this); 
          var title = this.title; 
          ... ...
    }



这里为什么要用$this呢？ 这是为了提醒自己，正在和jQuery对象打交道。

然后写鼠标事件等等，来看最后的代码：


(function($){ 
   $.fn.tooltip = function(options) { 
        
       var 
         defaults = { 
           background: '#e3e3e3', 
           color: 'black', 
           rounded: false 
         }, 
           settings = $.extend({}, defaults, options); 
            
           this.each(function() { 
             var $this = $(this); 
             var title = this.title; 
              
             if($this.is('a') && $this.attr('title') != '') { 
                 this.title = ''; 
                 $this.hover(function(e) { 
                     // mouse over 
                     $('
') 
                       .appendTo('body') 
                       .text(title) 
                       .hide() 
                       .css({ 
                         backgroundColor: settings.background, 
                         color: settings.color, 
                         top: e.pageY + 10, 
                         left: e.pageX + 20 
                       }) 
                       .fadeIn(350); 
                        
                   if(settings.rounded) { 
                     $('#tooltip').addClass('rounded'); 
                   } 
                 }, function() { 
                     // mouse out 
                     $('#tooltip').remove(); 
                 });  
             } 
              
             $this.mousemove(function(e) { 
                 $('#tooltip').css({ 
                     top: e.pageY + 10, 
                     left: e.pageX + 20 
                  }); 
             }); 
           }); 
           // returns the jQuery object to allow for chainability. 
           return this; 
     } 
 })(jQuery); 



总结：

1. 这里有个小技巧，假如要定义多个变量：
var a = {};
var b = {};
var c = {};
可以这么写：
var
a = {},
b = {},
c = {};


2.插件代码里，循环内的this, 循环外的this，循环内的$(this)的关系， 实际上是jQuery对象和dom对象的关系。

页面上调用插件方法，插件方法内部的each外的this，则是jQuery对象，这个对象是个集合对象，也就是$('a.tooltip')这个对象，页面上共有2个class为tooltip的a标签。

jquery对象的$方法，返回的是jquery集合对象，里面的元素，如果你用get方法去调用得到的是dom，你用eq方法调用得到的是jquery对象，比如：
$('a').eq(0)得到的是jquery对象
$('a').get(0)得到的是dom对象，
直接$('a')[0]得到的是dom对象，
而jquery的each方法，我认为是迭代的是dom对象，而不是jquery对象，所以在each里面this是dom对象，而需要$(this)来得到jquery对象来进行操作 。把这个关系搞清楚就行了。