Question

我的几个页面同时使用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使用'$'，为JQuery使用'$ j'（或'jQuery'）。我并不完全乐意在每个相关页面中复制这两行代码，并期望在某些时候有人可能忘记将它们添加到新页面。我希望能够做到以下

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

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

Answer 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的$()。

Answer 2

似乎最简单的答案是咬紧牙关，并包括你的noConflict线。当然，如果您的网页没有使用共享标头，那么该解决方案可能不是最好的。

Answer 3

此解决方案运行良好：

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

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

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

Answer 4

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

Answer 5

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

Answer 6

正如其他人偶然发现的那样。这里描述了解决方案（具体提到原型）： http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Answer 7

<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

Answer 8

您可以先调用jquery，然后设置

var $j = jQuery;

在这种情况下，

原型将控制$。

或者，您可以通过使用完整的jQuery函数名称（jQuery）来引用jQuery。

Answer 9

您的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>");

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

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

此解决方案可以满足您的所有要求。

Answer 10

如果我是你，我会把我的无冲突代码放到像你上面所说的JavaScript包含文件中，然后找出一些我需要在我的所有页面中设置这些东西的过程。一个中心位置。如果您正在使用直接的HTML文件，并且您没有任何形式的模板/脚本功能服务器端，那么文档中包含的内容就总是存在进行服务器端包含的可能性。

无论哪种方式，当您需要更新分析代码或网站页脚时，此次更新每个网页时遇到的痛苦都会再次出现。

Answer 11

使用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>

Answer 12

您需要在public/javascript/application.js

中加载它

jQuery.noConflict();

var $j = jQuery;

这也是一篇可能有用的好文章。

JQuery & Prototype working together

在同一页面中使用JQuery和Prototype

12 个答案: