Question

我刚刚开始使用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;
    }
});
});

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

Answer 1

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

在加载脚本之前添加此行（或者您可以用另一个指向托管jQuery库的链接替换）（假设您使用当前的jQuery版本 - 否则包含相应的版本）：

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

所以你的<head>应该是这样的：

 <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> 

Answer 2

你没有包含jQuery库。将此包含在您的脑海中：

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

Answer 3

从任何 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>

Answer 4

您的jQuery脚本未加载，因为您没有在javascript文件中的脚本之前添加jQuery库。其他答案很好，但我想扩展您可以使用来自各种外部托管库的jQuery。并且您可以使用您需要的任何版本，只要它与您正在执行的操作兼容即可。

我个人使用http://www.mywebsite.hu/auth/activate/1/8ef760c2345d21654ae92f5a70017f5e来托管很多有用的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>

为什么我的jQuery脚本不会加载？

HTML

CSS

JQuery的

4 个答案:

示例1

示例2