你还不会创建jQuery插件 ？

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://blackanger.blog.51cto.com/140924/132338

如何创建一个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对象来进行操作 。把这个关系搞清楚就行了。 

本文出自 “{ :Alex Space => " Ruby Notes " }” 博客，请务必保留此出处http://blackanger.blog.51cto.com/140924/132338

本文出自 51CTO.COM技术博客