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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js调用css属性写法
2013/09/21 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
TensorFlow实现Batch Normalization
2018/03/08 Python
python 进程的几种创建方式详解
2019/08/29 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
物业公司的岗位任命书
2014/06/06 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
十佳家长事迹材料
2014/08/26 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Hive常用日期格式转换语法
2022/06/25 数据库