-
jQuery自诞生以来，版本越来越多，而且jQuery官网的新版本还在不断的更新和发布中，现已经达到了1.6.4版本，但是我们在以前的项目中就已经使用了旧版本的jQuery，比如已经出现的：1.3.X、1.4.X、1.5.X、1.6.2等等。

　　由于项目的需要，必然也需要不断的使用较新版的jQuery，但对于原来就已经存在并已经采用了的旧jQuery版本，我们如何让多个不同的jQuery版本在同一个页面并存而不冲突呢？

　　其实，利用jQuery.noConflict()特性，我们不仅可以让jQuery与其他的JS库并存，比如Prototype。也可以与jQuery本身的其他不同版本并存而不冲突。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>在同一个页面中加载多个不同的jQuery版本</title>

        <!-- 从谷歌服务器加载jQuery最新版本 -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

        <script type="text/javascript">

            var jQuery_New = $.noConflict(true);

        </script>

        <!-- 加载jQuery1.6.2版本 -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">

            var jQuery_1_6_2 = $.noConflict(true);

        </script>

        <!-- 加载jQuery1.5.2版本 -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

        <script type="text/javascript">

            var jQuery_1_5_2 = $.noConflict(true);

        </script>

        <!-- 加载jQuery1.4.2版本 -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script type="text/javascript">

            var jQuery_1_4_2 = $.noConflict(true);

        </script>

        <!-- 加载jQuery1.3.2版本 -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">

            var jQuery_1_3_2 = $.noConflict(true);

        </script>

        <script type="text/javascript">

            alert(jQuery_New.fn.jquery);

            alert(jQuery_1_6_2.fn.jquery);

            alert(jQuery_1_5_2.fn.jquery);

            alert(jQuery_1_4_2.fn.jquery);

            alert(jQuery_1_3_2.fn.jquery);

            

            jQuery_New(function($){$('<p>我是最新的'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});

            jQuery_1_6_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});

            jQuery_1_5_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});

            jQuery_1_4_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});

            jQuery_1_3_2(function($){$('<p>我是'+$.fn.jquery+'版本添加进来的。</p>').appendTo('body');});

        </script>

    </head>

    <body>

        在同一个页面中加载多个不同的jQuery版本

        <br>

    </body>

</html>

转自：http://www.cnblogs.com/liyunqi007/archive/2011/10/22/2221178.html

在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突的更多相关文章

  1. asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  2. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  3. 完美实现在同一个页面中使用不同样式的artDialog样式

    偶然发现artDialog.js这个插件,就被其优雅的设计及漂亮的效果深深吸引,在做例子时碰到了一些想当然它应该提供但却没有提供的功能,不过这都不影响我对它的喜爱,下面说一下遇到的问题吧! artDi ...

  4. 多个测试类 只使用同一个浏览器，同一个driver对象， 或者同一个页面的对象

    如果是:多个测试类 只使用同一个浏览器,同一个driver对象, 或者同一个页面的对象,只需要:1. 创建一个基本的测试类(BaseTest),具有一个公共静态的driver属性, public st ...

  5. vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...

  6. 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面

    改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...

  7. vue 常见的新增、编辑、查看公用同一个页面

    用vue开发经常会碰到,一个功能的新增.编辑.查看公用同一个页面,如果是页面暂且不提. 但是弹框,很多人会发现,如果是点击编辑,取消,再点新增,弹框上面是会有残留数据的,为什么会这样呢,因为在点编辑的 ...

  8. 同一个页面多个html、body标签

    同一个页面多个html.body标签 html页面的一些标签,默认只有一个.比如html,head,body..... 如果写多个是什么情况呢.本着好奇的想法,试验了一下. <html> ...

  9. 在同一个页面多次调用el-select选择器

    elementui是一个十分好用的组件库,但毕竟也不能做到面面俱到,有些还是要根据根据自己的实际需求做一些自定义的方法. 比如el-select选择器在同一个页面使用多次的话就会造成选择一个另一个也会 ...

随机推荐

  1. uC/OS-II中includes块

    /*************************************************************************************************** ...

  2. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【三】——Web Api入门

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 经过前2节的介绍,我们已经把数据访问层搭建好了,从本章开始就是Web Api部分了.在正式开 ...

  3. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【八】——Web Api的安全性

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这一篇文章我们主要来探讨一下Web Api的安全性,到目前为止所有的请求都是走的Http协议 ...

  4. My VA Snippet

    My VA snippet Visual Assist X 是一款比较好用的编码辅助工具, 这款工具可以大大提高程序员的编码速度和开发效率.同时在它的指引下可以有效避免低级Bug. 真正实现快速编码, ...

  5. tomcat 无法加载js和css 等静态文件的问题

    前段时间做了个网站,在本地tomcat测试都没有问题,但是部署到阿里云上之后,系统样式全没了.jsp等动态页面访问正常. 打开浏览器监控发现所有的css 和js 文件返回都是404 .直接访问单个的c ...

  6. AutoMapper.EF6

    https://github.com/AutoMapper/AutoMapper.EF6 Extensions for AutoMapper and EF6 This contains some us ...

  7. salt stack 工具之一——远程命令

    salt stack 远程命令 salt stack是一种自动化的运维工具,可以同时对N台服务器进行配置管理.远程命令执行等操作. salt stack分为两个部分: salt-master,部署在控 ...

  8. sqlserver权限体系（下）

    简介 在上一篇文章中,我对主体的概念做了全面的阐述.本篇文章接着讲述主体所作用的安全对象以及所对应的权限. 理解安全对象(Securable) 安全对象,是SQL Server 数据库引擎授权系统控制 ...

  9. Effective Objective-C 2.0 — 第13条：用“方法调配 技术” 调试 “黑盒方法”

    自己理解是调配了方法 在运行期,可以向类中新增或替换选择子所对应的方法实现. 使用另一份实现来替换原有的方法实现,这道工序叫做“方法调配”,开发者常用此技术向原有实现中添加新功能. 一般来说,只有调试 ...

  10. php empty函数

    empty — 检查一个变量是否为空. 当一个变量并不存在,或者它的值等同于FALSE,那么它就会被认为不存在.如果变量不存在的话,empty()并不会产生警告. 返回值: 当var存在,并且是一个非 ...