如何在同一頁面上運行不同版本的jQuery？

Question

我的公司購買了一個在頁面上呈現ASP.NET控件的產品。 此控件使用jQuery 1.2.3並向頁面添加腳本標記以引用它。 如果以任何方式修改控件（包括修改引用不同版本的jQuery），控件的開發人員將不支持使用該控件。

我即將開始開發自己的控件，並希望使用jQuery 1.3的功能和速度改進。 這兩個控件都需要存在於同一頁面上。

如何讓購買的控件使用jQuery 1.2.3和新的自定義開發來使用jQuery 1.3？ 出於好奇，如果我們要使用另一個需要引用另一個版本的jQuery的控件呢？

Answer 1

您可以通過在無沖突模式下運行您的jQuery版本來實現此目的。 “沒有沖突”模式是讓jQuery在其他框架（如原型）上運行的典型解決方案，也可以在這里使用，因為它本質上是你加載的每個jQuery版本的命名空間。

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

這個改變意味着你想要使用的任何jQuery東西需要使用jq13而不是$來調用，例如

jq13("#id").hide();

讓兩個版本在同一頁面上運行並不理想，但如果你別無選擇，那么上面的方法應該允許你一次使用兩個不同的版本。

出於好奇，如果我們要使用另一個需要引用另一個版本的jQuery的控件呢？

如果你需要添加另一個版本的jQuery，你可以擴展上面的內容：

<script src="jQuery1.3.js"></script>
<script>
    jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
    jq131 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

變量jq13和jq131將分別用於您需要的版本特定功能。

重要的是原始開發人員使用的jQuery最后加載 - 原始開發人員可能在假設$()將使用他們的jQuery版本的情況下編寫代碼。 如果您在他們之后加載另一個版本， $將被您加載的最后一個版本“抓取”，這意味着原始開發人員的代碼在最新的庫版本上運行，使得noConflicts有點多余！

Answer 2

正如所說的jQuery.noConflict您可以使用jQuery.noConflict執行此操作，但在聲明變量時不要忘記var 。 像這樣。

<script src="jQuery1.3.js"></script>
<script>
    var jq13 = jQuery.noConflict(true);
</script>

<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>

您可以通過在函數})之后添加（jq13）將所有$連接到jq13。 像這樣

(function($) {
 ... 
})(jq13); 

Answer 3

似乎訂單無關緊要......例如： http ： //gist.github.com/136686 。 控制台輸出位於頂部，所有版本似乎都在正確的位置。

Answer 4

工作是假的

var jq16 = $.noConflict(false);

Answer 5

在第二個版本中，將變量聲明為$ .noConflict（true）。 並使用聲明的變量代替jquery代碼中使用的$。 請檢查以下代碼：此代碼在聲明第二版jquery之后使用：

<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) {

        var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
        var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
        $ddl.select2();
        $ddl1.select2();

        $ddl.bind("change keyup", function () {
            $ddl.fadeIn("slow");


        });

        $ddl.bind("change keyup", function () {
            $ddl1.fadeIn("slow");


        });
    }