jquery - Bootstrap 中找不到 jQuery 库

Question

在我网站的部分标题中，我有以下资源:

HTML 代码:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>

问题是我收到此错误:

Uncaught Error: Bootstrap's JavaScript requires jQuery

此错误是什么以及如何解决？ 它们发布资源的顺序是否错误？

您能告诉我如何修复这个错误吗？

提前致谢!

Answer 1

这是因为您在引用 jQuery 之前尝试使用(例如，您正在引用脚本文件)Bootstrap。

jQuery 是 Bootstrap 的先决条件，必须首先引用，如 Bootstrap 站点上所述:Bootstrap - Getting Started

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

<小时/>

虽然您在标记中包含对 jQuery 的引用，但请务必注意引用出现的顺序。
当您的页面运行时，JavaScript 引擎将从该列表的顶部启动，然后逐一处理，按顺序运行其中的代码。
由于 BootStrap 在列表中的位置比 jQuery 更高，因此当 JavaScript 引擎访问它并尝试运行它时，它还不知道 jQuery 是什么，因此会失败，因为 Bootstrap 代码尝试在其中使用 jQuery 的位它。
然而，如果 jQuery 首先由 JavaScript 引擎解析，那么当它到达 BootStrap 代码时它就已经知道它是什么了，一切都会好起来的!

所以，为了澄清这一点，这一行:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

需要出现在该行之前:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

在您的标记中。

像这样:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<!-- Include jQuery before any scripts that depend upon it -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<!-- Include Bootstrap after it's dependency (jQuery) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>