简单的 JQuery 脚本不起作用答案

【问题标题】：Simple JQuery Script Does Not Work简单的 JQuery 脚本不起作用
【发布时间】：2014-04-03 02:41:29
【问题描述】：

我是第一次尝试使用 jQuery，我正在手动编写代码。但是我的 jQuery 代码根本不起作用……这是我的设置：

Index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="mainJQuery.js"></script>
</head>
    <body>
    <div class="test"> </div>
</body>
</html>

mainCSS.css

.test {
    background-color:#FF0004;
    border-radius:25px;
    display:block;
    height:500px;
    width:500px;
}

mainJQuery.js

// JavaScript Document

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

【问题讨论】：

在这里工作:) ~> 演示 jsfiddle.net/y76B7可能缺少<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
为 Firefox 获取像 Firebug 这样的工具。当然，您的 javascript 控制台中有错误会告诉您问题所在。如果我不得不猜测，您没有正确包含核心 jQuery 脚本。
该代码中没有 jQuery 脚本？
你链接到JQuery脚本了吗？
你链接了 jquery 库吗？

标签： javascript jquery

【解决方案1】：

只是为了记录在案：

为了让您的 jQuery 代码正常工作，您需要在 HTML 中链接到 jQuery 库。

如果您正在学习的教程没有包含在第一步中，您应该找到另一个教程来学习。如果您是因为没有按照教程的第一步操作而遇到这个问题，那么在重新使用 StackOverflow 之前，您应该仔细阅读，否则可能会受到严重的反对。

在 HTML 页面中包含 jQuery 的两种最常见方式是：

1) 下载库，并链接到本地副本。在您的<head> 部分：

<script type="text/javascript" src="/url/path/to/local/jquery.min.js"></script>

2) 链接到 Google CDN 上的 jQuery 远程副本。同样，在<head>：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

如果您不使用这些选项之一或类似选项链接到 jQuery，您的代码将无法工作。在大多数浏览器中，您可以通过opening the Javascript console 判断这是问题所在，输入“jQuery”并收到类似jQuery is not defined 的错误。

令人惊讶的是，我找不到重复的问题来结束这个问题，但是我又一次没有点击 StackOverflow 上的每一个“为什么这个简单的 jQuery 脚本不起作用”的问题。

还有很多。

【讨论】：