1.jQuery插件
jQuery 插件簡(jiǎn)單的就是一個(gè)用于擴(kuò)展 jQuery 的 prototype 對(duì)象的新方法命迈。 通過(guò)擴(kuò)展 jQuery 的 prototype 對(duì)象氏仗，所有 jQuery 對(duì)象都將通過(guò)繼承獲得你添加的新方法。
我們知道，調(diào)用 jQuery()時(shí)實(shí)際上是創(chuàng)建了一個(gè)繼承了 jQuery 所有方法的全新對(duì)象。插件的基本思路就是對(duì)一組元素執(zhí)行一些操作卓箫。 你可以認(rèn)為 jQuery 核心對(duì)象上的那些方法就是插件，比如 fadeOut和 addClass垄潮。
2.如何創(chuàng)建一個(gè)基本的插件
一個(gè)典型的插件的代碼如下：
(function($){
$.fn.myNewPlugin = function() {
return this.each(function(){
// 一堆代碼...
});
};
}(jQuery));
那幾行代碼烹卒，沒(méi)把你搞暈吧闷盔？ 其實(shí)里面的重點(diǎn)就是擴(kuò)展 jQuery 的 prototype 對(duì)象，看下面這行：
$.fn.myNewPlugin = function() { //...
這里只是將它放在一個(gè)即時(shí)執(zhí)行的函數(shù)內(nèi)部：
(function($){
//...
}(jQuery));
這樣做是為了營(yíng)造一個(gè)私有的 scope旅急，我們可以在這個(gè)私有 scope 內(nèi)部安全地使用 $ 擴(kuò)展 jQuery逢勾， 而不用擔(dān)心 $ 會(huì)被其他 js 庫(kù)的改寫。
所以坠非，這里實(shí)際的插件代碼是這樣的：
$.fn.myNewPlugin = function() {
return this.each(function(){
// 一堆代碼...
});
};
新插件中，關(guān)鍵字 this指向的是調(diào)用這個(gè)插件的 jQuery 對(duì)象果正。
var somejQueryObject = $('#something');
$.fn.myNewPlugin = function() {
alert(this === somejQueryObject);
};
somejQueryObject.myNewPlugin(); // alerts 'true'
典型的 jQuery 對(duì)象是包含任意多個(gè)的 DOM 對(duì)象的炎码， 這也是為什么 jQuery 對(duì)象被看作是 DOM 對(duì)象集的原因。
因此秋泳，針對(duì)對(duì)象集做操作需要遍歷它潦闲， 通過(guò) jQuery 的 each()方法我們很容易地實(shí)現(xiàn)了。
$.fn.myNewPlugin = function() {
return this.each(function(){
});
};
與 jQuery 其它方法一樣迫皱，each()方法也是返回一個(gè) jQuery 對(duì)象歉闰， 這成就了我們所熟知并深愛(ài)的鏈?zhǔn)綄懛?$(...).css().attr()...)。 我們不應(yīng)該破壞這種慣例卓起，于是乎和敬，我們也應(yīng)該返回一個(gè) this對(duì)象。 在循環(huán)內(nèi)部戏阅，你可以對(duì)每一個(gè)元素做你要做的事昼弟。就上面所討論的， 下面是一個(gè)小插件的例子奕筐。
(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').each(function(){
$(this).append( ' (' + $(this).attr('href') + ')' );
});
};
}(jQuery));
// 使用樣例:
$('a').showLinkLocation();
這個(gè)小巧的插件可以將集合中所有的鏈接的 href屬性值包含在括號(hào) 中并將它作為該元素的內(nèi)容顯示出來(lái)舱痘。
<!-- 調(diào)用插件之前: -->
<a href="page.html">Foo</a>
<!-- 之后: -->
<a href="page.html">Foo (page.html)</a>
雖然簡(jiǎn)單，但這個(gè)插件還是可以優(yōu)化一下:
(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').append(function(){
return ' (' + this.href + ')';
});
};
}(jQuery));
我們利用了离赫，append方法是可以接受一個(gè)回調(diào)函數(shù)作為參數(shù)芭逝， 并將回調(diào)函數(shù)的返回值作為要添加的內(nèi)容的這一點(diǎn)。同時(shí)渊胸，也可以注意到旬盯， 我們不是通過(guò) attr方法去獲取 href的屬性值， 而是直接使用了內(nèi)置的 DOM API翎猛，訪問(wèn)元素的 href屬性來(lái)獲取瓢捉。
下面是另一個(gè)例子。它不需要我們用 each()方法去循環(huán)遍歷办成， 只是簡(jiǎn)單地直接委派給另一個(gè) jQuery 方法：
(function($){
$.fn.fadeInAndAddClass = function(duration, className) {
return this.fadeIn(duration, function(){
$(this).addClass(className);
});
};
}(jQuery));
// 使用方法:
$('a').fadeInAndAddClass(400, 'finishedFading');
轉(zhuǎn)載出處:http://docs.huihoo.com/jquery/jquery-fundamentals/zh-cn/ch08s02.html
