两个库同时都定义了一个叫$的函数,所以在同时使用的时候会发生冲突。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代码部分使用$,可以使用命名空间的概念。将所有可以写到documentready()事件中的jQuery代码封装到里面,首先使用也jQuery.noConflict();返还$使用权。方法二中介绍的的将$绑定到其他对象中的方法,此时对于documentready()外的事件同样适用。

如何调用

  • jQuery(document).ready(function($){ })外需要使用jQuery时,使用jQuery( )代替$( )
  • jQuery(document).ready(function($){ })中需要使用jQuery时,使用jQuery( )
  • 在需要使用Prototype.js时,使用$( )

举例

  1. <script src="prototype.js"></script>
  2. <script src="jquery.js"></script>
  3. <script type="text/javascript">
  4. jQuery.noConflict();
  5. 在.ready()事件外,你可以使用jQuery( )调用jQuery
  6. jQuery(document).ready(function ($){
  7. //在.ready()事件内,你可以使用$( )调用jQuery
  8. });
  9. //在.ready()事件外,你可以使用$( )调用Prototype.js
  10. </script>

解决先加载jQuery后加载Prototype.js的问题

解决方法一

如何解决

两种情况只有这点不同,这里无需添加jQuery.noConflict();,来返还$使用权。

如何调用

  • 在需要使用jQuery时,使用jQuery( )代替$( )
  • 在需要使用Prototype.js时,使用$( )

解决方法二

如何解决

在引入jQuery后将jQuery的$绑定到其他对象上,例如$j,使用var $j = jQuery.noConflict();

如何调用

  • 在需要使用jQuery时,使用$j( )代替$( )
  • 在需要使用Prototype.js时,使用$( )

解决方法三

如何解决

如果还希望在jQuery代码部分使用$,可以使用命名空间的概念。将所有可以写到documentready()事件中的jQuery代码封装到里面。方法二中介绍的的将$绑定到其他对象中的方法,此时对于documentready()外的事件同样适用。

如何调用

  • jQuery(document).ready(function($){ })外需要使用jQuery时,使用jQuery( )代替$( )
  • jQuery(document).ready(function($){ })中需要使用jQuery时,使用jQuery( )
  • 在需要使用Prototype.js时,使用$( )

JavaScript中解决jQuery和Prototype.js同时引入冲突问题的更多相关文章

  1. 解决jquery和prototype库冲突问题

    在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...

  2. 在JavaScript中重写jQuery对象的方法

    jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...

  3. 转载 javascript中(function($){...})(jQuery)写法是什么意思

    javascript中(function($){...})(jQuery)写法是什么意思   这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 ...

  4. 深入了解JavaScript中基于原型(prototype)的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  5. 解决jQuery不同版同时引用的冲突

    今天研发的同事在开发一个新jQuery插件时,遇到一个揪心的问题.平台以前使用的 jQuery版本是1.2.6,偶,天啊!这是古代的版本啊! 由于很多功能基于老版本,不能删除啊,同志们都懂的! 于是我 ...

  6. 解决jquery与zepto等其它库冲突兼容的问题

    解决jquery与zepto等其它库冲突兼容的问题;(function ($) {    }) (jQuery); ;(function ($) {    }) (Zepto); 在Bootstrap ...

  7. 【转】JavaScript中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  8. Javascript中的继承与Prototype

    之前学习js仅仅是把w3school上的基本语法看了一次而已,再后来细看书的时候,书中会出现很多很多没有听过的语法,其中一个就是js的继承以及总能看到的prototype.我主要在看的两本js书是&l ...

  9. jQuery和Prototype的兼容性和冲突的五种解决方法

    第一种情况:先加载Prototype,再加载jQuery方法一:jQuery 库和它的所有插件都是在jQuery名字空间内的,包括全局变量也是保存在jQuery 名字空间内的. 使用jQuery.no ...

随机推荐

  1. [JSOI2016]病毒感染[dp]

    题意 有 \(n​\) 个村庄按标号排列,每个村庄有一个死亡速度 \(a_i​\) 表示每天死 \(a_i​\) 人(除非你治好这个村庄). 你从 1 号村庄出发,每天可以选择向相邻的村庄进发或者治愈 ...

  2. C#大型电商项目优化(二)——嫌弃EF与抛弃EF

    上一篇博文中讲述了使用EF开发电商项目的代码基础篇,提到EF后,一语激起千层浪.不少园友纷纷表示:EF不适合增长速度飞快的互联网项目,EF只适合企业级应用等等. 也有部分高手提到了分布式,确实,性能优 ...

  3. 记一次艰难的jquery easy-ui ajax post 体验

    分享的经验和教训是: 1.jquery easy-ui ajax post 复杂的Json给后端解析,后端如果接收和解析 2.asp.net webform jquery easy-ui datagr ...

  4. visual studio 2013的使用和单元测试

    Visual Studio 2013 是一个先进的开发解决方案,各种规模的团队通过它均可设计和创建引人注目的应用程序.Visual Studio 13在新功能包括C#和VB编译器和IDE支持完全基于. ...

  5. 2017-2018-2 1723《程序设计与数据结构》第九周作业 & 第二周结对编程 总结

    作业地址 第九次作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1878 (作业界面已评分,可随时查看,如果对自己的评分有意 ...

  6. 剑指offer:数组中重复的数字

    题目描述: 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度 ...

  7. Linux大页内存管理等---菜鸟初学

    1. 查看linux的内存情况: free -m 2. 查看是否开启大页的方法: cat /proc/meminfo |grep -i HugePage AnonHugePages: 276480 k ...

  8. zookeeper和kafka的安装

    一.安装zookeeper yum install -y java ##安装jdk1.6版本以上 wget http://mirror.bit.edu.cn/apache/zookeeper/zook ...

  9. codeforces279B

    Books CodeForces - 279B When Valera has got some free time, he goes to the library to read some book ...

  10. BZOJ3456 城市规划 【生成函数】【FFT】

    题目分析: 容易想到生成函数的构造方法. 令g(n)表示n个点的无向图个数,f(n)表示n个点的无向连通图的个数.式子是显然的. 容易发现式子是卷积的形式,写出生成函数,然后多项式求逆后多项式乘法即可 ...