解决 jQuery 和其他库的冲突
在 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 了。
转载于:https://www.cnblogs.com/jwen1994/p/10802602.html
解决 jQuery 和其他库的冲突相关推荐
- 解决jQuery和其它库的冲突
为什么80%的码农都做不了架构师?>>> 在jQuery库中,几乎所有的插件都被限制在它的命名空间里.全局的对象都很好地存储在jQuery命名空间里,因此当把jQuery和其它 ...
- 解决jquery和prototype库冲突问题
解决jquery和prototype库冲突问题 参考文章: (1)解决jquery和prototype库冲突问题 (2)https://www.cnblogs.com/Joanna-Yan/p/483 ...
- 解决jQuery与其他库冲突的方法
通常,当在同一个页面上使用jQuery和其他库时,全局名称$的定义是最大的争论和冲突的焦点.众所周知,jQuery使用$作为jQuery名称的别名,并将其用于jQuery公开的每一个功能,但是其他库, ...
- iOS解决两个静态库的冲突 duplicate symbol
场景: 解决TencentOpenAPI.framework与ZbarSDK中 _base64_encode 函数的冲突 后来在网络上搜寻,删除掉 Other Linker Flag 的 -all_l ...
- jQuery与其它库冲突的解决方法(转)
原文出处:http://www.jb51.net/article/24014.htm 在jQuery库中,几乎所有的插件都被限制在它的命名空间里.全局的对象都很好地存储在jQuery命名空间里,因此当 ...
- 解决jQuery不同版同时引用的冲突
今天研发的同事在开发一个新jQuery插件时,遇到一个揪心的问题.平台以前使用的 jQuery版本是1.2.6,偶,天啊!这是古代的版本啊! 由于很多功能基于老版本,不能删除啊,同志们都懂的! 于是我 ...
- 【原】IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突)
[原]IOS合并lib(.a)库的终极可用方法(可用于解决duplicate symbol静态库冲突) 参考文章: (1)[原]IOS合并lib(.a)库的终极可用方法(可用于解决duplicate ...
- iOS开发中解决第三方静态库符号冲突的终极方案
iOS开发中解决第三方静态库符号冲突的终极方案 背景 在iOS开发的时候,经常会使用各种第三方静态库,这些库内部可能会打包了相同的第三方库.那么在链接的时候就会发生符号冲突. 例如:A厂商提供的lib ...
- 一键解决Conda安装某个库(如opencv)时conflict(冲突)的问题
发现问题 今天在配置conda环境时发现了如下问题,环境中的几个库有冲突 The following specifications were found to be in conflict:- bot ...
最新文章
- 注意Class类的特殊性
- 数据湖 data lake_在Data Lake中高效更新TB级数据的模式
- iphone屏蔽系统更新_手贱更新了 iphone系统,想退回到原来的版本,这个方法简单易用...
- 计算机对口升学试题英语,对口招生考试对口升学英语模拟试卷试题.docx
- Python实战从入门到精通第二十一讲——构建一个模块的层级包
- 《System语言详解》——1.SystemTap概述
- 点击次数(thinkphp)
- camera 自动对焦手动对焦
- 关于ping命令出现大量dup原因
- 计算机函数求最大值怎么设置,高中数学函数的最大值和最小值怎么求
- java烟弹,java电子烟是啥牌子
- 【stm32f429igt6】的WiFi模块数据收发。
- Ubuntu系统界面启动后启动开机自启动后锁屏
- C语言图形编程--俄罗斯方块制作(二)源代码
- 机器学习 --- PCA
- 3389远程服务器管理器,server 2012R2 data center远程桌面无法连接,3389不通,监听列表没有3389...
- 防盗链技术及破解方法详细解析
- Nginx服务器单站点http自动跳转https
- 【考研经验】2018西北工业大学计算机专硕经验贴
- MacBook Pro(13 英寸,2011 年末)A1278安装Windows11蓝屏代码WDF_VIOLATION问题解决