jQuery 未定义 twitter bootstrap答案

【问题标题】：jQuery is not defined twitter bootstrapjQuery 未定义 twitter bootstrap
【发布时间】：2013-10-30 10:28:02
【问题描述】：

我收到这个错误，说 jQuery 没有定义。我想使用 twitter 引导程序和 jQuery-UI。在我的<head> 中，我添加了必要的 CSS 和 JS。我注意到 jQuery-UI 页面使用 1.9.1 jQuery，最新版本是 1.10.2。所以我假设发生了某种冲突。 Twitter bootstrap 需要 jQuery，因此可能会导致错误。或者我做错了什么。

头：

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

错误：

Uncaught ReferenceError: jQuery is not defined          bootstrap.min.js:6
(anonymous function)                                    bootstrap.min.js:6

【问题讨论】：

Jquery 需要在 bootstrap 之前列出。
为什么要包含两个版本的 jQuery？
@j08691 jQuery UI 站点链接到使用该版本，我查找了一些关于 JS 向后兼容性的信息。我读到它很好，但有时可能会出现错误，所以我将两者都包括在内。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

先加载 jQuery！

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

【讨论】：

总是在 JS 之前加载 CSS
理想情况下，您会在 HTML 之后加载 javascript，因此就在 </body> 之前 - 直到那时才使用它，这样可以加快页面加载速度。
对我不起作用。我在 Bootstrap 之前有 jQuery 并得到了错误！
为什么你有几次调用jquery。你能解释一下吗？
@tymeJV - 非常感谢！ :D

【解决方案2】：

这很可能是因为两个原因：

您正在加载 jQuery 两次；删除其中一个（最好是旧版本）。
您在加载 jQuery 之前加载 bootstrap.min.js（阅读文档here）。

你需要做的是：

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />

【讨论】：

在 jQuery 之前加载 bootstrap.min.js 似乎是我的问题。干杯。

【解决方案3】：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

在 bootstrap 上方添加 jquery js 文件

【讨论】：

【解决方案4】：

我已经对此进行了测试，这个顺序似乎效果最好。

加载 CSS
加载 jQuery
加载 引导程序
加载 jQuery UI

【讨论】：