扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。
一、入门
编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称：
复制代码 代码如下:
jQuery.fn.myPlugin = function(){
//你自己的插件代码
};
用户非常喜欢的$符号哪里去了？ 它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样可以避免$号被其他库覆写。
复制代码 代码如下:
(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
二、环境
现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。
复制代码 代码如下:
(function ($) {
$.fn.myPlugin = function () {
//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$('#element').myPlugin();
三、基础知识
现在，我们理解了jQuery插件的基础知识，让我们写一个插件，做一些事情。
复制代码 代码如下:
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。
四、维护Chainability
很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。
复制代码 代码如下:
(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');
由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此，如果你的插件不返回固有的价值，你应该总是在其作用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的作用范围内被传递。 因此，在前面的例子，字符串'width'变成了插件的类型参数。