前面的話
編寫插件的目的是給已經有的一系列方法或函數做一個封裝，以便在其他地方重復使用，提高開發效率和方便后期維護。本文將詳細介紹如何編寫jQuery插件
類型
jQuery的插件主要分為3種類型
1、封裝對象方法
這種插件是將對象方法封裝起來，用於對通過選擇器獲取的jQuery對象進行操作，是最常見的一種插件。此類插件可以發揮出jQuery選擇器的強大優勢，有相當一部分的jQuery的方法，都是在jQuery腳本庫內部通過這種形式“插”在內核上的，例如：parent()方法、appendTo()方法等。這些方法在現在來看都是jQuery本身自帶的方法了。平時，我們是可以直接拿來就用的，只需引入jQuery庫就行
2、封裝全局函數
可以將獨立的函數加到jQuery命名空間下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery內部作為全局函數的插件附加到內核上去的
3、選擇器插件
雖然jQuery的選擇器十分強大，但是在少數情況下，還是會需要用到選擇器插件來擴充一些自己喜歡的選擇器
要點
1、jQuery插件的文件名推薦命名為jQuery.[插件名].js，以免和其他JS庫插件混淆
2、所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身上
3、在插件內部的this指向的是當前通過選擇器獲取的jQuery對象，而不像一般方法那樣，如click，內部的this指向的是DOM元素
4、可以通過this.each來遍歷所有的元素
5、所有的方法或函數插件，都應當以分號結尾。否則壓縮的時候可能出現問題。為了穩妥些，甚至可以在插件頭部先加上一個分號，以免他人不規范的代碼影響自身的插件代碼
6、插件應該返回一個jQuery對象，以保證插件的可鏈式操作
7、避免在插件內部使用$作為jQuery對象的別名，而應使用完整的jQuery來表示，避免沖突。當然，也可以利用閉包來回避這種問題，使插件內部繼續使用$作為jQuery的別名
閉包
利用閉包的特性，即可以避免內部臨時變量影響全局空間，又可以在插件內容繼續使用$作為jQuery的別名。常見的jQuery插件都是以下這種形式的:
(function(){ /*這里放置代碼*/ })();
首先定義一個匿名函數function(){/*這里放置代碼*/}，然后用括號括起來，變成(function(){/*這里放置代碼*/})這種形式，最后通過()這個運算符來執行。可以傳遞參數進行，以供內部函數使用
//為了更好的兼容性，開始前有個分號 ;(function($){ //此處將$作為匿名函數的形參 /*這里放置代碼，可以使用$作為jQuery的縮寫別名*/ })(jQuery); //這里就將jQuery作為實參傳遞給匿名函數了
上面的代碼是一種常見的jQuery插件的結構
插件機制
jQuery提供了兩個用於拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用於拓展封裝對象方法的插件，jQuery.extend()方法用於拓展封裝全局函數的插件和選擇器插件。這兩個方法都接受一個參數，類型為Object。Object對象的"名/值對"分別代表"函數或方法名/函數主體"
【jQuery.fn.extend()】
jQuery.fn.extend()方法用於將一個對象的內容合並到jQuery的原型，以提供新的jQuery實例方法
<label><input type="checkbox" name="foo"> Foo</label> <label><input type="checkbox" name="bar"> Bar</label> <button id="btn1">全選</button> <button id="btn2">全不選</button> <script> jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); $('#btn1').click(function(){ $( "input[type='checkbox']" ).check(); }); $('#btn2').click(function(){ $( "input[type='checkbox']" ).uncheck(); }); </script>
【jQuery.extend()】
jQuery.extend()方法用一個或多個其他對象來擴展一個對象，然后返回被擴展的對象
jQuery.extend( target [, object1 ] [, objectN ] )
例如，合並settings對象和options對象，修改並返回settings對象
var settings = {validate:false,limit:5,name:"foo"}; var options = {validate:true,name:"bar"}; var newOptions = jQuery.extend(settings,options); console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}
jQuery.extend()方法經常被用於設置插件方法的一系列默認參數
function foo(options){ options=jQuery.extend({ name:"bar", length:5, dataType:"xml" },options); }
如果用戶調用foo()方法的時候，在傳遞的參數options對象設置了相應的值，那么就使用設置的值，否則使用默認值
通過使用jQuery.extend()方法，可以很方便地用傳入的參數來覆蓋默認值。此時，對方法的調用依舊保持一致，只不過要傳入的是一個映射而不是一個參數列表。這種機制比傳統的每個參數都去檢測的方式不僅靈活而且更加簡潔。此外使用命名參數意味着再添加新選項也不會影響過去編寫的代碼，從而使開發者使用起來更加直觀明了
編寫插件
1、封裝jQuery對象方法的插件
編寫設置和獲取顏色的插件color()，該插件用於實現以下兩個功能:
(1)設置匹配元素的顏色
(2)獲取匹配的元素(元素集合中的第一個)的顏色
由於是對jQuery對象的方法拓展，因此采用拓展第一類插件的方法jQuery.fn.extend()來編寫，這里給這個方法提供了一個參數value，如果調用方法的時候傳遞了value這個參數，那么就是用這個值來設置字體顏色，否則就是獲取匹配元素的字體顏色的值
;(function(){ jQuery.fn.extend({ "color":function(value){ if(value == undefined){ return this.css("color"); }else{ return this.css("color",value); } } }); })(jQuery);
實際上，CSS()方法內容已經有判斷value是否為undefined的機制，所以才可以根據傳遞參數的不同而返回不同的值。因此，代碼可以刪減如下
;(function(){ jQuery.fn.extend({ "color":function(value){ return this.css("color",value); } }); })(jQuery);
<span id="test">測試文字</span> <input type="color" id="color"> <script> ;(function($){ $.fn.extend({ "color":function(value){ return this.css("color",value); } }); })(jQuery); $('#color').on('change',function(){ $('#test').color($(this).val()); }) </script>
另外，如果要定義一組插件，可以使用如下所示寫法:
;(function(){ jQuery.fn.extend({ "color":function(value){ //插件代碼 }, "border":function(value){ //插件代碼 }, "background":function(value){ //插件代碼 } }); })(jQuery);
2、封裝全局函數的插件
這類插件是在jQuery命名空間內部添加一個函數
例如新增兩個函數，用於去除左側和右側空格。雖然jQuery已經提供了jQuery.trim()方法來去除兩端空格，但在某些情況下，會只希望去除某一側的空格
去除左側、右側的空格的函數分別寫成如下jQuery代碼。(text||"")部分是用於防止傳遞進來的text這個字符串變量處於未定義的特殊狀態，如果text是undeined，則返回字符串""，否則返回字符串text。這個處理是為了保證接下來的字符串替換方法replace()方法不會出錯
;(function($){ $.extend({ ltrim:function( text ){ return (text || "").replace(/^\s+/g,""); }, rtrim:function( text ){ return (text || "").replace(/\s+$/g,""); } }); })(jQuery); var $str = " test "; console.log($.trim($str));//'test' console.log($.ltrim($str));//'test ' console.log($.rtrim($str));//' test'
3、自定義選擇器
jQuery以其強大的選擇器著稱，那么jQuery的選擇器的工作原理是什么呢？
jQuery的選擇解析器首先會使用一組正則表達式來解析選擇器，然后針對解析出的每一個選擇符執行一個函數，稱為選擇函數。最后根據這個選擇函數的返回值為true還是false來決定是否保留這個元素，這樣就可以找到匹配的元素節點
如$("div:gl(1)")，該選擇器首先會獲取所有的<div>元素，然后隱式地遍歷這些<div>元素，並逐個將這些<div>元素作為參數，連同括號里的“1”等一些參數一起傳遞給gt對應的選擇器函數進行判斷。如果返回true則保留，否則不保留，這樣得到的結果就是一個符合要求的<div>元素的集合
選擇器的函數一共接受3個參數，形式如下：
function (a,i,m){ //... }
第一個參數為a，指的是當前遍歷到的DOM元素
第二個參數為i，指的是當前遍歷到的DOM元素的索引值，從0開始
第三個參數是m，它是由jQuery正則解析引擎進一步解析后的產物，是一個數組：其中最重要的一個是m[3]，在$("div:gl(1)")中即為括號里的數字“1”。
在jQuery中已經有lt、gt和eq選擇器，因此這里寫一個介於兩者之間(between)的選擇器
思路：在上面的三個參數中，m[3]為"a,b"的形式，因此把m[3]用","分隔，然后跟索引值i進行對比，如果i在m[3]表示的范圍之間就返回true，否則為false
;(function($){ $.extend($.expr[":"],{ between:function(a,i,m){ var temp=m[3].split(","); return +temp[0]<i&&i<+temp[1]; } }); })(jQuery);
[注意]經測試，函數中第二個參數i的值始終為0，無法獲取索引值，這時就需要自造索引，代碼如下
;(function($){ var $index = -1; $.extend($.expr[":"],{ between:function(a,i,m){ var temp=m[3].split(","); $index++; return +temp[0]<$index&&$index<+temp[1]; } }); })(jQuery);
<div> <i>0</i> <i>1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> </div> <button id="btn">測試</button> <script> ;(function($){ var $index = -1; $.extend($.expr[":"],{ between:function(a,i,m){ var temp=m[3].split(","); $index++; return +temp[0]<$index&&$index<+temp[1]; } }); })(jQuery); $('#btn').click(function(){ $('i:between(1,5)').css('background','lightblue'); }); </script>