jquery解決沖突

  在JQuery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換，如$('#msg')等同於JQuery('#msg') 的寫法。然而，當我們引入多個js庫后，在另外一個js庫中也定義了$符號的話，那么我們在使用$符號時就發生了沖突。下面以引入兩個庫文件 jquery.js和prototype.js為例來進行說明。 

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

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

在這種情況下,我們在自己的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();
JQuery('#msg').hide(); //此處不可以再寫成$('#msg').hide(),此時的$代表prototype.js中定義的$符號。 

 自此以后$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。

     二.自定義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>

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