jQuery和Prototype的兼容性和冲突的多种解决方法
有两种情况:
1.先加载Prototype,再加载jQuery。
2.先加载jQuery,再加载Prototype。
针对情况1:先加载Prototype,再加载jQuery。
方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的。
使用jQuery.noConflict();主要作用是在任何时候,只要在jQuery加载后就可以调用,将$符号的使用权返回给其它的js库,jQuery在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中。
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
//各个js库之间的主要冲突在于$的冲突,这个方法是用来处理这个问题的
jQuery.noConflict(); //原本使用jQuery代码部分的$ 用jQuery替代
jQuery(document).ready(function (){
jQuery("div").hide();
}); // Use Prototype with $(...), etc.
$('proto').hide();
</script>
</head>
<body></body>
</html>
方法二:如果你仍然想使用类似于$这样比较简短的字符,你可以将jQuery.noConflict()的返回值赋值给某个变量。这个变量就是jQuery的新缩写了,当然你可以使用$以外的任意字符串,比如:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
//$j就相当于jQuery,名称你可以自主定义
var $j = jQuery.noConflict(); // Use jQuery via $j(...)
$j(document).ready(function (){
$j("div").hide();
}); // Use Prototype with $(...), etc.
$('proto').hide();
</script>
</head>
<body></body>
</html>
方法三:如果你还是想使用$,而不想使用别的字符,也是可以的。而且通常程序员都比较喜欢这样做,因为这样做写好的代码几乎都不用替换原来的$符号。那就是利用名字空间的概念就所有的jQuery代码封装在document的ready事件名字空间范围内,如:jQuery(document).ready(这里填入jQuery代码)
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript" >
jQuery.noConflict(); // Put all your code in your document ready area
jQuery(document).ready(function ($){
// 这样你可以在这个范围内随意使用$而不用担心冲突
$("div" ).hide();
}); // Use Prototype with $(...), etc.
$('proto' ).hide();
</script>
</head>
<body></body>
</html>
针对第二种情况:先加载jQuery,再加载Prototype。
方法四:按照这样的顺序加载,就不存在其它js库的$符号被jQuery占用的问题。所以对其它的js库的代码可以不作任何修改,照常使用$,而对 jQuery可以使用jQuery来替代$。如:
<html>
<head>
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script type="text/javascript" >
// 使用 jQuery 用 jQuery(...)
jQuery(document).ready(function (){
jQuery("div" ).hide();
}); // 使用 Prototype 时,用 $(...),
$('someid' ).hide();
</script>
</head>
<body></body>
</html>
或者你不想写jQuery这么长的字符,你可以通过另外一种方法:
方法五:
var $j = jQuery;
jQuery和Prototype的兼容性和冲突的多种解决方法的更多相关文章
- jQuery和Prototype的兼容性和冲突的五种解决方法
第一种情况:先加载Prototype,再加载jQuery方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的. 使用jQuery.no ...
- JQuery的$和其它JS发生冲突的快速解决方法
众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...
- 无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI" 之间的排序规则冲突。的解决方法
在SQL SERVICE的查询的时候遇到了“无法解决 equal to 运算中 "Chinese_PRC_CI_AS" 和 "Chinese_PRC_90_CI_AI&q ...
- [转载][jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
参考 [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 ---------------------------------------- ...
- [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property ‘msie’ of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property 'msie' of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...
- jquery ui中 accordion的问题及我的解决方法
原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...
- Django与Vue语法冲突问题完美解决方法
当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% ...
- error C2872: “flann”: 不明确的符号 --- PCL 与OpenCV2 的flann命名空间冲突问题的解决方法
error C2872: "flann": 不明确的符号 - PCL 与OpenCV2命名空间冲突问题的解决方法 error C2872: "flann" 如果 ...
随机推荐
- OO ALV 后台运行时错误:Control Framework: Fatal error - GUI cannot be reached
这个错误的原因,是GUI容器依赖GUI的存在,因为它是在后台运行,没有GUI,因此控制错误. 可以通过做一些编码绕过这个. * ALV Grid DATA: R_GRID TYPE REF TO CL ...
- MybatisPlus使用代码篇
package spring.server.consumer; import com.baomidou.mybatisplus.annotation.DbType; import com.baomid ...
- Unity中的全局坐标系和局部坐标系
全局坐标系 描述游戏场景内所有物体位置和方向的基准,也称为世界坐标系.在Unity场景中创建的物体都是以全局坐标系中的坐标原点(0,0,0)来确定各自的位置的. 局部坐标系 每个物体都有其独立的坐 ...
- flask 之(三) --- 筛选|分页|过滤
筛选 查询数据筛选语法:类名.query.筛选符 .all( ):获取结果集:.count( ):获取查询到的对象数量 类名.query.filter(类名.属性.运算符('xxx')).all() ...
- CISCO路由器WAN口动态ISP配置
Building configuration... version 15.0 service timestamps debug datetime msec service timestamps ...
- ORACLE 左连接 右连接 内连接 外连接 全连接 五中表连接方式
1.左连接 :left join 2.右连接:right join 3.内连接:inner join 4.外连接:outer join 5.全连接:full join
- Prometheus 和 Alertmanager实战配置
Prometheus时序数据库 一.Prometheus 1.Prometheus安装 1)源码安装 prometheus安装包最新版本下载地址:https://prometheus.io/downl ...
- Js 执行上下文和作用域
1.执行上下文和执行栈 执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行. 执行上下文的生命周期包括三个阶 ...
- 菜鸟系列Fabric——Fabric 1.2 单机部署(2)
Fabric 1.2单机部署 https://hyperledger-fabric.readthedocs.io/en/release-1.2/whatis.html 创建目录 sudo mkdir ...
- 牛客小白月赛14 -A (找规律+除数取模)
题目链接:https://ac.nowcoder.com/acm/contest/879/A 题意:有n个城市,编号1~n,k天,第一天位于城市1,要求最后一天在城市1,且相邻两天不在同一个城市,求方 ...