如何实现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>

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>

Answer 2

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

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)

Answer 3

如果我没记错的话：

var jq = $.noConflict();

然后你可以用jq.(随便什么)来调用jquery函数。

jq('#selector');