快捷導(dǎo)航

jQuery與其它庫(kù)沖突的解決方法

更新時(shí)間：2010年06月25日 19:54:47 作者：

在jQuery庫(kù)中，幾乎所有的插件都被限制在它的命名空間里。全局的對(duì)象都很好地存儲(chǔ)在jQuery命名空間里，因此當(dāng)把jQuery和其它javascript類庫(kù)一起使用時(shí)，不會(huì)引起沖突.

(注意：默認(rèn)情況下，jQuery用$作為自身的縮寫而以）
如果jQuery類庫(kù)和別的類庫(kù)沖突的話，可以使用jQuerynoConflict()函數(shù)來(lái)將變量$的控制權(quán)移交出給其它的javaScipt庫(kù)?？聪旅嫘∑瑪啻a
<script type="text/javascript" src="../JS/JsCOM.js"></script>
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
假設(shè)JsCOM.js庫(kù)中，有這樣一個(gè)函數(shù)

復(fù)制代碼代碼如下:

 
function $(objName) { 
if (document.getElementById) { 
return eval('document.getElementById("' + objName + '")') 
} 
else { 
return eval("document.all." + objName) 
} 

大家都知道jQuery里面也一個(gè)這樣的函數(shù)，為了不引起沖突，我們將jQuery的變量$的控制權(quán)移交出給別的javascript庫(kù)

復(fù)制代碼代碼如下:

 
jQuery.noConflict(); //將變量$的控制權(quán)移交給JsCOM.js 
var $cr = jQuery("#cr"); //照樣使用jQuery類庫(kù)，只是用jQuery代替了原來(lái)的$而以。 
var JsCOM_cr = $("cr"); //使用JsCOM.js類庫(kù) 

在這里可以把jQuery()函數(shù)作為jQuery對(duì)象的制造工廠.
在這里要注意幾點(diǎn)
1.引用javascript類庫(kù)時(shí)，一定要把jQuery引用放在最后面，就像上面一樣，JsCOM.js的引用在jQuery引用的前面（具體原因我也不知，不過(guò)確實(shí)需要這樣）
2.特別要注意jQuery()代替$()時(shí)，jQuery是區(qū)分大小寫的，因?yàn)閖avascript本身就是區(qū)分大小寫的（好像說(shuō)這個(gè)有點(diǎn)多余，不過(guò)還是希望大家不要犯這種錯(cuò)誤）
基本上根據(jù)上面的方法就可以解決jQuery和其它庫(kù)的沖突問(wèn)題了！
如果你覺(jué)得上面的方式不爽，每次都要打jQuery來(lái)代替$增加了您敲鍵盤的工作量，那請(qǐng)接著看。。
除上面之外，還有另一種選擇。如果想確保jQuery不會(huì)與其它庫(kù)沖突，但又想自定義一個(gè)快捷方式，可以進(jìn)行如下操作;

復(fù)制代碼代碼如下:

 
var $j = jQuery.noConflict(); //自定一個(gè)快捷方式 
var $cr = $j("#cr"); //使用jQuery類庫(kù)，得用自定義快捷方式----$j; 
var JsCOM_cr = $("cr"); //和上一段代碼一樣，使用的是JsCOM.js類庫(kù) 

如果您還有別的要求，想繼續(xù)使用原先的$()，同時(shí)還需要與別的類庫(kù)不沖突的話，還有兩種解決方法
其一：

復(fù)制代碼代碼如下:

 
jQuery.noConflict(); //將變量$的控制權(quán)讓給JsCOM.js 
jQuery(function($) 
{ 
$("p").click(function() //在函數(shù)內(nèi)繼續(xù)可以使用jquery類庫(kù)的$()方法 
{ 
alert($(this).text()); 
}) 
}) 
var JsCOM_cr = $("cr"); // 在函數(shù)外面，照樣可以使用JsCOM.js的$()方法 

其二：

復(fù)制代碼代碼如下:

 
jQuery.noConflict(); //將變量$的控件權(quán)移交給別的類庫(kù)，使用jquery類庫(kù)的$符號(hào)時(shí)，請(qǐng)使用jQuery("#id"); 
(function($) { //定義匿名函數(shù)并設(shè)置形參為$ 
$(function() { //匿名函數(shù)內(nèi)部的$均為jQuery 
$("div").click(function() {//繼續(xù)使用$()方法 
alert($(this).text()); 
}) 
}) 
}) 
(jQuery); //使用匿名函數(shù)且傳遞實(shí)參jQUery 
alert($("cr")); //使用的是jsCOM.js類庫(kù)中的$()函數(shù) 

第二種方法應(yīng)該是兼容舊的代碼最好的方式，修改的代碼是最少的！
不過(guò)如果是新寫的jQuery代碼，我還是比較喜歡使用剛開(kāi)始講的那種(jQuery.noConflict(),然后就使用jQuery("#id"),這種方式)
如果您的頁(yè)面是先引用jQuery類庫(kù)再引入別的類庫(kù)的話，那么我們可以直接使用jQuery來(lái)做一些工作，同時(shí)，可以使用$()方法作為其它庫(kù)的快捷方式。這里無(wú)需調(diào)用jQuery.noConflict()函數(shù),請(qǐng)看下面代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript" src="../JS/JsCOM.js"></script> 
jQuery().ready(function() { //無(wú)需調(diào)用jQuery.noConflict()函數(shù) 
var $cr = jQuery("#cr"); 
$cr.click(function() { 
if ($cr.is(":checked")) { 
alert("感謝你的支持！你可以繼續(xù)操作了.."); 
} 
}) 
}) 
alert($("cr")); //使用的是jsCOM.js類庫(kù)中的$()函數(shù) 

好了，看了上面這么多種方法來(lái)解決沖突，這下你可以放心的在您的項(xiàng)目中引用jQuery了吧：）

您可能感興趣的文章: