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

Question

我正在处理的一个项目需要在客户的网页上使用jQuery。客户将插入我们将提供的一小段代码，其中包括几个<script>元素，这些元素用于创建<script>创建的小部件。如果他们还没有使用最新版本的jQuery，那么它也将包括Google的托管版本jQuery的<script>（很有可能）。

问题是，某些客户可能已经安装了旧版本的jQuery。虽然这可能工作，如果它至少是一个相当新的版本，我们的代码确实依赖于jQuery库中最近推出的一些功能，所以肯定会有客户的jQuery版本太旧的情况。我们不能要求他们升级到最新版本的jQuery。

有没有什么方法可以加载jQuery的新版本，只在我们的代码的上下文中使用，不会影响或影响客户页面上的任何代码？理想情况下，也许我们可以检查jQuery的存在，检测版本，如果它太旧，那么加载最新版本只是为了用于我们的代码。

我的想法是在客户域中的中加载jQuery，其中还包括我们的<script>，这似乎是可行的，但我希望有一种更优雅的方式来做到这一点（更不用说没有额外 s的性能和复杂性惩罚）。

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

Answer 2

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

• 原始页面加载自己的 “jquery.versionX.js” - $和jQuery属于versionX。
• 您称之为“jquery.versionY.js” - 现在$和jQuery属于版本Y，再加上_$和_jQuery属于版本X.
• my_jQuery = jQuery.noConflict(true); - 现在$和jQuery属于versionX，_$和_jQuery可能是空的，my_jQuery是versionY。

Answer 3

有可能加载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> 

Answer 4

看着这个和尝试它，我发现它实际上并没有让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(); 
     }); 
    }); 

Answer 5

您可以根据需要在页面上拥有许多不同的jQuery版本。

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

| Source

Answer 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而不是$。

下面是一个例子

$(function(){console.log($.fn.jquery)}); 
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)}) 

Demo

Answer 7

当然，是的，你可以。此链接包含有关如何实现该目标的详细信息：https://api.jquery.com/jquery.noconflict/。