如何在同一页面上运行不同版本的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");


        });
    }