一起使用不同版本的 jQuery 和 jQueryUI

Using different versions of jQuery and jQueryUI together

提问by RyanP13

I am working on a project where their framework uses jQuery 1.3.2 and jQueryUI 1.7.2.

我正在开发一个项目，他们的框架使用 jQuery 1.3.2 和 jQueryUI 1.7.2。

Upgrading the versions in the framework is not a possibility so i wanted to run jQuery 1.4.4 and jQueryUI 1.8.5 in parallel.

升级框架中的版本是不可能的，所以我想并行运行 jQuery 1.4.4 和 jQueryUI 1.8.5。

I have seen that different versions of jQuery can be used in parallel like so:

我已经看到不同版本的 jQuery 可以像这样并行使用：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript">
        var j2 = $.noConflict(true);
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        var j4 = $.noConflict(true);
    </script>

But would this also hold true for the following:

但这是否也适用于以下情况：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript">
        var j2 = $.noConflict(true);
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var j4 = $.noConflict(true);
    </script>

采纳答案by Klemen Slavi?

AFAIK, there's no $.noConflict()equivalent for jQuery UI. You can, however, use a local copy of jQuery UI and wrap the whole JS using a similar trick to what you use for aliasing the different libraries:

AFAIK，$.noConflict()jQuery UI没有等效项。但是，您可以使用 jQuery UI 的本地副本，并使用与用于为不同库设置别名的技巧类似的技巧来包装整个 JS：

(function(jQuery) {
  // ... the jQuery UI lib code for jQuery 1.3.2
})(j2);

This could be elegantly implemented using a server-side build script or a handler that serves the JS files but wraps the contents with the above code.

这可以使用服务器端构建脚本或提供 JS 文件但使用上述代码包装内容的处理程序来优雅地实现。

Haven't tested this approach, so you may have to fiddle around with the function parameter (although I think it's safe to assume it uses jQueryto reference jQuery within the plugin code).

还没有测试过这种方法，所以你可能不得不摆弄函数参数（虽然我认为假设它用于jQuery在插件代码中引用 jQuery是安全的）。

The way you'd use this is declare both versions of jQuery:

您使用它的方式是声明两个版本的 jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">
    var j2 = $.noConflict(true);
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    var j4 = $.noConflict(true);
</script>

... and then include your UI code, as I've specified above.

...然后包括您的 UI 代码，正如我在上面指定的那样。

And no, you can't do this while referencing the UI JS files from Google CDN.

不，您不能在从 Google CDN 引用 UI JS 文件时执行此操作。

EDIT:The second code block in the question is actually a better solution than this answer, since it doesn't require wrapping the original UI code in a self-executing function and passing the specific version. Both approaches do result in exactly the same state on the page.

编辑：问题中的第二个代码块实际上是比这个答案更好的解决方案，因为它不需要将原始 UI 代码包装在自执行函数中并传递特定版本。两种方法都会导致页面上的状态完全相同。

回答by HMR

I got to this page because I have the same problem as described in the original question but the answer given does not completely solve it (anymore).

我进入此页面是因为我遇到了与原始问题中描述的相同的问题，但给出的答案并没有完全解决它（不再）。

I needed to add an auto suggest to a page that has a lot of existing code using jquery, there was no easy way to just update to the new jquery and jquery ui so tried to use the newer version next to the old one.

我需要使用 jquery 向具有大量现有代码的页面添加自动建议，没有简单的方法可以更新到新的 jquery 和 jquery ui，因此尝试在旧版本旁边使用较新版本。

Besides editing the jqueryui last line the jquery ui has a lot of jQuery references that you need to change as well so I used an editor that can replace using regular expression and replaced: \bjQuery\b with j$182

除了编辑 jqueryui 最后一行之外，jquery ui 还有很多 jQuery 引用需要更改，所以我使用了一个可以使用正则表达式替换的编辑器并替换为：\bjQuery\b with j$182

An in the page I added:

在我添加的页面中：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        var j2 = $.noConflict(true);
        </script>
<script type="text/javascript" src="jqueryui1.9.0.js"></script>

Now both existing script on the page and the new auto suggest are working.

现在页面上的现有脚本和新的自动建议都在工作。

回答by Taha Rehman Siddiqui

I just figured a solution and it works for me.

我只是想出了一个解决方案，它对我有用。

In the Jquery library, after the last line type

在 Jquery 库中，在最后一行类型之后

var mySelector = $;

Include the other version after you include this in your page.

在您的页面中包含此版本后，请包含其他版本。

now, in all the scripts that you want to use with this jquery version(even jquery ui and other libraries too), replace $ with mySelector. Use replaceall, there will be a couple of places, like in regex match functions where you would want to replace mySelector back to $. This problem was bugging me for quite a long time. And it just got solved.

现在，在您要与此 jquery 版本（甚至 jquery ui 和其他库）一起使用的所有脚本中，将 $ 替换为 mySelector。使用 replaceall，会有几个地方，比如在正则表达式匹配函数中，你想将 mySelector 替换回 $。这个问题困扰了我很长时间。它刚刚得到解决。

EDITTED : be sure that you do not replace any $ inside the jQuery original script.

编辑：确保您没有替换 jQuery 原始脚本中的任何 $ 。