加入收藏 | 设为首页 | 会员中心 | 我要投稿 南通站长网 (https://www.0513zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

jQuery与其他库冲突的解决措施

发布时间:2021-11-24 20:22:17 所属栏目:教程 来源:互联网
导读:在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突;若是发生冲突后,可以通过以下几种方案进行解决: 一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如: Html代码 html head meta http-equiv=C
在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突;若是发生冲突后,可以通过以下几种方案进行解决:
 
一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:
 
Html代码
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<!--先导入jQuery -->  
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>  
<!--后导入其他库 -->  
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>  
</head>  
<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>  
</html>  
二、 jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:
 
Js代码
<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>   
  
//代码二   
<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>   
  
//代码三   
<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>   
  
    通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.

(编辑:南通站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读