jquery与其他js冲突问题 解决
2016-03-09 00:00
856 查看
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代码
6 <script type="text/javascript">
7 JQ(document).ready(function(){
8 JQ("#test_jquery").html("this is jquery");
9 $("test_prototype").innerHTML="this is prototype";
10 });
11 </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代码
12 1. <script type="text/javascript">
13 2. (function(name){
14 3. alert('hello '+ name);
15 4. })("world");
16 5. </script>
1. <script type="text/javascript">
2. (function(name){
3. alert('hello '+ name);
4. })("world");
5. </script>
应该很简单吧？效果是弹出一个窗品说“hello world”。仔细看这一段Script，前后有两个括号组成，第一个括号里面是一个function对象，第二个括号是一个字符串。可以这样理解，第一个括号里面定义了一个函数，第二个括号里面给出的参数，两个加在一起实际上是完成了一次函数调用！
那现在来点真实的：
Js代码
17 <script type="text/javascript" src="jquery-1.2.6.js">
18 </script>
19 <script type="text/javascript" src="prototype-1.6.0.2.js">
20 </script>
21 <div id="test_jquery"></div>
22 <div id="test_prototype"></div>
23 <script type="text/javascript">
24 <!--
25 (function($){
26 $(document).ready(function(){
27 alert($("#test_jquery").html("this is jqeury"));
28 });
29 })(jQuery);
30 $("test_prototype").innerHTML="this is prototype";
31 //-->
32 </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代码
33 (function($){
34 //这里写Jquery代码
35 })(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代码
36 <html>
37 <head>
38 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
39 <!--先导入jQuery -->
40 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
41 <!--后导入其他库 -->
42 <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
43 </head>
44 <body>
45 <p id="pp">test---prototype</p>
46 <p >test---jQuery</p>
47
48 <script type="text/javascript">
49 jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
50 jQuery("p").click(function(){
51 alert( jQuery(this).text() );
52 });
53 });
54
55 $("pp").style.display = 'none'; //使用prototype
56 </script>
57 </body>
58 </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代码
59 <script type="text/javascript">
60 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
61 jQuery(function(){ //使用jQuery
62 jQuery("p").click(function(){
63 alert( jQuery(this).text() );
64 });
65 });
66
67 $("pp").style.display = 'none'; //使用prototype
68 </script>
69
70 //代码二
71 <script type="text/javascript">
72 var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
73 $j(function(){ //使用jQuery
74 $j("p").click(function(){
75 alert( $j(this).text() );
76 });
77 });
78
79 $("pp").style.display = 'none'; //使用prototype
80 </script>
81
82 //代码三
83 <script type="text/javascript">
84 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
85 jQuery(function($){ //使用jQuery
86 $("p").click(function(){ //继续使用 $ 方法
87 alert( $(this).text() );
88 });
89 });
90
91 $("pp").style.display = 'none'; //使用prototype
92 </script>
93
94 //代码四
95 <script type="text/javascript">
96 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
97 (function($){ //定义匿名函数并设置形参为$
98 $(function(){ //匿名函数内部的$均为jQuery
99 $("p").click(function(){ //继续使用 $ 方法
100 alert($(this).text());
101 });
102 });
103 })(jQuery); //执行匿名函数且传递实参jQuery
104
105 $("pp").style.display = 'none'; //使用prototype
106 </script>
107
108
<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里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代码
6 <script type="text/javascript">
7 JQ(document).ready(function(){
8 JQ("#test_jquery").html("this is jquery");
9 $("test_prototype").innerHTML="this is prototype";
10 });
11 </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代码
12 1. <script type="text/javascript">
13 2. (function(name){
14 3. alert('hello '+ name);
15 4. })("world");
16 5. </script>
1. <script type="text/javascript">
2. (function(name){
3. alert('hello '+ name);
4. })("world");
5. </script>
应该很简单吧？效果是弹出一个窗品说“hello world”。仔细看这一段Script，前后有两个括号组成，第一个括号里面是一个function对象，第二个括号是一个字符串。可以这样理解，第一个括号里面定义了一个函数，第二个括号里面给出的参数，两个加在一起实际上是完成了一次函数调用！
那现在来点真实的：
Js代码
17 <script type="text/javascript" src="jquery-1.2.6.js">
18 </script>
19 <script type="text/javascript" src="prototype-1.6.0.2.js">
20 </script>
21 <div id="test_jquery"></div>
22 <div id="test_prototype"></div>
23 <script type="text/javascript">
24 <!--
25 (function($){
26 $(document).ready(function(){
27 alert($("#test_jquery").html("this is jqeury"));
28 });
29 })(jQuery);
30 $("test_prototype").innerHTML="this is prototype";
31 //-->
32 </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代码
33 (function($){
34 //这里写Jquery代码
35 })(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代码
36 <html>
37 <head>
38 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
39 <!--先导入jQuery -->
40 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
41 <!--后导入其他库 -->
42 <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
43 </head>
44 <body>
45 <p id="pp">test---prototype</p>
46 <p >test---jQuery</p>
47
48 <script type="text/javascript">
49 jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
50 jQuery("p").click(function(){
51 alert( jQuery(this).text() );
52 });
53 });
54
55 $("pp").style.display = 'none'; //使用prototype
56 </script>
57 </body>
58 </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代码
59 <script type="text/javascript">
60 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
61 jQuery(function(){ //使用jQuery
62 jQuery("p").click(function(){
63 alert( jQuery(this).text() );
64 });
65 });
66
67 $("pp").style.display = 'none'; //使用prototype
68 </script>
69
70 //代码二
71 <script type="text/javascript">
72 var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
73 $j(function(){ //使用jQuery
74 $j("p").click(function(){
75 alert( $j(this).text() );
76 });
77 });
78
79 $("pp").style.display = 'none'; //使用prototype
80 </script>
81
82 //代码三
83 <script type="text/javascript">
84 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
85 jQuery(function($){ //使用jQuery
86 $("p").click(function(){ //继续使用 $ 方法
87 alert( $(this).text() );
88 });
89 });
90
91 $("pp").style.display = 'none'; //使用prototype
92 </script>
93
94 //代码四
95 <script type="text/javascript">
96 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
97 (function($){ //定义匿名函数并设置形参为$
98 $(function(){ //匿名函数内部的$均为jQuery
99 $("p").click(function(){ //继续使用 $ 方法
100 alert($(this).text());
101 });
102 });
103 })(jQuery); //执行匿名函数且传递实参jQuery
104
105 $("pp").style.display = 'none'; //使用prototype
106 </script>
107
108
<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的dialog用法总结
- Jquery EasyUI插件中关于Dialog屏幕显示居中的解决方案
- 编写更好的jQuery代码的建议
- jquery dom 节点操作
- jquery 函数
- jquery 合成事件
- jquery 样式 css
- jquery 属性操作
- jquery选择器
- Jquery.Datatables dom表格定位
- UploadiFive jquery html5上传插件使用[带项目源码]
- Jquery插件
- JQuery 读取 xml
- jquery的add()方法扩大选择返回
- jQuery性能优化
- jQuery获取复选框checkbox的值的正确方法
- JQuery 表单校验
- Jquery Ajax的success:funtion(data)的data非son类型
- jQuery.Callbacks()
- jquery mobile的popup不弹出问题。