jQuery與其它庫衝突的解決方案

標籤：style   blog   class   code   c   java   

原文出處：http://www.jb51.net/article/24014.htm

 

在jQuery庫中，幾乎所有的外掛程式都被限制在它的命名空間裡。全域的對象都很好地儲存在jQuery命名空間裡，因此當把jQuery和其它javascript類庫一起使用時，不會引起衝突.

(注意：預設情況下，jQuery用$作為自身的縮寫而以） 
如果jQuery類庫和別的類庫衝突的話，可以使用jQuerynoConflict()函數來將變數$的控制權移交出給其它的javaScipt庫。看下面小片斷代碼 
<script type="text/javascript" src="../JS/JsCOM.js"></script> 
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script> 
假設JsCOM.js庫中，有這樣一個函數 

 

1 function $(objName) { 2 if (document.getElementById) { 3 return eval(‘document.getElementById("‘ + objName + ‘")‘) 4 } 5 else { 6 return eval("document.all." + objName) 7 } 

大家都知道jQuery裡面也一個這樣的函數，為了不引起衝突，我們將jQuery的變數$的控制權移交出給別的javascript庫 

1 jQuery.noConflict(); //將變數$的控制權移交給JsCOM.js 2 var $cr = jQuery("#cr"); //照樣使用jQuery類庫，只是用jQuery代替了原來的$而以。 3 var JsCOM_cr = $("cr"); //使用JsCOM.js類庫 

在這裡可以把jQuery()函數作為jQuery對象的製造工廠. 
在這裡要注意幾點 
1.引用javascript類庫時，一定要把jQuery引用放在最後面，就像上面一樣，JsCOM.js的引用在jQuery引用的前面（具體原因我也不知，不過確實需要這樣） 
2.特別要注意jQuery()代替$()時，jQuery是區分大小寫，因為javascript本身就是區分大小寫（好像說這個有點多餘，不過還是希望大家不要犯這種錯誤） 
基本上根據上面的方法就可以解決jQuery和其它庫的衝突問題了！ 
如果你覺得上面的方式不爽，每次都要打jQuery來代替$增加了您敲鍵盤的工作量，那請接著看。。 
除上面之外，還有另一種選擇。如果想確保jQuery不會與其它庫衝突，但又想自訂一個捷徑，可以進行如下操作; 

1 var $j = jQuery.noConflict(); //自定一個捷徑 2 var $cr = $j("#cr"); //使用jQuery類庫，得用自訂捷徑----$j; 3 var JsCOM_cr = $("cr"); //和上一段代碼一樣，使用的是JsCOM.js類庫 

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

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

其二： 

jQuery.noConflict(); //將變數$的控制項權移交給別的類庫，使用jquery類庫的$符號時，請使用jQuery("#id"); (function($) { //定義匿名函數並設定形參為$ $(function() { //匿名函數內部的$均為jQuery $("div").click(function() {//繼續使用$()方法 alert($(this).text()); }) }) }) (jQuery); //使用匿名函數且傳遞實參jQUery alert($("cr")); //使用的是jsCOM.js類庫中的$()函數 

第二種方法應該是相容舊的代碼最好的方式，修改的代碼是最少的！ 
不過如果是新寫的jQuery代碼，我還是比較喜歡使用剛開始講的那種(jQuery.noConflict(),然後就使用jQuery("#id"),這種方式) 
如果您的頁面是先引用jQuery類庫再引入別的類庫的話，那麼我們可以直接使用jQuery來做一些工作，同時，可以使用$()方法作為其它庫的捷徑。這裡無需調用jQuery.noConflict()函數,請看下面代碼 

<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() { //無需調用jQuery.noConflict()函數 
var $cr = jQuery("#cr"); 
$cr.click(function() { 
if ($cr.is(":checked")) { 
alert("感謝你的支援！你可以繼續操作了.."); 
} 
}) 
}) 
alert($("cr")); //使用的是jsCOM.js類庫中的$()函數 

好了，看了上面這麼多種方法來解決衝突，這下你可以放心的在您的項目中引用jQuery了吧 ：）