简体   繁体   English

为什么我的jQuery脚本无法加载?

[英]Why won't my jQuery script load?

I'm just getting started with HTML/CSS/jQuery and I tried starting basic. 我刚开始使用HTML / CSS / jQuery,并尝试过从入门开始。 Currently I have a .html, .css, and .js. 目前,我有一个.html,.css和.js。 My index.html will load the .css but will not load the .js. 我的index.html将加载.css,但不会加载.js。 Is there something wrong with my code? 我的代码有问题吗?

HTML 的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 的CSS

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

JQuery 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;
    }
});
});

Please help me figure out why this doesn't work. 请帮我弄清楚为什么这行不通。 Some additional info, they're all located in the same folder on my desktop. 一些其他信息,它们都位于我的桌面上的同一文件夹中。 There are no sub folders. 没有子文件夹。

You are using jQuery code in your JavaScript file, but do not include the jquery Lib in the HTML. 您正在JavaScript文件中使用jQuery代码,但HTML中不包含jquery Lib。

Add this line (or you can substitute with another link to a hosted jQuery library) before loading your script (assuming you use the current jQuery version - else include the appropriate version): 加载脚本之前,添加以下行(或者您可以用指向托管的jQuery库的另一个链接来替代)(假设您使用的是当前jQuery版本-否则包括适当的版本):

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

So your <head> should look like this: 因此,您的<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 -->

You're not including the jQuery library. 您不包括jQuery库。 Include this in your head: 包括在你的脑海:

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

Add jquery from any CDN 从任何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>

Your jQuery script is not loading because you did not add the jQuery library before your script in the javascript file. 您的jQuery脚本未加载,因为您没有在JavaScript文件中的脚本之前添加jQuery库。 The other answers are fine but I wanted to expand that you can use jQuery from various externally hosted libraries. 其他答案很好,但我想扩展一下,可以使用各种外部托管库中的jQuery。 And you can use any version that you require so long as it is compatible with what you are doing. 您可以使用所需的任何版本,只要它与您正在执行的操作兼容即可。

I personally use CDNJS which hosts a lot of useful javascript libraries. 我个人使用CDNJS ,该CDNJS托管许多有用的javascript库。 You can visit their site and find jQuery, then pick the version that you want 您可以访问他们的网站并找到jQuery,然后选择所需的版本

CDNJS可用版本的屏幕截图

After you pick the version that you need you will be presented with the option to copy the link, put that in your src 选择所需的版本后,将显示复制链接的选项,并将其放入src

在此处输入图片说明

You can either put that in your <head> or before the closing </body> 您可以将其放在<head>或结束</body>

Example 1 例子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>

Example 2 例子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>

It is also very important to note that if you add any other jQuery plugin or library that it should be added after jQuery but before your custom JS file. 还有一点非常重要,请注意,如果添加任何其他jQuery插件或库,则应在jQuery之后但自定义JS文件之前添加它。 Do not edit the files with the libraries, add another file, this can be your custom.js , main.js or whatever you want to call it. 不要使用库编辑文件,而是添加另一个文件,该文件可以是您的custom.jsmain.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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM