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