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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
js判断密码强度的方法
Mar 18 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
第七节 类的静态成员 [7]
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php实现文章评论系统
2019/02/18 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
简单谈谈python中的多进程
2016/11/06 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
降低python版本的操作方法
2020/09/11 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
广告学专业推荐信范文
2013/11/23 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
公司委托书范本
2014/04/04 职场文书
红色故事演讲稿
2014/05/22 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
校长个人总结
2015/03/03 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015学校年度工作总结
2015/05/11 职场文书
创业计划书之养殖业
2019/10/11 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python