jquery 插件编写教程

编写jquery插件其实非常简单，代码结构也比较固定，只需要注意闭包和$.extends的使用即可。

下面以一个非常简单的higher插件来讲解jquery插件的编写过程。

higher插件作用是：当鼠标移到元素上时，高度变高，移走之后恢复。

首先，我们需要一个闭包来封装代码，避免污染window：

(function($) {
})(jQuery);

然后 我们需要把自己的插件添加到jquery的原型，即$.fn上，直接使用$.fn.extend方法即可：

(function($) {
     $.fn.extend({
          pluginName: function() {
          }
     })
})(jQuery);

当然，如果你不想用extend，直接添加 $.fn.pluginName来添加也行。

接下来就是一般插件都需要做的，提供对多个元素的支持。因为jquery选择器很可能会选择多个元素，我们需要提供对多个元素的支持，这里就需要用到 this.each方法来遍历选中的元素：

(function($) {
     $.fn.extend({
          pluginName: function() {
               return this.each(function() {
                    // here is your code
               });
          }
     })
})(jQuery);

至此，基本结构已经完成，下面就是如何实现插件的逻辑。

在实现上要注意利用闭包隐藏私有方法，然后注意一般如何使用options和defaults。这里，我们执行高度计算的函数是一个私有函数higher，整个插件代码如下：

(function($) {
    // 私有方法放在这里
    var higher = function (h, percent) {  
        return h * (100+percent) / 100;
    }
    
    // 拓展jquery 原型
    $.fn.extend({
        higher: function(options) {
            var defaults = {     // 默认设置
                percent: 20
            };
           
            var settings = $.extend(defaults, options);
            return this.each(function() {     //遍历dom
                var $this = $(this);
                var old_ = $this.height();
                var new_ = higher(old_, settings.percent)
                $this.on("mouseover", function() {
                    $this.height(new_);
                });
                $this.on("mouseout", function() {
                    $this.height(old_);
                });
            });
        }
    });
})(jQuery)

最后这样使用插件：

$('xxx').higher();
$('xxx').higher({percent:50});