jQuery和Prototype的兼容性和冲突的多种解决方法

有两种情况:

1.先加载Prototype,再加载jQuery。

2.先加载jQuery,再加载Prototype。

针对情况1:先加载Prototype,再加载jQuery。
方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的。
使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中。

<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
//各个js库之间的主要冲突在于$的冲突,这个方法是用来处理这个问题的
jQuery.noConflict();  

//原本使用jQuery代码部分的$ 用jQuery替代
jQuery(document).ready(function (){
jQuery("div").hide();
});  

// Use Prototype with $(...), etc.
$(‘proto‘).hide();
</script>
</head>
<body></body>
</html>

方法二:如果你仍然想使用类似于$这样比较简短的字符,你可以将jQuery.noConflict()的返回值赋值给某个变量。这个变量就是jQuery的新缩写了,当然你可以使用$以外的任意字符串,比如:

<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
//$j就相当于jQuery,名称你可以自主定义
var  $j = jQuery.noConflict();  

// Use jQuery via $j(...)
$j(document).ready(function (){
$j("div").hide();
});  

// Use Prototype with $(...), etc.
$(‘proto‘).hide();
</script>
</head>
<body></body>
</html>

方法三:如果你还是想使用$,而不想使用别的字符,也是可以的。而且通常程序员都比较喜欢这样做,因为这样做写好的代码几乎都不用替换原来的$符号。那就是利用名字空间的概念就所有的jQuery代码封装在document的ready事件名字空间范围内,如:jQuery(document).ready(这里填入jQuery代码)

<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
jQuery.noConflict();  

// Put all your code in your document ready area
jQuery(document).ready(function ($){
// 这样你可以在这个范围内随意使用$而不用担心冲突
$("div" ).hide();
});  

// Use Prototype with $(...), etc.
$(‘proto‘ ).hide();
</script>
</head>
<body></body>
</html>

针对第二种情况:先加载jQuery,再加载Prototype。
方法四:按照这样的顺序加载,就不存在其它js库的$符号被jQuery占用的问题。所以对其它的js库的代码可以不作任何修改,照常使用$,而对 jQuery可以使用jQuery来替代$。如:

<html>
<head>
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script type="text/javascript" >
// 使用 jQuery 用 jQuery(...)
jQuery(document).ready(function (){
jQuery("div" ).hide();
});  

// 使用 Prototype 时,用 $(...),
$(‘someid‘ ).hide();
</script>
</head>
<body></body>
</html>

或者你不想写jQuery这么长的字符,你可以通过另外一种方法:
方法五:

var  $j = jQuery;
时间: 2024-10-12 12:44:03

jQuery和Prototype的兼容性和冲突的多种解决方法的相关文章

jQuery和Prototype的兼容性和冲突的五种解决方法

第一种情况:先加载Prototype,再加载jQuery方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的. 使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中. [html] view plain copy print? <html> <head> &l

JQuery的$和其它JS发生冲突的快速解决方法

众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件.它们也使用$.所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题.现在我们来看看如何解决这个冲突问题.请看下文: 我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去.然后我们可以通过jQuery代替$来获

页面多个Jquery版本共存的冲突问题,解决方法!

示例如下: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var j = jQuery.noConflict(true); </script> <script type="text/javascript" src="jquery-1.

jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)

最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property 'msie' of undefined.上jQuery网站上搜了一下,原因是$.browser这个api从jQuery1.9开始就正式废除,js代码里只要用到$.browser就会报这个错.具体说明参见jQuery官方说明. 楼主顺便扩展阅读了一下,发现jQuery· 1.9之后的版本把所有在早期版本里标记为deprecated的api都正式删除了,不再向后兼容.对于升级到最新jQuery的童鞋而

jQuery中ajax的使用与缓存问题的解决方法

jQuery中ajax的使用与缓存问题的解决方法 1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个

[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 --转

初用Yii的srbac模块.出现 Cannot read property ‘msie’ of undefined 错误.上网查询,找到如下的文章.使用文末的打补丁的方法,成功搞定.感谢. =============================== http://blchen.com/jquery-can-not-read-property-msie-of-the-undefined-error-solution/ 最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot re

浏览器兼容性问题及常见的解决方法

一.什么是浏览器兼容性问题 浏览器兼容性问题又称网页兼容性和网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致二产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示.而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验. 二.浏览器兼容性问题产生原因 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同:以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果.最常见的问题就是网页元素位置混乱

SVN版本号管理工具使用中常见的代码提交冲突问题的解决方法

相信刚開始学习使用SVN的小伙伴在项目合作开发的过程中一定常常遇到一些影响到自己编写的代码的苦恼.我这里列举了几种常见的问题以及问题的解决方法: 1.误删除和误操作的问题 问题1:有A和B两个人一块合作写项目的时候,B在写代码的时候不小心更改了A写的代码文件的内容提交到了仓库,A该怎样找回自己原来的代码呢? 解决方法: 右键点击被改动的文件---->点击TortoiseSVN选项----->点击Show log选项,会出现如图所看到的的窗体, watermark/2/text/aHR0cDov

[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法

使用ztree时候没有用默认的1.4版本jquery,报错Cannot read property ‘msie’ of undefined $.browser这个api从jQuery1.9开始就正式废除,js代码用到$.browser就会报这个错.详细说明参见官方说明 解决方法加入下面代码,jQuery文件加载之后,使用$.browser的代码之前. jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.v