如何将 jquery-1.10.2.js 和 jQuery-2.1.4.min.js 包含在一起答案

【问题标题】：How to include jquery-1.10.2.js and jQuery-2.1.4.min.js together如何将 jquery-1.10.2.js 和 jQuery-2.1.4.min.js 包含在一起
【发布时间】：2016-04-16 10:30:59
【问题描述】：

您好，我将 jQuery-2.1.4.min.js 和 jquery-1.10.2.js 放在一起，但出现错误：

custom.js:375 Uncaught TypeError: $(...).autocomplete is not a 功能

如果我删除 jQuery-2.1.4.min.js，那么我会在一个价格范围内遇到错误。所以我不能删除任何一个JS。

那么如何同时使用这两种功能才能使我的价格范围和自动完成功能正常工作？

脚本：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="mydirectorypath/js/jQuery-2.1.4.min.js"></script>

通过上面的代码，我收到错误 $(...).autocomplete is not a 功能

【问题讨论】：

使用jquery.noconflict 并查看this SO 帖子。
是的，但结果相同
你不应该两者都需要。该错误是您包含依赖于 jQuery 的脚本的顺序的结果。使用一个版本并确保它在所有依赖的插件和代码之前
但如果我删除其中一个，我的某些功能将停止工作。即使我更改了订单但没有结果。
真的没有意义。如果您支持较旧的浏览器，则只要在使用 jQuery 的任何内容之前包含它，并且在注册任何插件后不包含其他版本的 jQuery，1.10.2 版本应该可以正常工作。更具体地说明实际错误，而不仅仅是说“不工作”

标签： php jquery

【解决方案1】：

为了使用 jQuery 和 jQuery UI，您需要按以下顺序完成三件事：

jQuery UI CSS，以及任何自定义/主题
jQuery 库；通常最小化空间
jQuery UI 代码库，也已最小化。

为简单起见，以下是 CDN 中所有三个的示例：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

这是包含它们的正常顺序，通常在您的 <head> 标记中，因此如果在（以后）头部包含中使用它，它可以工作。

考虑到所有这些，如果我使用此处自动完成页面中的示例，以下是可以工作的代码和序列：https://jqueryui.com/autocomplete/

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
  $(function() {
    var availableTags = [
      "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure",
      "COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java",
      "JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
    ];
    $( "#myinput" ).autocomplete({
      source: availableTags
    });
  });
  </script>

然后，在正文中我的输入标签：

<input id="myinput" type="text"/>

除非您需要支持较旧的浏览器，否则您只需要 2.X 版本（此处演示 2.2.2）如果您确实需要支持较旧的浏览器，您应该只需要 1.X 版本。为了证明它有效，我创建了这个：https://jsfiddle.net/MarkSchultheiss/op7Lq06g/

编辑：

您的问题中缺少的 HTTPS 怎么样：为了匹配您的网站，您将其从链接的标签中排除，它会根据 HTML 规范自动将其放入以匹配您网站的页面源。示例：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

有关详细说明，包括指向该规范的链接，请参阅此问题：https://stackoverflow.com/a/36638189/125981

【讨论】：

我不明白你的评论。请说清楚。请注意，jQuery UI 自动完成功能适用于任一版本。我只能假设您指的是自动完成功能，因为您没有另行说明。请记住，对于您的问题，我们必须做出假设，因为您不包含实际使用您所指的任何东西的代码。您也没有指出包含 jQuery UI 的代码段，它必须在 jQuery 包含之后。

【解决方案2】：

可以在同一个页面中使用两个 jQuery。如下所示

<!-- load jQuery 2.1.4 -->
<script type="text/javascript" src="mydirectorypath/js/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
var jQuery_2_1_4 = $.noConflict(true);
</script>

现在你可以使用 jQuery_2_1_4 而不是 $

<!-- load jQuery 1.10.2 -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>

现在你可以使用 jQuery_1_10_2 而不是 $

【讨论】：

是的，您必须这样做。因为 jQuery 2.1.4 的某些功能不适用于 jQuery 1.10.2。所以你必须区分这两个jQuery的功能。
我可以删除其中一个吗？
是的，它比使用 noConflict() 更好
但如果我删除其中一个，我的价格范围或自动完成功能不起作用
在不同的版本中找到替换函数。