两个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组合创造更多效果哦~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

左手用R右手Python系列16——XPath与网页解析库

最近写了不少关于网页数据抓取的内容,大多涉及的是网页请求方面的,无论是传统的RCurl还是新锐大杀器httr,这两个包是R语言中最为主流的网页请求库。 但是整个...

3055
来自专栏hrscy

Unity - 在鼠标点击的位置放置对象

你可以使用函数实例化多个给定的游戏对象或预制对象。 Instantiate (Object Target, object’s position, object...

592
来自专栏LinXunFeng的专栏

iOS - Swift 面向协议编程(一)

1355
来自专栏小怪聊职场

爬虫课堂(二十五)|使用CrawlSpider、LinkExtractors、Rule进行全站爬取

2106
来自专栏逢魔安全实验室

基于python的自动化代码审计

新年马上到了,FormSec现在这里给大家拜年,祝大家狗年旺财! 当然新年礼物已经给大家备好了:《基于python的自动化代码审计》 本文通过介绍在...

3376
来自专栏学习力

《Java从入门到放弃》框架入门篇:Struts2的常用验证方式

1798
来自专栏云飞学编程

Python学习,字符串格式化方法不止%和farmat,还有f-string

一说起字符串格式化,我们脑海里最先出现的必然是%和format,但是在python3.6之后,又更新了一种更快更便捷的方法,那就是f-string!它是由PEP...

622
来自专栏大内老A

通过自定义配置实现插件式设计

软件设计有一句话叫做“约定优于配置”,很多人将其作为拒绝配置的理由。但是,“约定”和“配置”的使用,都有个度的问题。我不赞为了所谓的扩展性,为你的应用设计一套只...

2068
来自专栏Python小屋

详解Python GUI版24点游戏制作过程

本文作者为浙江温州永嘉县教师发展中心应根球老师,电子邮箱:ycicada@163.com。 传统用扑克牌算24点游戏用于小学低中段学生训练四则运算效果不错,也可...

2615
来自专栏九彩拼盘的叨叨叨

学习前端 第6周 第1天

501

扫描关注云+社区