解决jQuery和其它库的冲突

在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局(global)对象被很好地存储在jQuery命名空间里,因此当把jQuery和其他JavaScript库(例如Prototype、MooTools或YUI)一起使用时,不会引起冲突。

1.jQuery库在其他库这后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其它javaScript库。如:

冲突解决1
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 冲突解决1 </ title >
<!--  引入 prototype   -->
< script  src ="js/prototype.js"  type ="text/javascript" ></ script >
<!--  引入 jQuery   -->
< script  src ="js/jquery-1.4.2.min.js"  type ="text/javascript" ></ script >
</ head >

< body >
< id ="pp" > test prototype </ p >
< > test jQuery </ p >

< script  type ="text/javascript" >
jQuery.noConflict();                   
// 将变量$的控制权让渡给prototype.js
jQuery( function (){                     // 使用jQuery
    jQuery( " p " ).click( function (){
        alert( jQuery(
this ).text() );
    });
});

$(
" pp " ).style.display  =   ' none ' ;                       // 使用prototype
</ script >
</ body >
</ html >

 如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:

自义快捷方式
< 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>

 如果不想给jQuery自定义这些备用的名称,还想使用$而不管其他库的$()方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。

方法一
< script type = " text/javascript " >
jQuery.noConflict();                
// 将变量$的控制权让渡给prototype.js
jQuery( function ($){                     // 使用jQuery
    $( " p " ).click( function (){         // 继续使用 $ 方法
        alert( $( this ).text() );
    });
});

$(
" pp " ).style.display  =   ' none ' ;         // 使用prototype
< / 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>

 2、jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用“jQuery”来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。例:

jQuery先导入
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 冲突解决 </ title >
<!-- 先导入jQuery  -->
< script   src ="js/jquery-1.4.2.min.js"  type ="text/javascript" ></ script >
<!-- 后导入其他库  -->
< script  src ="js/prototype.js"  type ="text/javascript" ></ script >
</ head >
< body >
< id ="pp" > test  prototype </ 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 >
</ html >

 

有了这些方法解决冲突,就可以放心在项目中引入jQuery了。

你可能感兴趣的:(jquery)