当前位置： 代码迷 >> JavaScript >> jquery与其他js冲突有关问题 解决
  详细解决方案

jquery与其他js冲突有关问题 解决

热度：223   发布时间：2012-12-24 10:43:14.0
jquery与其他js冲突问题 解决

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都使用了美元符函数“$”作为选择器，在两者混合使用的时候$函数被重复定义了，结果导致其中一个框架不能使用。

?

?下面是我在网上搜到解决问题的文章：

流行的解法：

不过很快，有很多人给出了解决方案，如比较流行的方案是这样 的：


Js代码 复制代码
  1. <script?src="http://jquery.com/src/latest/"></script>?? ??
  2. ??<script?type="text/javascript">?? ??
  3. ?????JQ?=?$;??//rename?$?function?? ??
  4. ?</script>?? ??
  5. <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的$函数照常使用，像这样：

?
Js代码 复制代码
  1. <script?type="text/javascript">?? ??
  2. ??JQ(document).ready(function(){?? ??
  3. ???JQ("#test_jquery").html("this?is?jquery");?? ??
  4. ???$("test_prototype").innerHTML="this?is?prototype";?? ??
  5. ??});?? ??
  6. ?</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的粉丝估计也会这样想。那么，是不是有另一种解决方案，让两种框架能和谐共处呢？现在流行和谐嘛！

另类解法：

先看一小段代码，猜一下会有什么效果？

?

Js代码 复制代码
  1. 1.?<script?type="text/javascript"> ??
  2. 2.?(function(name){?? ??
  3. 3.?????alert('hello?'+?name);?? ??
  4. 4.?})("world");?? ??
  5. 5.?</script>????
   1. <script type="text/javascript">
   2. (function(name){  
   3.     alert('hello '+ name);  
   4. })("world");  
   5. </script>

?

?

应该很简单吧？效果是弹出一个窗品说“hello world”。仔细看这一段Script，前后有两个括号组成，第一个括号里面是一个function对象，第二个括号是一个字符串。可以这样理解，第一个括号里面定义了一个函数，第二个括号里面给出的参数，两个加在一起实际上是完成了一次函数调用！

那现在来点真实的：

?

Js代码 复制代码
  1. ?<script?type="text/javascript"?src="jquery-1.2.6.js">?? ??
  2. </script>?? ??
  3. <script?type="text/javascript"?src="prototype-1.6.0.2.js">?? ??
  4. </script>?? ??
  5. <div?id="test_jquery"></div> ??
  6. ???<div?id="test_prototype"></div> ??
  7. <script?type="text/javascript">?? ??
  8. <!--?? ??
  9. (function($){?? ??
  10. ????$(document).ready(function(){?? ??
  11. ????????alert($("#test_jquery").html("this?is?jqeury"));?? ??
  12. ????});?? ??
  13. })(jQuery);? ??
  14. $("test_prototype").innerHTML="this?is?prototype";? ??
  15. //-->?? ??
  16. </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外面加多一个外套：

?

Js代码 复制代码
  1. (function($){???? ??
  2. ??//这里写Jquery代码 ??
  3. })(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代码 复制代码
  1. <html>??
  2. <head>??
  3. <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>??
  4. <!--先导入jQuery?-->??
  5. <script?src="../../scripts/jquery-1.3.1.js"?type="text/javascript"></script>??
  6. <!--后导入其他库?-->??
  7. <script?src="prototype-1.6.0.3.js"?type="text/javascript"></script>??
  8. </head>??
  9. <body>??
  10. <p?id="pp">test---prototype</p>??
  11. <p?>test---jQuery</p>??
  12. ??
  13. <script?type="text/javascript">??
  14. jQuery(function(){???//直接使用?jQuery?,没有必要调用"jQuery.noConflict()"函数。 ??
  15. ????jQuery("p").click(function(){?????? ??
  16. ????????alert(?jQuery(this).text()?); ??
  17. ????}); ??
  18. }); ??
  19. ??
  20. $("pp").style.display?=?'none';?//使用prototype ??
  21. </script>??
  22. </body>??
  23. </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()方法将变量$的控制权让渡给其他库，有以下几种方式:

Js代码 复制代码
  1. <script?type="text/javascript"> ??
  2. jQuery.noConflict();????????????????//将变量$的控制权让渡给prototype.js ??
  3. jQuery(function(){??????????????????//使用jQuery ??
  4. ????jQuery("p").click(function(){ ??
  5. ????????alert(?jQuery(this).text()?); ??
  6. ????}); ??
  7. }); ??
  8. ??
  9. $("pp").style.display?=?'none';?????//使用prototype ??
  10. </script> ??
  11. ??
  12. //代码二 ??
  13. <script?type="text/javascript"> ??
  14. var?$j?=?jQuery.noConflict();???????//自定义一个比较短快捷方式 ??
  15. $j(function(){??????????????????????//使用jQuery ??
  16. ????$j("p").click(function(){ ??
  17. ????????alert(?$j(this).text()?); ??
  18. ????}); ??
  19. }); ??
  20. ??
  21. $("pp").style.display?=?'none';?????//使用prototype ??
  22. </script> ??
  23. ??
  24. //代码三 ??
  25. <script?type="text/javascript"> ??
  26. jQuery.noConflict();????????????????//将变量$的控制权让渡给prototype.js ??
  27. jQuery(function($){?????????????????//使用jQuery ??
  28. ????$("p").click(function(){????????//继续使用?$?方法 ??
  29. ????????alert(?$(this).text()?); ??
  30. ????}); ??
  31. }); ??
  32. ??
  33. $("pp").style.display?=?'none';?????//使用prototype ??
  34. </script> ??
  35. ??
  36. //代码四 ??
  37. <script?type="text/javascript"> ??
  38. jQuery.noConflict();????????????????//将变量$的控制权让渡给prototype.js ??
  39. (function($){???????????????????//定义匿名函数并设置形参为$ ??
  40. ????$(function(){???????????????//匿名函数内部的$均为jQuery ??
  41. ????????$("p").click(function(){????//继续使用?$?方法 ??
  42. ????????????alert($(this).text()); ??
  43. ????????}); ??
  44. ????}); ??
  45. })(jQuery);?????????????????//执行匿名函数且传递实参jQuery ??
  46. ??
  47. $("pp").style.display?=?'none';?????//使用prototype ??
  48. </script> ??
  49. ??
  50. ???
<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>

?

?? ?通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.