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中获取元素索引的函数
Sep 10 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
layui分页效果实现代码
May 19 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP实现分页的一个示例
2006/10/09 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python实现BackPropagation算法
2017/12/14 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python导入模块交叉引用的方法
2019/01/19 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
详解python中递归函数
2019/04/16 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
高中语文教学反思
2014/01/16 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python