同一个页面引入多个版本jQuery实现共存

一、问题背景

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

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

二、代码尝试

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

<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 

四、总结

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