如何解决jQuery 和其他JS库的冲突


Posted in jQuery onJune 22, 2020

在 jQuery 库中,几乎所有的插件都被限制在它的命名空间里。通常,全局对象都被很好地存储在 jQuery 命名空间里,因此当把 jQuery 和其他 JavaScript 库(例如 Prototype、MooTools 或 YUI)一起使用时,不会引起冲突。

注意:默认情况下,jQuery 用 $ 作为自身的快捷方式。

1.jQuery库在其他库之后导入

在其他库和 jQuery 库都被加载完毕后,可以在任何时候调用 jQuery.noConflict() 函数来将变量 $ 的控制权移交给其他 JavaScript 库。示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决1</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery.noConflict();     //将变量$的控制权让渡给prototype.js
jQuery(function(){     //使用jQuery
 jQuery("p").click(function(){
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none';  //使用prototype.js隐藏元素
</script>

</body>
</html>

然后,就可以在程序里将 jQuery() 函数作为 jQuery 对象的制造工厂。

此外,还有另一种选择。如果想确保 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.js隐藏元素
</script>

可以自定义备用名称,例如 jq、$J、awesomequery 等。

如果不想给 jQuery 自定义这些备用名称,还想使用 $ 而不管其他库的 $() 方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。

其一:

<script type="text/javascript">
jQuery.noConflict();    //将变量$的控制权让渡给prototype.js
jQuery(function($){     //使用jQuery
 $("p").click(function(){  //继续使用 $ 方法
  alert( $(this).text() );
 });
});

$("pp").style.display = 'none';  //使用prototype
</script>

其二:

<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>

这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性。

2.jQuery库在其他库之前导入

如果 jQuery 库在其他库之前就导入了,那么可以直接使用"jQuery”来做一些jQuery的工作。同时,可以使用 $() 方法作为其他库的快捷方式。这里无需调用 jQuery.noconflict() 函数。示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决5</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

有了这些方法来解决冲突,就可以在项目中放心地引用 jQuery 了。

以上就是如何解决jQuery 和其他JS库的冲突的详细内容,更多关于解决jQuery JS库冲突的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery 移除事件的方法
Jun 20 #jQuery
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
You might like
咖啡的化学
2021/03/03 咖啡文化
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
js初始化验证实例详解
2016/11/26 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
js代码实现轮播图
2020/05/04 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
大学生安全责任书
2014/07/25 职场文书
财务会计实训报告
2014/11/05 职场文书
铁路安全反思材料
2014/12/24 职场文书
团组织关系介绍信
2019/06/24 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis