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>

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

Answer 2

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

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)

Answer 3

如果我没弄错的话：

var jq = $.noConflict();

然后你可以用jq。（无论如何）调用jquery函数。

jq('#selector');

Answer 4

它允许您为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>

Answer 5

如果您使用的是使用$的其他库，则通常会使用它。

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

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

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

在引入jquery后放入var j = jQuery.noConflict()，然后引入冲突的脚本。然后，您可以使用j代替$来满足您的所有jquery需求，并将$用于其他脚本。

Answer 7

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

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

在我的jQuery和js文件之后获取文件是错误（由浏览器的控制台找到）并在我的Magento网站上的所有错误js文件之后用jQuery替换所有'$'。它对我有用。在我的博客here

上查找更多详情

Answer 8

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

Answer 9

您只需为JQuery分配一个自定义变量，而不是默认的$。然后，JQuery将自己包装在一个新的函数范围中，因此$不再存在命名空间冲突。

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

Answer 10

noConflict（）方法释放$ short标识符，以便其他脚本可以在下次使用它。

默认jquery $ as：

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

或者作为自定义：

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

Answer 11

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

Answer 12

/* 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);


    live view example on codepen easy to understand.
    http://codepen.io/kaushik/pen/QGjeJQ

我如何实现JQuery.noConflict（）？

12 个答案: