jQuery插件原來如此簡單 jQuery插件的機(jī)制及實戰(zhàn)
更新時間：2012年02月07日 00:36:27 作者：
這種插件是將對象方法封裝起來，用于對通過選擇器獲取的jQuery對象進(jìn)行操作，是最常見的一種插件
jQuery插件的種類
1、封裝對象方法
這種插件是將對象方法封裝起來，用于對通過選擇器獲取的jQuery對象進(jìn)行操作，是最常見的一種插件。此類插件可以發(fā)揮出jQuery選擇器的強(qiáng)大優(yōu)勢，有相當(dāng)一部分的jQuery的方法，都是在jQuery腳本庫內(nèi)部通過這種形式“插”在內(nèi)核上的，例如parent()方法，appendTo()方法等。
2、封裝全局函數(shù)
可以將獨立的函數(shù)加到j(luò)Query命名空間下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的。
3、選擇器插件
雖然jQuery的選擇器十分強(qiáng)大，但在少數(shù)情況下，還是會需要用到選擇器插件來擴(kuò)充一些自己喜歡的選擇器。
jQuery插件的機(jī)制
jQuery插件的機(jī)制很簡單，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，擴(kuò)展jQuery的功能。
jQuery.fn.extend()多用于擴(kuò)展上面提到的3種類型中的第一種，jQuery.extend()用于擴(kuò)展后兩種插件。這兩個方法都接受一個參數(shù)，類型為Object。Object對象的“名/值對”分別代表“函數(shù)或方法名/函數(shù)主體”。
編寫jQuery插件的一些Tips
1、jQuery插件的文件名推薦命名為jquery.[插件名].js，以免和其他JS庫插件混淆。
2、所有的對象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對象本身。
3、在插件頭部加上一個分號，以免他人的不規(guī)范代碼給插件帶來影響。
4、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號結(jié)尾，以免壓縮時出現(xiàn)問題
5、除非插件需要返回的是一些需要獲取的變量，插件應(yīng)該返回一個jQuery對象，以保證插件的可鏈?zhǔn)讲僮鳌?
6、利于jQuery.extend()方法設(shè)置插件方法的默認(rèn)參數(shù)，增加插件的可用性。
jQuery插件結(jié)構(gòu)
jQuery插件結(jié)構(gòu)如下：
;(function($){
/*這里放插件代碼，可以將$作為jQuery的別名*/
})(jQuery);
封裝jQuery對象方法插件實戰(zhàn)
功能：設(shè)置選擇的元素的顏色，獲取選擇的首個元素的顏色
命名：jquery.color.js
結(jié)構(gòu)：
;(function($){
$.fn.extend({
//這里寫插件代碼
});
})(jQuery);
思路：設(shè)置一個參數(shù)value，如果調(diào)用時傳遞了value這個參數(shù)，就是設(shè)置顏色，否則為獲取顏色。獲取和設(shè)置顏色可以用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
封裝全局函數(shù)插件實戰(zhàn)
功能：單獨去除左側(cè)或單獨去除右側(cè)的空格
命名：jquery.lrtrim.js
結(jié)構(gòu)：
;(function($){
$.extend({
ltrim:function(text){
//插件代碼
}，
rtrim:function(text){
//插件代碼
}
});
})(jQuery);
思路：這類插件是在jQuery命名空間內(nèi)部添加一個函數(shù)，直接用正則表達(dá)式即可。
完整代碼：
;(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/封裝全局函數(shù)jQuery插件Demo.html
自定義選擇器插件實戰(zhàn)
jQuery以其強(qiáng)大的選擇器著稱，那么jQuery的選擇器的工作原理是什么呢？
jQuery的選擇解析器首先會使用一組正則表達(dá)式來解析選擇器，然后針對解析出的每一個選擇符執(zhí)行一個函數(shù)，稱為選擇函數(shù)。最后根據(jù)這個選擇函數(shù)的返回值為true還是false來決定是否保留這個元素，這樣就可以找到匹配的元素節(jié)點。
如$("div:gl(1)")，該選擇器首先會獲取所有的<div>元素，然后隱式地遍歷這些<div>元素，并逐個將這些<div>元素作為參數(shù)，連同括號里的“1”等一些參數(shù)一起傳遞給gt對應(yīng)的選擇器函數(shù)進(jìn)行判斷。如果返回true則保留，否則不保留，這樣得到的結(jié)果就是一個符合要求的<div>元素的集合。
選擇器的函數(shù)一共接受3個參數(shù)，形式如下：
function (a,i,m){
//...
}
第一個參數(shù)為a，指的是當(dāng)前遍歷到的DOM元素。
第二個參數(shù)為i，指的是當(dāng)前遍歷到的DOM元素的索引值，從0開始。
第三個參數(shù)是m，它是由jQuery正則解析引擎進(jìn)一步解析后的產(chǎn)物，是一個數(shù)組：其中最重要的一個是m[3]，在$("div:gl(1)")中即為括號里的數(shù)字“1”。
在jQuery中已經(jīng)有l(wèi)t,gt和eq選擇器，因此這里寫一個介于兩者之間(between)的選擇器。
功能：選擇索引值為a到b之間(a<b，a、b為正整數(shù))的元素
命名：jquery.between.js
結(jié)構(gòu)：
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代碼
}
});
})(jQuery);
思路：在上面的三個參數(shù)中，m[3]為"a,b"的形式，因此把m[3]用","分隔，然后跟索引值i進(jìn)行對比，如果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]把字符串形式的數(shù)字轉(zhuǎn)換成了數(shù)字
插件測試： http://demo.jb51.net/js/2012/jquery_demo/jQuery自定義選擇器插件DEMO.html
小結(jié)
本文主要介紹了jQuery插件的種類，機(jī)制，并針對每種類型進(jìn)行了實戰(zhàn)，希望能對大家有所幫助。本人也是jQuery的初學(xué)者，歡迎大家拍磚。
參考書籍：《鋒利的jQuery》(人民郵電出版社)
1、封裝對象方法
這種插件是將對象方法封裝起來，用于對通過選擇器獲取的jQuery對象進(jìn)行操作，是最常見的一種插件。此類插件可以發(fā)揮出jQuery選擇器的強(qiáng)大優(yōu)勢，有相當(dāng)一部分的jQuery的方法，都是在jQuery腳本庫內(nèi)部通過這種形式“插”在內(nèi)核上的，例如parent()方法，appendTo()方法等。
2、封裝全局函數(shù)
可以將獨立的函數(shù)加到j(luò)Query命名空間下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法，都是jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的。
3、選擇器插件
雖然jQuery的選擇器十分強(qiáng)大，但在少數(shù)情況下，還是會需要用到選擇器插件來擴(kuò)充一些自己喜歡的選擇器。
jQuery插件的機(jī)制
jQuery插件的機(jī)制很簡單，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，擴(kuò)展jQuery的功能。
jQuery.fn.extend()多用于擴(kuò)展上面提到的3種類型中的第一種，jQuery.extend()用于擴(kuò)展后兩種插件。這兩個方法都接受一個參數(shù)，類型為Object。Object對象的“名/值對”分別代表“函數(shù)或方法名/函數(shù)主體”。
編寫jQuery插件的一些Tips
1、jQuery插件的文件名推薦命名為jquery.[插件名].js，以免和其他JS庫插件混淆。
2、所有的對象方法都應(yīng)當(dāng)附加到j(luò)Query.fn對象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對象本身。
3、在插件頭部加上一個分號，以免他人的不規(guī)范代碼給插件帶來影響。
4、所有的方法或函數(shù)插件，都應(yīng)當(dāng)以分號結(jié)尾，以免壓縮時出現(xiàn)問題
5、除非插件需要返回的是一些需要獲取的變量，插件應(yīng)該返回一個jQuery對象，以保證插件的可鏈?zhǔn)讲僮鳌?
6、利于jQuery.extend()方法設(shè)置插件方法的默認(rèn)參數(shù)，增加插件的可用性。
jQuery插件結(jié)構(gòu)
jQuery插件結(jié)構(gòu)如下：
復(fù)制代碼 代碼如下:
;(function($){
/*這里放插件代碼，可以將$作為jQuery的別名*/
})(jQuery);
封裝jQuery對象方法插件實戰(zhàn)
功能：設(shè)置選擇的元素的顏色，獲取選擇的首個元素的顏色
命名：jquery.color.js
結(jié)構(gòu)：
復(fù)制代碼 代碼如下:
;(function($){
$.fn.extend({
//這里寫插件代碼
});
})(jQuery);
思路：設(shè)置一個參數(shù)value，如果調(diào)用時傳遞了value這個參數(shù)，就是設(shè)置顏色，否則為獲取顏色。獲取和設(shè)置顏色可以用jQuery提供的css方法即可
完整代碼：
復(fù)制代碼 代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);
由于css()方法在獲取顏色時已有取第一個元素的判斷，所以這里直接用this.css("color")即可。
如果是一組插件，可以用如下寫法：
復(fù)制代碼 代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代碼
}，
"border":function(value){
//插件代碼
}，
"background":function(value){
//插件代碼
}
});
})(jQuery);
插件測試： http://demo.jb51.net/js/2012/jquery_demo/封裝jQuery對象方法插件Demo.html
封裝全局函數(shù)插件實戰(zhàn)
功能：單獨去除左側(cè)或單獨去除右側(cè)的空格
命名：jquery.lrtrim.js
結(jié)構(gòu)：
復(fù)制代碼 代碼如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代碼
}，
rtrim:function(text){
//插件代碼
}
});
})(jQuery);
思路：這類插件是在jQuery命名空間內(nèi)部添加一個函數(shù)，直接用正則表達(dá)式即可。
完整代碼：
復(fù)制代碼 代碼如下:
;(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/封裝全局函數(shù)jQuery插件Demo.html
自定義選擇器插件實戰(zhàn)
jQuery以其強(qiáng)大的選擇器著稱，那么jQuery的選擇器的工作原理是什么呢？
jQuery的選擇解析器首先會使用一組正則表達(dá)式來解析選擇器，然后針對解析出的每一個選擇符執(zhí)行一個函數(shù)，稱為選擇函數(shù)。最后根據(jù)這個選擇函數(shù)的返回值為true還是false來決定是否保留這個元素，這樣就可以找到匹配的元素節(jié)點。
如$("div:gl(1)")，該選擇器首先會獲取所有的<div>元素，然后隱式地遍歷這些<div>元素，并逐個將這些<div>元素作為參數(shù)，連同括號里的“1”等一些參數(shù)一起傳遞給gt對應(yīng)的選擇器函數(shù)進(jìn)行判斷。如果返回true則保留，否則不保留，這樣得到的結(jié)果就是一個符合要求的<div>元素的集合。
選擇器的函數(shù)一共接受3個參數(shù)，形式如下：
復(fù)制代碼 代碼如下:
function (a,i,m){
//...
}
第一個參數(shù)為a，指的是當(dāng)前遍歷到的DOM元素。
第二個參數(shù)為i，指的是當(dāng)前遍歷到的DOM元素的索引值，從0開始。
第三個參數(shù)是m，它是由jQuery正則解析引擎進(jìn)一步解析后的產(chǎn)物，是一個數(shù)組：其中最重要的一個是m[3]，在$("div:gl(1)")中即為括號里的數(shù)字“1”。
在jQuery中已經(jīng)有l(wèi)t,gt和eq選擇器，因此這里寫一個介于兩者之間(between)的選擇器。
功能：選擇索引值為a到b之間(a<b，a、b為正整數(shù))的元素
命名：jquery.between.js
結(jié)構(gòu)：
復(fù)制代碼 代碼如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代碼
}
});
})(jQuery);
思路：在上面的三個參數(shù)中，m[3]為"a,b"的形式，因此把m[3]用","分隔，然后跟索引值i進(jìn)行對比，如果i在m[3]表示的范圍之間就返回true，否則為false
完整代碼：
復(fù)制代碼 代碼如下:
;(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]把字符串形式的數(shù)字轉(zhuǎn)換成了數(shù)字
插件測試： http://demo.jb51.net/js/2012/jquery_demo/jQuery自定義選擇器插件DEMO.html
小結(jié)
本文主要介紹了jQuery插件的種類，機(jī)制，并針對每種類型進(jìn)行了實戰(zhàn)，希望能對大家有所幫助。本人也是jQuery的初學(xué)者，歡迎大家拍磚。
參考書籍：《鋒利的jQuery》(人民郵電出版社)
您可能感興趣的文章:
- JQuery插件Quicksand實現(xiàn)超炫的動畫洗牌效果
- Jquery插件之多圖片異步上傳
- jquery.lazyload 實現(xiàn)圖片延遲加載jquery插件
- 強(qiáng)烈推薦240多個jQuery插件提供下載
- 跟我一起學(xué)寫jQuery插件開發(fā)方法（附完整實例及下載）
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- jquery插件lazyload.js延遲加載圖片的使用方法
- 分享2個jQuery插件--jquery.fileupload與artdialog
- HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果(附demo源碼下載)
相關(guān)文章
jquery圖片特效制作仿騰訊QQ商城首頁banner焦點圖片輪播切換效果，帶索引按鈕控制和左右按鈕控制圖片切換，實例代碼如下，感興趣的朋友可以參考下哈2013-06-06
本文是對優(yōu)化Jquery,提升網(wǎng)頁加載速度方面進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
Java框架SSH結(jié)合Easyui控件實現(xiàn)省市縣三級聯(lián)動示例解析
這篇文章主要為大家詳細(xì)介紹了Java框架SSH結(jié)合Easyui控件實現(xiàn)省市縣三級聯(lián)動示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
利用jQuery設(shè)計一個簡單的web音樂播放器的實例分享
這篇文章主要介紹了利用jQuery設(shè)計一個簡單的web音樂播放器的實例分享,包括PHP后臺和從MySQL中讀取曲目等基本功能的實現(xiàn),需要的朋友可以參考下2016-03-03
jQuery是繼prototype之后又一個優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。2009-10-10
EasyUI 中combotree 默認(rèn)不能選擇父節(jié)點的實現(xiàn)方法
下面小編就為大家?guī)硪黄狤asyUI 中combotree 默認(rèn)不能選擇父節(jié)點的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JQuery 實現(xiàn)在同一頁面錨點鏈接之間的平滑滾動
JQuery 原來比我想象的要強(qiáng)大的多，本文用 JQuery 實現(xiàn)錨點鏈接之間的平滑滾動，在同一頁面的錨點鏈接之間實現(xiàn)平滑的滾動2014-10-10
本文主要介紹了jQuery實現(xiàn)頁面滾動時智能浮動定位的方法。附上完整代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了jquery選擇器排除某個DOM元素的方法,也就是在選中的一些元素中,過濾一些不需要的,使用jquery not選擇器實現(xiàn),需要的朋友可以參考下2014-04-04
jquery 簡短 右鍵菜單 兼容ie6 ie7 ie8 firefox chrome2010-01-01