在同一页面中使用 JQuery 和 Prototype答案

【问题标题】：Using JQuery and Prototype in the same page在同一页面中使用 JQuery 和 Prototype
【发布时间】：2010-10-01 20:52:34
【问题描述】：

我的几个页面同时使用了 JQuery 和 Protoype。自从我升级到 JQuery 1.3 版后，这似乎引起了问题，因为这两个库都定义了一个名为“$”的函数。

JQuery 提供了一个函数 noConflict() ，它将 $ 的控制权交给可能正在使用它的其他库。所以看来我需要浏览所有看起来像这样的页面：

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>

并将它们更改为如下所示：

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>

然后我应该能够将“$”用于 Prototype，将“$j”（或“jQuery”）用于 JQuery。我对在每个相关页面中复制这两行代码并不完全满意，并希望在某些时候有人可能会忘记将它们添加到新页面中。我希望能够做到以下几点

创建一个文件 jquery-noconflict.js，其中“包含”jquery.js 和上面显示的 2 行代码
在我的所有 JSP/HTML 页面中导入 jquery-noconflict.js（而不是 jquery.js）

但是，我不确定是否可以按照我描述的方式将一个 JS 文件包含在另一个文件中？当然，另一种解决方案是直接将上面的 2 行代码添加到 jquery.js，但如果我这样做，我需要记住每次升级 JQuery 时都这样做。

【问题讨论】：

我提供的答案对你有用吗？
不知道，我问这个问题已经 3 年了...
好的.. :) 我错过了.. :) 但我认为这个原则是正确的，因为我尝试过......
显然这是旧的，但我有一种情况，我不得不在 63 个 html 文件中更改 5 行代码（我没有建立网站）。一些正则表达式替换和替换文件在几秒钟内就完成了。 Notepad++ 会在有限的程度上做到这一点，而 submlime 文本编辑器就像冠军一样。
@DavidHobs：崇高+1！这是自切片面包以来最好的东西！

标签： javascript jquery prototypejs

【解决方案1】：

目前你可以这样做：

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

然后，使用 jQuery 作为 $j() 和 Prototype 的 $()。

【讨论】：

这在类似的问题上对我很有帮助。谢谢你jmonteiro :)

【解决方案2】：

似乎最简单的答案是硬着头皮，包括你的 noConflict 行。当然，如果您的页面没有使用共享标题，那么该解决方案可能不是最好的。

【讨论】：

【解决方案3】：

这个解决方案效果很好：

jQuery.noConflict();
var $j = jQuery;

现在使用$j 代替$ 作为您的jQuery 代码，例如：

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});

【讨论】：

【解决方案4】：

我经历了一段时间。这很烦人，最后我决定淘汰所有旧的 Prototype 东西并用 jQuery 替换它。我确实喜欢 Prototype 处理一些 Ajax 任务的方式，但是为了维护所有没有冲突的东西而付出代价是不值得的。

【讨论】：

+1 减少使用的框架总是一个好主意。不仅在冲突方面，而且在轻量级应用程序事件方面，如果它需要一些重构以消除原型。

【解决方案5】：

就像给偶然发现这一点的其他人的便条一样。这里描述了解决方案（特别提到原型）： http://docs.jquery.com/Using_jQuery_with_Other_Libraries

【讨论】：

【解决方案6】：

您能不能只在 jquery.js 源文件中包含 jQuery = noConflict() 代码？为什么需要这样定义？

【讨论】：

【解决方案7】：

您的jquery-noconflict.js 应如下所示（确保所有内容都在一行中）：

document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");

... 而你的包含（正如你已经指出的那样）应该是这样的：

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

这个解决方案可以解决我认为的所有要求。

【讨论】：

【解决方案8】：

<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

或

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

编辑：

我尝试了这个建议，但最后两行产生了错误

jQuery is not defined

【讨论】：

您需要在脚本加载时指定回调以运行无冲突代码...只需执行 .appendChild(scripty) scripty.onload = setNoconflict;函数 setNoconflict(){ jQuery.noConflict(); $j = jQuery; }
@jacobangel 您的第一个示例有效，但我删除了一个错字（参见差异）并进行了更正：在document.write(..) 之后关闭脚本标签并打开一个新标签很重要jQuery.noConflict()是在。否则 jQuery 没有定义，因为 document.write 在当前脚本块之后附加了 jQuery 脚本。

【解决方案9】：

你可以先调用jquery然后设置

var $j = jQuery;

在这种情况下原型将控制$。

或者，您可以使用完整的 jQuery 函数名称 (jQuery) 来引用 jQuery。

【讨论】：

【解决方案10】：

像这样在 jQuery 下使用 Prototype：

<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>


<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />

在这种情况下jQuery函数会产生问题，所以你可以用这个来解决问题：

<script type="text/javascript">
     jQuery.noConflict();
     var JQ = jQuery;//rename $ function
</script>

【讨论】：

【解决方案11】：

如果我是你，我会像你在上面所说的那样将我的无冲突代码放入一个 JavaScript 包含文件中，然后找出一些我需要设置这些内容的过程，我需要将这些内容包含在我的所有页面中一个中心的地方。如果您使用的是直接的 HTML 文件，并且您没有任何类型的模板/脚本功能服务器端来处理文档中包含的内容，那么总是有可能进行服务器端包含。

无论哪种方式，当您需要更新分析代码或网站页脚时，您这次更新每个页面所经历的痛苦将会再次出现。

【讨论】：

【解决方案12】：

你需要把它加载到你的public/javascript/application.js

jQuery.noConflict();

var $j = jQuery;

这也是一篇好文章，可能会有所帮助。

JQuery & Prototype working together

【讨论】：