Jquery命名冲突解决的五种方案
因为许多 JavaScript 库使用 $ 作为函数或变量名，jquery也一样。其实$只是jquery的一个别名而已，假如我们需要使用 jquery 之外的另一 js 库，我们可以通过调用 $.noConflict() 向该库返回控制权。
例1：
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>
例2：
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>
例3:
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>
例4：
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>
例5：
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>
