无法将 jQuery 链接到 HTML答案

【问题标题】：Can't link jQuery to HTML无法将 jQuery 链接到 HTML
【发布时间】：2017-01-04 00:47:40
【问题描述】：

我在这里找到了相关文章，但没有一篇有用。我正在从 codecademy 学习 jQuery，当我尝试自己练习它时，什么也没有发生。 HTML 看起来像这样：

<!DOCTYPE html>
<html>
    <head>
       <title>Result</title>
        <link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
        <script type='text/javascript' src='MovieSiteBehavior.js'></script>
    </head>
    <body>
        <div></div>   
    </body>
</html>

CSS 看起来像这样：

div {
   height: 100px;
   width: 100px;
   background-color: #FA6900;
   border-radius: 5px;
}

Javascript 看起来像这样：

$(document).ready(function() {
$('div').click(function() {
    $('div').fadeOut('slow');
});
});

应该会出现一个橙色的矩形，当你点击它时它应该会消失，但实际上它只是出现了，我不能让它消失。（codecademy 上的相同示例可以正常工作） P.S 有些人指责我的问题不好，如果您认为这是一个不好的问题，请解释原因。

【问题讨论】：

您需要包含jquery 库。它不存在。
@Dekel 我该怎么做？在 codecademy 示例中没有包含 jQuery。
查看这里：stackoverflow.com/documentation/jquery/211/…

标签： javascript jquery html css

【解决方案1】：

看起来您忘记添加 jQuery 库 - 工作正常。一个建议是在点击侦听器中使用$(this)，这样您就可以隐藏您点击的相同的div - 请参阅下面带有2个div的演示：

$(document).ready(function() {
  $('div').click(function() {
    $(this).fadeOut('slow');
  });
});

div {
  height: 100px;
  width: 100px;
  background-color: #FA6900;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<br/>
<div></div>

【讨论】：

【解决方案2】：

您没有添加 jQuery 库。这就是为什么它不起作用。尝试添加：

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

进入<head>

【讨论】：

【解决方案3】：

将此添加到<body> 标签的底部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

像这样：

<!DOCTYPE html>
<html>
    <head>
       <title>Result</title>
        <link rel='stylesheet' type='text/css' href='MovieSiteStyle.css'/>
        <script type='text/javascript' src='MovieSiteBehavior.js'></script>
    </head>
    <body>
        <div></div> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
        <script> 
          $(document).ready(function() {
            $('div').click(function() {
              $('div').fadeOut('slow');
            });
          });
        </script>
    </body>
</html>

【讨论】：

@KingThranduil 你的 javascript 在我的编辑显示的脚本标签内吗？