解决jQuery和其它库的冲突

最新推荐文章于 2022-12-26 11:15:26 发布

Mesut_Ozil

最新推荐文章于 2022-12-26 11:15:26 发布

阅读量795

点赞数

分类专栏： javascript 文章标签： javascript jQuery jQuery和其它库的冲突

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

解决jQuery和其它库的冲突

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里，因此当把jQuery和其它javascript类库一起使用时，不会引起冲突.(注意：默认情况下，jQuery用$作为自身的缩写而以）

如果jQuery类库和别的类库冲突的话，可以使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库。看下面小片断代码
<script type="text/javascript" src="../JS/JsCOM.js"></script>

大家都知道jQuery里面也一个这样的函数，为了不引起冲突，我们将jQuery的变量$的控制权移交出给别的javascript库
jQuery.noConflict(); //将变量$的控制权移交给JsCOM.js
var $cr = jQuery("#cr"); //照样使用jQuery类库，只是用jQuery代替了原来的$而以。
var JsCOM_cr = $("cr"); //使用JsCOM.js类库

在这里可以把jQuery()函数作为jQuery对象的制造工厂.

在这里要注意几点
1.引用javascript类库时，一定要把jQuery引用放在最后面，就像上面一样，JsCOM.js的引用在jQuery引用的前面（具体原因我也不知，不过确实需要这样）
2.特别要注意jQuery()代替$()时，jQuery是区分大小写的，因为javascript本身就是区分大小写的（好像说这个有点多余，不过还是希望大家不要犯这种错误）

基本上根据上面的方法就可以解决jQuery和其它库的冲突问题了！

如果你觉得上面的方式不爽，每次都要打jQuery来代替$增加了您敲键盘的工作量，那请接着看。。
除上面之外，还有另一种选择。如果想确保jQuery不会与其它库冲突，但又想自定义一个快捷方式，可以进行如下操作;
var $j = jQuery.noConflict(); //自定一个快捷方式
var $cr = $j("#cr"); //使用jQuery类库，得用自定义快捷方式----$j;
var JsCOM_cr = $("cr"); //和上一段代码一样，使用的是JsCOM.js类库

如果您还有别的要求，想继续使用原先的$()，同时还需要与别的类库不冲突的话，还有两种解决方法
其一：
   jQuery.noConflict();    //将变量$的控制权让给JsCOM.js
   jQuery(function($)
   {
     $("p").click(function()   //在函数内继续可以使用jquery类库的$()方法
      {
         alert($(this).text());
      })
   })

var JsCOM_cr = $("cr"); // 在函数外面，照样可以使用JsCOM.js的$()方法

其二：
       jQuery.noConflict(); //将变量$的控件权移交给别的类库，使用jquery类库的$符号时，请使用jQuery("#id");
        (function($) {       //定义匿名函数并设置形参为$
            $(function() {   //匿名函数内部的$均为jQuery
                $("div").click(function() {//继续使用$()方法
                alert($(this).text());
                })
            })
        })
        (jQuery);           //使用匿名函数且传递实参jQUery
        alert($("cr"));   //使用的是jsCOM.js类库中的$()函数

第二种方法应该是兼容旧的代码最好的方式，修改的代码是最少的！
不过如果是新写的jQuery代码，我还是比较喜欢使用刚开始讲的那种(jQuery.noConflict(),然后就使用jQuery("#id"),这种方式)

如果您的页面是先引用jQuery类库再引入别的类库的话，那么我们可以直接使用jQuery来做一些工作，同时，可以使用$()方法作为其它库的快捷方式。这里无需调用jQuery.noConflict()函数,请看下面代码
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="../JS/JsCOM.js"></script>

              jQuery().ready(function() {     //无需调用jQuery.noConflict()函数
                    var $cr = jQuery("#cr");
                    $cr.click(function() {
                        if ($cr.is(":checked")) {
                            alert("感谢你的支持！你可以继续操作了..");
                        }
                    })
                })
            alert($("cr"));   //使用的是jsCOM.js类库中的$()函数

好了，看了上面这么多种方法来解决冲突，这下你可以放心的在您的项目中引用jQuery了吧：）

来源：http://www.cnblogs.com/Ss_Andy/archive/2010/06/24/1764471.html

程序原来引入了一个js库，之后再引入JQuery库，发生了冲突。原因可能是：在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$('#msg')等同于JQuery('#msg')的写法。但是，当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。

引入的两个js库，$ 以最后一个引入的库为准。

代码：