我如何实施 JQuery.noConflict() ？

Question

我在同一个 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>

原文由 SuperLuigi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

您还可以更进一步，使用 jQuery noConflict(true) 。但是，如果你走这条路，你肯定会想要一个别名，因为 $ 和 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>

原文由 Jonathan Lonowski 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 (function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)

原文由 Derek Hunziker 发布，翻译遵循 CC BY-SA 3.0 许可协议