源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery $命名冲突解决方案汇总

  • 时间:2022-10-20 05:25 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery $命名冲突解决方案汇总
最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。 例一:
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <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="/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>
例二:
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <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="/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>
例三:
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <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="/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>
例四:
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <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="/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>
例五:
[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>冲突解决5</title> <!--先导入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>
看,原来解决问题的方法可不止一个两个呢,有需要的小伙伴们自己来取吧
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部