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），可以两个冲突，只能保留一个。 但效果就只能有一个。我想两个都保留，于是就想了很多办法，查了很多资料，...
在使用 jQuery 开发时，可能还会遇到其他问题，例如如何正确地使用 jQuery 库，如何避免与其他库的冲突等。解决这些问题需要对 jQuery 库有深入的了解，並掌握一定的编程技巧。 在实际开发中，可能还需要使用到其他...
`json.js`可能是一个用于处理JSON数据的JavaScript库，而与jQuery冲突的问题通常出现在两个库都尝试使用相同的全局变量或者方法名。 在JavaScript中，JSON主要用于序列化和解析数据对象，使得数据可以在客户端和...
在JavaScript的开发环境中，尤其是当使用多个库或框架时，比如jQuery和其他JavaScript库（如Prototype、MooTools等），可能会遇到函数名或选择器符号`$`的冲突问题。这是因为这些库都倾向于使用`$`作为主要的函数或...
2. **使用jQuery的.noConflict()**：jQuery提供了`.noConflict()`方法，可以释放`$`符号，避免与其他库冲突。但这并不能解决`JSON`对象的冲突，因为jQuery本身并不定义`JSON`。因此，需要手动管理`JSON`对象。 3. *...
标题中的"ecshop解决jquery冲突js"就直指这个问题，即如何在ECShop环境中解决JQuery与其他JS库的冲突。 JQuery冲突通常源于$符号的全局使用，这是JQuery的核心选择器和函数调用。为了解决这个问题，JQuery提供了`...
新的`transport.js`应该已经解决了与jQuery的冲突问题，采用了更友好的命名空间或者避免了与jQuery相同的方法名。替换后，ECSHOP将能更好地与jQuery库协同工作，避免冲突，同时保持原有的AJAX功能。 在实际操作中，...
### 解决jQuery与DWR冲突的方法 在Web开发过程中，经常需要使用...通过上述步骤，可以有效地解决jQuery与DWR之间的冲突问题，确保两个库能够和谐共存并正常工作。这对于维护项目的稳定性和提高用户体验是非常重要的。
- 如果上述方法仍不能解决问题，则可以考虑对所有JavaScript函数进行封装处理，建立一个统一的调用接口来替代直接使用`$`或`jQuery`的方式。比如定义一个全局对象`Util`，然后将所有相关的函数挂载到该对象上，例如...
jQuery通常会通过`jQuery.noConflict()`方法来释放`$`符号，以避免与其他库的冲突。 压缩包中的`jquery.js`是jQuery的核心库文件，包含了jQuery的所有核心功能。这个文件应当被正确地引入到ECSHOP的页面头部，以便...
3. **使用IIFE（Immediately Invoked Function Expression）**：另一种解决冲突的方式是将jQuery代码包裹在一个立即执行的匿名函数中，这样可以创建一个独立的作用域，避免与全局作用域中的`$`冲突： ```...
在开发Web应用时，我们经常会遇到JavaScript库...通过以上步骤，你应该能够成功解决ECSHOP中的`transport.js`与jQuery的冲突问题。在实际操作中，可能还需要根据具体情况进行微调，但以上方法通常足以应对大部分情况。
为了解决不同版本的jQuery之间的冲突问题，jQuery提供了一个名为`noConflict()`的方法。该方法可以将全局变量`$`释放出来，以便其他库或者另一个版本的jQuery可以使用它。当调用`jQuery.noConflict()`时，它会返回对...
当我们需要在同一个网页项目中使用jQuery和其他JavaScript库时，经常会出现JavaScript库之间的冲突问题。...以上就是如何解决jQuery与其他JavaScript库冲突的方法，在实际开发中可以根据具体情况选择合适的解决方案。
2. 同一页面上jQuery与其他js库冲突的解决： 当其他库（如Prototype）也使用`$`时，你可以使用`noConflict()`方法释放`$`，让其他库接管它。例如： ```html <script src="jquery.js"> <script src="prototype....
标题"解决ecshop中使用jquery冲突问题"指的是如何在 ECShop 环境下，消除 jQuery 与 Prototype 之间的冲突，以便能够安全地使用 jQuery 的功能，特别是利用 jQuery 的 `$.get()` 和 `$.post()` 方法来替换原本使用 ...
总结而言，在处理jQuery与其它JavaScript库冲突的问题时，首先应该考虑使用jQuery.noConflict()来释放$变量的控制权，并通过自定义快捷方式来保持代码的简洁性。同时，利用IIFE是一种在维护旧代码时减少冲突和工作量...
在处理冲突时，开发者需要对JavaScript的事件处理、DOM操作以及库的API有深入的理解，才能有效地解决问题。此外，良好的代码组织和模块化也是避免冲突的重要策略。 博客文章中可能还涉及到了具体的代码示例和实践...
综上所述，当在项目中遇到因为 jQuery 与其它库共享 `$` 符号而导致的命名冲突时，可以通过使用 `jQuery.noConflict()` 方法来有效解决这一问题。通过这种方法，不仅能够确保项目的正常运行，还能够保持代码的清晰和...