两个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组合创造更多效果哦~
两个js冲突怎么解决?试试这四个方法的更多相关文章
- js冲突怎么解决
a.最容易出现的就是js的命名冲突①.变量名冲突变量有全局变量和局部变量当全局变量变量和局部变量名称一致时,就会js冲突,由于变量传递数值或地址不同就会产生JavaScript错误,甚至死循环.②.方 ...
- JS中遍历对象属性的四种方法
Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...
- JS轮播图动态渲染四种方法
一. 获取轮播图数据 ajax 二.根据数据动态渲染 (根据当前设备 屏幕宽度判断) 1. 准备数据 2. 把数据转换成html格式的字符串 动态创建元素 字符串拼接 模板引擎 框架方法 2.把字符 ...
- 两个变量交换的四种方法(Java) 七种方法(JS)
两个变量交换的四种方法(Java) 对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) 1 class TestEV 2 ...
- JS 中检测数组的四种方法
今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...
- 两个变量交换的四种方法(Java)
对于两种变量的交换,我发现四种方法,下面我用Java来演示一下. 1.利用第三个变量交换数值,简单的方法. (代码演示一下) class TestEV //创建一个类 { public static ...
- ECSHOP中transport.js和jquery冲突的解决方法
jQuery 和global.js 冲突 百度和google多次,根据网上的大多数建议和自己测试,解决办法如下:删除global.js 或者global.js 文件的10-13行屏蔽//Object. ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- prototype.js 和json.js 冲突
1.冲突简述和分析 prototype.js与json.js并不是完全兼容的.主要冲突在于json.js为Object的原型增加了一个toJSONString的方法. 冲突之一:是prototype中 ...
随机推荐
- Android四大组件之——Activity(一)定义、状态和后退栈(图文详解)
什么是Activity 关键字:应用组件.四大组件.用户界面,交互. An Activity is an application component that provides a screen wi ...
- IOC容器特性注入第六篇:利用MVC注入点,把容器启动
这里是利用MVC三个注入点中的:IDependencyResolver 进行注入 在全局类中Global.asax代码如下: #region MVC Inject System.Web.Mvc.Dep ...
- python通过input()函数输入的内容是什么类型
说明: 通过input()函数,可以从标准输入读取内容,那么读到的内容是什么类型呢. 通过type()函数可以进行判断,另外,通过input()函数的官方解释,从标准输入读取一个字符串.所以,应该是字 ...
- 【netcore基础】.Net core使用swagger自动生成开发文档
之前写过一篇 .Net 版本的博客 https://www.cnblogs.com/jhli/p/8317566.html 现在只不过用了 netcore 之后的版本,其实差不多 netcore版本的 ...
- css3整理--background-clip
background-clip语法: background-clip : border-box || padding-box || content-box 参数取值: border-box:此值为默认 ...
- .net运行时dll的查找路径顺序
D:\项目路径\.target\项目名.BLL.pdb”.已完成生成项目“D:\项目路径\项目名.BLL\项目名.BLL.csproj”(默认目标)的操作.ResolveAssemblyReferen ...
- web站点健康检测和告警小脚本
#!/bin/sh web01="http://172.18.52.xx:8080/web/api/getTime" web02="http://172.18.52.xx ...
- C - 食物链
来源poj1182 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是 ...
- 传多个id 存入一个容器里,让另一个页面接受并显示数据
要传页面的id: <ul class="contrast-ul"> <!-- <li>id都在这里面</li> --> </u ...
- nodejs--get请求数据解析
---- 三种方式解析: 1.自动动手切 2.api的querystring模块 3.api的url模块