_How to Create a Basic Plugin_， 翻译自 jQuery 官方网站。
怎样竖立一个基本的插件
偶然，你想要在你的代码内里完成一个可复用的功用。
举个例子，假如你想要在一个 jQuery 对象上挪用一个简朴的要领，来对这个对象举行一系列的操纵，那末你应当写一个 jQuery 插件。
jQuery是怎样事情的
在最先写插件之前，我们必需对 jQuery 的事情方式有些许的熟悉。来看下面的代码：
$( "a" ).css( "color", "red" );这是一句异常基本的 jQuery 代码，然则你晓得它背地发生了什么吗？当你运用 $ 去挑选元素的时刻，它就会返回一个 jQuery 对象。这个对象包含可用的一切要领（.css(), .click()等）和一切相符你传入挑选器的元素。
这个对象从 $.fn 对象继承一切的要领。 $.fn 对象包含一切 jQuery 对象的要领，也就是说，假如你想增添本身的要领的话，你须要将要领增添到 $.fn 对象上。
※ 译者注 ※
$.fn == $.prototype // true
竖立一个基本的插件
假定我们现在要竖立一个让元素里的笔墨变绿的插件。
我们须要做的只是在 $.fn 里增添一个要领 greenify。
$.fn.greenify = function() {
this.css( "color", "green" );
};
$( "a" ).greenify(); // Makes all the links green.注意到我们在这段代码内里用的是 this 而不是 $(this)。这是因为在 greenify 函数中，this 指代的是 jQuery 对象，所以能够运用 jQuery 的一切要领。
链式操纵
jQuery 最大的特性之一就是支撑链式操纵。链式操纵的完成是靠 jQuery 一切的要领返回 jQuery 对象来完成的（也有一些破例，比方无参数的 .width() 返回的就是宽度）。
只须要增添一行代码，我们就能够让我们的插件变得能够链式操纵：
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
$( "a" ).greenify(); // Makes all the links green.定名空间
$ 这个变量在许多 JavaScript 库里都很受欢迎。假如你一同运用 jQuery 和其他的库，你能够就得用 jQuery.noConflict() 来让 jQuery 返还对 $ 变量的控制权了。
但是因为 $ 变量已不是 jQuery 了，我们的插件就没办法事情了。要让我们的插件继承事情，而且也能够和其他的库一同运用，我们须要将我们的代码放入一个立即实行函数表达式中，然后将jQuery当作参数传入，定名为 $：
(function ( $ ) {
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
}( jQuery ));除了上面提到的两个功用，立即实行函数增添了一层作用域，让我们能够定义本身的私有变量。比方：
(function ( $ ) {
var shade = "#556b2f";
$.fn.greenify = function() {
this.css( "color", shade );
return this;
};
}( jQuery ));※ 译者注 ※
jQuery.noConflict()的作用是返还$的控制权。为何说是返还呢？因为 jQuery 在初始化的时刻，会纪录
$这个变量，然后再将$绑定为本身。
所以挪用jQuery.noConflict()，实际上是将$赋值为之前纪录的旧值。
削减绑定要领的数目
当编写插件时，我们最好只在 $.fn 上绑定一个要领。这不仅削减了其他的插件掩盖你的插件的概率，也削减了你的插件掩盖其他插件的概率。
运用 each() 要领
一般来说，运用挑选器挑选的 jQuery 对象都是一个鸠合。假如你想对这里的某些元素举行操纵（比方猎取属性，盘算位置等），你就须要用到 .each() 要领来举行遍历。
$.fn.myNewPlugin = function() {
return this.each(function() {
// Do something to each element here.
});
};※ 译者注 ※
有读者能够会问，在之前的代码中.css()并没有举行遍历，怎样使一切元素里的题目都变成绿色？
这是因为.css()要领里已做了这个遍历的事情了。
注意到我们返回的是 .each() 的效果，而不是 this。这是因为 .each() 也是可链式操纵的， 它返回的也是 this。不过如许写越发符合链式操纵的头脑。
接收用户设置
当你的插件变得愈来愈庞杂的时刻，你最好经由过程接收用户的设置来让用户定制某些功用。
最简朴的要领就是运用一个对象来贮存设置。
(function ( $ ) {
$.fn.greenify = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#556b2f",
backgroundColor: "white"
}, options );
// Greenify the collection based on the settings variable.
return this.css({
color: settings.color,
backgroundColor: settings.backgroundColor
});
};
}( jQuery ));
/* Example usage */
$( "div" ).greenify({
color: "orange"
});默许的色彩值 #556b2f 被用户定义的值 orange 掩盖。
※ 译者注 ※
x.extend([deep], target [,obj1][,objN])
.extend()要领主如果将一切obj的属性和要领悉数增添到target上。同名的会掩盖，而null和undefined会被疏忽。
当只要一个参数的时刻，x就变成了target，也就是将这个唯一的参数的一切要领和属性悉数增添到x中。
x能够是：
$
$.fn
$.extend()和$.fn.extend()的差别也就异常显著了。
完全的例子
(function( $ ) {
$.fn.showLinkLocation = function() {
this.filter( "a" ).append(function() {
return " (" + this.href + ")";
});
return this;
};
}( jQuery ));HTML 构造：
<!-- Before plugin is called: -->
<a href="page.html">Foo</a>
<!-- After plugin is called: -->
<a href="page.html">Foo (page.html)</a>※ 译者注 ※
上面的例子里，this.filter()和this.href的this是差别的。前者是 jQuery 对象，后者是 HTMLElement 对象。var $links = $('a'); $links[0] instanceof HTMLElement; // true $links.slice(0, 1) instanceof jQuery; // true $links.each(function(){ this instanceof HTMLElement; // true });
