前端开发很容易会遇到jQuery库与其他库冲突的场景，比如和prototype库冲突。
实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的。
解决方法，就是使用jQuery提供的jQuery.noConflict()方法，释放$标识符的控制，使其他的脚本可以使用$标识符而不会引起冲突。
更多的，jQuery.noConfilict()方法可以返回对jQuery的引用，可以将这个返回的引用存放到变量中，就可以使用这个变量来调用jQuery库提供的方法或对象。
同一个页面的jQuery多个版本冲突
<!-- 引入1.6.4版的jq --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script> var jq164 = jQuery.noConflict(true); </script> <!-- 引入1.4.2版的jq --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script> var jq142 = jQuery.noConflict(true); </script> <script> (function($) { // 此时的$是jQuery-1.6.4 $('#'); })(jq164); </script> <script> jq142(function($) { // 此时的$是jQuery-1.4.2 $('#'); }); </script>
jQuery库在其他库之后导入引发冲突
1.通过jQuery的全限定名替代$简写来使用jQuery
<script src="prototype.js" type="text/javascript"></script> <script src="jquery.js" type="text/javascript"></script> <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() ); }); }); // 此处不可以再写成$，此时的$代表prototype.js中定义的$符号 $("pp").style.display = 'none'; //使用prototype </script>
2.自定义一个快捷方法（别名）
<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>
3.将$符号作为参数传到函数内部
<script type="text/javascript"> jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js jQuery(document).ready(function($) { $("p").click(function() { // 继续使用$符号 alert( $(this).text()); }); }); // 或者如下 jQuery(function($) { // 使用jQuery $("p").click(function() { // 继续使用$符号 alert( $(this).text() ); }); }); </script>
<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>
jQuery库在其他库之前导入引发冲突
jQuery库在其他库之前导入，$的归属权默认归最后面的JavaScript库所有。那么可以直接使用【jQuery】来做一些jQuery的工作。
同时，可以使用$()方法作为其他库的快捷方式，也无须调用jQuery.noConflict()函数。
<!-- 引入 jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <!-- 引入 prototype --> <script src="lib/prototype.js" type="text/javascript"></script> <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>
jQuery.noConflict()的原理
通过查看源码就能知道这个方法的原理。
var // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$, jQuery.extend({ noConflict: function(deep) { if (window.$ === jQuery) { window.$ = _$; } if (deep && window.jQuery === jQuery) { window.jQuery = _jQuery; } return jQuery; } });
首先，在jQuery加载的时候，通过事先声明的_jQuery变量获取到当前window.jQuery，通过_$获取到当前window.$。
然后，通过jQuery.extend()把noConflict挂载到jQuery下面。所以我们在调用的时候都是jQuery.noConflict()这样调。
然后，在调用noConflict()时做了2个判断。第一个if判断把$的控制权交了出去；第二个if判断则在noConflict()传参的时候把jQuery的控制权交了出去。
最后，noConflict()返回jQuery对象，用哪个参数接收，哪个参数将拥有jQuery的控制权。
"我不知道自己到底在执着什么，我只是知道，我一直都在为难自己。"