jQuery插件的種類
1、封裝對象方法
這種插件是將對象方法封裝起來，用於對通過選擇器獲取的jQuery對象進行操作，是最常見的一種插件。此類插件可以發揮出jQuery選擇器的強大優勢，有相當一部分的jQuery的方法，都是在jQuery腳本庫內部通過這種形式“插”在內核上的，例如parent()方法，appendTo()方法等。
2、封裝全局函數
可以將獨立的函數加到jQuery命名空間下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery內部作為全局函數的插件附加到內核上去的。
3、選擇器插件
雖然jQuery的選擇器十分強大，但在少數情況下，還是會需要用到選擇器插件來擴充一些自己喜歡的選擇器。
jQuery插件的機制
jQuery插件的機制很簡單，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，擴展jQuery的功能。
jQuery.fn.extend()多用於擴展上面提到的3種類型中的第一種，jQuery.extend()用於擴展後兩種插件。這兩個方法都接受一個參數，類型為Object。Object對象的“名/值對”分別代表“函數或方法名/函數主體”。
編寫jQuery插件的一些Tips
1、jQuery插件的文件名推薦命名為jquery.[插件名].js，以免和其他JS庫插件混淆。
2、所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身。
3、在插件頭部加上一個分號，以免他人的不規范代碼給插件帶來影響。
4、所有的方法或函數插件，都應當以分號結尾，以免壓縮時出現問題
5、除非插件需要返回的是一些需要獲取的變量，插件應該返回一個jQuery對象，以保證插件的可鏈式操作。
6、利於jQuery.extend()方法設置插件方法的默認參數，增加插件的可用性。
jQuery插件結構
jQuery插件結構如下：
. 代碼如下:
;(function($){
/*這裡放插件代碼，可以將$作為jQuery的別名*/
})(jQuery);
封裝jQuery對象方法插件實戰
功能：設置選擇的元素的顏色，獲取選擇的首個元素的顏色
命名：jquery.color.js
結構：
. 代碼如下:
;(function($){
$.fn.extend({
//這裡寫插件代碼
});
})(jQuery);
思路：設置一個參數value，如果調用時傳遞了value這個參數，就是設置顏色，否則為獲取顏色。獲取和設置顏色可以用jQuery提供的css方法即可
完整代碼：
. 代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);
由於css()方法在獲取顏色時已有取第一個元素的判斷，所以這裡直接用this.css("color")即可。
如果是一組插件，可以用如下寫法：
. 代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代碼
}，
"border":function(value){
//插件代碼
}，
"background":function(value){
//插件代碼
}
});
})(jQuery);
插件測試： http://demo.jb51.net/js/2012/jquery_demo/封裝jQuery對象方法插件Demo.html
封裝全局函數插件實戰
功能：單獨去除左側或單獨去除右側的空格
命名：jquery.lrtrim.js
結構：
. 代碼如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代碼
}，
rtrim:function(text){
//插件代碼
}
});
})(jQuery);
思路：這類插件是在jQuery命名空間內部添加一個函數，直接用正則表達式即可。
完整代碼：
. 代碼如下:
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
插件測試： http://demo.jb51.net/js/2012/jquery_demo/封裝全局函數jQuery插件Demo.html
自定義選擇器插件實戰
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)的選擇器。
功能：選擇索引值為a到b之間(a<b，a、b為正整數)的元素
命名：jquery.between.js
結構：
. 代碼如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代碼
}
});
})(jQuery);
思路：在上面的三個參數中，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);
注：這裡用+temp[0]、+temp[1]把字符串形式的數字轉換成了數字
插件測試： http://demo.jb51.net/js/2012/jquery_demo/jQuery自定義選擇器插件DEMO.html
小結
本文主要介紹了jQuery插件的種類，機制，並針對每種類型進行了實戰，希望能對大家有所幫助。本人也是jQuery的初學者，歡迎大家拍磚。
參考書籍：《鋒利的jQuery》(人民郵電出版社)