首頁 > 開發者 > JavaScript
一，jQuery庫在其他庫之後匯入
在其它庫和jQuery庫都被載入完畢後，可以在任何時候調用jQuery.noConflict()函數來將變數$的控制權移交給其它JavaScript庫。樣本如下：
1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4. <title>衝突解決1</title>
5. <!-- 引入 prototype -->
6. <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
7. <!-- 引入 jQuery -->
8. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
9. </head>
10. <body>
11. <p id="pp">test---prototype</p>
12. <p >test---jQuery</p>
13.
14. <script type="text/javascript">
15. jQuery.noConflict();
16. jQuery(function(){ //使用jQuery
17. jQuery("p").click(function(){
18. alert( jQuery(this).text() );
19. });
20. });
21.
22. $("pp").style.display = 'none'; //使用prototype
23. </script>
24.
25. </body>
26. </html>
然後，就可以在程式裡將jQuery ()函數作為jQuery對象的製造工廠。
此外，還有另一種選擇。如果想確保jQuery不會與其它庫衝突，但又想自訂一個比較短捷徑，可以按照如下操作：
1. //...省略其他代碼...
2. var $j = jQuery.noConflict(); //自訂一個比較短捷徑
3. $j(function(){ //使用jQuery
4. $j("p").click(function(){
5. alert( $j(this).text() );
6. });
7. });
8.
9. $("pp").style.display = 'none'; //使用prototype
10. //...省略其他代碼...
可以自訂備用名稱，例如jq、$J、awesomequery--任何你想要的名稱都行。
如果不想給jQuery自訂這些備用名稱，還是想使用$而不管其它庫的$方法，同時又不想與其它庫相衝突，那麼可以使用如下兩種解決方案：
其一：1. //...省略其他代碼...
2. jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
3. jQuery(function($){ //使用jQuery
4. $("p").click(function(){ //繼續使用 $ 方法
5. alert( $(this).text() );
6. });
7. });
8.
9. $("pp").style.display = 'none'; //使用prototype
10. //...省略其他代碼...
其二：1. //...省略其他代碼...
2. jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
3. (function($){ //定義匿名函數並設定形參為$
4. $(function(){ //匿名函數內部的$均為jQuery
5. $("p").click(function(){ //繼續使用 $ 方法
6. alert($(this).text());
7. });
8. });
9. })(jQuery); //執行匿名函數且傳遞實參jQuery
10.
11. $("pp").style.display = 'none'; //使用prototype
12. //...省略其他代碼...
二， jQuery庫在其它庫之前置入
如果jQuery庫在其它庫之前就匯入了，那麼可以直接使用"jQuery"來做一些jQuery的工作。同時，可以使用"$"方法作為其它庫的捷徑。這裡沒有必要調用jQuery.noConflict()函數。
樣本如下：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. <title>衝突解決5</title>
7. <!--先匯入jQuery -->
8. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
9. <!--後匯入其他庫 -->
10. <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
11. </head>
12. <body>
13. <p id="pp">test---prototype</p>
14. <p >test---jQuery</p>
15.
16. <script type="text/javascript">
17. jQuery(function(){ //直接使用 jQuery ,沒有必要調用"jQuery.noConflict()"函數。
18. jQuery("p").click(function(){
19. alert( jQuery(this).text() );
20. });
21. });
22.
23. $("pp").style.display = 'none'; //使用prototype
24. </script>
25. </body>
26. </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
