javascript - 如何实现 JQuery.noConflict() ？

Question

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

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

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

我的代码如下:

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

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>

您还可以更进一步，使用 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>