如何将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-2.1.4.min.js和jQuery-1.10.2.js包含在一起,但我收到错误:

custom.js:375未捕获类型错误:$(…)。自动完成不是功能

如果我删除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>

根据上面的代码,我得到错误$(…)。自动完成不是函数

可以在同一页面中使用两个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_10_2而不是$

为了使用jQuery和jQuery UI,您需要以下三件事:

  1. jQuery UI CSS,以及任何自定义/主题
  2. jQuery库;通常最小化空间
  3. 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