jQuery与其他库冲突的解决方法

最新推荐文章于 2018-03-24 11:06:03 发布

飘渺若尘

最新推荐文章于 2018-03-24 11:06:03 发布

阅读量71

点赞数

文章标签： jQuery prototype JavaScript J# HTML ViewUI

本文链接：https://blog.csdn.net/shizenghua/article/details/83775086

版权

在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过以下几种方案进行解决：

一、 jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：

<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()方法将变量$的控制权让渡给其他库，有以下几种方式:

<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>

飘渺若尘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery与其他库冲突的解决方法

在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过以下几种方案进行解决：一、 jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" cont...
复制链接

扫一扫