我试图使用Bootstrap使一个程序的接口。我添加了jQuery 1.11.0到<head>标签,并认为这是,但当我在浏览器中启动网页jQuery报告一个错误:

Uncaught Error: Bootstrap's JavaScript requires jQuery

我已经尝试使用jQuery 1.9.0,我已经尝试在几个cdn上托管副本,但我不能让它工作。有人能指出我做错了什么吗?


当前回答

你应该首先加载jQuery,因为Bootstrap使用jQuery特性。是这样的:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">
        
<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

其他回答

试试这个

改变JS文件的顺序。它应该如下所示。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

如果这种情况只发生在IE内网,请检查兼容性设置并取消选中“以兼容性模式显示内网站点”。

IE - >设置- >兼容性

如果代码看起来不错,请验证jQuery是否成功加载到服务器。在我的例子中,jQuery文件是由我的IDE发布到服务器的,但是web服务器只有一个0 KB的文件存根。由于没有内容,服务器无法将文件提供给浏览器。

在重新发布文件并验证服务器实际上接收了整个文件后,我的网页不再向我提供错误。

如果你在一个只有浏览器的环境中,使用SridharR的解决方案。

如果你是在Node/CommonJS +浏览器环境(例如electron, Node -webkit等);这个错误的原因是jQuery的导出逻辑首先检查模块,而不是窗口:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

注意,它通过module导出自己。这里是出口;所以jQuery和$没有被分配给window。

所以要解决这个问题,<script src="path/to/jquery.js"></script>;

你自己用require语句赋值就可以了:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

注意:如果你的电子应用程序不需要nodeIntegration,将其设置为false,这样你就不需要这个解决方法了。

我正在使用NodeJS,得到了同样的错误。和其他答案一样,这个问题也是因为在Bootstrap之前需要加载JQuery;然而,由于NodeJS的特性,这个更改必须应用在pipeline.js文件中。

在pipeline.js中的变化是这样的:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

我还使用grunt来帮助,它自动改变了主html页面的顺序:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

希望能有所帮助!你没有说你的环境是什么,所以我决定发布这个答案。