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>  <script src="prototype-1.6.0.3.js" type="text/javascript"></script>  <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>  <script src="prototype-1.6.0.3.js" type="text/javascript"></script>  <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>  <script src="prototype-1.6.0.3.js" type="text/javascript"></script>  <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>  <script src="prototype-1.6.0.3.js" type="text/javascript"></script>  <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>  <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> 上述实例打包下载

　　推荐阅读

　　CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法

原来出错的代码如下：复制代码代码如下: <p style="margin-top:0;"> <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine" Height="450" Width="98%"></asp:TextBox> </p> 出错的原因应该是IE7、>>>详细阅读

本文标题：Jquery命名冲突解决的五种方案分享

地址：http://www.17bianji.com/kaifa2/JS/23523.html

1/2 1