jQuery中 $ 符号的冲突问题及解决方案

在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码。当同一页面引用了jQuery多个版本或者jQuery与某些其他js库产生冲突,控制台就会报错。

同一个页面多个版本冲突解决办法

你可能会问,为什么在一个页面上会引用多个版本的jQuery,只引用一个不就好了吗?

答案是:不行。一般要用到两个(或以上)版本的jQuery库的原因是:现有的网站已经用了旧版本的jQuery以及相关插件,直接将jQuery升级到新版本会导致这些基于旧版本jQuery的插件不能工作,除非你能把这些插件全部升级,或者等各个插件的作者发布支持新版本jQuery的插件版本。  

解决办法:使用jQuery.noConflict([extreme])方法。

比如我引用的是jquery-3.3.1.js和jquery-1.4.4.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.bootcss.com/jquery/1.4.4/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        console.log($.fn.jquery); //'3.3.1'
        var $jq = jQuery.noConflict(true); //自定义别名
        console.log($.fn.jquery); //'1.4.4'
        console.log($jq.fn.jquery); //'3.3.1'
    </script>
</head>
<body>
</body>
</html>

可以看到jQuery.noConflict将变量 $ 的控制权让渡给了1.4.4版本的jQuery库。而如果需要使用3.3.1的版本则需用 $jq代替。 




猜你喜欢

转载自blog.csdn.net/uuihoo/article/details/79537253