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>

 

示例下載http://up.aiwalls.com/2012/0316/20120316083749560.rar

摘自  ForEvErNoMe

 

 

發佈留言