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});