1.jQuery插件
jQuery 插件简单的就是一个用于扩展 jQuery 的 prototype 对象的新方法。 通过扩展 jQuery 的 prototype 对象，所有 jQuery 对象都将通过继承获得你添加的新方法。
我们知道，调用 jQuery()时实际上是创建了一个继承了 jQuery 所有方法的全新对象。插件的基本思路就是对一组元素执行一些操作。 你可以认为 jQuery 核心对象上的那些方法就是插件，比如 fadeOut和 addClass。
2.如何创建一个基本的插件
一个典型的插件的代码如下：
(function($){
$.fn.myNewPlugin = function() {
return this.each(function(){
// 一堆代码...
});
};
}(jQuery));
那几行代码，没把你搞晕吧？ 其实里面的重点就是扩展 jQuery 的 prototype 对象，看下面这行：
$.fn.myNewPlugin = function() { //...
这里只是将它放在一个即时执行的函数内部：
(function($){
//...
}(jQuery));
这样做是为了营造一个私有的 scope，我们可以在这个私有 scope 内部安全地使用 $ 扩展 jQuery， 而不用担心 $ 会被其他 js 库的改写。
所以，这里实际的插件代码是这样的：
$.fn.myNewPlugin = function() {
return this.each(function(){
// 一堆代码...
});
};
新插件中，关键字 this指向的是调用这个插件的 jQuery 对象。
var somejQueryObject = $('#something');
$.fn.myNewPlugin = function() {
alert(this === somejQueryObject);
};
somejQueryObject.myNewPlugin(); // alerts 'true'
典型的 jQuery 对象是包含任意多个的 DOM 对象的， 这也是为什么 jQuery 对象被看作是 DOM 对象集的原因。
因此，针对对象集做操作需要遍历它， 通过 jQuery 的 each()方法我们很容易地实现了。
$.fn.myNewPlugin = function() {
return this.each(function(){
});
};
与 jQuery 其它方法一样，each()方法也是返回一个 jQuery 对象， 这成就了我们所熟知并深爱的链式写法($(...).css().attr()...)。 我们不应该破坏这种惯例，于是乎，我们也应该返回一个 this对象。 在循环内部，你可以对每一个元素做你要做的事。就上面所讨论的， 下面是一个小插件的例子。
(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').each(function(){
$(this).append( ' (' + $(this).attr('href') + ')' );
});
};
}(jQuery));
// 使用样例:
$('a').showLinkLocation();
这个小巧的插件可以将集合中所有的链接的 href属性值包含在括号 中并将它作为该元素的内容显示出来。
<!-- 调用插件之前: -->
<a href="page.html">Foo</a>
<!-- 之后: -->
<a href="page.html">Foo (page.html)</a>
虽然简单，但这个插件还是可以优化一下:
(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').append(function(){
return ' (' + this.href + ')';
});
};
}(jQuery));
我们利用了，append方法是可以接受一个回调函数作为参数， 并将回调函数的返回值作为要添加的内容的这一点。同时，也可以注意到， 我们不是通过 attr方法去获取 href的属性值， 而是直接使用了内置的 DOM API，访问元素的 href属性来获取。
下面是另一个例子。它不需要我们用 each()方法去循环遍历， 只是简单地直接委派给另一个 jQuery 方法：
(function($){
$.fn.fadeInAndAddClass = function(duration, className) {
return this.fadeIn(duration, function(){
$(this).addClass(className);
});
};
}(jQuery));
// 使用方法:
$('a').fadeInAndAddClass(400, 'finishedFading');
转载出处:http://docs.huihoo.com/jquery/jquery-fundamentals/zh-cn/ch08s02.html
