JavaScript中解决jQuery和Prototype.js同时引入冲突问题
两个库同时都定义了一个叫
$
的函数,所以在同时使用的时候会发生冲突。jQuery( http://jquery.com/ https://jquery.org/ )中提供了一种返还$
的使用权给其他js库使用的方法。截至到这篇文章完成时(2018/01/20),Prototype.js( http://prototypejs.org/ )的最新版本是1.7.3(2015/09/22),未提供返还使用权的方法。
解决先加载Prototype.js后加载jQuery的问题
解决方法一
如何解决
在引入jQuery后使用jQuery.noConflict();
返还$
使用权,否则Prototype.js会调用失败。
如何调用
- 在需要使用jQuery时,使用
jQuery( )
代替$( )
- 在需要使用Prototype.js时,使用
$( )
解决方法二
如何解决
在引入jQuery后将jQuery的$
绑定到其他对象上,例如$j
,使用var $j = jQuery.noConflict();
。
如何调用
- 在需要使用jQuery时,使用
$j( )
代替$( )
- 在需要使用Prototype.js时,使用
$( )
解决方法三
如何解决
如果还希望在jQuery代码部分使用$
,可以使用命名空间的概念。将所有可以写到document
的ready()
事件中的jQuery代码封装到里面,首先使用也jQuery.noConflict();
返还$
使用权。方法二中介绍的的将$
绑定到其他对象中的方法,此时对于document
的ready()
外的事件同样适用。
如何调用
- 在
jQuery(document).ready(function($){ })
外需要使用jQuery时,使用jQuery( )
代替$( )
- 在
jQuery(document).ready(function($){ })
中需要使用jQuery时,使用jQuery( )
- 在需要使用Prototype.js时,使用
$( )
举例
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
在.ready()事件外,你可以使用jQuery( )调用jQuery
jQuery(document).ready(function ($){
//在.ready()事件内,你可以使用$( )调用jQuery
});
//在.ready()事件外,你可以使用$( )调用Prototype.js
</script>
解决先加载jQuery后加载Prototype.js的问题
解决方法一
如何解决
两种情况只有这点不同,这里无需添加jQuery.noConflict();
,来返还$
使用权。
如何调用
- 在需要使用jQuery时,使用
jQuery( )
代替$( )
- 在需要使用Prototype.js时,使用
$( )
解决方法二
如何解决
在引入jQuery后将jQuery的$
绑定到其他对象上,例如$j
,使用var $j = jQuery.noConflict();
。
如何调用
- 在需要使用jQuery时,使用
$j( )
代替$( )
- 在需要使用Prototype.js时,使用
$( )
解决方法三
如何解决
如果还希望在jQuery代码部分使用$
,可以使用命名空间的概念。将所有可以写到document
的ready()
事件中的jQuery代码封装到里面。方法二中介绍的的将$
绑定到其他对象中的方法,此时对于document
的ready()
外的事件同样适用。
如何调用
- 在
jQuery(document).ready(function($){ })
外需要使用jQuery时,使用jQuery( )
代替$( )
- 在
jQuery(document).ready(function($){ })
中需要使用jQuery时,使用jQuery( )
- 在需要使用Prototype.js时,使用
$( )
JavaScript中解决jQuery和Prototype.js同时引入冲突问题的更多相关文章
- 解决jquery和prototype库冲突问题
在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...
- 在JavaScript中重写jQuery对象的方法
jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...
- 转载 javascript中(function($){...})(jQuery)写法是什么意思
javascript中(function($){...})(jQuery)写法是什么意思 这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 ...
- 深入了解JavaScript中基于原型(prototype)的继承机制
原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...
- 解决jQuery不同版同时引用的冲突
今天研发的同事在开发一个新jQuery插件时,遇到一个揪心的问题.平台以前使用的 jQuery版本是1.2.6,偶,天啊!这是古代的版本啊! 由于很多功能基于老版本,不能删除啊,同志们都懂的! 于是我 ...
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- 【转】JavaScript中的constructor与prototype
最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...
- Javascript中的继承与Prototype
之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是&l ...
- jQuery和Prototype的兼容性和冲突的五种解决方法
第一种情况:先加载Prototype,再加载jQuery方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的. 使用jQuery.no ...
随机推荐
- [JSOI2016]病毒感染[dp]
题意 有 \(n\) 个村庄按标号排列,每个村庄有一个死亡速度 \(a_i\) 表示每天死 \(a_i\) 人(除非你治好这个村庄). 你从 1 号村庄出发,每天可以选择向相邻的村庄进发或者治愈 ...
- C#大型电商项目优化(二)——嫌弃EF与抛弃EF
上一篇博文中讲述了使用EF开发电商项目的代码基础篇,提到EF后,一语激起千层浪.不少园友纷纷表示:EF不适合增长速度飞快的互联网项目,EF只适合企业级应用等等. 也有部分高手提到了分布式,确实,性能优 ...
- 记一次艰难的jquery easy-ui ajax post 体验
分享的经验和教训是: 1.jquery easy-ui ajax post 复杂的Json给后端解析,后端如果接收和解析 2.asp.net webform jquery easy-ui datagr ...
- visual studio 2013的使用和单元测试
Visual Studio 2013 是一个先进的开发解决方案,各种规模的团队通过它均可设计和创建引人注目的应用程序.Visual Studio 13在新功能包括C#和VB编译器和IDE支持完全基于. ...
- 2017-2018-2 1723《程序设计与数据结构》第九周作业 & 第二周结对编程 总结
作业地址 第九次作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1878 (作业界面已评分,可随时查看,如果对自己的评分有意 ...
- 剑指offer:数组中重复的数字
题目描述: 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度 ...
- Linux大页内存管理等---菜鸟初学
1. 查看linux的内存情况: free -m 2. 查看是否开启大页的方法: cat /proc/meminfo |grep -i HugePage AnonHugePages: 276480 k ...
- zookeeper和kafka的安装
一.安装zookeeper yum install -y java ##安装jdk1.6版本以上 wget http://mirror.bit.edu.cn/apache/zookeeper/zook ...
- codeforces279B
Books CodeForces - 279B When Valera has got some free time, he goes to the library to read some book ...
- BZOJ3456 城市规划 【生成函数】【FFT】
题目分析: 容易想到生成函数的构造方法. 令g(n)表示n个点的无向图个数,f(n)表示n个点的无向连通图的个数.式子是显然的. 容易发现式子是卷积的形式,写出生成函数,然后多项式求逆后多项式乘法即可 ...