关于jquery命名的冲突问题
2013-10-12 16:28
411 查看
今天在写一个页面的时候,刚开始没什么问题,后来引入了一个外部的js,结果我的chrome就跟我急了
竟然就这样给了我一个大大的error
我气氛,什么意思啊,不就一个命名空间吗?
于是就用了一个最简单的解决办法
最简单的解决办法就是
把高端大气上档次的$美元符号换成低端粗俗甩节操的cjk(简称苍井空)
操作一步解决
这样就成功和苍小姐结缘了,真是简单大气又时尚还带点国际化!
你瞧人家jquery多大气,就这么把美元给你了,带着苍老走起了,
总结:关于juqery的命名空间和很多js的框架或者一些其他产品已经写好的会发生冲突,对于那样的解决办法就是最好重新命名,discuz也是会遇到这个问题!
引言:
最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。
例一:
例二:
例三:
例四:
例五:
竟然就这样给了我一个大大的error
我气氛,什么意思啊,不就一个命名空间吗?
于是就用了一个最简单的解决办法
最简单的解决办法就是
把高端大气上档次的$美元符号换成低端粗俗甩节操的cjk(简称苍井空)
操作一步解决
var cjk =jQuery.noConflict();
这样就成功和苍小姐结缘了,真是简单大气又时尚还带点国际化!
你瞧人家jquery多大气,就这么把美元给你了,带着苍老走起了,
总结:关于juqery的命名空间和很多js的框架或者一些其他产品已经写好的会发生冲突,对于那样的解决办法就是最好重新命名,discuz也是会遇到这个问题!
jQuery命名冲突解决的五种方案
引言:最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。
例一:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冲突解决1</title> <!-- 引入 prototype --> <script src="prototype-1.6.0.3.js" type="text/javascript"></script> <!-- 引入 jQuery --> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <p id="pp">test---prototype</p> <p >test---jQuery</p> <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> </body> </html>
例二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冲突解决2</title> <!-- 引入 prototype --> <script src="prototype-1.6.0.3.js" type="text/javascript"></script> <!-- 引入 jQuery --> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <p id="pp">test---prototype</p> <p >test---jQuery</p> <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> </body> </html>
例三:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冲突解决3</title> <!-- 引入 prototype --> <script src="prototype-1.6.0.3.js" type="text/javascript"></script> <!-- 引入 jQuery --> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <p id="pp">test---prototype</p> <p >test---jQuery</p> <script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function($){ //使用jQuery $("p").click(function(){ //继续使用 $ 方法 alert( $(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype </script> </body> </html>
例四:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冲突解决4</title> <!-- 引入 prototype --> <script src="prototype-1.6.0.3.js" type="text/javascript"></script> <!-- 引入 jQuery --> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <p id="pp">test---prototype</p> <p >test---jQuery</p> <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> </body> </html>
例五:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冲突解决5</title> <!--先导入jQuery --> <script src="http://www.cnblogs.com/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.js文件引起$符号命名冲突的问题
- jQuery命名库冲突的问题
- 关于prototype和使用多个JQuery插件的冲突问题
- 解决jquery中美元符号命名冲突问题
- jquery中美元符号命名冲突问题解决
- 关于Jquery的noConflict()方法,解决Jquery库与其他库冲突问题
- 关于JQuery中,click与document click冲突问题
- jQuery解决引用多个JavaScript库引起的$命名冲突的问题
- 关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)
- jquery中命名冲突问题
- $ is not function 和JQUERY 命名 冲突的解说 Jquer问题 (
- 关于jquery版本冲突问题
- 关于使用struts2与jsp时,使用prototype.js的$属性与jquery的$冲突问题
- 解决多个版本jQuery混用而导致的命名冲突的问题
- 关于多JQUERY冲突的问题
- 关于Discuz与jQuery冲突问题的亲测解决方法
- 解决jquery中美元符号命名冲突问题
- 关于jquery插件冲突的问题。
- myeclipse中tomcat 7.0 关于64位与32位的冲突问题 ( tcnative-1.dll )
- ecshop与jquery的冲突问题解决方案