我可以在同一页面上使用多个版本的jQuery吗？

我正在从事的项目需要在客户的网页上使用jQuery。客户将插入我们将提供的代码块，其中包括一些<script>元素，这些元素在<script>创建的<iframe>中构建了小部件。如果他们尚未使用最新版本的jQuery，则还可能（很可能）包含针对Google托管版本的jQuery的<script>。

问题在于某些客户可能已经拥有较旧的版本jQuery的安装。尽管这可能至少适用于最新版本，但我们的代码确实依赖jQuery库中最近引入的某些功能，因此，在某些情况下，客户的jQuery版本太旧了。我们不能要求它们升级到最新版本的jQuery。

有没有办法加载较新版本的jQuery，使其仅在我们的代码上下文中使用，而不会干扰，或影响客户页面上的任何代码？理想情况下，也许我们可以检查jQuery的存在，检测版本，如果版本太旧，则以某种方式加载最新版本以用于我们的代码。

我有加载的想法客户域中的<iframe>中的jQuery也包括我们的<script>，这似乎是可行的，但我希望有一种更优雅的方法（更不用说额外的<iframe>的性能和复杂性代价）。

我遇到了同样的问题。由于我在嵌入式脚本中只使用过jQuery几次，因此我决定完全放弃jQuery，而直接在JavaScript中直接做我需要做的事情。这个网站：youmightnotneedjquery.com非常有用。

#1 楼

是的，由于jQuery的noconflict模式，因此可行。 http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

然后，代替$('#selector').function();，您请执行jQuery_1_3_2('#selector').function();或jQuery_1_1_3('#selector').function();。

非常感谢，ceejayoz！这看起来是一个可行的解决方案-唯一的潜在问题是，我对您的代码解决方案的第一部分没有任何控制（将旧版jQuery分配给其他别名）。客户如何使用jQuery会有所不同，这超出了我的控制范围。我可以安全地使用后半部分，还是两个库都需要调用noConflict（）？

–锁
09-10-14在15:05

是的，您应该只能使用下半部分。

–ceejayoz
09-10-14在16:24

这真的对原始页面透明吗？如果他们在这段代码之后使用$或jQuery，这将引用他们自己的jQuery版本还是较新的jQuery版本（可能安装了更少的插件）？

– Wim
2011年1月17日23:18

@ceejayoz，如果您拥有一个在其中使用大量$的自调用函数，该怎么办。我们必须在该noconflict部分中将每个$更改为jquery_1_3_2 ？？？

– klewis
13年4月30日在17:38

@blachawk不，只是给它起别名。（function（$）{/ *此处的代码* /}（jquery_x_x_x））;

–FabrícioMatté
13年5月9日在22:58

#2 楼

在查看并尝试之后，我发现它实际上一次不允许运行多个jquery实例。在四处搜寻之后，我发现这只是个窍门，而且代码少了很多。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>var $j = jQuery.noConflict(true);</script>
    <script>
      $(document).ready(function(){
       console.log($().jquery); // This prints v1.4.2
       console.log($j().jquery); // This prints v1.9.1
      });
   </script>

因此，在“ $”之后添加“ j”就可以了我需要做。

$j(function () {
        $j('.button-pro').on('click', function () {
            var el = $('#cnt' + this.id.replace('btn', ''));
            $j('#contentnew > div').not(el).animate({
                height: "toggle",
                opacity: "toggle"
            }, 100).hide();
            el.toggle();
        });
    });

为了避免在很多地方重命名jquery变量，您可以将旧代码括在以下代码中：（function（$）{}）（$ j）

– Marinos An
18年4月23日在12:43

#3 楼

取自http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page：

原始页面加载了他的“ jquery.versionX .js”-$和jQuery属于版本X。
您现在将您的“ jquery.versionY.js”称为–现在$和jQuery属于版本Y，加上_$和_jQuery属于versionX。

my_jQuery = jQuery.noConflict(true);-现在$和jQuery属于版本X，_$和_jQuery可能为空，而my_jQuery是版本Y。

直到我转到链接，我才明白。 “当您加载jQuery.xxjs时，它将覆盖现有的$和jQuery变量。但是会保留它们的备份副本（在_ $和_jQuery中。）调用noConflict（true）可以恢复原来的状态。在您的js包含之前”

–科林
2012年2月21日12:14

将来，请更明确地引用外部资源。有关更多信息，请参见stackoverflow.com/help/referencing

–马特
2015年9月1日12:23在

#4 楼

可以加载使用它的jQuery的第二个版本，然后还原到原始版本，或者如果以前没有加载jQuery，则可以保留第二个版本。这是一个示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    var jQueryTemp = jQuery.noConflict(true);
    var jQueryOriginal = jQuery || jQueryTemp;
    if (window.jQuery){
        console.log('Original jQuery: ', jQuery.fn.jquery);
        console.log('Second jQuery: ', jQueryTemp.fn.jquery);
    }
    window.jQuery = window.$ = jQueryTemp;
</script>
<script type="text/javascript">
    console.log('Script using second: ', jQuery.fn.jquery);
</script>
<script type="text/javascript">
    // Restore original jQuery:
    window.jQuery = window.$ = jQueryOriginal;
    console.log('Script using original or the only version: ', jQuery.fn.jquery);
</script>

#5 楼

使用jQuery.noConflict()：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
    var $i = jQuery.noConflict();
    alert($i.fn.jquery);
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    alert($j.fn.jquery);
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var $k = jQuery.noConflict();
    alert($k.fn.jquery);
</script>

#6 楼

我想说的是，您必须始终使用jQuery最新或最近的稳定版本。但是，如果您需要对其他版本进行某些工作，则可以添加该版本并将$重命名为其他名称。例如，

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

如果使用$编写内容，请查看此处，您将获得最新版本。但是，如果您需要对旧的东西进行任何处理，则只需使用$oldjQuery而不是$即可。 >

#7 楼

绝对可以。此链接包含有关如何实现此目标的详细信息：https://api.jquery.com/jquery.noconflict/。

编程黑洞网