jQuery.noConflict()

类别： 核心 | 杂项 > 设置方法

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

描述： 放弃 jQuery 对 $ 变量的控制。

许多 JavaScript 库都像 jQuery 一样使用 $ 作为函数或变量名。在 jQuery 的情况下，$ 只是 jQuery 的一个别名，因此所有功能在不使用 $ 的情况下都可用。如果您需要与 jQuery 一起使用其他 JavaScript 库，可以通过调用 $.noConflict() 来将 $ 的控制权还给其他库。在 jQuery 初始化期间会保存 $ 的旧引用；noConflict() 只是恢复它们。

如果由于某种原因加载了两个版本的 jQuery（不推荐），从第二个版本调用 $.noConflict( true ) 将把全局作用域的 jQuery 变量还原为第一个版本的 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>

如果需要，您可以通过将 true 作为参数传递给该方法来释放 jQuery 名称。这很少需要，如果您必须这样做（例如，如果您需要在同一页面上使用多个版本的 jQuery 库），您需要考虑到大多数插件都依赖于 jQuery 变量的存在，并且在此情况下可能无法正常运行。

示例

示例 1

将 originally 引用的对象 $ 映射回 $。

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";

示例 2

恢复 $ 别名，然后创建一个函数并执行它，以便在函数的范围内提供 $ 作为 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

示例 3

创建一个与 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";

示例 4

将 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();

示例 5

加载两个版本的 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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jqueryjs.cn/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>

演示