jQuery $命名冲突解决方案汇总
最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery之外的另一js库,我们可以通过调用$.noConflict()向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。
例一:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>冲突解决1</title> <!--引入prototype --> <scriptsrc="prototype-1.6.0.3.js"type="text/javascript"></script> <!--引入jQuery --> <scriptsrc="/scripts/jquery-1.3.1.js"type="text/javascript"></script> </head> <body> <pid="pp">test---prototype</p> <p>test---jQuery</p> <scripttype="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>
例二:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>冲突解决2</title> <!--引入prototype --> <scriptsrc="prototype-1.6.0.3.js"type="text/javascript"></script> <!--引入jQuery --> <scriptsrc="/scripts/jquery-1.3.1.js"type="text/javascript"></script> </head> <body> <pid="pp">test---prototype</p> <p>test---jQuery</p> <scripttype="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>
例三:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>冲突解决3</title> <!--引入prototype --> <scriptsrc="prototype-1.6.0.3.js"type="text/javascript"></script> <!--引入jQuery --> <scriptsrc="/scripts/jquery-1.3.1.js"type="text/javascript"></script> </head> <body> <pid="pp">test---prototype</p> <p>test---jQuery</p> <scripttype="text/javascript"> jQuery.noConflict(); //将变量$的控制权让渡给prototype.js jQuery(function($){ //使用jQuery $("p").click(function(){ //继续使用$方法 alert($(this).text()); }); }); $("pp").style.display='none'; //使用prototype </script> </body> </html>
例四:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>冲突解决4</title> <!--引入prototype --> <scriptsrc="prototype-1.6.0.3.js"type="text/javascript"></script> <!--引入jQuery --> <scriptsrc="/scripts/jquery-1.3.1.js"type="text/javascript"></script> </head> <body> <pid="pp">test---prototype</p> <p>test---jQuery</p> <scripttype="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>
例五:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>冲突解决5</title> <!--先导入jQuery--> <scriptsrc="/scripts/jquery-1.3.1.js"type="text/javascript"></script> <!--后导入其他库--> <scriptsrc="prototype-1.6.0.3.js"type="text/javascript"></script> </head> <body> <pid="pp">test---prototype</p> <p>test---jQuery</p> <scripttype="text/javascript"> jQuery(function(){ //直接使用jQuery,没有必要调用"jQuery.noConflict()"函数。 jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $("pp").style.display='none';//使用prototype </script> </body> </html>
看,原来解决问题的方法可不止一个两个呢,有需要的小伙伴们自己来取吧