本篇文章主要是對(duì)JQuery的$和其它JS發(fā)生沖突的快速解決方法進(jìn)行了介紹畜伐,需要的朋友可以過(guò)來(lái)參考下馍惹,希望對(duì)大家有所幫助
眾所周知,jQuery是目前最流行的JS封裝包玛界,簡(jiǎn)化了很多復(fù)雜的JS程序万矾,JQuery將瀏覽器DOM樹(shù)定義為$,通過(guò)$來(lái)獲取各個(gè)子節(jié)點(diǎn)慎框。
然后良狈,JS插件并非只有JQuery,還有prototype.js 等其它比較好的插件笨枯。它們也使用$薪丁。所以有時(shí)候同時(shí)使用這個(gè)兩個(gè)JS插件的時(shí)候遇西,就會(huì)出現(xiàn)$的使用權(quán)沖突問(wèn)題。現(xiàn)在我們來(lái)看看如何解決這個(gè)沖突問(wèn)題窥突。請(qǐng)看下文:
我們都知道JQuery有一個(gè)函數(shù)努溃,jquery.noConflict() 它的作用是講$的控制權(quán)轉(zhuǎn)讓出去硫嘶。然后我們可以通過(guò)jQuery代替$來(lái)獲取dom節(jié)點(diǎn)阻问。
第一種情況:先加載Prototype.js,再加載jQuery.js
jQuery noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識(shí)符的控制沦疾,這樣其他腳本就可以使用它了称近。
使用jQuery.noConflict();主要作用是在任何時(shí)候,只要在jQuery加載后就可以調(diào)用哮塞,將$符號(hào)的使用權(quán)返回給其它的js庫(kù)刨秆,jQuery在創(chuàng)建它自己的名字空間時(shí)就將其它庫(kù)的$保存在自己的一個(gè)變量當(dāng)中。
第二種情況:先加載jQuery.js忆畅,再加載Prototype.js
按照這樣的順序加載衡未,就不存在其它js庫(kù)的$符號(hào)被jQuery占用的問(wèn)題。
舉例:
</br>
方法一:
通過(guò)全名替代簡(jiǎn)寫(xiě)的方式來(lái)使用 jQuery
< script type = "text/javascript" >
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
jQuery(function() { //使用jQuery
jQuery("p").click(function() {
alert(jQuery(this).text());
});
});
$("pp").style.display = 'none'; //使用prototype
< /script>/
</br>
方法二:
可以創(chuàng)建自己的簡(jiǎn)寫(xiě)家凯,通過(guò)noConflict()函數(shù)來(lái)定義一個(gè)快捷方式用來(lái)獲取dom節(jié)點(diǎn)
< script type = "text/javascript" >
var $j = jQuery.noConflict(); //自定義一個(gè)比較短快捷方式
$j(function() { //使用jQuery
$j("p").click(function() {
alert($j(this).text());
});
});
$("pp").style.display = 'none'; //使用prototype
< /script>/
缺點(diǎn):引入了這段代碼后缓醋,不僅是當(dāng)前的js文件,該html引用的所有js中绊诲,如果有用到j(luò)query中的$送粱,都得用$j來(lái)代替之前的$
</br>
方法三:
如果你的 jQuery 代碼塊使用 $ 簡(jiǎn)寫(xiě),并且您不愿意改變這個(gè)快捷方式掂之,那么您可以把 $ 符號(hào)作為變量傳遞給 ready 方法抗俄。這樣就可以在函數(shù)內(nèi)使用 $ 符號(hào)了 - 而在函數(shù)外,依舊不得不使用 "jQuery":
< script type = "text/javascript" >
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
//方法3-1
jQuery(document).ready(function($) {
$("p").click(function() { //繼續(xù)使用 $ 方法
alert($(this).text());
});
});
//方法3-2
jQuery(function($) { //使用jQuery
$("p").click(function() { //繼續(xù)使用 $ 方法
alert($(this).text());
});
});
$("pp").style.display = 'none'; //使用prototype
< /script>
方法3-1?缺點(diǎn):只對(duì)ready嵌套內(nèi)的代碼有效世舰,對(duì)嵌套外的代碼是無(wú)效的动雹。如果你所有的邏輯,都在寫(xiě)ready函數(shù)中跟压,那沒(méi)問(wèn)題胰蝠。但我們一般都會(huì)在ready函數(shù)之外寫(xiě)一些子函數(shù),然后ready函數(shù)再去調(diào)用這些函數(shù)裆馒。這個(gè)方案對(duì)這些函數(shù)是無(wú)效的姊氓,因此這套方案有局限性。
</br>
方法四:
使用語(yǔ)句塊
< script type = "text/javascript" >
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
(function($) { //定義匿名函數(shù)并設(shè)置形參為$
$(function() { //匿名函數(shù)內(nèi)部的$均為jQuery
$("p").click(function() { //繼續(xù)使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執(zhí)行匿名函數(shù)且傳遞實(shí)參jQuery
$("pp").style.display = 'none'; //使用prototype
< /script>
這種使用語(yǔ)句塊的方法非常有用喷好,在我們自己寫(xiě)jquery插件時(shí),應(yīng)該都使用這種寫(xiě)法翔横,因?yàn)槲覀儾恢谰唧w工作過(guò)程中是如何順序引入各種js庫(kù)的,而這種語(yǔ)句塊的寫(xiě)法卻能屏蔽沖突。
</br>
推薦方法三(3-2)梗搅,方法四禾唁,特別是開(kāi)發(fā)js插件時(shí):
這兩個(gè)方法效览,沒(méi)有上面兩個(gè)方法的缺點(diǎn),只會(huì)影響到被包在jQuery(function($){}中的代碼荡短。 不會(huì)影響到其他js代碼丐枉,這一點(diǎn)很重要。試想一下掘托,假如你寫(xiě)了一個(gè)js公共組件瘦锹,該組件需要用到j(luò)query,為了提高魯棒性闪盔,需考慮$符號(hào)沖突問(wèn)題弯院。如果使用方案二,那么別人在使用時(shí)泪掀,還得遵守你的約定听绳,把自己js代碼中的$改成$j,而如果使用方案三(3-2),方案四异赫,既能避免$沖突對(duì)該組件的影響椅挣,又無(wú)需要求使用公共組件的人修改自己的代碼。
</br>
注意:
1.引用javascript類(lèi)庫(kù)時(shí)塔拳,把jQuery引用放在最后面鼠证,可以避免沖突。
2.特別要注意jQuery()代替$()時(shí)蝙斜,jQuery是區(qū)分大小寫(xiě)的名惩,因?yàn)閖avascript本身就是區(qū)分大小寫(xiě)的。
整理來(lái)源:http://www.jb51.net/article/46152.htm
????? http://www.jb51.net/article/90293.htm
??????http://www.jb51.net/article/47028.htm