偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

jQuery命名沖突解決的五種方案

作者：ForEvErNoMe
開發(fā) 前端
最近遇到個問題，同時引用了jquery庫和另外一個js庫。當(dāng)用$XX去調(diào)用js庫函數(shù)時，發(fā)現(xiàn)失效了！于是找資料，原來是jquery命名沖突了。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。

引言：

　　最近遇到個問題，同時引用了jquery庫和另外一個js庫。當(dāng)用$XX去調(diào)用js庫函數(shù)時，發(fā)現(xiàn)失效了！于是找資料，原來是jquery命名沖突了。因為許多JavaScript 庫使用$作為函數(shù)或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用jquery 之外的另一js庫，我們可以通過調(diào)用 $.noConflict() 向該庫返回控制權(quán)。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。

例一：

  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();                //將變量$的控制權(quán)讓渡給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> 

例二：

  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> 

例三：

  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();                //將變量$的控制權(quán)讓渡給prototype.js  
  17. jQuery(function($){                    //使用jQuery  
  18.     $("p").click(function(){        //繼續(xù)使用 $ 方法  
  19.         alert( $(this).text() );  
  20.     });  
  21. });  
  22.  
  23. $("pp").style.display = 'none';        //使用prototype  
  24. </script> 
  25.  
  26. </body> 
  27. </html> 

例四：

  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();                //將變量$的控制權(quán)讓渡給prototype.js  
  17. (function($){                        //定義匿名函數(shù)并設(shè)置形參為$  
  18.     $(function(){                    //匿名函數(shù)內(nèi)部的$均為jQuery  
  19.         $("p").click(function(){    //繼續(xù)使用 $ 方法  
  20.             alert($(this).text());  
  21.         });  
  22.     });  
  23. })(jQuery);                            //執(zhí)行匿名函數(shù)且傳遞實參jQuery  
  24.  
  25. $("pp").style.display = 'none';        //使用prototype  
  26. </script> 
  27.  
  28. </body> 
  29. </html> 

例五：

  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. <!--先導(dǎo)入jQuery --> 
  7. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  8. <!--后導(dǎo)入其他庫 --> 
  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 ,沒有必要調(diào)用"jQuery.noConflict()"函數(shù)。  
  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> 

下載地址：http://down.51cto.com/data/359023

原文鏈接：http://www.cnblogs.com/ForEvErNoME/archive/2012/03/15/2398659.html

【編輯推薦】

  1. 12個必要的jQuery表單插件
  2. 一些非常棒的jQuery拖放插件
  3. 10條建議讓你創(chuàng)建更好的jQuery插件
  4. jQuery LigerUI使用教程入門篇
  5. 利用jQuery marquee實現(xiàn)響應(yīng)設(shè)計
責(zé)任編輯：林師授 來源： ForEvErNoMe的博客
jQuery
相關(guān)推薦

2023-04-14 14:54:29

2018-05-04 07:36:35

醫(yī)療行業(yè)物聯(lián)網(wǎng)IoT

2023-08-24 10:43:23

Bean@Primarytype

2025-05-07 08:21:01

2023-05-26 07:19:49

Spring聲明式事務(wù)

2023-04-18 16:31:00

2014-12-17 09:27:41

開源PaaS

2025-04-14 00:00:00

數(shù)據(jù)庫分布式架構(gòu)分布式鎖?

2010-07-29 15:56:04

FlexSocket

2013-04-25 14:26:54

GridView

2024-09-12 15:43:46

C#代碼后端

2010-06-07 17:41:42

Sendmail 配置

2022-12-13 10:05:27

定時任務(wù)任務(wù)調(diào)度操作系統(tǒng)

2010-09-08 15:49:21

SmartyCSS

2010-03-09 15:23:30

Linux批量重命名

2025-06-09 01:22:00

2023-04-03 10:00:00

Redis分布式鎖

2025-01-09 08:36:05

2025-06-06 08:28:56

2018-07-09 08:38:13

集群Redis方案
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號