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 ...
随机推荐
- R实战 第十一篇:处理缺失值
在真实的世界中,缺失数据是经常出现的,并可能对分析的结果造成影响.在R中,经常使用VIM(Visualization and Imputation of Missing values)包来对缺失值进行 ...
- 关于用tesseract和tesserocr识别图片的一个问题
对于像我这样初学python网络爬虫的freshman来说,软件的准备和环境的配置能让我们崩溃.其中用刚安装好的tesseract和tesserocr库测试识别验证码就是其中一例. 这里我要测试的验证 ...
- iOS APP 中H5视频默认全屏播放问题解决
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
- 同步手绘板——android端下笔后颜色变化
实现效果 : 在设计之初我们以为是改变笔线条的粗细来实现类似效果,后来通过找其他相关软件比对发现是不改变线条的粗细,通过改变透明度实现下笔后颜色的渐变,虽然已实现,但渐变效果很一般,不流畅,算法还待优 ...
- Hot code replace (HCR)
https://wiki.eclipse.org/FAQ_What_is_hot_code_replace%3F https://zhidao.baidu.com/question/195505558 ...
- Docker安装指定版本
今天新增一个Docker服务器,Docker安装顺利,启动hello-world测试的时候却出现了问题: $ docker run hello-worldUnable to find image 'h ...
- 转帖 Oracle 主键的处理方法 http://www.cnblogs.com/Richardzhu/p/3470929.html
Oracle之主键的创建.添加.删除操作 一.创建表的同时创建主键约束 1.1.无命名 SQL> create table jack (id int primary key not null ...
- webstrom 安装Babel
https://www.jianshu.com/p/b9bd2ec9ec80 https://www.cnblogs.com/zhishaofei/p/6061568.html https://blo ...
- sleep、yield、wait、join的区别(阿里面试)
1. Thread.sleep(long) 和Thread.yield()都是Thread类的静态方法,在调用的时候都是Thread.sleep(long)/Thread.yield()的方式进行调 ...
- js timeout
setTimeOut(“”,毫秒):調用函數時,不是立刻執行,而是間隔一定的時間后在執行: clearTimeOut():清除計時器