文档章节

解决多个jquery并存冲突问题

罗盛力
 罗盛力
发布于 2011/12/02 23:40
字数 586
阅读 4625
收藏 1

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本身的其他不同版本并存而不冲突。

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

 2 <html>

 3     <head>

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

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

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

 7         <script type="text/javascript">

 8             var jQuery_New = $.noConflict(true);

 9         </script>

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

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

12         <script type="text/javascript">

13             var jQuery_1_6_2 = $.noConflict(true);

14         </script>

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

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

17         <script type="text/javascript">

18             var jQuery_1_5_2 = $.noConflict(true);

19         </script>

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

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

22         <script type="text/javascript">

23             var jQuery_1_4_2 = $.noConflict(true);

24         </script>

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

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

27         <script type="text/javascript">

28             var jQuery_1_3_2 = $.noConflict(true);

29         </script>

30         <script type="text/javascript">

31             alert(jQuery_New.fn.jquery);

32             alert(jQuery_1_6_2.fn.jquery);

33             alert(jQuery_1_5_2.fn.jquery);

34             alert(jQuery_1_4_2.fn.jquery);

35             alert(jQuery_1_3_2.fn.jquery);

36            

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

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

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

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

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

42         </script>

43     </head>

44     <body>

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

46         <br>

47     </body>

48 </html>

本文转载自:

罗盛力
粉丝 36
博文 52
码字总数 19168
作品 0
梅州
程序员
私信 提问
26个Jquery使用小技巧

下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X...

长平狐
2012/09/06
153
0
谈谈 jQuery 中的防冲突(noConflict)机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保...

i33
2013/03/13
69
0
jQuery命名冲突解决的五种方案

引言: 最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jqu...

龙上
2012/03/30
94
0
jQuery.noConflict() 函数详解

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")和$("p")是等价的。由于...

鱼煎
2015/07/20
233
0
重构ECShop中的Javascript(一)

ECShop一直有一个很大的问题,就是其自带的JS脚本和jQuery为主的不少使用非常多的JS框架冲突,这个冲突导致了我们在制作ECShop模板的时候,很多优秀的界面效果无法实现。可以说是ECShop最让人...

icebird
2012/11/27
676
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
11分钟前
3
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
14分钟前
2
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
18分钟前
2
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
29分钟前
2
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
35分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部