jQuery 核心 noConflict() 方法

jQuery 參考手冊 核心

noConflict() 方法讓渡變量 $ 的 jQuery 控制權。

該方法釋放 jQuery 對 $ 變量的控制。

該方法也可用于為 jQuery 變量規定新的自定義名稱。

提示：在其他 JavaScript 庫為其函數使用 $ 時，該方法很有用。

1. 語法

jQuery.noConflict(removeAll)

說明

許多 JavaScript 庫使用 $ 作為函數或變量名，jQuery 也一樣。在 jQuery 中，$ 僅僅是 jQuery 的別名，因此即使不使用 $ 也能保證所有功能性。假如我們需要使用 jQuery 之外的另一 JavaScript 庫，我們可以通過調用 $.noConflict() 向該庫返回控制權：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
  $.noConflict();
  // 使用另一個庫的 $ 的代碼
</script>

可以與 .ready() 方法結合起來使用，來為 jQuery 對象起別名，這項技術非常有效：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // 使用 jQuery $ 的代碼
  });
  // 使用其他庫的 $ 的代碼
</script>

此外，通過向該方法傳遞參數 true，我們可以將 $ 和 jQuery 的控制權都交還給原來的庫。用之前請考慮清楚！

這是相對于簡單的 noConflict 方法更極端的版本，因為這將完全重新定義 jQuery。這通常用于一種極端的情況，比如你想要將 jQuery 嵌入一個高度沖突的環境。注意：調用此方法后極有可能導致插件失效。

2. 范例

使用 noConflict() 方法為 jQuery 變量規定新的名稱：

var jq=$.noConflict();

3. 范例

例子 1

將 $ 引用的對象映射回原始的對象：

jQuery.noConflict();
jQuery("div p").hide();	// 使用 jQuery
$("content").style.display = "none";	// 使用其他庫的 $()

例子 2

恢復使用別名 $，然后創建并執行一個函數，在這個函數的作用域中仍然將 $ 作為 jQuery 的別名來使用。在這個函數中，原來的 $ 對象是無效的。這個函數對于大多數不依賴于其他庫的插件都十分有效：

jQuery.noConflict();
(function($) { 
  $(function() {
    // 使用 $ 作為 jQuery 別名的代碼
  });
})(jQuery);
... // 其他用 $ 作為別名的庫的代碼

例子 3

可以將 jQuery.noConflict() 與簡寫的 ready 結合，使代碼更緊湊：

jQuery.noConflict()(function(){
    // 使用 jQuery 的代碼
});
... // 其他庫使用 $ 做別名的代碼

例子 4

創建一個新的別名用以在接下來的庫中使用 jQuery 對象：

var j = jQuery.noConflict();
j("div p").hide();	// 基于 jQuery 的代碼
$("content").style.display = "none";	// 基于其他庫的 $() 代碼

例子 5

完全將 jQuery 移到一個新的命名空間：

var dom = {};
dom.query = jQuery.noConflict(true);

結果:

dom.query("div p").hide();	// 新 jQuery 的代碼
$("content").style.display = "none";	// 另一個庫 $() 的代碼
jQuery("div > p").hide();	// 另一個版本 jQuery 的代碼

jQuery 參考手冊 核心