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库的情况：

(以下代码请自行复制到演示页面运行，注意不要同时执行，请分别执行)

此外，我们还可以使用其他自定义的变量名来操作jQuery：

// 让出对变量$的控制权，并将jQuery赋给新的别名jvar 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").("color", "");    });(function($){
       // 使用局部变量$进行jQuery操作    $("ul li").addClass("item");    }(jQuery));

如果要实现两个版本的jQuery库共存，我们可以编写如下代码：

三个版本的jQuery库共存，对应的jQuery示例代码如下：

注意：多个可能存在全局变量重名冲突的JS库，变量的实际控制权一般取决于JS库的加载顺序。以上面三个版本的jQuery库的示例代码为例，后加载的jQuery库的变量覆盖了之前版本的变量，因此每次让出变量的控制权，控制权就会交给上一个JS库。