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

  下载链接在这

两个js冲突怎么解决?试试这四个方法的更多相关文章

  1. js冲突怎么解决

    a.最容易出现的就是js的命名冲突①.变量名冲突变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScript错误,甚至死循环.②.方 ...

  2. JS中遍历对象属性的四种方法

    Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...

  3. JS轮播图动态渲染四种方法

    一. 获取轮播图数据  ajax 二.根据数据动态渲染 (根据当前设备 屏幕宽度判断) 1. 准备数据 2. 把数据转换成html格式的字符串 动态创建元素 字符串拼接 模板引擎 框架方法 2.把字符 ...

  4. 两个变量交换的四种方法(Java) 七种方法(JS)

    两个变量交换的四种方法(Java)   对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) 1 class TestEV 2 ...

  5. JS 中检测数组的四种方法

    今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...

  6. 两个变量交换的四种方法(Java)

    对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) class TestEV //创建一个类 { public static ...

  7. ECSHOP中transport.js和jquery冲突的解决方法

    jQuery 和global.js 冲突 百度和google多次,根据网上的大多数建议和自己测试,解决办法如下:删除global.js 或者global.js 文件的10-13行屏蔽//Object. ...

  8. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  9. prototype.js 和json.js 冲突

    1.冲突简述和分析 prototype.js与json.js并不是完全兼容的.主要冲突在于json.js为Object的原型增加了一个toJSONString的方法. 冲突之一:是prototype中 ...

随机推荐

  1. mongodb批量操作, bulk_write,

    需要批量操作时候,节省网络连接交互次数,可以使用 bulk_write. 设置ordered=False,因为批量操作中没有互相依赖关系,如果有前后顺序的互相依赖,需要设置为True. bed_typ ...

  2. 如何在Django1.8 结合Python3.4版本中使用MySql

    Python2.7时代连接MySql的MySQLdb还不支持Python3.4. pip install pymysql 最关键的一点,在站点的__init__.py文件中,我们添加如下代码: 1 i ...

  3. Android 集成ShareSDK分享QQ或空间成功后,回调却不执行的原因

    AndroidMainifest.xml中的如箭头所示的id一定要与assets下ShareSDK.xml中配置的QQ的AppId一定要相同. 如下图

  4. java编程感悟02

    很多时候我们需要网上查阅他人的代码,如果代码比较长或者注释较少,阅读起来就会比较费劲,这时需要培养快速读懂应用他人的代码的能力. 实现图片的旋转功能: import java.awt.geom.Aff ...

  5. 多线程局部变量之threading.local()用法

    假如,开了十个线程并且做同样的一件事,他们需要带着自己的数据进来,完成事情后带着自己的数据出去.如果是并发,同时进来,他们的数据就会混乱. 一般情况,我们加锁就可以了,一个人先进来,先加锁,另一个人过 ...

  6. CentOS搭建内网NTP服务器

      在企业内部网络,不是所有的服务器都可以连接外网,需要搭建一台可以连接外网的服务器用于NTP服务器 安装环境查看 安装ntp yum -y install ntp 修改配置文件 driftfile ...

  7. bytes和str的区别与转换

    bytes和str的区别 1.英文 b'alex'的表现形式与str没什么两样 2.中文 b'\xe4\xb8\xad'这是一个汉字在utf-8的bytes表现形式 3.中文 b'\xce\xd2'这 ...

  8. IIS8.5 Error Code 0x8007007e HTTP 错误 500.19的解决方法

    window server 2012R2 IIS8.5 引用:https://www.52jbj.com/yunying/340443.html HTTP 错误 500.19 - Internal S ...

  9. 没有上司的舞会|codevs1380|luoguP1352|树形DP|Elena

    没有上司的舞会  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description Ural大学有N个职员,编号为1~N.他们有从属关系 ...

  10. Node.js编程规范

    摘自:https://github.com/dead-horse/node-style-guide https://github.com/felixge/node-style-guide 2空格缩进 ...