jQuery基础之jQuery与其他javascript库的冲突问题_jquery升级其他js库会受影响吗-CSDN博客

一，jQuery库在其他库之后导入
在其它库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其它JavaScript库。示例如下：
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4. <title>冲突解决1</title>
5. 
6. <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
7. 
8. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
9. </head>
10. <body>
11. <p id="pp">test---prototype</p>
12. <p >test---jQuery</p>
13.
14. <script type="text/javascript">
15. jQuery.noConflict();
16. jQuery(function(){ //使用jQuery
17. jQuery("p").click(function(){
18. alert( jQuery(this).text() );
19. });
20. });
21.
22. $("pp").style.display = 'none'; //使用prototype
23. </script>
24.
25. </body>
26. </html>
然后，就可以在程序里将jQuery ()函数作为jQuery对象的制造工厂。
此外，还有另一种选择。如果想确保jQuery不会与其它库冲突，但又想自定义一个比较短快捷方式，可以按照如下操作：
1. //...省略其他代码...
2. var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
3. $j(function(){ //使用jQuery
4. $j("p").click(function(){
5. alert( $j(this).text() );
6. });
7. });
8.
9. $("pp").style.display = 'none'; //使用prototype
10. //...省略其他代码...
可以自定义备用名称，例如jq、$J、awesomequery--任何你想要的名称都行。
如果不想给jQuery自定义这些备用名称，还是想使用$而不管其它库的$方法，同时又不想与其它库相冲突，那么可以使用如下两种解决方法：
其一：1. //...省略其他代码...
2. jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
3. jQuery(function($){ //使用jQuery
4. $("p").click(function(){ //继续使用 $ 方法
5. alert( $(this).text() );
6. });
7. });
8.
9. $("pp").style.display = 'none'; //使用prototype
10. //...省略其他代码...
其二：1. //...省略其他代码...
2. jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
3. (function($){ //定义匿名函数并设置形参为$
4. $(function(){ //匿名函数内部的$均为jQuery
5. $("p").click(function(){ //继续使用 $ 方法
6. alert($(this).text());
7. });
8. });
9. })(jQuery); //执行匿名函数且传递实参jQuery
10.
11. $("pp").style.display = 'none'; //使用prototype
12. //...省略其他代码...
二， jQuery库在其它库之前导入
如果jQuery库在其它库之前就导入了，那么可以直接使用"jQuery"来做一些jQuery的工作。同时，可以使用"$"方法作为其它库的快捷方式。这里没有必要调用jQuery.noConflict()函数。
示例如下：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. <title>冲突解决5</title>
7. 
8. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
9. 
10. <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
11. </head>
12. <body>
13. <p id="pp">test---prototype</p>
14. <p >test---jQuery</p>
15.
16. <script type="text/javascript">
17. jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
18. jQuery("p").click(function(){
19. alert( jQuery(this).text() );
20. });
21. });
22.
23. $("pp").style.display = 'none'; //使用prototype
24. </script>
25. </body>
26. </html>