当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

JQuery jQuery.noConflict()用法及代码示例

用法 
jQuery.noConflict(  [removeAll ] ) => Object

说明：放弃 jQuery 对$多变的。

  • 添加的版本：1.0jQuery.noConflict( [removeAll ] )

    • removeAll
      类型：Boolean
      一个布尔值，指示是否从全局范围(包括 jQuery 本身)中删除所有 jQuery 变量。

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

如果由于某种原因加载了两个版本的 jQuery(不推荐)，从第二个版本调用 $.noConflict( true ) 会将全局范围的 jQuery 变量返回到第一个版本的变量。

<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() 的回调中，如果您愿意，可以使用 $，而不必担心以后发生冲突：

<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 库)，则需要考虑大多数 plug-ins 依赖于 jQuery 的存在变量，在这种情况下可能无法正常运行。

例子：

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

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

恢复 $别名，然后创建并执行一个函数，以在函数范围内将 $作为 jQuery 别名提供。在函数内部，原始 $对象不可用。这适用于大多数不依赖任何其他库的插件。

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);
 
// Other code using $ as an alias to the other library

创建一个不同的别名而不是 jQuery 以在脚本的其余部分中使用。

var j = jQuery.noConflict();
 
// Do something with jQuery
j( "div p" ).hide();
 
// Do something with another library's $()
$( "content" ).style.display = "none";

将 jQuery 完全移动到另一个对象中的新命名空间。

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

结果：

// 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。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.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>

演示：

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery.noConflict()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。