两个js冲突怎么解决?试试这四个方法
时间:2022-05-03
本文章向大家介绍两个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组合创造更多效果哦~
- 高斯消元法(Gauss Elimination)【超详解&模板】
- [快学Python3]读写Excel - openpyxl库
- HDU 2147 kiki's game(规律,博弈)
- HDU 1847 Good Luck in CET-4 Everybody!(规律,博弈)
- [network][udp]你不要偷偷发包,我跟你讲
- [快学Python3]HTTP处理 - urllib模块
- 关小刷刷题08 – Leetcode 26. Remove Duplicates from Sorted Array 方法2、3
- C++课程设计类作业2
- C++课程设计类作业4
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 代码分享系列(1)之感知机【代码可下载】
- C++课程设计类作业3
- [快学Python3]INI文件读写
- 【专知-PyTorch手把手深度学习教程08】NLP-PyTorch: 用字符级RNN生成名字
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 不支持图形化界面的Linux系统如何显示图像化界面?飞腾服务器显示图像化界面方法,DISPLAY environment variable is undefined问题解决方法
- 一分钟学Python| Python的函数(上)
- 数据分析与数据挖掘 - 07数据处理
- MySql8.0.19最新版本创建用户分配权限演示,You have an error in your SQL syntax权限分配问题解决方法
- linux服务器oracle数据库导出dmp文件功能演示,备份数据库命令。exp命令显示command not found解决方法,EXP-00028: 无法打开dmp进行写入问题解决
- oracle数据库exp命令导入导出dmp文件演示,oracle数据库备份还原功能
- oracle数据库impdp导入dmp文件功能演示,imp导入IMP-00038: Could not convert to environment character sets handle问题解决
- 弄懂这 5 个问题,拿下 Python 迭代器!
- windows、linux下命令行登录oracle数据库方法,查询sga参数值sql语句
- oracle数据库查询open_cursors值的sql语句,达梦数据库查询MAX_SESSION_STATEMENT值方法,MAX_SESSION_STATEMENT的最大值、上限是多少。
- 达梦数据库启用日志方法,达梦数据库查看日志是否启用,达梦数据库日志文件位置查找
- JavaScript 技术篇 - js 查看哪个元素获取了焦点,js 指定元素获取焦点方法
- 工作10年后,再看String s = new String("xyz") 创建了几个对象?
- Linux达梦数据库:通过disql登录命令行操作数据库,打开达梦数据库自带的数据库管理连接工具
- Dbvis数据库连接工具将查询出数据转化为sql插入语句方法