jQuery.noConflict() 函數詳解

jQuery.noConflict()函數用於讓出jQuery庫對變量$(和變量jQuery)的控制權。

一般情況下，在jQuery庫中，變量$是變量jQuery的別名，它們之間是等價的，例如jQuery("p")和$("p")是等價的。由於變量$只有一個字符，並且特點鮮明，因此我們更加習慣使用$來操作jQuery庫。 

不過，其他JS庫也可能使用變量$來進行操作，例如Prototype庫。這個時候兩個庫可能會由於變量$的控制權問題而發生衝突。 

此時，你可以使用該函數讓出jQuery庫對變量$的控制權，將該變量交給上一個實現它的JS庫，之後我們只能使用變量jQuery來操作jQuery庫。 

此外，使用該函數，還可以同時讓出變量$和變量jQuery的控制權，從而實現多個不同版本的jQuery庫共存(詳情見下面的示例說明)。

該函數屬於全局jQuery對象。

語法

靜態函數jQuery.noConflict()的語法如下：

jQuery.noConflict( [ removeAll ] )

參數

參數	描述
removeAll	可選/Boolean類型是否徹底移交對變量jQuery的控制權，默認爲false。

如果省略了參數removeAll或該參數不爲true，則表示只讓出對變量$的控制權；如果該參數爲true，則表示同時讓出變量$和jQuery的控制權。

返回值

jQuery.noConflict()函數的返回值是jQuery類型，返回變量jQuery的引用。

 示例&說明

以下是加載Prototype和jQuery庫的情況： 

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// 讓出對變量$的控制權
jQuery.noConflict();

// 使用jQuery進行DOM操作
jQuery("#uname").hide();

// 使用Prototype進行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );
</script>

此外，我們還可以使用其他自定義的變量名來操作jQuery： 

// 讓出對變量$的控制權，並將jQuery賦給新的別名j
var j = jQuery.noConflict();

// 基於jQuery進行DOM操作(使用變量j)
j("#uname").hide();

// 基於Prototype進行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );

即使是多個庫共存，我們也可以在jQuery.ready()的回調函數或其他自定義函數中將局部變量$作爲jQuery的別名使用： 

// 讓出jQuery庫對變量$的控制權
jQuery.noConflict();

jQuery(document).ready(function($){
    // 使用局部變量$進行jQuery操作
    $("p").css("color", "");    
});


(function($){
    // 使用局部變量$進行jQuery操作
    $("ul li").addClass("item");    
}(jQuery));

如果要實現兩個版本的jQuery庫共存，我們可以編寫如下代碼： 

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// 讓出jQuery-1.11.1對變量$和變量jQuery的控制權
var j = jQuery.noConflict( true );

document.writeln( j.fn.jquery ); // 1.11.1

document.writeln( $.fn.jquery ); // 1.4.2
document.writeln( jQuery.fn.jquery ); // 1.4.2

/*
 * 如果前面的jQuery.noConflict()沒有傳入參數true，
 * 也就是說只讓出變量$的控制，則$表示1.4.2，jQuery表示1.11.1
 * 此時，jQuery.fn.jquery爲1.11.1
 */
 </script>

 三個版本的jQuery庫共存，對應的jQuery示例代碼如下：

 

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// 讓出jQuery-1.11.1對變量$和變量jQuery的控制權，使用變量j來控制
var j = jQuery.noConflict( true );

// 讓出jQuery-1.8.3對變量$的控制權
jQuery.noConflict();

document.writeln( j.fn.jquery ); // 1.11.1
document.writeln( jQuery.fn.jquery ); // 1.8.3
document.writeln( $.fn.jquery ); // 1.4.2
</script>

 注意：多個可能存在全局變量重名衝突的JS庫，變量的實際控制權一般取決於JS庫的加載順序。以上面三個版本的jQuery庫的示例代碼爲例，後加載的jQuery庫的變量覆蓋了之前版本的變量，因此每次讓出變量的控制權，控制權就會交給上一個JS庫。