我如何实现 JQuery.noConflict() ?

IT技术 javascript jquery conflict
2021-01-28 10:36:07

我在同一个 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>
6个回答

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>

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

(function($){

    $(function(){

        alert('$ is safe!');

    });

})(jQuery)
只是为此添加一点进一步的说明:内部 $(function()){...}); 是 jQuery DOM 就绪函数的简写: $('document').ready(function() {...}); 它是在 IIFE 中执行封装的 (function($){...})(jQuery) - 全局 jQuery 对象作为参数传递,然后 $ 成为局部范围。
2021-04-04 10:36:07

如果我没错的话:

var jq = $.noConflict();

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

jq('#selector');
使用 $ 符号的外部 jquery 库呢?
2021-03-15 10:36:07

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

为了仍然使用$jQuery符号,我通常使用:

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

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