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

---

可能是Unsure of how to implement the noConflict() code的重复问题。 - Russ Cam

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>

- Jonathan Lonowski

Answer 2

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

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)

- Derek Hunziker

---

只是为了进一步澄清：内部的$(function()){...});是jQuery DOM准备函数的简写形式：$('document').ready(function() {...});而是(function($){...})(jQuery)执行IIFE中的封装 - 全局jQuery对象作为参数传递，$然后成为本地范围。 - Nick Bergquist

Answer 3

如果我没有错的话：

var jq = $.noConflict();

那么你可以使用 jq.(任何内容) 来调用 jQuery 函数。

jq('#selector');

- aepheus

---

关于使用 $ 符号的外部 jQuery 库怎么办？ - Qasim

Answer 4

如果你正在使用另一个使用$符号的库，那么通常会使用它。

为了仍然可以使用jQuery的$符号，我通常会使用：

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

- Ivan

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

- Naftali

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

把 var j = jQuery.noConflict() 放在引入 jQuery 后并引入冲突脚本之前。然后你就可以使用 j 替换所有需要 jquery 的地方，而在其他脚本中继续使用 $。

- scrappedcola

Answer 7

我通过添加这个冲突代码来修复了那个错误

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

在我的Magento网站中，我在jQuery和js文件后面找到了一个错误（由浏览器控制台发现），并且在所有错误的js文件中用jQuery替换所有'$'。这对我来说很有效。 在我的博客这里中可以找到更多细节。

- Niroshan

Answer 8

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

- pankaj prajapati

Answer 9

您可以为JQuery分配一个自定义变量，以便它使用而不是默认的$。 JQuery然后将自己包装在一个新的函数范围内，因此$不再具有命名空间冲突。

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

- AlienWebguy

Answer 10

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

- Andrew Kolesnikov