在jQuery中使用$而避免跟其它庫產生衝突的方法_jquery

在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同於JQuery('#msg')的寫法。然而，當我們引入多個js庫後，在另一個js庫中也定義了$符號的話，那麼我們在使用$符號時就發生了衝突。以下以引入兩個函式庫檔案jquery.js和prototype.js為例來進行說明。
第一種情況：jquery.js在prototype.js之後進行引入,如：

在這種情況下,我們在自己的js程式碼中如下寫的話：

$('#msg').hide(); 

$永遠代表的是jquery中定義的$符號，也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在後面再介紹。

第二種情況：jquery.js在prototype.js之前進行引入,如：

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

在這種情況下,我們在自己的js程式碼中如下寫的話：

$('#msg').hide(); 

$此時代表的prototype.js中定義的$符號，如果我們想要呼叫jquery.js中的工廠選擇函數功能的話，只能用全稱寫法JQuery('#msg').hide().

以下先介紹在第一種引入js庫檔案順序的情況下，如何正確的使用不同的js庫中定義的$符號。

一.使用JQuery.noConflict()
這個方法的作用就是讓Jquery放棄對$的所有權，將$的控制權交還給prototype.js,因為jquery.js是後引入的，所以最後擁有$控制權的是jquery。它的回傳值是JQuery。當在程式碼中呼叫了該 方法以後，我們就不可以使用$來呼叫jquery的方法了，此時$就代表在prototype.js庫中定義的$了。如下：

JQuery.noConflict();//此處不可以再寫成$('#msg').hide(),此時的$代表prototype.js中定義的$符號。 JQuey('#msg').hide();
自此以後$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全名JQuery了。
將 jQuery 設為 no-conflict 模式後，可以為$設定個別名稱：

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

如果還想繼續是用jQuery 的$，需要將程式碼包含在一個自執行的函數內，這也是一些jQuery 插件作者的通用做法，因為這些作者並不知道專案中是否引用了其它庫：

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

二.自訂JQuery的別名
如果覺得第一種方法中使用了JQuery.noConflict()方法以後,只能使用JQuery全稱比較麻煩的話，我們還可以為JQuery重定義別名。如下：

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

自此以後$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。

三.使用語句區塊，在語句區塊中仍使用jquery.js中定義的$，如下：

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

或使用下列語句區塊：

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

如果在第二種引入js庫檔案順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法，如：

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

代碼

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

這種使用語句塊的方法非常有用，在我們自己寫jquery插件時,應該都使用這種寫法，因為我們不知道具體工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽衝突。