如何实现 JQuery.noConflict() ？

Posted 2023-02-18

【中文标题】如何实现 JQuery.noConflict() ？

【英文标题】：How do I implement JQuery.noConflict() ?

【发布时间】：2011-12-14 12:08:35

【问题描述】：

我在同一个 html 页面上同时使用 javascript 和 jquery 代码。出于某种原因，jQuery 库正在阻止我的本机 javascript 代码正常工作。

我找到了这个页面：jQuery No Conflict，上面说您可以使用 jquery.noConflict 将 $ 释放回 javascript。但是，我不确定该怎么做？

具体来说，我不确定如何正确实施？ Jquery代码去哪里了，JS代码去哪里了？

我的代码如下：

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

【问题讨论】：

Unsure of how to implement the noConflict() code的可能重复

【参考方案1】：

jQuery.noConflict 将重置$ 变量，因此它不再是jQuery 的别名。除了只调用一次之外，您实际上不需要做太多其他事情。不过，如果您愿意，您可以使用返回值创建自己的别名：

var jq = jQuery.noConflict();

而且，通常，您希望在包含 jQuery 和任何插件之后立即执行此操作：

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>

您还可以更进一步，使用noConflict(true) 释放jQuery。不过，如果您采用这条路线，您肯定会想要一个别名，因为 $ 和 jQuery 可能都不是您想要的：

var jq = jQuery.noConflict(true);

我认为最后一个选项主要用于混合 jQuery 版本，特别是当您想要更新 jQuery 本身时，对于过时的插件：

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
    var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>

【参考方案2】：

默认情况下，jquery 使用变量jQuery，$ 用于方便您使用。如果你想避免冲突，一个好方法是像这样封装 jQuery：

(function($)

    $(function()

        alert('$ is safe!');

    );

)(jQuery)

【讨论】：

只是为了进一步澄清这一点：内部 $(function())...);是 jQuery DOM 就绪函数的简写： $('document').ready(function() ...);它是 (function($)...)(jQuery) 在 IIFE 中执行封装 - 全局 jQuery 对象作为参数传递，然后 $ 成为本地范围。

【参考方案3】：

如果我没记错的话：

var jq = $.noConflict();

然后你可以用jq调用jquery函数。（随便）。

jq('#selector');

【讨论】：

使用 $ 符号的外部 jquery 库怎么样

【参考方案4】：

通常在您使用另一个使用 $ 的库时使用。

为了在 jQuery 中仍然使用 $ 符号，我通常使用：

jQuery.noConflict()(function($)
  // jQuery code here
);

【参考方案5】：

它允许你给 jQuery 变量一个不同的名字，并且仍然可以使用它：

<script type="text/javascript">
  $jq = $.noConflict();
  // Code that uses other library's $ can follow here.
  //use $jq for all calls to jQuery:
  $jq.ajax(...)
  $jq('selector')
</script>

【参考方案6】：

如果您查看 api 页面上的示例，则会看到： 示例：创建一个不同的别名而不是 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 j = jQuery.noConflict()，然后引入冲突的脚本。然后，您可以使用 j 代替 $ 来满足您的所有 jquery 需求，并使用 $ 来满足其他脚本。

【参考方案7】：

除此之外，将 true 传递给 $.noConflict(true);还将恢复以前的（如果有的话）全局变量 jQuery，以便在使用多个版本时可以使用正确的 jQuery 版本初始化插件。

【参考方案8】：

您只需分配一个自定义变量供 JQuery 使用，而不是其默认的 $。然后，JQuery 将自己包装在一个新的函数作用域中，因此 $ 不再有命名空间冲突。

<script type="text/javascript">
    $jQuery = $.noConflict();
    // Other library code here which uses '$'
    $jQuery(function() /* dom ready */ 
</script>

【参考方案9】：

noConflict() 方法释放 $ 快捷方式标识符，以便其他脚本下次可以使用。

默认 jquery $ 为：

// Actin  with $
$(function()
    $(".add").hide();
    $(".add2").show();
);

或自定义：

var j = jQuery.noConflict();
 // Action with j
j(function()
    j(".edit").hide();
    j(".add2").show();
);

【参考方案10】：

<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
    <script>
         var $i = jQuery.noConflict();
      // alert($i.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery-1.8.3.js"></script>
    <script>
        var $j = jQuery.noConflict();
      //alert($j.fn.jquery);
    </script>
    <script src="JavascriptLibrary/jquery.colorbox.js"></script>

    <script src="Js/jquery-1.12.3.js"></script>
    <script>
        var $NJS = jQuery.noConflict();
    </script>

你可以这样做：

<script>
   $i.alert('hi i am jquery-1.4.2.js alert function');
   $j.alert('hi i am jquery-1.8.3.js alert function');
 </script>

【参考方案11】：

今天我遇到了这个问题，因为我已经实现了使用 jQuery 版本和“fancybox 图片库”的“引导菜单”。当然，一个插件可以工作，另一个不是由于 jQuery 冲突，但我已经克服它如下：

首先，我在脚本页脚中添加了“引导菜单”Js，因为菜单显示在整个网站页面中：

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>

在“fancybox”图片库页面如下：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

而且好处是两者都像魅力一样工作:)

试一试:)

【参考方案12】：

我通过添加此冲突代码修复了该错误

<script type="text/javascript">
 jQuery.noConflict(); 
</script>

在我的 jQuery 和 js 文件之后并获取文件是错误（由浏览器的控制台找到）并在我的 Magento 网站中的所有错误 js 文件上用 jQuery 替换所有“$”。它对我有用。 在我的博客here中查找更多详细信息

【参考方案13】：

/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */

 var jq = $.noConflict();
    (function($)
      $('document').ready(function()
        $('button').click(function()
          alert($('.para').text());
        )
      )
    )(jq);

易于理解的codepen实时视图示例：http://codepen.io/kaushik/pen/QGjeJQ

【讨论】：

您需要在此处发布代码，并且不提供外部源的链接，因为无法保证该源将来可供其他人查看。