Bootstrap 设置错误：未捕获 ReferenceError：未定义 jQuery 和未捕获错误：Bootstrap 的 JavaScript 需要 jQuery
Posted
技术标签:
【中文标题】Bootstrap 设置错误：未捕获 ReferenceError：未定义 jQuery 和未捕获错误：Bootstrap 的 JavaScript 需要 jQuery【英文标题】：Bootstrap Set Up Errors: Uncaught ReferenceError: jQuery is not defined & Uncaught Error: Bootstrap's JavaScript requires jQuery 【发布时间】：2016-02-17 17:27:24 【问题描述】：我正在创建一个引导模板。我收到两个错误，我无法弄清楚我做错了什么。当我搜索类似的问题时，似乎是脚本乱序，但我认为它们的位置正确。
两个错误：
Uncaught ReferenceError: jQuery is not defined
未捕获的错误：Bootstrap 的 javascript 需要 jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--IE Edge meta Tag-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Minified Bootstrap CSS from MaxCDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<title>Bootstrap 3.3.5</title>
<meta name="keywords" content="keywords, go, here">
<meta name="description" content="meta description goes here">
</head>
<body>
<h1>header</h1>
<p>Lorem ipsum dolor sit amet, an numquam platonem abhorreant mea, nec at eripuit tincidunt accommodare. Ut sit utinam ridens commune. Nec ad stet utroque periculis. Eu eum errem assueverit. Ius vitae definitionem ea.</p>
<!--jquery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- Bootstrap's JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<!--link to local js file-->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：老兄，你应该链接 jQuery 库而不是 jQuery UI）
只需添加此代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
从这里获得：https://developers.google.com/speed/libraries/
【讨论】：
【参考方案2】：答案就在错误中。你需要先引用jQuery，然后是Bootstrap CSS，然后你需要boostrap js。 您有 jQuery UI，但没有 jQuery JS 文件。要使用 jQuery UI，您需要 jQuery 普通文件和 UI 文件
按如下顺序列出：
-
引导 CSS 文件
您的 CSS 文件
jQuery js 库
引导 js 库
jQuery UI js 库
【讨论】：
【参考方案3】：jQuery UI 是在 jQuery 之上构建的，因此您还需要包含 jQuery。
<!--jquery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- Bootstrap's JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
【讨论】：
这不就是： 只是一个 HTML 注释，它实际上不会获取 jQuery 库。您需要将其替换为我添加的行。以上是关于Bootstrap 设置错误：未捕获 ReferenceError：未定义 jQuery 和未捕获错误：Bootstrap 的 JavaScript 需要 jQuery的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap - 未捕获的类型错误：无法读取复选框单击时未定义的属性“单击”
未捕获的错误：Bootstrap 的 JavaScript 在 Angular 4 上需要 jQuery
使用 Carousel 时 Jquery / Bootstrap “未捕获的类型错误”
未捕获的语法错误：Bootstrap.esm.min.js:6
未捕获的错误引导需要 jquery 在 bootstrap.min.js
Bootstrap 4，“未捕获错误：Bootstrap工具提示需要Tether（http://github.hubspot.com/tether/）”