jQuery命名冲突解决的五种方案

开发 前端
最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。

引言:

  最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。

例一:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>冲突解决1</title> 
  6. <!-- 引入 prototype  --> 
  7. <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  8. <!-- 引入 jQuery  --> 
  9. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  10. </head> 
  11. <body> 
  12. <p id="pp">test---prototype</p> 
  13. <p >test---jQuery</p> 
  14.  
  15. <script type="text/javascript"> 
  16. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  
  17. jQuery(function(){                    //使用jQuery  
  18.     jQuery("p").click(function(){  
  19.         alert( jQuery(this).text() );  
  20.     });  
  21. });  
  22.  
  23. $("pp").style.display = 'none';        //使用prototype  
  24. </script> 
  25.  
  26. </body> 
  27. </html> 

例二:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>冲突解决2</title> 
  6. <!-- 引入 prototype  --> 
  7. <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  8. <!-- 引入 jQuery  --> 
  9. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  10. </head> 
  11. <body> 
  12. <p id="pp">test---prototype</p> 
  13. <p >test---jQuery</p> 
  14.  
  15. <script type="text/javascript"> 
  16. var $j = jQuery.noConflict();        //自定义一个比较短快捷方式  
  17. $j(function(){                        //使用jQuery  
  18.     $j("p").click(function(){  
  19.         alert( $j(this).text() );  
  20.     });  
  21. });  
  22.  
  23. $("pp").style.display = 'none';        //使用prototype  
  24. </script> 
  25. </body> 
  26. </html> 

例三:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>冲突解决3</title> 
  6. <!-- 引入 prototype  --> 
  7. <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  8. <!-- 引入 jQuery  --> 
  9. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  10. </head> 
  11. <body> 
  12. <p id="pp">test---prototype</p> 
  13. <p >test---jQuery</p> 
  14.  
  15. <script type="text/javascript"> 
  16. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  
  17. jQuery(function($){                    //使用jQuery  
  18.     $("p").click(function(){        //继续使用 $ 方法  
  19.         alert( $(this).text() );  
  20.     });  
  21. });  
  22.  
  23. $("pp").style.display = 'none';        //使用prototype  
  24. </script> 
  25.  
  26. </body> 
  27. </html> 

例四:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>冲突解决4</title> 
  6. <!-- 引入 prototype  --> 
  7. <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  8. <!-- 引入 jQuery  --> 
  9. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  10. </head> 
  11. <body> 
  12. <p id="pp">test---prototype</p> 
  13. <p >test---jQuery</p> 
  14.  
  15. <script type="text/javascript"> 
  16. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  
  17. (function($){                        //定义匿名函数并设置形参为$  
  18.     $(function(){                    //匿名函数内部的$均为jQuery  
  19.         $("p").click(function(){    //继续使用 $ 方法  
  20.             alert($(this).text());  
  21.         });  
  22.     });  
  23. })(jQuery);                            //执行匿名函数且传递实参jQuery  
  24.  
  25. $("pp").style.display = 'none';        //使用prototype  
  26. </script> 
  27.  
  28. </body> 
  29. </html> 

例五:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>冲突解决5</title> 
  6. <!--先导入jQuery --> 
  7. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  8. <!--后导入其他库 --> 
  9. <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
  10. </head> 
  11. <body> 
  12. <p id="pp">test---prototype</p> 
  13. <p >test---jQuery</p> 
  14.  
  15. <script type="text/javascript"> 
  16. jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。  
  17.     jQuery("p").click(function(){        
  18.         alert( jQuery(this).text() );  
  19.     });  
  20. });  
  21.  
  22. $("pp").style.display = 'none'; //使用prototype  
  23. </script> 
  24. </body> 
  25. </html> 

下载地址:http://down.51cto.com/data/359023

原文链接:http://www.cnblogs.com/ForEvErNoME/archive/2012/03/15/2398659.html

【编辑推荐】

  1. 12个必要的jQuery表单插件
  2. 一些非常棒的jQuery拖放插件
  3. 10条建议让你创建更好的jQuery插件
  4. jQuery LigerUI使用教程入门篇
  5. 利用jQuery marquee实现响应设计
责任编辑:林师授 来源: ForEvErNoMe的博客
相关推荐

2023-08-24 10:43:23

Bean@Primarytype

2018-05-04 07:36:35

医疗行业物联网IoT

2023-04-14 14:54:29

2023-05-26 07:19:49

Spring声明式事务

2010-07-29 15:56:04

FlexSocket

2013-04-25 14:26:54

GridView

2024-09-12 15:43:46

C#代码后端

2023-04-18 16:31:00

2014-12-17 09:27:41

开源PaaS

2010-03-09 15:23:30

Linux批量重命名

2010-06-07 17:41:42

Sendmail 配置

2010-09-08 15:49:21

SmartyCSS

2022-12-13 10:05:27

定时任务任务调度操作系统

2023-04-03 10:00:00

Redis分布式

2018-07-09 08:38:13

集群Redis方案

2013-03-14 09:54:54

jQueryJS

2010-01-06 17:13:05

Jquery工具函数

2010-01-12 12:15:25

SOA安全解决方案

2023-11-13 18:22:14

Docker开发

2021-11-29 09:15:57

Github网络Python
点赞
收藏

51CTO技术栈公众号