如何解决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实现前端分页功能
Mar 23 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery操作css样式
May 15 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 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
层叠菜单的动态生成
2006/10/09 PHP
我的论坛源代码(十)
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php递归函数怎么用才有效
2018/02/24 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
python中__slots__用法实例
2015/06/04 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python logging模块用法示例
2018/08/28 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
新闻学专业应届生求职信
2013/11/08 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
贷款承诺书范文
2014/05/19 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
毕业实习计划书
2015/01/16 职场文书