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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
Vue实现简单计算器
Jan 20 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
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python查看微信好友是否删除自己
2016/12/19 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python字符串的拼接方法总结
2019/11/18 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
经典团队口号
2014/06/06 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
Python快速实现一键抠图功能的全过程
2021/06/29 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL