這篇文章將為大家詳細(xì)講解有關(guān)jQuery插件開發(fā)的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
進(jìn)行jQuery插件開發(fā)前，首先要知道兩個(gè)問題：什么是jQuery插件？jQuery插件如何使用？
第一個(gè)問題，jQuery插件就是用來擴(kuò)展jQuery原型對(duì)象的一個(gè)方法，簡(jiǎn)單來說就是jQuery插件是jQuery對(duì)象的一個(gè)方法。其實(shí)回答了第一個(gè)問題，也就知道第二個(gè)問題的答案了，jQuery插件的使用方式就是jQuery對(duì)象方法的調(diào)用。
我們先看個(gè)例子：$("a").css("color","red")。我們知道每個(gè)jQuery對(duì)象都會(huì)包含jQuery中定義的DOM操作方法,這里使用$方法來選擇a元素，返回一個(gè)a元素的jQuery對(duì)象，這個(gè)對(duì)象就可以使用jQuery中定義的DOM操作方法。那么jQuery對(duì)象是如何獲取這些方法的呢？其實(shí)jQuery內(nèi)部定義了一個(gè)jQuery.fn對(duì)象，查看jQuery源碼可以發(fā)現(xiàn)jQuery.fn=jQuery.prototype，也就是說jQuery.fn對(duì)象是jQuery的原型對(duì)象,jQuery的DOM操作方法都在jQuery.fn對(duì)象上定義的，然后jQuery對(duì)象就可以通過原型繼承這些方法。
基礎(chǔ)版jQuery插件
知道了上面這些知識(shí)，我們就可以來寫一個(gè)簡(jiǎn)單的jQuery插件。假如我現(xiàn)在需要一個(gè)jQuery插件用來改變標(biāo)簽內(nèi)容顏色，就可以按下面的方式來實(shí)現(xiàn)這個(gè)插件：
重慶分公司
重慶分公司
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
}然后按下面的方式來使用插件：
$("p").changeStyle("red");
插件調(diào)用的時(shí)候，插件內(nèi)部的this就是當(dāng)前調(diào)用插件的jQuery對(duì)象，這樣的話每個(gè)使用$()方法選擇的標(biāo)簽，在調(diào)用changeStyle()插件時(shí)都會(huì)使用css()方法重設(shè)color樣式。
滿足鏈?zhǔn)秸{(diào)用的jQuery插件
鏈?zhǔn)秸{(diào)用時(shí)jQuery的一大特色，一個(gè)通用的插件應(yīng)該遵循jQuery風(fēng)格，滿足鏈?zhǔn)秸{(diào)用要求。實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的方式也很簡(jiǎn)單：
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}然后使用的時(shí)候就可以鏈?zhǔn)秸{(diào)用其他方法了：
$("p").changeStyle("red").addClass("red-color");
實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的關(guān)鍵點(diǎn)就一行代碼return this，插件中加了這行代碼，那么在插件執(zhí)行完之后，就會(huì)把當(dāng)前的jQuery對(duì)象返回，然后就可以在插件方法后面繼續(xù)調(diào)用其它jQuery方法。
防止$符號(hào)污染的jQuery插件
有很多js庫(kù)都會(huì)使用$符號(hào)，雖然jQuery可以使用jQuery.noConflict()方法交出$符號(hào)的使用權(quán)，但是如果定義插件的時(shí)候，使用$.fn對(duì)象來定義的，那么這些插件使用的時(shí)候就會(huì)受到其它使用$變量的js庫(kù)的影響。對(duì)于這種情況，我們可以使用立即執(zhí)行函數(shù)通過傳參的方式封裝插件。形式如下：
(function($){
$.fn.changeStyle = function(colorStr){
this.css("color",colorStr);
return this;
}
}(jQuery));因?yàn)槭褂昧肆⒓磮?zhí)行函數(shù)，所以此時(shí)的$只屬于這個(gè)立即執(zhí)行函數(shù)的函數(shù)作用域，這樣就可以避免$符號(hào)的污染。
可以接受參數(shù)的jQuery插件
繼續(xù)上面的例子，假如我還想為這個(gè)插件添加一個(gè)設(shè)置標(biāo)簽元素內(nèi)容文字大小的功能，那么我可以這么來實(shí)現(xiàn)：
(function($){
$.fn.changeStyle = function(colorStr，fontSize){
this.css("color",colorStr).css("fontSize",fontSize+"px");
return this;
}
}(jQuery));上面這種插件傳參方式適用于參數(shù)比較少的情況，如果需要傳給插件內(nèi)部的參數(shù)比較多，我們可以定義一個(gè)參數(shù)對(duì)象，然后把需要傳給插件的參數(shù)放在參數(shù)對(duì)象中。插件定義時(shí)如下：
(function($){
$.fn.changeStyle = function(option){
this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");
return this;
}
}(jQuery));使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});
把參數(shù)放到一個(gè)對(duì)象中傳給插件還有一個(gè)好處就是我們可以在插件內(nèi)部為一些參數(shù)定義一些缺省值，例如：
(function($){
$.fn.changeStyle = function(option){
var defaultSetting = { colorStr:"green",fontSize:12};
var setting = $.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
}(jQuery));上面的代碼用到了$.extend方法，這個(gè)方法在這里的用法就是合并兩個(gè)對(duì)象，即把后面一個(gè)對(duì)象的存在的屬性值賦值給第一個(gè)對(duì)象，具體用法可以參考這里。$.extend方法還有一種作用是用來擴(kuò)展jQuery對(duì)象本身。
這樣定義的插件，我們?cè)谑褂脮r(shí)如果不傳fontSize，那么使用這個(gè)插件的jQuery對(duì)象標(biāo)簽的內(nèi)容會(huì)被設(shè)置成默認(rèn)的12px。
使用方式：$("p").changeStyle({colorStr:"red"});
注意：在為插件定義默認(rèn)參數(shù)時(shí)，一定要把默認(rèn)參數(shù)寫在插件方法內(nèi)部，這樣默認(rèn)參數(shù)的作用域就在插件內(nèi)部。
總結(jié)
定義插件的方式除了上面說的用$.fn來定義，還有另外一種方式來定義插件，那就是使用$.fn.extend方法。類似下面的寫法：
(function($){
$.fn.extend({
changeStyle:function(option){
var defaultSetting = { colorStr:"green",fontSize:12};
var setting = $.extend(defaultSetting,option);
this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
return this;
}
});
}(jQuery));PS:$.extend方法和$.fn.extend方法都可以用來擴(kuò)展jQuery功能，通過閱讀jQuery源碼我們可以發(fā)現(xiàn)這兩個(gè)方法的本質(zhì)區(qū)別，那就是$.extend方法是在jQuery全局對(duì)象上擴(kuò)展方法，$.fn.extend方法是在$選擇符選擇的jQuery對(duì)象上擴(kuò)展方法。所以擴(kuò)展jQuery的公共方法一般用$.extend方法，定義插件一般用$.fn.extend方法。
關(guān)于“jQuery插件開發(fā)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
