Jquery命名冲突解决的五种方案

来源：互联网发布：java英语面试题编辑：程序博客网时间：2024/05/16 15:46

引言：

　　最近遇到个问题，同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时，发现失效了！于是找资料，原来是jquery命名冲突了。因为许多 JavaScript 库使用 $ 作为函数或变量名，jquery也一样。其实$只是jquery的一个别名而已，假如我们需要使用 jquery 之外的另一 js 库，我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案，总有一种你会用得上的。

例一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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="http://www.cnblogs.com/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.jsjQuery(function(){                    //使用jQuery    jQuery("p").click(function(){        alert( jQuery(this).text() );    });});$("pp").style.display = 'none';        //使用prototype</script></body></html>

例二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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="http://www.cnblogs.com/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>

例三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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="http://www.cnblogs.com/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.jsjQuery(function($){                    //使用jQuery    $("p").click(function(){        //继续使用 $ 方法        alert( $(this).text() );    });});$("pp").style.display = 'none';        //使用prototype</script></body></html>

例四：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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="http://www.cnblogs.com/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>

例五：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>冲突解决5</title><!--先导入jQuery --><script src="http://www.cnblogs.com/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>转载自：http://www.cnblogs.com/ForEvErNoME/archive/2012/03/15/2398659.html

0 0