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 相关文章推荐
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
实例讲解React 组件
Jul 07 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
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
js变量提升深入理解
2016/09/16 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
服装厂厂长职责
2013/12/16 职场文书
毕业证丢失证明
2014/01/15 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
个人党性分析总结
2015/03/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python