我如何实现JQuery.noConflict()?

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

我找到了这个页面: jQuery No Conflict说你可以使用jquery.noConflict将$释放回javascript。 但是,我不知道该怎么做?

具体来说,我不确定如何正确实现这一点? Jquery代码在哪里,JS代码在哪里?

我的代码如下:

 $.noConflict(); // Code that uses other library's $ can follow here.  

jQuery.noConflict将重置$变量,因此它不再是jQuery的别名。 除了只召唤一次,你真的不需要做太多其他事情。 但是,如果您愿意,可以使用返回值创建自己的别名:

 var jq = jQuery.noConflict(); 

而且,通常,您希望在包含jQuery和任何插件之后立即执行此操作:

     

您还可以更进一步,使用noConflict(true)释放jQuery noConflict(true) 。 虽然,如果你采取这种方式,你肯定会想要一个别名,因为$jQuery都不是你想要的:

 var jq = jQuery.noConflict(true); 

我认为最后一个选项主要用于混合jQuery版本,特别是对于想要更新jQuery本身的过时插件:

      

默认情况下,jquery使用变量jQuery ,$用于方便您使用。 如果你想避免冲突,一个好方法是封装jQuery,如下所示:

 (function($){ $(function(){ alert('$ is safe!'); }); })(jQuery) 

如果我没错的话:

 var jq = $.noConflict(); 

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

 jq('#selector'); 

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

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

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

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

  

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

  

在我的jQuery和js文件之后获取文件是错误(由浏览器的控制台找到)并在我的Magento网站上的所有错误js文件之后用jQuery替换所有’$’。 它对我有用。 在此处查看我的博客的更多详情

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(); }); 
        

你可以这样做:

  
 /* 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版本和“fancybox图库”。 当然一个插件工作,另一个不是由于jQuery冲突,但我克服了它如下:

首先,我在脚本页脚中添加了“引导菜单”Js,因为菜单在网站页面上显示:

     

并在“fancybox”图片库页面中如下:

    

好的方面就是像魅力一样工作:)

试试看 :)