0

我最近一直在研究 Jquery，在研究了 html、CSS 和 JavaScript 之后，发现了一个非常重要的细节（至少对我来说）。在我写完一些基本代码、修复错误、将其链接到页面并打开它之后，我的脚本无法加载。我最初的反应是我有错，但事实并非如此！http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1?curriculum_id=50a3fad8c7a770b5fd0007a1是我学习 Jquery 的网站，它有一个很酷的（至少对我而言）示例使用它。我复制了它的示例检查 50 次，以确保它们正确链接并且每次代码都不执行任何操作！

现在我自己做了一些研究，据我所知：

  1. 其他人也有同样的问题。
  2. 我可能需要图书馆的在线资源
  3. 官方没有就此提出任何问题

无论您有什么解决方案，我都提前感谢您，因为我相信这将帮助许多有此问题的人。我还没有尝试过其他浏览器（还），但无论这是否能解决问题，我都不会将我的网站限制在某个浏览器上。

代码类型：

html:

<!DOCTYPE html>
<html>
    <head>
        <title>Magic!</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script src="jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="yellow"></div>
        <div id="green"></div>
    </body>
</html>

CSS：

div {
    height:100px;
    width:100px;
    display: inline-block;
}

#red {
     background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

脚本：

$(document).ready(function() {
   $('div').mouseenter(function() {
       $(this).animate({
           height: '+=10px'
       });
   });
   $('div').mouseleave(function() {
       $(this).animate({
           height: '-=10px'
       }); 
   });
   $('div').click(function() {
       $(this).toggle(1000);
   }); 
});

编辑：如果您愿意，请编写您将使用的脚本。PS 我已经看过http://learn.jquery.com/about-jquery/how-jquery-works/并没有解决我的问题。

Edit2：我已经下载了 jquery-1.10.1.min.js 并将它放在同一个文件夹中，并且已经链接它（假设它是正确的）并且它没有工作。我的代码如上。

阅读本文以帮助我：好吧，显然我做错了什么。因此，有人可以详细列出要做什么（转到、单击、下载、下载到）和示例文本来尝试一下，因为在尝试这样做 12 多个小时后开始变得神经紧张。提前谢谢^_^

4

2 回答 2

1

发生的事情是您没有链接到 jquery。该网站（codeacademy）像 jsfiddle 或任何网络基础“IDE”一样为您完成。

你可以在这里下载

然后在您的代码中添加引用，如下所示：

<script src="Scripts/jquery-1.7.1.min.js"></script>
于 2013-06-03T21:02:34.340 回答
1

令人惊讶的是，您链接的培训网站不包含 jQuery 的链接！（恕我直言，培训网站上的一个大问题）。

您可以<head>通过cdn添加指向您的链接。这样你就不必下载任何东西（对初学者来说更容易）。

<head>
    <title>Magic!</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type="text/javascript" src="script.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
</head>

JsFiddle是玩此类代码的好地方。为了完整起见，其余代码如下所示：

<script>
    $(document).ready(function () {
        $('div').mouseenter(function () {
            $(this).animate({
                height: '+=10px'
            });
        });
        $('div').mouseleave(function () {
            $(this).animate({
                height: '-=10px'
            });
        });
        $('div').click(function () {
            $(this).toggle(1000);
        });
    });
</script>

<style>
    div {
    height:100px;
    width:100px;
    display: inline-block;
}

#red {
     background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

</style>
于 2013-06-03T21:12:31.640 回答