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();


    
    
    
    //
    
    
    
    此處不能夠再寫成$('#msg').hide(),此時的$表明prototype.js中定義的$符號。 
    
    
    
    

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

   
   
   
   

自此之後$就表明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庫的,而這種語句塊的寫法卻能屏蔽衝突。