Javascript 我如何实现 JQuery.noConflict() ？

How do I implement JQuery.noConflict() ?

提问by SuperLuigi

I am using both javascript and jquery code on the same html page. For some reason, the jQuery library is stopping my native javascript code from working properly.

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

I found this page: jQuery No Conflictthat says you can use a jquery.noConflict to release $ back to javascript. However, I'm not sure how to do this?

我找到了这个页面：jQuery No Conflict说你可以使用 jquery.noConflict 将 $ 释放回 javascript。但是，我不确定如何执行此操作？

Specifically, I'm not sure how to implement this correctly? Where does the the Jquery code go, where does the JS code go?

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

My code is below:

我的代码如下：

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

回答by Jonathan Lonowski

jQuery.noConflictwill reset the $variable so it's no longer an alias of jQuery. Aside from just calling it once, there's not much else you really need to do. Though, you can create your own alias with the return value, if you'd like:

jQuery.noConflict将重置$变量，使其不再是jQuery. 除了只调用一次之外，您真正需要做的其他事情并不多。不过，如果您愿意，您可以使用返回值创建自己的别名：

var jq = jQuery.noConflict();

And, generally, you want to do this right after including jQuery and any plugins:

而且，通常，您希望在包含 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>

You can also go one step further and free up jQuerywith noConflict(true). Though, if you take this route, you'll definitely want an alias as neither $nor jQuerywill probably be what you want:

您还可以更进一步，jQuery使用noConflict(true). 但是，如果你走这条路，你肯定会想要一个别名，因为这既不是你想要的，$也jQuery可能不是你想要的：

var jq = jQuery.noConflict(true);

I think this last option is mostly used for mixing versions of jQuery, particularly for out-dated plugins when you want to update jQuery itself:

我认为最后一个选项主要用于混合 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>

回答by Derek Hunziker

By default, jquery uses the variable jQueryand the $ is used for your convenience. If you want to avoid conflicts, a good way is to encapsulate jQuery like so:

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

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)

回答by Ivan

It's typically used if you are using another library that uses $.

如果您使用另一个使用$.

In order to still use the $symbol for jQuery, I typically use:

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

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

回答by aepheus

If I'm not mistaken:

如果我没错的话：

var jq = $.noConflict();

then you can call jquery function with jq.(whatever).

然后你可以用 jq.(whatever) 调用 jquery 函数。

jq('#selector');

回答by Niroshan

I fixed that error by adding this conflict code

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

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

after my jQuery and js files and get the file was the error (found by the console of browser) and replace all the '$' by jQuery following this on all error js files in my Magento website. It's working for me good. Find more details on my blog here

在我的 jQuery 和 js 文件之后并获取文件是错误（由浏览器的控制台发现），并在我的 Magento 网站中的所有错误 js 文件上用 jQuery 替换所有“$”。它对我很有用。在我的博客上找到更多详细信息这里

回答by scrappedcola

If you look at the examples on the api page there is this: Example: Creates a different alias instead of jQuery to use in the rest of the script.

如果您查看 api 页面上的示例，则会看到以下内容：示例：创建一个不同的别名而不是 jQuery，以便在脚本的其余部分中使用。

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Put the var j = jQuery.noConflict()after you bring in jquery and then bring in the conflicting scripts. You can then use the jin place of $for all your jquery needs and use the $for the other script.

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

回答by Naftali aka Neal

It allows for you to give the jQuery variable a different name, and still use it:

它允许你给 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>

回答by Andrew Kolesnikov

In addition to that, passing trueto $.noConflict(true); will also restore previous (if any) global variable jQuery, so that plugins can be initialized with correct jQuery version when multiple versions are being used.

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

回答by Kabir Hossain

The noConflict() method releases the $ shortcut identifier, so that other scripts can use it for next time.

noConflict() 方法释放 $ 快捷方式标识符，以便其他脚本下次可以使用它。

Default jquery $ as:

默认 jquery $ 为：

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

Or as custom:

或按惯例：

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

回答by pankaj prajapati

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

You can do it like this:

你可以这样做：

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