所谓 jQuery 插件，怎样开发一个 jQuery 插件
簡單來說，所謂 jQuery 插件就是擴展在 jQuery 原型對象上的一個方法。通過擴展 jQuery 對象，每次調用 jQuery 對象的時候，對象里面都包含了我們自己所添加的那個方法。
一般插件的設計目的都是為了能在選擇器所選擇的結果集上做某些事情，本質上和 jQuery 自帶的fadeOut和addClass 之類的方法沒什么區別。
制作好自己的插件后，可以在自己的項目中私用，如果你愿意的話，也可以免費公開給其它人使用。而且，現在互聯網上的免費插件也非常的多。另外，制作一個屬于自己的 jQuery 插件的門檻真的很低。
如何制作一個插件
一個典型的插件制作方法如下：
(function($){$.fn.myNewPlugin =function() {return this.each(function(){// do something});};}(jQuery));不要被上面的代碼迷惑，制作 jQuery 插件的關鍵點就是擴展 jQuery 的原型對象，其實也就是下面這行代碼：
$.fn.myNewPlugin =function() {/* do something */}然后再將其封裝在一個自執行函數中：
(function($){//...}(jQuery));其實也就是創建一個私有的作用域來擴展 jQuery，在這個作用域中可以隨意使用 $ 符號，而不用擔心和其它 JavaScript 庫中的 $ 產生沖突。
所以，真正意義上的插件代碼就是以下部分：
$.fn.myNewPlugin =function() {return this.each(function(){// do something});};其中的 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 方法一樣，jQuery 的 each() 方法返回的也是一個 jQuery 對象，所以我們才可以使用 $(...).css().attr()... 這種廣受喜愛的鏈式操作。為了使我們的插件也支持鏈式操作，插件也要返回 jQuery 對象。通過 each() 方法，可以對 jQuery 結果集中的 DOM 元素逐個進行處理，下面是個示例：
(function($){$.fn.showLinkLocation =function() {return this.filter('a').each(function(){$(this).append(' ('+ $(this).attr('href') +')');});};}(jQuery));// Usage example: $('a').showLinkLocation();此小插件的功能就是將每個超鏈接的地址，在超鏈接后面也顯示出來：
<!-- 插件調用前： --><ahref="page.html">Foo</a><!-- 插件調用后： --><ahref="page.html">Foo (page.html)</a>其實，這個插件的代碼還可以再優化一下：
(function($){$.fn.showLinkLocation =function() {return this.filter('a').append(function(){return' ('+this.href +')';});};}(jQuery));我們使用一個匿名的回調函數作為 append 方法的參數，并且這個回調函數的返回值即為超鏈接的地址，和上面例子中使用 attr 方法不一樣，此示例中使用了 DOM 內置的 API，通過元素的 href 屬性來取得相關的值。
這里還有另外一個插件的例子，這個例子中并沒有使用 each() 做循環，而是直接調用了 jQuery 的其它方法：
(function($){$.fn.fadeInAndAddClass =function(duration, className) {return this.fadeIn(duration,function(){$(this).addClass(className);});};}(jQuery));// Usage example: $('a').fadeInAndAddClass(400,'finishedFading');什么時候才需要自己寫插件
有時候我們需要用一小段代碼實現某功能，并且這個功能在其它很多地方都可能被復用，那么這時可以考慮將這個功能寫成插件。
大多數插件都僅僅是在 $.fn 命名空間下添加方法而已，jQuery 確保在此方法中使用的 this 都是指向調用該方法的 jQuery 對象。反過來，編寫插件的時候，也要確保插件方法返回的也是這個對象。
下面又是一個簡單的 jQuery 插件示例：
// 定義插件(function($){$.fn.hoverClass =function(c) {return this.hover(function() { $(this).toggleClass(c); });};})(jQuery);// 調用插件 $('li').hoverClass('hover');要想了解更多關于 jQuery 插件開發的方法，可以參考 Mike Alsup 撰寫的 A Plugin Development Pattern 一文，文中詳細介紹了一款名為 $.fn.hilight 插件的開發方法。
該插件的設計模式如下：
//// create closure//(function($) {//// plugin definition//$.fn.hilight =function(options) {debug(this);// build main options before element iterationvar opts = $.extend({}, $.fn.hilight.defaults, options);// iterate and reformat each matched elementreturn this.each(function() { $this= $(this);// build element specific optionsvar o = $.meta ? $.extend({}, opts, $this.data()) : opts;// update element styles $this.css({backgroundColor: o.background,color: o.foreground});var markup = $this.html();// call our format function markup = $.fn.hilight.format(markup); $this.html(markup);});};//// private function for debugging//functiondebug($obj) {if(window.console && window.console.log) window.console.log('hilight selection count: '+ $obj.size());};//// define and expose our format function//$.fn.hilight.format =function(txt) {return'<strong>'+ txt +'</strong>';};//// plugin defaults//$.fn.hilight.defaults = {foreground:'red',background:'yellow'};//// end of closure//})(jQuery);如果有興趣，可至原文深度閱讀。
via http://jqfundamentals.com/#chapter-8
http://www.akasuna.com/2012/03/12/what-is-a-jquery-plugin-and-how-to-develop-a-jquery-plugin
轉載于:https://blog.51cto.com/bzjbest/1260037
總結
以上是生活随笔為你收集整理的所谓 jQuery 插件，怎样开发一个 jQuery 插件的全部內容，希望文章能夠幫你解決所遇到的問題。
