我可以在同一頁面上使用多個版本的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/。