我如何实现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”图片库页面中如下:
好的方面就是像魅力一样工作:)
试试看 :)