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 ...
随机推荐
- RabbitMQ 优先级队列-为队列赋权
RabbitMQ 消息收发是按顺序收发,一般情况下是先收到的消息先处理,即可以实现先进先出的消息处理.但如果消息者宕机或其他原因,导致消息接收以后,未确认,那么消息会重新Requeue到队列中,就打破 ...
- Java 基础之一对象导论
对象导论 1.1 抽象过程 所有编程语言都提供抽象机制.人们所能解决的问题的复杂性直接取决于抽象的类型和质量. 汇编语言是对底层机器的轻微抽象. 我们将问题空间中的元素及其再解空间中的表示称为对象.这 ...
- Jmeter(二十八)_Docker+Jmeter+Gitlab+Jenkins+Ant(容器化的接口自动化持续集成平台)
这套接口自动化持续集成环境已经部署差不多了,现在说说我的设计思路 1:利用Docker容器化Gitlab,Jenkins,Jmeter,Ant,链接如下 Docker_容器化gitlab Docker ...
- python-scapy学习笔记-(1)
主要功能函数sniff sniff(filter="",iface="any",prn=function,count=N) filter参数允许我们对Scapy ...
- dpkg:错误:正在解析文件 '/var/lib/dpkg/updates/0014' 第 0 行附近:在字段名 #padding 中有换行符问题的解决方法
解决方案如下: sudo rm /var/lib/dpkg/updates/* sudo apt-get update python@ubuntu:~/Desktop/_Welcome_.jpg.ex ...
- PEP8 Python编程规范
官方文档: https://www.python.org/dev/peps/pep-0008/ ---------------------------------------------------- ...
- CentOS6下OpenLDAP+PhpLdapAdmin基本安装及主从/主主高可用模式部署记录
下面测试的部署机ip地址为:192.168.10.2051)yum安装OpenLDAP [root@openldap-server ~]# yum install openldap openldap- ...
- 作业20171123 beta-review 成绩
申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年12月13日 17:00. 成绩 review NABCD-评论 SPEC-评论 bug found 答复 bugfi ...
- 对PS的评价
Photoshop(简称:PS)是电脑上的图像处理软件:对于广大Photoshop爱好者而言,PS亦用来形容通过该类图形处理软件处理过的图片,即非原始.非未处理的图片:多数人对于这软件的了解仅限于“一 ...
- Bing词典案例分析
一.调研评测 Bug 1 : 当鼠标移动到可点击的地方的时候,光标的样子并没有变成手指状而是插入符号状.这影响了用户对按钮是否可用的判断,也会让用户在一定程度上不适应,不利于软件的长期发展. Bug ...