两个库同时都定义了一个叫$的函数,所以在同时使用的时候会发生冲突。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时,使用$( )

举例

<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代码部分使用$,可以使用命名空间的概念。将所有可以写到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. R实战 第十一篇:处理缺失值

    在真实的世界中,缺失数据是经常出现的,并可能对分析的结果造成影响.在R中,经常使用VIM(Visualization and Imputation of Missing values)包来对缺失值进行 ...

  2. 关于用tesseract和tesserocr识别图片的一个问题

    对于像我这样初学python网络爬虫的freshman来说,软件的准备和环境的配置能让我们崩溃.其中用刚安装好的tesseract和tesserocr库测试识别验证码就是其中一例. 这里我要测试的验证 ...

  3. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  4. 同步手绘板——android端下笔后颜色变化

    实现效果 : 在设计之初我们以为是改变笔线条的粗细来实现类似效果,后来通过找其他相关软件比对发现是不改变线条的粗细,通过改变透明度实现下笔后颜色的渐变,虽然已实现,但渐变效果很一般,不流畅,算法还待优 ...

  5. Hot code replace (HCR)

    https://wiki.eclipse.org/FAQ_What_is_hot_code_replace%3F https://zhidao.baidu.com/question/195505558 ...

  6. Docker安装指定版本

    今天新增一个Docker服务器,Docker安装顺利,启动hello-world测试的时候却出现了问题: $ docker run hello-worldUnable to find image 'h ...

  7. 转帖 Oracle 主键的处理方法 http://www.cnblogs.com/Richardzhu/p/3470929.html

    Oracle之主键的创建.添加.删除操作   一.创建表的同时创建主键约束 1.1.无命名 SQL> create table jack (id int primary key not null ...

  8. webstrom 安装Babel

    https://www.jianshu.com/p/b9bd2ec9ec80 https://www.cnblogs.com/zhishaofei/p/6061568.html https://blo ...

  9. sleep、yield、wait、join的区别(阿里面试)

    1.  Thread.sleep(long) 和Thread.yield()都是Thread类的静态方法,在调用的时候都是Thread.sleep(long)/Thread.yield()的方式进行调 ...

  10. js timeout

    setTimeOut(“”,毫秒):調用函數時,不是立刻執行,而是間隔一定的時間后在執行: clearTimeOut():清除計時器