完美解决网站jquery冲突导致js交互失效的方法
时间：2017-06-03 09:35来源：无锡做网站公司
摘要：，jQuery还能够实现网页样式的改变。听起来像CSS干的事情。当所有浏览器不完全支持相同的标准时，单纯用CSS会显得吃力。 jQuery 可以弥补CSS的不足，它提供了跨浏览器的标准解决方案，改变样式属性分分钟的事儿。
jQuery是一个兼容多浏览器的JavaScript框架，关键是免费开源，有时候为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。这就是它的牛逼之处了。
而且呢，jQuery还能够实现网页样式的改变。听起来像CSS干的事情。当所有浏览器不完全支持相同的标准时，单纯用CSS会显得吃力。 jQuery 可以弥补CSS的不足，它提供了跨浏览器的标准解决方案，改变样式属性分分钟的事儿。
不过，有些JS在不同的浏览器里所得出的效果是不一样的，因此在制作网页的时候需要考虑到不同浏览器直接的兼容性。试想下，你写了一个js公共组件public.js，该组件需要用到jquery，为了不出岔子，得需考虑$符号冲突问题、多个JS不兼容等的问题。
想想也是醉了
看下图，如果JS和jQuery出现冲突的时候，切换根本是没作用的。
马氪软件这边就不去多累赘了，把我们在实际操作中的经验分享给大家。例如上面的例子，JS文件中的一段如下：
//Tab-选项卡切换
$(function(){
$(".tab .tab_li").hover(function(){
$(this).parent().find(".tab_li").removeClass("tab_am");
$(this).addClass("tab_am");
var cutNum=$(this).parent().find(".tab_li").index(this);
$(this).parents(".tab").find(".tab_con").hide();
$(this).parents(".tab").find(".tab_con").eq(cutNum).show();
})
});
$(function(){
$(".tab2 .tab_li").click(function(){
$(this).parent().find(".tab_li").removeClass("tab_am");
$(this).addClass("tab_am");
var cutNum=$(this).parent().find(".tab_li").index(this);
$(this).parents(".tab2").find(".tab_con").hide();
$(this).parents(".tab2").find(".tab_con").eq(cutNum).show();
})
});
如果要实现jQuery和其他JS互不干扰，各尽其职，具体的代码如下
(function($) {
//把你写好的js代码复制到这边 （例如把//Tab-选项卡切换这一段加进来）
})(jQuery);
这样的方法，使得修改后的JS不会影响到其他JS文件，仅仅会影响到被包在jQuery(function($){}中的代码，运行起来速度比较稳定。
这个方法在开发js插件时经常被用到，形式也可以改成如下：
jQuery(function($){
//你的js代码放在这里（例如是ready函数和子函数）
//如果是js文件，其实就是在文件头部和尾部各加一行代码
}
牛逼的不？jQuery 提供了截取形形色色的页面事件 （比如用户单击一个链接）的适当方式，而不需要使用事件处理程序搞乱HTML 代码。此外，它的事件处理API 也消除了经常困扰Web 开发人员的浏览器不一致性。
声明：除非注明，本站内容由无锡网站建设马氪软件原创发布©，转载请联系我们授权合作。
感谢您耐心阅读，祝好！
您阅读这条内容，共花了： 给这篇内容写个评语吧！
完美解决网站jquery冲突导致js交互失效的方法
，jQuery还能够实现网页样式的改变。听起来像CSS干的事情。当所有浏览器不完全支持相同的标准时，单纯用CSS会显得吃力。 jQuery 可以弥补CSS的不足，它提供了跨浏览器的标准解决方案，改变样式属性分分钟的事儿。 
发布时间：2017-06-03
© 第二秀网络科技有限公司
长按识别二维码查看详细内容
