Javascript 如何实现JQuery.noConflict（）？

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

我发现了这个页面：上面说可以使用jquery.noConflict将$REF释放回javascript。但是，我不知道该怎么做

具体地说，我不知道如何正确地实现这一点？Jquery代码去了哪里，JS代码去了哪里

我的代码如下：

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

$.noConflict（）；
//使用其他库的$的代码可以在这里找到。

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

$jq=$.noConflict（）；
//使用其他库的$的代码可以在这里找到。
//对jQuery的所有调用使用$jq：
$jq.ajax（…）
$jq（'选择器'）

如果我没弄错：

var jq = $.noConflict();

然后可以使用jq调用jquery函数

---

默认情况下，jquery使用变量

jquery

，为了方便起见，使用$。如果要避免冲突，一个好方法是封装jQuery，如下所示：

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)

---

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

如果您使用的是另一个使用

$

的库，则通常会使用它

为了在jQuery中仍然使用

$

符号，我通常使用：

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

---

如果您查看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需求，并将

$

用于其他脚本。

您只需为jquery分配一个自定义变量，而不是默认的

$

。然后JQuery将自己包装到一个新的函数范围中，这样

$

就不再有名称空间冲突

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

$jQuery=$.noConflict（）；
//此处使用“$”的其他库代码
$jQuery（函数（）{/*dom ready*/}

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版本，特别是当您想要更新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>

var jq144=jQuery.noConflict（true）；

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

默认jquery$as：

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

或按惯例：

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

var$i=jQuery.noConflict（）；
//警报（$i.fn.jquery）；
var$j=jQuery.noConflict（）；
//警报（$j.fn.jquery）；
var$NJS=jQuery.noConflict（）；

您可以这样做：

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

$i.alert（'hi i am jquery-1.4.2.js alert function'）；
$j.alert（'hi i am jquery-1.8.3.js alert function'）；

---

代码笔上的实时查看示例很容易理解：

今天我遇到了这个问题，因为我实现了“引导菜单”，它使用jQuery版本和“fancybox图像库”。当然，一个插件可以工作，另一个插件不是因为jQuery冲突，但我已经克服了它，如下所示：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

首先，我在脚本页脚中添加了“bootstrap menu”Js，因为该菜单显示在整个网站页面上：

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>

var jq171=jQuery.noConflict（true）；

在“fancybox”图像库页面中，如下所示：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

window.jQuery | | document.write（“”）

而好的一面是两者都像一个魔咒一样工作：）

---

试试看：）

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

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

jQuery.noConflict（）；

在我的jQuery和js文件和获取文件之后，出现了错误（由浏览器控制台找到），并在我的Magento网站中的所有错误js文件上用jQuery替换所有“$”。这对我有好处。

---

在我的博客上查找更多详细信息

可能重复的代码，您需要在此处发布代码，而不提供指向外部源代码的链接，因为无法保证将来其他人可以使用该源代码。请参阅。只需对此做进一步说明：内部$（函数（））{…}）；是jQueryDOM就绪函数的简写：$（'document'）.ready（function（）{…}）；在IIFE中执行封装的是（函数（$）{…}）（jQuery）——全局jQuery对象作为参数传递，$随后成为本地范围。但是使用$符号的外部jQuery库呢

<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>

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