网站上的JQuery和Prototype冲突

conflicted JQuery and Prototype on website

本文关键字：Prototype 冲突 JQuery 网站      更新时间：2023-09-26

我有一个使用Prototype的遗留网站。但是我还想使用JQuery。当Prototype和JQuery都覆盖$符号时，我如何在同一页面上使用它们？

默认情况下，jQuery使用"$"作为"jQuery"的快捷方式。但是，您可以通过在jQuery和其他库都加载后的任何时候调用jQuery.noConflict（）来覆盖默认值。例如： 
<html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });
     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

参见http://docs.jquery.com/Using_jQuery_with_Other_Libraries

除了使用.noConflict()方式，您还可以确定jQuery代码的范围。

<script>
(function($) {
//write your jQuery code here.
})(jQuery);
</script>

如果您想使用一些简写，请执行

var j$ = jQuery.noConflict();

现在您可以对jquery 使用j$而不是$

类似于Elementenpresser的答案，我建议在使用jQuery.noConflict（）的基础上；您可以用一个匿名函数包装整个jQuery代码，保持所有jQuery代码的完整性，而无需将所有"$"更改为"jQuery"。

  jQuery.noConflict();
  (function($){
    $("div").hide(); //will use jQuery
  })(jQuery);
 $("div").hide(); //will use prototype
 jQuery("div").hide(); //will use jQuery again.

您可以使用匿名函数包装所有使用jQuery的javascript文件。您根本不需要将$更改为jQuery。这也是一个性能改进，因为函数中声明的所有变量都不会附加到全局作用域，从而使应用程序更快。

相关文章：