解决jQuery和其它库的冲突

在jQuery库中,几乎全部的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里,所以当把jQuery和其它javascript类库一块儿使用时,不会引发冲突.(注意:默认状况下,jQuery用$做为自身的缩写而以) javascript

若是jQuery类库和别的类库冲突的话,可使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库。看下面小片段代码
 <script type="text/javascript" src="../JS/JsCOM.js"></script>
 <script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
假设JsCOM.js库中,有这样一个函数
function $(objName) {
    if (document.getElementById) {
        return eval('document.getElementById("' + objName + '")')
    }
    else {
        return eval("document.all." + objName)
    }
你们都知道jQuery里面也一个这样的函数,为了避免引发冲突,咱们将jQuery的变量$的控制权移交出给别的javascript库
jQuery.noConflict();    //将变量$的控制权移交给JsCOM.js
var $cr = jQuery("#cr");  //照样使用jQuery类库,只是用jQuery代替了原来的$而以。
var JsCOM_cr = $("cr");   //使用JsCOM.js类库 java

在这里能够把jQuery()函数做为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类库 this

若是您还有别的要求,想继续使用原先的$(),同时还须要与别的类库不冲突的话,还有两种解决方法
其一:
   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类库中的$()函数 ip

第二种方法应该是兼容旧的代码最好的方式,修改的代码是最少的!
不过若是是新写的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了吧 :) ci

相关文章
相关标签/搜索