完美解决网站jquery冲突导致js交互失效的方法

【导读】jQuery是一个兼容多浏览器的JavaScript框架,关键是免费开源,有时候为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈。而有时网站jquery冲突导致js交互失效

  jQuery是一个兼容多浏览器的JavaScript框架,关键是免费开源,有时候为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈。这就是它的牛逼之处了。

  而且呢,jQuery还能够实现网页样式的改变。听起来像CSS干的事情。当所有浏览器不完全支持相同的标准时,单纯用CSS会显得吃力。 jQuery 可以弥补CSS的不足,它提供了跨浏览器的标准解决方案,改变样式属性分分钟的事儿。
jquery
  不过,有些JS在不同的浏览器里所得出的效果是不一样的,因此在制作网页的时候需要考虑到不同浏览器直接的兼容性。试想下,你写了一个js公共组件public.js,该组件需要用到jquery,为了不出岔子,得需考虑$符号冲突问题、多个JS不兼容等的问题。

  想想也是醉了

  看下图,如果JS和jQuery出现冲突的时候,切换根本是没作用的。
JS交互问题

  马氪软件这边就不去多累赘了,把我们在实际操作中的经验分享给大家。例如上面的例子,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样式编辑


本文链接:http://mkapps.cn/news/ask/133.html

无锡第二秀网络科技有限公司

  • 旗下 : 马氪软件
  • 主营业务 : 网站设计开发;微信公众号、小程序开发;APP开发;网络营销推广;广告设计 等
  • 联系人 : 徐经理
  • 手机 : 18706171959
  • 电话 : 0510-85873959
  • 邮箱 : b1990g228@qq.com
  • 网址 : http://mkapps.cn

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章