0

我刚刚开始使用 HTML/CSS/jQuery，我尝试开始基本。目前我有一个 .html、.css 和 .js。我的 index.html 将加载 .css 但不会加载 .js。我的代码有问题吗？

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Super Mario!</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type="text/javascript" src="script.js"></script>

</head>
<body>
    <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
</body>
</html>

CSS

img {
    position: relative;
    left: 100px;
    top: 100px;
}

jQuery

$(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('img').animate({left: "-=10px"}, 'fast');
            break;
        case 83:
            $('img').animate({top: "+=10px"}, 'fast');
            break;
        case 87:
            $('img').animate({top: "-=10px"}, 'fast');
            break;
        case 68:
            $('img').animate({left: "+=10px"}, 'fast');
            break;
        default:
            break;
    }
});
});

请帮我弄清楚为什么这不起作用。一些附加信息，它们都位于我桌面上的同一个文件夹中。没有子文件夹。

4

4 回答 4

6

您在 JavaScript 文件中使用 jQuery 代码，但不要在 HTML 中包含 jquery Lib。

在加载脚本之前添加这一行（或者你可以用另一个链接替换到托管的 jQuery 库）（假设你使用当前的 jQuery 版本 - 否则包括适当的版本）：

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

所以你<head>应该看起来像这样：

<!-- some code -->
<head>
    <title>Super Mario!</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<!-- some code -->
于 2013-05-17T07:04:21.197 回答
1

您不包括 jQuery 库。将其包含在您的脑海中：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
于 2013-05-17T07:04:46.850 回答
0

从任何CDN添加jquery

<head>
    <title>Super Mario!</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
于 2013-05-17T07:07:27.483 回答
0

您的 jQuery 脚本未加载，因为您没有在 javascript 文件中的脚本之前添加 jQuery 库。其他答案很好，但我想扩展您可以从各种外部托管库中使用 jQuery。你可以使用任何你需要的版本，只要它与你正在做的事情兼容。

我个人使用CDNJS，它托管了很多有用的 javascript 库。您可以访问他们的网站并找到 jQuery，然后选择您想要的版本

CDNJS 上可用版本的屏幕截图

选择您需要的版本后，您将看到复制链接的选项，将其放入您的 src

在此处输入图像描述

你可以把它放在你的<head>或关闭之前</body>

示例 1

<head>
    <!-- meta tags and CSS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

示例 2

        <!-- other HTML and content -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

同样重要的是要注意，如果您添加任何其他 jQuery 插件或库，则应在 jQuery 之后但在您的自定义 JS 文件之前添加它。不要用库编辑文件，添加另一个文件，这可以是你的custom.js，main.js或者你想调用的任何文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="someplugin.js"></script>
<script type="text/javascript" src="script.js"></script>
于 2015-11-05T17:38:53.530 回答