jquery里ajax非常好用,前一些天把项目部署到服务的时候,出现页面出现js错误,不支持length。。等属性,把出现js错误定位下,发现jquery里ajax嵌套其他的js。最后发现prototype.js,coypSelect.js与jquery
发生冲突,最后把jquery里ajax去掉了,换成var myAjaxs=new Ajax.Request();
今天在网上搜下相关文章,根源原来是:
由于jQuery以及 prototype.js,coypSelect.js都使用了美元符函数“$”作为选择器,在两者混合使用的时候$函数被重复定义了,结果导致其中一个框架不能使用。
下面是我在网上搜到解决问题的文章:
流行的解法:
不过很快,有很多人给出了解决方案,如比较流行的方案是这样 的:
- <script src="http://jquery.com/src/latest/"></script>
-
<script type="text/javascript">
-
JQ = $;
- </script>
-
<script src="prototype.js"></script>
<script src="http://jquery.com/src/latest/"></script>
<script type="text/javascript">
JQ = $; //rename $ function
</script>
<script src="prototype.js"></script>
这样一来,你可以使用JQ来代替jQuery里的$函数名,而prototype的$函数照常使用,像这样:
- <script type="text/javascript">
-
JQ(document).ready(function(){
-
JQ("#test_jquery").html("this is jquery");
-
$("test_prototype").innerHTML="this is prototype";
- });
- </script>
<script type="text/javascript">
JQ(document).ready(function(){
JQ("#test_jquery").html("this is jquery");
$("test_prototype").innerHTML="this is prototype";
});
</script>
尽管这种办法在一定程度上解决了两者的冲突,但作为jQuery的死忠,我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么,是不是有另一种解决方案,让两种框架能和谐共处呢?现在流行和谐嘛!
另类解法:
先看一小段代码,猜一下会有什么效果?
- 1. <script type="text/javascript">
-
2. (function(name){
-
3. alert('hello '+ name);
-
4. })("world");
- 5. </script>
1. <script type="text/javascript">
2. (function(name){
3. alert('hello '+ name);
4. })("world");
5. </script>
应该很简单吧?效果是弹出一个窗品说“hello world”。仔细看这一段Script,前后有两个括号组成,第一个括号里面是一个function对象,第二个括号是一个字符串。可以这样理解,第一个括号里面定义了一个函数,第二个括号里面给出的参数,两个加在一起实际上是完成了一次函数调用!
那现在来点真实的:
- <script type="text/javascript" src="jquery-1.2.6.js">
- </script>
-
<script type="text/javascript" src="prototype-1.6.0.2.js">
- </script>
-
<div id="test_jquery"></div>
-
<div id="test_prototype"></div>
-
<script type="text/javascript">
- <!--
-
(function($){
-
$(document).ready(function(){
-
alert($("#test_jquery").html("this is jqeury"));
- });
- })(jQuery);
-
$("test_prototype").innerHTML="this is prototype";
-
- </script>
<script type="text/javascript" src="jquery-1.2.6.js">
</script>
<script type="text/javascript" src="prototype-1.6.0.2.js">
</script>
<div id="test_jquery"></div>
<div id="test_prototype"></div>
<script type="text/javascript">
<!--
(function($){
$(document).ready(function(){
alert($("#test_jquery").html("this is jqeury"));
});
})(jQuery);
$("test_prototype").innerHTML="this is prototype";
//-->
</script>
经测试,jQuery与Prototpye工作均正常。唯一以往常不一样的是,我们要在以前写的Jquery外面加多一个外套:
- (function($){
-
- })(jQuery);
(function($){
//这里写Jquery代码
})(jQuery);
这个外套巧妙地利用函数局部变量的有效范围保证你可以安心地按原来的方式写Jquery代码,这个方案更合适现有Jquery的代码升级至Jquery + prototypt。
不足之处 :
还是不能解决Jquery插件的问题,这个问题是传统方法也无法解决的,只能够手动去修改插件脚本里面对$的调用,而根本的解决办法是以后的插件都用刚才那种另类的方式去写,才能保证其可用性。而Jquery UI现在好像是这样做了,我从Demo的源码 里面看到的。
原文:http://bbmyth.iteye.com/blog/218143
第二种解决方式:
原文:http://www.iteye.com/topic/566090
一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:
- <html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
-
-
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
-
</head>
-
<body>
-
<p id="pp">test---prototype</p>
-
<p >test---jQuery</p>
-
-
<script type="text/javascript">
- jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
- jQuery("p").click(function(){
- alert( jQuery(this).text() );
- });
- });
-
-
$("pp").style.display = 'none'; //使用prototype
-
</script>
-
</body>
-
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
二、 jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:
- <script type="text/javascript">
-
jQuery.noConflict();
-
jQuery(function(){
-
jQuery("p").click(function(){
-
alert( jQuery(this).text() );
- });
- });
-
-
$("pp").style.display = 'none';
- </script>
-
-
-
<script type="text/javascript">
-
var $j = jQuery.noConflict();
-
$j(function(){
-
$j("p").click(function(){
-
alert( $j(this).text() );
- });
- });
-
-
$("pp").style.display = 'none';
- </script>
-
-
-
<script type="text/javascript">
-
jQuery.noConflict();
-
jQuery(function($){
-
$("p").click(function(){
-
alert( $(this).text() );
- });
- });
-
-
$("pp").style.display = 'none';
- </script>
-
-
-
<script type="text/javascript">
-
jQuery.noConflict();
-
(function($){
-
$(function(){
-
$("p").click(function(){
-
alert($(this).text());
- });
- });
-
})(jQuery);
-
-
$("pp").style.display = 'none';
- </script>
-
-
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
//代码二
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
//代码三
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
//代码四
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.
分享到:
相关推荐
jquery.form.js解决opera冲突问题 使用jquery.form.js如果jquery使用的是1.9以上的版本会报opera找不到 以解决 备份下
本人亲测,本人网页有两个JS效果,用到了两个jQuery文件(一个是jquery.min.js,另一个是jquery.pack.js),可以两个冲突,只能保留一个。 但效果就只能有一个。我想两个都保留,于是就想了很多办法,查了很多资料,...
js,javascript,jquery,解决其他js和jquery冲突方法
jquery与js函数冲突的两种解决方法.docx
transport.js调用前必须先调用json2.js 替换原ecshop中的transport.js文件,即可解决与jQuery的冲突问题
ecshop解决jquery冲突js 测试版本 2,73
NULL 博文链接:https://macleo.iteye.com/blog/1332910
ecshop transport.js和jquery冲突的问题,ecshop jquery冲突解决,亲测可用!
NULL 博文链接:https://killzombie.iteye.com/blog/1198374
然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件 jquery.js和prototype.js为例来进行说明。 第一种情况:jquery.js在prototype.js之后...
jQuery库与其他JS库冲突的解决办法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,该怎么解决呢?下面小编给大家带来了jQuery多个版本和其他js库冲突的解决方法,一起看下吧
通常,全局对象都被很好地存储在 jQuery 命名空间里,因此当把 jQuery 和其他 JavaScript 库(例如 Prototype、MooTools 或 YUI)一起使用时,不会引起冲突。 注意:默认情况下,jQuery 用 $ 作为自身的快捷方式。 1...
主要介绍了bootstrap与Jquery UI 按钮样式冲突的解决办法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
transport.js文件(解决ecshop jquery jqzoom冲突)
完美解决ecshop使用jquery冲突问题,用jquery的get,post的方法替代ajax的get,post方法,不需要改动程序,只需要替换js相应文件。
这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$(“div p”)的地方,就必须换成jQuery(“div p”)。 ”’注意:”’这
所以这里用JSON官网在javascript语言上提供的json2.js支持。 具体下载地址:https://github.com/douglascrockford/JSON-js 2、修改transport.js 2.1 注释掉重写object的方法,具体搜索 if ( ! Object.prototype....
大家都知道jquery版本有好多,之间冲突很纠结。 比如我刚来这公司的时候,后端的哥们用的是jQuery 1.3.2,我了个去,那哥们好久没更新了。 我写的效果插件都是最新的jquery1.7.1。 不兼容蛋疼啊,参考前人资料,看书...
在jQuery库中,几乎所有的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里,因此当把jQuery和其它javascript类库一起使用时,不会引起冲突.