jQuery.noConflict()

类别：核心 | 杂项 > 安装方法

jQuery.noConflict( [removeAll ] )返回类型：Object

描述：让出jQuery对$变量的控制。

很多JavaScript库使用$作为函数名称或变量名称，就像jQuery所做的那样。在jQuery中，$是jQuery的别名，所以即使不用$，它所有的功能依然可用。如果你需要使用其它JavaScript库伴同jQuery，利用对$.noConflict()的调用，把对$的控制退回给其它库。在jQuery初始化过程中，$的旧的引用被保存了，noConflict()仅仅恢复重载了它们。

如果为了一些原因，需要载入两个jQuery版本（并不建议这样做），从第二个版本调用$.noConflict( true )将把全局作用范围的jQuery变量返回给第一个版本。

1
2
3
4
5
6
 
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

此技术在解决冲突方面特别有效，.ready()方法能够给jQuery对象取个别名，在传递给.ready()的回调函数内部，你可以随意使用$，而不用担心和后面的发生冲突：

1
2
3
4
5
6
7
8
9
 
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

如有必要，你还可以放开jQuery名称，只要用true作为参数传给此方法。几乎不会有这种必要，而且如果你必须这样做的话（例如，如果你需要在同一个网页中使用多个jQuery库版本），你需要考虑大多数插件依赖于jQuery变量的存在，可能在这种情况下无法正确操作。

示例：

将$引用的的原来的对象映射回$。

1
2
3
4
5
 
jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

归还$别名，然后创建并执行一个函数，以在函数的作用范围内提供$作为jQuery的别名。在函数的内部，原来的$对象不可用了。这个函数对于大多数不依赖于其他库的插件能很好地起作用。

1
2
3
4
5
6
7
8
 
jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);
 
// Other code using $ as an alias to the other library

创建一个不同的别名代替jQuery，以用于脚本的剩余部分。

1
2
3
4
5
6
7
 
var j = jQuery.noConflict();
 
// Do something with jQuery
j( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";

把jQuery完全移到别的对象里的新的命名空间中。

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

输出结果：

1
2
3
4
5
6
7
8
 
// Do something with the new jQuery
dom.query( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";
 
// Do something with another version of jQuery
jQuery( "div > p" ).hide();

载入两个jQuery 版本（不建议）。然后，把jQuery的全局作用范围变量恢复载入为先载入的jQuery。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
 
<script>
var $log = $( "#log" );
 
$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
 
// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)
 
jq162 = jQuery.noConflict( true );
 
$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>
 
</body>
</html>

演示：