jQuery多个版本和其他js库冲突的解决方法


Posted in Javascript onAugust 11, 2016

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法。

1.同一页面jQuery多个版本或冲突解决方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery测试页</title>
</head>
<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>
<script>
(function($){
//此时的$是jQuery-1.6.4
$('#');
})(jq164);
</script>
<script>
jq142(function($){
//此时的$是jQuery-1.4.2
$('#');
});
</script>
</body>
</html>

2.同一页面jQuery和其他js库冲突解决方法

jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

jquery.js在prototype.js之前进行引入,如:

<script src="jquery.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>

2.1 当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js,全名可以不调用。
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。
$("pp").style.display = 'none'; //使用prototype
</script>

2.2 您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

<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>

2.3 如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
</script>

2.4 使用语句块:

<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>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

注意:

1.引用javascript类库时,把jQuery引用放在最后面,可以避免冲突。

2.特别要注意jQuery()代替$()时,jQuery是区分大小写的,因为javascript本身就是区分大小写的。

以上所述是小编给大家介绍的jQuery多个版本和其他js库冲突的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 #Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 #Javascript
JavaScript性能优化总结之加载与执行
Aug 11 #Javascript
js接收并转化Java中的数组对象的方法
Aug 11 #Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 #Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 #Javascript
基于js对象,操作属性、方法详解
Aug 11 #Javascript
You might like
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
JS修改css样式style浅谈
2013/05/06 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
Python如何实现文本转语音
2016/08/08 Python
python实现感知器算法详解
2017/12/19 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python3判断IP地址的方法
2021/03/04 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
幼儿园毕业家长感言
2014/02/10 职场文书
C++程序员求职信范文
2014/04/14 职场文书
读书月活动方案
2014/05/22 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
销售内勤岗位职责
2015/02/10 职场文书
仰望星空观后感
2015/06/10 职场文书
谢师宴家长致辞
2015/07/27 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书