<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>
二、原理
1、源码
源码：看一下源码里怎么做到的
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的控制权。2、 验证
//冲突
var $ = 123; //假设其他库中$为123
$(
function () {
console.log($); //报错Uncaught TypeError: $ is not a function
}
);解决冲突
//解决冲突
var jq = $.noConflict();
var $ = 123;
jq(function () {
alert($); //123
});释放$控制权例子
<script>
var $ = 123; // window.$是123，存储在私有的_$上。</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<div>aaa</div>
<script>
var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
jq(function () {
alert($); //123
});
</script>
释放jQuery控制权例子
