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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
看了就知道什么是JSON
Dec 09 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
PHP SQLite类
2009/05/07 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
动手学习无线电
2021/03/10 无线电
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
JS中FormData类实现文件上传
2020/03/27 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
几个Linux面试题笔试题
2012/12/01 面试题
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript
基于Redission的分布式锁实战
2022/08/14 Redis