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 相关文章推荐
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery知识点整理
Jan 30 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
javascript背投广告代码的完善
2008/04/08 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
公司JAVA开发面试题
2015/04/02 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
重点工程汇报材料
2014/08/27 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
十八大标语口号
2014/10/09 职场文书
个人整改方案范文
2014/10/25 职场文书
2015团员个人年度总结
2015/11/24 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
MySQL常用慢查询分析工具详解
2022/08/14 MySQL