如何在同一页面上运行不同版本的jQuery？

我公司购买了在页面上呈现ASP.NET控件的产品。该控件使用jQuery 1.2.3并将脚本标签添加到页面以引用它。如果控件以任何方式修改（包括修改以引用其他版本的jQuery），则控件的开发人员将不支持使用该控件。

我将开始开发自己的控件，并希望使用jQuery 1.3的功能和速度改进。这两个控件都需要存在于同一页面上。

如何允许购买的控件使用jQuery 1.2.3和新的自定义开发使用jQuery 1.3？同样出于好奇，如果我们要使用一个需要引用另一个版本的jQuery的附加控件怎么办？

您可以通过在无冲突模式下运行jQuery版本来实现。“无冲突”模式是使jQuery与其他框架（例如prototype）一起在页面上工作的典型解决方案，并且也可以在这里使用，因为它实质上是您加载的每个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>

此更改将意味着您需要使用jq13而不是调用要使用的任何jQuery东西$，例如

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一定程度的冗余！

正如ConroyP所说的，您可以这样做，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); 

顺序似乎无关紧要...例如：http : //gist.github.com/136686。控制台输出在顶部，所有版本似乎都在正确的位置。

使工作虚假

var jq16 = $.noConflict(false);

在第二个版本中，将变量声明为$ .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");


        });
    }