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时，使用$( )