在使用jQuery開發的時候，可能還會使用到其他的JS庫，比如Prototype，但多庫共存時可能會發生沖突；若是發生沖突後，可以通過以下幾種方案進行解決：
一、 jQuery庫在其他庫之前導入，直接使用jQuery(callback)方法如：
Html代碼
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <!--先導入jQuery -->
- <script src="../../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>
二、 jQuery庫在其他庫之後導入，使用jQuery.noConflict()方法將變量$的控制權讓渡給其他庫，有以下幾種方式:
Js代碼
- <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>
-
- //代碼二
- <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>
-
- //代碼三
- <script type="text/javascript">
- jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js
- jQuery(function($){ //使用jQuery
- $("p").click(function(){ //繼續使用 $ 方法
- alert( $(this).text() );
- });
- });
-
- $("pp").style.display = 'none'; //使用prototype
- </script>
-
- //代碼四
- <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>
-
-
通過以上幾方法就可以很好的去解決多庫共存會發生沖突的問題了.
