在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來(lái)替換，如$('#msg')等同于JQuery('#msg')的寫法。然而，當(dāng)我們引入多個(gè)js庫(kù)后，在另外一個(gè)js庫(kù)中也定義了$符號(hào)的話，那么我們?cè)谑褂?符號(hào)時(shí)就發(fā)生了沖突。下面以引入兩個(gè)庫(kù)文件jquery.js和prototype.js為例來(lái)進(jìn)行說(shuō)明。
第一種情況：jquery.js在prototype.js之后進(jìn)行引入,如：

<script src="prototype.js" type="text/javascript"/> <script src="jquery.js" type="text/javascript"/>
在這種情況下,我們?cè)谧约旱膉s代碼中如下寫的話：

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

$永遠(yuǎn)代表的是jquery中定義的$符號(hào)，也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們?cè)诤竺嬖俳榻B。

第二種情況：jquery.js在prototype.js之前進(jìn)行引入,如：

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

在這種情況下,我們?cè)谧约旱膉s代碼中如下寫的話：

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

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

下面先介紹在第一種引入js庫(kù)文件順序的情況下，如何正確的使用不同的js庫(kù)中定義的$符號(hào)。

一.使用JQuery.noConflict()
該方法的作用就是讓Jquery放棄對(duì)$的所有權(quán)，將$的控制權(quán)交還給prototype.js,因?yàn)閖query.js是后引入的，所以最后擁有$控制權(quán)的是jquery。它的返回值是JQuery。當(dāng)在代碼中調(diào)用了該 方法以后，我們就不可以使用$來(lái)調(diào)用jquery的方法了，此時(shí)$就代表在prototype.js庫(kù)中定義的$了。如下：

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

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

如果還想繼續(xù)是用 jQuery 的$，需要將代碼包含在一個(gè)自執(zhí)行的函數(shù)內(nèi)，這也是一些 jQuery 插件作者的通用做法，因?yàn)檫@些作者并不知道項(xiàng)目中是否引用了其它庫(kù)：

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

(function($) {
  // 這里依然可以繼續(xù)使用 jQuery 的 $
})(jQuery);
</script>

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

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

自此以后$就代表prototype.js中定義的$,jquey.js中的$無(wú)法再使用,只能使用$j來(lái)作為jquey.js中JQuery的別名了。

三.使用語(yǔ)句塊，在語(yǔ)句塊中仍然使用jquery.js中定義的$，如下：

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此時(shí)在整個(gè)ready事件的方法中使用的$都是jquery.js中定義的$. }); 

或者使用如下語(yǔ)句塊：

(function($){ ..... $('#msg').hide();//此時(shí)在這個(gè)語(yǔ)句塊中使用的都是jquery.js中定義的$. })(JQuery) 

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

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

(function($){ 
..... 
$('#msg').hide();//此時(shí)在這個(gè)語(yǔ)句塊中使用的都是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();
//此時(shí)在這個(gè)語(yǔ)句塊中使用的都是jquery.js中定義的$. })(JQuery) </script>

這種使用語(yǔ)句塊的方法非常有用，在我們自己寫jquery插件時(shí),應(yīng)該都使用這種寫法，因?yàn)槲覀儾恢谰唧w工作過(guò)程中是如何順序引入各種js庫(kù)的,而這種語(yǔ)句塊的寫法卻能屏蔽沖突。

最新評(píng)論