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文件中调用js的实现方法小结
Oct 23 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
详解webpack打包vue时提取css
May 26 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 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 extension 加载顺序问题
2019/08/16 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
Python单链表简单实现代码
2016/04/27 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python async with和async for的使用
2019/06/20 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
解决python运行效率不高的问题
2020/07/20 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
临床医师专业个人自我评价
2014/01/08 职场文书
中秋节超市促销方案
2014/01/30 职场文书
手机被没收检讨书
2014/02/22 职场文书
政风行风评议整改方案
2014/09/15 职场文书
个人剖析材料范文
2014/09/30 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
英文辞职信范文
2015/05/13 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
行政处罚听证告知书
2015/07/01 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android