jQuery外掛程式有哪些？jQuery外掛程式的寫法分享

jQuery外掛程式是什嗎？常見的的jQuery外掛程式主要分為三個類型:封裝對象方法的外掛程式；封裝全域函數的外掛程式；選取器外掛程式。那麼基於這三個jQuery外掛程式之下的各個jQuery外掛程式的編寫及使用又是怎樣的呢？接下來我們就來談一談關於jQuery外掛程式的使用和寫法。

jQuery外掛程式分類：

1.封裝對象方法的外掛程式

這種外掛程式是將對象方法封裝起來，用於對通過選取器擷取的jQuery對象進行操作，是最常見的一種外掛程式。

2.封裝全域函數的外掛程式

可以將獨立的函數加到jQuery命名空間之下。例如jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等，都是jQuery內部作為全域函數的外掛程式附加到核心上去的。

3．選取器外掛程式

個別情況下，會需要用到選取器外掛程式。

外掛程式的基本要點

1.jQuery外掛程式的檔案名稱推薦命名為jquery.[外掛程式名].js，以免和其他JavaScript庫外掛程式混淆。

2.所有的對象方法都應該附加到jQuery.fn對象上，而所有的全域函數都應當附加到jQuery對象本身上。

3.在外掛程式內部，this指向的是當前通過選取器擷取的jQuery對象，而不像一般方法那樣，例如click()方法，內部的this指向的DOM元素。

4.可以通過this.each來遍曆所有元素。

5.所有的方法或函數外掛程式，都應當以分號結尾，否則壓縮的時候可能出現問題。為了更穩妥些，甚至可以在外掛程式頭部先加上一個分號，以免他人的不規範代碼給外掛程式帶來影響。

6.外掛程式應該返回一個jQuery對象，以保證外掛程式的可鏈式操作。除非外掛程式需要返回的是一些需要擷取的量，例如字串或者數組等。

7.避免在外掛程式內部使用$作為jQuery對象的別名，而應使用完整的jQuery來表示。這樣可以避免衝突，當然，也可以利用閉包這種技巧來迴避這個問題，使外掛程式內部繼續使用$作為jQuery的別名。很多外掛程式都是這樣做的。

外掛程式中的閉包

關於閉包，ECMAScript對其進行了簡單的描述：允許使用內建函式（即函數定義和函數運算式位於另一個函數體內），而且，這些內建函式可以訪問它們所在的外部函數中聲明的所有局部變數、參數和聲明的其他內建函式，當其中一個這樣的內建函式在包含它們的外部函數之外被調用時，就會形成閉包。即內建函式會在外部函數返回後被執行。而這個內建函式執行時，它仍然必須訪問其外部函數的局部變數、參數以及其他內建函式。這些局部變數、參數和函式宣告（最初時）的值是外部函數返回時的值，但也會收到內建函式的影響。

首先定義一個匿名函數function(){/*這裡放置代碼*/},然後用括弧括起來，變成（function(){/*這裡放置代碼*/}）這種形式，最後通過（）這個運算子來執行。可以傳遞參數進去，以供內建函式使用。

//注意為了更好的相容性，開始之前還有一個分號：

;(function($){ //開始時將$作為匿名函數的形參 /*這裡放置代碼，可以使用$作為jQuery的縮寫別名*/ })(jQuery); //這裡就將jQuery作為實參傳遞給匿名函數了

以上是一種常見的jQuery外掛程式的結構。

jQuery外掛程式的機制

jQuery提供了兩種用於擴充jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。前者用於之前提到的3種外掛程式類型中的第1種，後者用於擴充後兩種外掛程式。這兩個方法都接受一個參數，類型為Object。Object對象的“名/值對”分別代表“函數或方法名/函數主體”。

jQuery.extend()方法除了可以用於擴充jQuery對象之外，還有一個強大的功能，就是用與擴充已有的Object對象。

jQuery代碼如下：

jQuery.extend(target,obj1,…….[objN])    用一個或多個其它對象來擴充一個對象，然後返回被擴充的對象。   例如合并settings對象和options對象，修改並返回settings對象。  var settings={validate:false,limit:5,name:”foo”}; var options={validate:true,name:”bar”}; var newOptions=jQuery.extend(settings,options);

結果為：

newOptins={valitdate:true,limit:5,name:”bar”};

jQuery.extend()方法經常被用於設定外掛程式方法的一系列預設參數，如下面的代碼所示：

function foo(options){ options=jQuery.extend({ name:”bar”, limit:5, datatype:”xml” },options); };

如果調用foo()方法的時候，在傳遞的參數options對象中設定了相應的值，那麼就使用設定的值，否則就用預設的值。代碼如下：

foo({name:”a”,length:”4”,dataType:”json”}); foo({name:”a”,length:”4”}); foo({name:”a”}); foo();

通過使用jQuery.extend()方法，可以很方便地用傳入的參數來覆蓋預設值。此時，對方法的調用依舊保持一致，只不過要傳入的是一個映射而不是一個參數列表。這種機制比傳統的每個參數都去檢測的方式不僅靈活而且更加簡潔。此外使用具名引數意味著再添加新選項也不會影響過去編寫的代碼，從而使開發人員使用起來更加直觀明了。

編寫jQuery外掛程式

1.封裝jQuery對象方法的外掛程式

編寫設定擷取顏色的外掛程式

首先介紹如何編寫一個color()外掛程式。該外掛程式用於實現以下兩個功能。

(1)設定匹配元素的顏色。

(2)擷取匹配的元素（元素集合中的第1個）的顏色。

首先將該外掛程式按規範命名為jquery.color.js。

然後再JavaScript檔案裡搭好架構.由於是對jQuery對象的方法擴充，因此採用第1類方法jQuery.fn.extend()來編寫。

 ;(function($){ $.fn.extend({ “color”:function(value){ //這裡寫外掛程式代碼 } }); })(jQuery);

這裡給這個方法提供一個參數value，如果調用了方法的時候傳遞了value這個參數，那麼就是用這個值來設定字型顏色；否則就是匹配元素的字型顏色的值。

首先，實現第1個功能，設定字型顏色。注意，由於外掛程式內部的this指向的是jQuery對象，而非普通的DOM對象。代碼如下：

;(function($){ $.fn.extend({ “color”:function(value){ return this.css(“color”,value); } }); })(jQuery);

接下來實現第2個功能。如果沒用給方法傳遞參數，那麼就是擷取集合對象中第1個對象的color的值。由於css()方法本身就具有返回第1個匹配元素樣式值的功能，因此此處無需通過eq()來擷取第1個元素。只要這兩個方法結合起來,判斷一下value的值是否是undefined即可。

jQuery代碼如下：

;(function($){ $.fn.extend({ “color”:function(value){ if(color===undefined){ return this.css(“color”,value); }else{ Return this.css(“color”,value); } } }); })(jQuery);

這樣一來，外掛程式也就完成了。現在來測試一下代碼。

<script type=”text/javascript”> //外掛程式編寫 ;(function($){ $.fn.extend({ “color”:function(value){ if(color===undefined){ return this.css(“color”,value); }else{ Return this.css(“color”,value); } } }); })(jQuery);   //外掛程式應用 $(function(){ //查看第一個div的color樣式值 alert($(“div”).color()+”\n返回字串，證明此外掛程式可用。”); //把所有的div字型顏色都設為紅色 alert($(“div”).color(“red”)+”\n返回object證明得到的是jQuery對象。“)； }） </script> <div style=”color:red”>red</div> <div style=”color:blue”>blue</div> <div style=”color:green”>green</div> <div style=”color:yellow”>yellow</div>    另外，如果要定義一組外掛程式，可以使用如下所示的寫法： :(function($){ $.fn.extend({ "color":function(value){ //外掛程式代碼 }, "border":function(value){ //外掛程式代碼 }, "background":function(value){ //外掛程式代碼 } }; })(jQuery);

表格隔行變色外掛程式

表格隔行變色的代碼如下：

$("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $('tbody>tr').click(function(){ //判斷是否選中 var hasSelected=$(this).hasClass('selected'); //如果選中，則移出selected類，否則就加上selected類 $(this)[hasSelected?"removeClass":"addClass"]('selected') //尋找內部的checkbox,設定對應的屬性 .find('checkbox').attr('checked'.!hasSelected); });   //如果複選框預設情況下是選擇的，則高色 $('tbody>tr:has(:checked)').addClass('selected');

首先把外掛程式方法取名為alterBgColor，然後為該外掛程式方法搭好架構，jQuery代碼如下：

;(function($){ $.fn.extend({ "alterBgColor":function(options){ //外掛程式代碼 } }); })(jQuery);

架構完成後，接下來就需要為options定義預設值。預設構建這樣({odd:"odd",even:"even",selected:"selected"})一個Object。這樣就可以通過$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自訂奇偶行的樣式類名以及選中後的樣式類名。同時，直接使用$("#sometable").alterBgColor()就可以應用 預設的樣式類名。

jQuery代碼如下：

;(function($){ $.fn.extend({ "alterBgColor":function(options){ options=$.extend({ odd:"odd", /*偶數行樣式*/ even:"even", /*奇數行樣式*/ selected:"selected" /*選中行樣式*/ },options); } }); })(jQuery);

如果在後面的程式中需要使用options對象的屬性，可以使用如下的方式來獲得：

options.odd; //擷取options對象中odd屬性的值 options.even; //擷取options對象中even屬性的值 options.selected; //擷取options對象中selected屬性的值

接下來就需要把這些值放到程式中，來代替先前程式中的固定值。

最後就是匹配元素的問題了。顯然不能直接用$('tbody>tr')選擇表格行，這樣會使頁面中全部的<tr>元素都隔行變色。應該使用選取器選中某個表格，執行alterBgColor()方法後，將對應的表格內<tr>元素進行隔行變色。因此，需要把所有通過$('tbody>tr')選擇的對象改寫成$('tbody>tr',this)，表示在匹配的元素內（當前表格內）尋找，並應用上一步中的預設值。jQuery代碼如下：

;(function($){ $.fn.extend({ "alterBgColor":function(options){ //設定預設值 options=$.extend({ odd."odd", even."even", selected:"selected" },options); $("tbody>tr:odd",this).addClass(options,odd); $("tbody>tr:even",this).addClass(options,even); $("tbody>tr",this).click(function(){ //判斷是否選中 var hasSelected=$(this).hasClass(options,selected); //如果選中，則移出selected類，否則加上selected類 $(this)[hasSelected?"removeClass":"addClass"](options,selected) //尋找內部的checkbox,設定對應屬性 .find(':checkbox').attr('checked',!hasSelected); }); //如果單選框預設情況下是選擇的，則高色 $('tbody>tr:has(:checkd),this').addClass(options,selected); rerturn this; //返回this，使方法可鏈 } }); })(jQuery);

在代碼的最後，返回this，讓這個外掛程式具有可鏈性。
此時，外掛程式就完成了。現在來測試這個外掛程式。構造兩個表格，id分別為table1和table2，然後使用其中一個<table>調用alterBgColor()方法，以便查看是否能獨立工作，並且具有可鏈性。
jQuery代碼如下：

$('#table2').alterBgColor() //應用外掛程式 .find("th").css("color","red"); //可鏈式操作

需要注意的是，jQuery的選擇符可能會匹配1個或者多個元素。因此，在編寫外掛程式時必須考慮到這些情況。可以在外掛程式內部調用each()方法來遍曆匹配元素，然後執行相應的方法，this會依次引用每個DOM元素。如下jQuery代碼所示：

 ;(function($)){ $.fn.extend({ "SomePlugin":function(options){ return this.each(function(){ //這裡置放代碼 }); } }); })(jQuery);