解决jquery与其他库的冲突

最新推荐文章于 2025-11-29 13:42:57 发布

最新推荐文章于 2025-11-29 13:42:57 发布 · 94 阅读

文章标签：

#javascript #ViewUI

本文介绍了解决jQuery与其他JavaScript库之间的符号冲突问题的方法。提供了四种不同的解决冲突的示例代码，并说明了在不同加载顺序下如何处理冲突。

转自：http://www.cnblogs.com/warner/archive/2013/04/14/3021217.html

有时会有jQuery和其他的库或自己写的一些公共脚本文件一起使用的场景，就有可能会出现$冲突的问题，冲突的解决分两种情况：

1、jQuery库在其他库之后引用，如下所示：

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="Scripts/common.js"></script>

在common.js中有对$重新定义，代码如下：

function $(id) {

    return document.getElementById(id);
}

下面是在jQuery中解决冲突的代码，有四种方式：

//方式1
jQuery.noConflict(); //将$控制权移交出去，以前使用$的地方都改用jQuery
jQuery(document).ready(function () {
    alert(jQuery("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式2
var $j=jQuery.noConflict(); //定义快捷方式
$j(document).ready(function () {
    alert($j("#span1").html());
});

window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式3
jQuery.noConflict(); //在函数内部继续使用$
jQuery(function ($) {
    alert($("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函数内部继续使用$另一种方式
(function ($) {
    $(function(){
        alert($("#span1").html());
    });
})(jQuery);
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}

2、jQuery库在其他库之前使用

//如果先引用jQuery脚本，可以不使用noConflict
//jQuery.noConflict(); 
jQuery(document).ready(function () {
    alert(jQuery("#span1").html());
});
window.onload = function () {
    $("span1").innerHTML = "oec2003";
}