成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

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

引言：

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

例一：

  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();                //將變量$的控制權讓渡給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();                //將變量$的控制權讓渡給prototype.js  
  17. jQuery(function($){                    //使用jQuery  
  18.     $("p").click(function(){        //繼續使用 $ 方法  
  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();                //將變量$的控制權讓渡給prototype.js  
  17. (function($){                        //定義匿名函數并設置形參為$  
  18.     $(function(){                    //匿名函數內部的$均為jQuery  
  19.         $("p").click(function(){    //繼續使用 $ 方法  
  20.             alert($(this).text());  
  21.         });  
  22.     });  
  23. })(jQuery);                            //執行匿名函數且傳遞實參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. <!--先導入jQuery --> 
  7. <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script> 
  8. <!--后導入其他庫 --> 
  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 ,沒有必要調用"jQuery.noConflict()"函數。  
  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條建議讓你創建更好的jQuery插件
  4. jQuery LigerUI使用教程入門篇
  5. 利用jQuery marquee實現響應設計
責任編輯：林師授 來源： ForEvErNoMe的博客
jQuery
相關推薦

2023-04-14 14:54:29

2018-05-04 07:36:35

醫療行業物聯網IoT

2023-08-24 10:43:23

Bean@Primarytype

2025-05-07 08:21:01

2023-05-26 07:19:49

Spring聲明式事務

2023-04-18 16:31:00

2014-12-17 09:27:41

開源PaaS

2025-04-14 00:00:00

數據庫分布式架構分布式鎖?

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

定時任務任務調度操作系統

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方案
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： av特级毛片| 久久久女女女女999久久 | 男人的天堂久久 | 国产 日韩 欧美 在线 | 亚洲综合在 | 国产久| www日本高清 | 91pao对白在线播放 | 久久久91精品国产一区二区精品 | 久草新视频 | 日韩成人免费av | 久久精品国产一区老色匹 | 中文在线www | 日韩欧美不卡 | 久久网一区二区 | 日日干日日色 | 亚洲欧美在线观看 | 亚洲精品久久久久久一区二区 | 黄色在线免费观看视频网站 | h肉视频| 中文字幕日韩一区二区 | 激情五月婷婷丁香 | 91精品91久久久 | 热re99久久精品国产99热 | 97精品超碰一区二区三区 | 中文字幕视频在线观看 | 影视一区 | 一区二区三区在线 | 久久久久久天堂 | 国产精品毛片一区二区三区 | 欧美成人免费在线视频 | 五月婷婷激情 | 一区二区视频在线 | 日韩有码在线观看 | a免费观看 | 国产精品国产成人国产三级 | 亚洲视频免费一区 | 久久久99国产精品免费 | 免费观看一级毛片 | 国产精品视频久久 | 久久精品小视频 |