两个js冲突怎么解决?试试这四个方法
两个js冲突很让前端头疼，虽然jquery是通用的，但调用不同经常会出问题。jQuery是目前流行的JS封装包，简化了很多复杂的JS程序，JQuery讲浏览器DOM树定义为$，通过$来获取各个子节点。JS插件还有prototype.js 等，它们也算比较好的插件，也使用$。所以有时候同时使用这个两个JS插件的时候，就会出现$的使用权冲突问题。两个js冲突怎么解决?试试下面四个方法
我们都知道JQuery有一个函数，jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点。
方法一
<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>方法二 ，我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点
<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>如果还出现错误，试一下调整js文件顺序
最后推荐一个开源jQuery插件SuperSlide，他在官网上的介绍是这样的：SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！ 从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！ 还可以多个SuperSlide组合创造更多效果哦~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-02-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读