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庫。