jQuery 核心 - noConflict() 方法

實(shí)例

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

var jq=$.noConflict();

親自試一試

定義和用法

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

該方法釋放 jQuery 對(duì) $ 變量的控制。

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

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

語法

jQuery.noConflict(removeAll)

說明

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

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

<script type="text/javascript">
  $.noConflict();
  // 使用另一個(gè)庫的 $ 的代碼
</script>

可以與 .ready() 方法結(jié)合起來使用，來為 jQuery 對(duì)象起別名，這項(xiàng)技術(shù)非常有效：

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

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // 使用 jQuery $ 的代碼
  });
  // 使用其他庫的 $ 的代碼
</script>

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

這是相對(duì)于簡(jiǎn)單的 noConflict 方法更極端的版本，因?yàn)檫@將完全重新定義 jQuery。這通常用于一種極端的情況，比如你想要將 jQuery 嵌入一個(gè)高度沖突的環(huán)境。注意：調(diào)用此方法后極有可能導(dǎo)致插件失效。

實(shí)例

例子 1

將 $ 引用的對(duì)象映射回原始的對(duì)象：

jQuery.noConflict();

jQuery("div p").hide();	// 使用 jQuery

$("content").style.display = "none";	// 使用其他庫的 $()

例子 2

恢復(fù)使用別名 $，然后創(chuàng)建并執(zhí)行一個(gè)函數(shù)，在這個(gè)函數(shù)的作用域中仍然將 $ 作為 jQuery 的別名來使用。在這個(gè)函數(shù)中，原來的 $ 對(duì)象是無效的。這個(gè)函數(shù)對(duì)于大多數(shù)不依賴于其他庫的插件都十分有效：

jQuery.noConflict();

(function($) { 
  $(function() {
    // 使用 $ 作為 jQuery 別名的代碼
  });
})(jQuery);

... // 其他用 $ 作為別名的庫的代碼

例子 3

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

jQuery.noConflict()(function(){
    // 使用 jQuery 的代碼
});

... // 其他庫使用 $ 做別名的代碼

例子 4

創(chuàng)建一個(gè)新的別名用以在接下來的庫中使用 jQuery 對(duì)象：

var j = jQuery.noConflict();

j("div p").hide();	// 基于 jQuery 的代碼

$("content").style.display = "none";	// 基于其他庫的 $() 代碼

例子 5

完全將 jQuery 移到一個(gè)新的命名空間：

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

結(jié)果:

dom.query("div p").hide();	// 新 jQuery 的代碼

$("content").style.display = "none";	// 另一個(gè)庫 $() 的代碼

jQuery("div > p").hide();	// 另一個(gè)版本 jQuery 的代碼