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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
js实现音乐播放控制条
Sep 09 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python MD5文件生成码
2009/01/12 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python实现贪吃蛇游戏
2020/03/21 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
学习自我鉴定
2014/02/01 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android