Jquery命名沖突解決的五種方案分享
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
因為許多 JavaScript 庫使用 $ 作為函數(shù)或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用 jquery 之外的另一 js 庫，我們可以通過調(diào)用 $.noConflict() 向該庫返回控制權(quán)。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。
例一： . 代碼如下: <!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(); //將變量$的控制權(quán)讓渡給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(); //將變量$的控制權(quán)讓渡給prototype.js jQuery(function($){ //使用jQuery $("p").click(function(){ //繼續(xù)使用 $ 方法 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(); //將變量$的控制權(quán)讓渡給prototype.js (function($){ //定義匿名函數(shù)并設(shè)置形參為$ $(function(){ //匿名函數(shù)內(nèi)部的$均為jQuery $("p").click(function(){ //繼續(xù)使用 $ 方法 alert($(this).text()); }); }); })(jQuery); //執(zhí)行匿名函數(shù)且傳遞實參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> <!--先導(dǎo)入jQuery --> <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> <!--后導(dǎo)入其他庫 --> <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 ,沒有必要調(diào)用"jQuery.noConflict()"函數(shù)。 jQuery("p").click(function(){ alert( jQuery(this).text() ); }); }); $("pp").style.display = 'none'; //使用prototype </script> </body> </html> 上述實例打包下載 該文章在 2012/3/20 23:03:39 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
