`
jcyanfan
  • 浏览: 74702 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

解决在同一个页面使用多个不同的jQuery版本引起的冲突问题

 
阅读更多

总结一下,从这看来:http://www.cnblogs.com/liyunqi007/archive/2011/10/22/2221178.html

利用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>

 或者下面的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js">
    </script>
    <script type="text/javascript">
        (function () {

            var v14 = $.noConflict(true);
            window.$ = { v14: v14 };
        })();
    </script>
    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        (function () {
            var v17 = $.noConflict(true);
            window.$.v17 = v17;
        })();
    </script>
    <script type="text/javascript">
        // v14 code
        (function ($) {

        })(window.$.v14);

        // v17 code
        (function ($) { 
            
        })(window.$.v17);
    </script>

</head>
<body>
</body>

 

分享到:
评论

相关推荐

    解决jquery版本冲突的有效方法

    通过这种方式,我们可以同时在同一个页面上使用多个jQuery版本,而不会影响各自的功能。这种方法不仅适用于jQuery的多版本共存,也对其他可能引起全局变量冲突的库或框架具有借鉴意义。通过这样的实践,可以提高Web...

    避免jQuery名字冲突 noConflict()方法

    在Web开发中,引入多个JavaScript库常常是必需的,这会带来一个问题:不同库可能使用了相同的变量名作为其全局标识符,最典型的是使用“$”符号。由于$符号的普遍性,许多JavaScript库都将它用作快捷方式。例如,...

    jquery-easyui-1.4-patch.js

    总的来说,"jquery-easyui-1.4-patch.js"是一个针对性的解决方案,旨在修复jQuery EasyUI 1.4版本中datagrid组件加载数据时的重复问题。通过正确地应用这个补丁,开发者可以避免因该问题引发的性能损耗和用户体验...

    快速解决jQuery与其他库冲突的方法介绍

    在前端开发过程中,经常需要在同一个页面上引入多个JavaScript库。其中,最常使用的库之一就是jQuery,因为它提供了一套强大的接口,用于简化DOM操作、事件处理、动画效果等。然而,当同时引入其他库如Prototype时,...

    Jquery修改页面标题title其它JS失效的解决方法

    2. **使用队列**:如果多个操作需要在特定顺序下执行,可以考虑使用 `jQuery` 的 `queue()` 或 `$.when()` 函数来管理这些操作,确保它们按预期顺序进行。 3. **异步处理**:确认所有修改标题的代码都在DOM加载完成...

    HTML多文件上传插件,可一次上传多个文件.zip

    "ajaxform插件使用时报错ajaxSubmit() is not a function - html文件中有多个jquery.js文件时可能会引起冲突.url"提醒我们,如果页面中包含了多个jQuery库,可能导致命名冲突,`ajaxSubmit()`函数无法识别。确保页面...

    ecshop程序js库冲突patch

    JavaScript库冲突通常发生在多个库同时使用时,因为它们可能都试图全局定义相同的名字、方法或事件处理。例如,jQuery与 PrototypeJS 同时存在时,由于两者都使用 `$` 符号作为主要操作符,就会产生冲突。解决这类...

    jQuery prototype冲突的2种解决方法(附demo示例下载)

    本文讲述了如何解决jQuery和prototype.js冲突的问题,并...通过这些方法,开发者可以在同一个页面中顺利地使用jQuery和prototype.js的功能,而不会引起功能冲突或错误。希望本文的介绍对读者在进行Web开发时有所帮助。

    bootstrap+jquery项目引入文件报错的解决方法

    即使多个文件引用了同一个jQuery库,只要确保其在Bootstrap之前被加载即可。另外,bootstrap.min.css的引用顺序相对灵活,无论是放在前面还是后面,通常不会影响JavaScript的功能。 总结以上内容,在开发过程中遇到...

    与jqeury无冲突的uchome编辑器

    然而,当多个库或插件在同一页面上使用时,可能会出现命名冲突,尤其是当它们都使用"$"作为主要函数名时。"与jQuery无冲突的uchome编辑器"就是为了解决这个问题而设计的。 UChome是一个流行的开源社区建站系统,它...

    js文件夹下需要引入的JQuery.js文件

    由于`$`是jQuery的默认标识符,但其他库也可能使用这个符号,可能会引起冲突。为了解决这个问题,jQuery提供了`noConflict()`方法,允许释放`$`,例如: ```javascript var j = $.noConflict(); j(document).ready...

    《波波时尚主题摸版无法使用的解决方法》

    《波波时尚主题模版无法使用的解决方法》这个话题就是一个典型的实例,它涉及到网页设计、前端开发以及问题排查等多个方面。以下是对这个问题的详细解析: 首先,波波时尚主题是一个用于网站设计的模板,可能是针对...

    让jQuery与其他JavaScript库并存避免冲突的方法

    在现代Web开发中,经常会使用多个JavaScript库来完成不同的任务。但是,当这些库中包含同名的函数或变量时,就可能出现命名冲突的问题。最为典型的是$符号的冲突,因为在很多库中$被用作快捷访问符。例如,jQuery就...

    JQuery中解决重复动画的方法

    使用stop方法是一个快速且有效的方式,可以在很多情况下解决问题。例如,在图片滚动轮播的效果中,如果用户反复触发轮播动作,通过调用stop方法可以清空队列,阻止动画叠加,确保图片滚动不会因为连续触发而连续滚动...

    jquery图片延迟加载

    在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中...

    z-tree 所需的js和css文件,附带一个版本的jq文件

    在这个压缩包中,包含的是Z-Tree运行所必需的JavaScript和CSS文件,以及一个jQuery的版本。让我们深入了解一下这些关键组件。 首先,Z-Tree的核心是它的JavaScript文件。这些文件包含了实现树形视图的逻辑,包括...

    不要使用jQuery触发原生事件的方法

    这种情况在大型项目或遗留代码中尤为严重,因为可能会有多个部分不相关联地监听同一个原生事件。这不仅会导致代码的耦合性增加,还会在维护过程中引入难以追踪的错误。 为了解决这个问题,建议使用自定义事件来代替...

    且firefox显示不正常

    标题“Firefox显示不正常”可能指的是...综上所述,解决“Firefox显示不正常”的问题需要从CSS兼容性、HTML结构、浏览器设置、插件冲突等多个角度进行排查和修复。通过分析和调试,一般可以找到并解决导致问题的原因。

    Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解

    首先,它允许在同一个页面上多次使用,而不会引起冲突,这与onload事件不同,后者在同一个页面上只能使用一次。其次,$(document).ready()函数所做的事情仅限于DOM元素,而不涉及其他如图片、样式表等资源的加载情况...

    Jquery.addClass始终无效原因分析

    5. **jQuery版本问题**:不同版本的jQuery可能存在差异,确保使用的版本支持`addClass()`方法。 总的来说,要解决`Jquery.addClass()`无效的问题,需要从事件绑定、CSS样式覆盖、DOM加载状态、JavaScript错误和类...

Global site tag (gtag.js) - Google Analytics