同一个页面引入多个版本jQuery实现共存jQuery noConflict方法释放$标识符控制

最新推荐文章于 2024-08-28 08:44:48 发布

HaHa_Sir

最新推荐文章于 2024-08-28 08:44:48 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：同一个页面引入多个版本jQuery 多版本jQuery共存不同版本jQuery共存 jQuery noConflict 解决多个版本jQuery冲突

本文链接：https://blog.youkuaiyun.com/HaHa_Sir/article/details/86075943

前端专栏收录该内容

14 篇文章

订阅专栏

本文探讨了在同一页面上引入多个版本的jQuery时遇到的兼容性问题，并详细介绍了如何使用jQuery的noConflict()方法来解决版本冲突，实现不同版本jQuery的共存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同一个页面引入多个版本jQuery实现共存jQuery noConflict方法释放$标识符控制

一、问题背景

1、一个老项目，需要调整部分前端功能，由于之前的jQuery版本太低，需要升级jQuery的版本。问题来了，直接升级到高版本的jQuery ，之前的功能不能使用了。（不知道为何jQuery高版本不兼容低版本的）

2、需求就是：同一个页面需要多个不同版本的jQuery共存，在不同的方法里，使用不同的jQuery对象进行操作。

二、代码尝试

1、在html页面，引入两个不同版本的 jQuery lib （低版本在前，高版本在后）

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2、输出jQuery 版本号： jQuery版本是： 2.0.0

<script type="text/javascript">
    $(function(){
        var version = $.fn.jquery ;
        console.info(version);
        document.write("jQuery版本是： " + version);
    });
</script>

3、对调jQuery版本引入顺序（高版本在前，低版本在后）

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>

4、使用 2中方法，再次输出jQuery版本号： jQuery版本是： 1.10.0

5、结论：通过调整 jQuery的引入顺序，无法解决不同版本jQuery共存的问题。 最终获得的jQuery对象是最后加载的那一个。

三、问题解决

1、在菜鸟教程中看到了 ---> jQuery - noConflict() 方法

2、使用 noConflict() 方法实现jq版本共存

$(function(){
    var $2 = $.noConflict(); // 第二个加载的jQuery对象变成了 $2
    var version = $.fn.jquery ;
    var version2 = $2.fn.jquery ;
    console.info(version , version2);
    document.write("jQuery版本是： " + version + "jQuery2版本是： " + version2);
});

3、输出结果： jQuery版本是： 1.10.0, jQuery2版本是： 2.0.0 。

四、总结

1、当前项目中有多个版本的jQuery对象需要共存，或者 jQuery 对象$ ，与其他js框架 $ 对象冲突时，可以使用 $.noConflict() 来释放对 $ 标识符的控制。

参考资料： jQuery - noConflict() 方法