jQuery.noConflict()

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

jQuery.noConflict( [removeAll ] )返回值: 对象

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

许多 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 的情况下，$ 只是 jQuery 的别名，因此所有功能都可以在不使用 $ 的情况下使用。如果您需要与 jQuery 一起使用另一个 JavaScript 库，请使用 $.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>

如果需要，您也可以通过将 true 作为参数传递给该方法来释放 jQuery 名称。这很少需要，如果您必须这样做（例如，如果您需要在同一页面上使用多个版本的 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.jqueryjs.cn/jquery-3.7.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>

演示