我无法让我的 jQuery 在最简单的级别上工作答案

【问题标题】：I'm having trouble getting my jQuery to work on the simplest level我无法让我的 jQuery 在最简单的级别上工作
【发布时间】：2016-05-17 08:36:15
【问题描述】：

好的，所以这完全是一个菜鸟问题。我正在尝试使用 HTML、CSS 和 JavaScript 从头开始构建网站，并且我想使用 jQuery。出于某种原因，我可以让 HTML 和 CSS 正常工作，但我不能在我的 script.js 文件中使用 jQuery。我已经下载了 jQuery：

我已经用<script> 标签链接到它，但是当我尝试使用我构建的东西时，什么也没有发生。

我的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Freeflow Academy</title>

        <link rel='stylesheet' type='stylesheet' href='stylesheet.css'>
        <link rel='stylesheet' type='stylesheet' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css' />

        <script type='text/javascript' src='script.js'></script>
        <script type='text/javascript' src="jquery-2.2.0.min.js"></script>
    </head>
    <body>
        <p>This is a test</p>
    </body>
</html>

我的 CSS：

p {    
    background-color: blue;
}

我的带有 jQuery 的 JavaScript：

$(document).ready(function(){    
    $('p').on('click', function(){
        $(this).css('background-color','red');    
    });    
});

我要做的就是让背景颜色在点击时改变。任何帮助表示赞赏。我认为问题与我的<script> 或<link> 标签有关，但我不确定是哪个。

【问题讨论】：

浏览器控制台有什么错误吗？
我会检查的。好的：ReferenceError: Can't find variable: $ 和 SyntaxError: Invalid character '\u0001'
ok..第一个错误是因为加载脚本的顺序不正确..现在，对于第二个错误，请您告诉错误的行号，或者将问题重现fiddle..
始终先检查错误...然后提出问题并包含错误详细信息
我可以使用什么字符集来消除第二个错误？它指的是jQuery-2.2.0.min.js 的第一行。有一个无法识别的角色。

标签： javascript jquery html css hyperlink

【解决方案1】：

首先加载 jQuery，然后是你的自定义脚本

<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
<script type='text/javascript' src='script.js'></script>

加载优先级是从上到下，如果在脚本加载之前没有加载jQuery，则不起作用。

【讨论】：

嗯。没有改变。控制台中仍然出现相同的错误。
能给个演示网址吗？ @KaiChristensen
我看看能不能弄个小提琴。

【解决方案2】：

顺序不正确，先加载jquery再加载脚本

<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
<script type='text/javascript' src='script.js'></script>

【讨论】：

嗯。没有改变。控制台中仍然出现相同的错误。

【解决方案3】：

尝试为具有正确标签顺序的脚本标签提及字符集。

<script type='text/javascript' src="jquery-2.2.0.min.js"></script>
  <script type='text/javascript' charset="UTF-8" src='script.js'></script>

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
    <head>
        <title>Freeflow Academy</title>

        <link rel="stylesheet" type="stylesheet" href="stylesheet.css">
        <link rel="stylesheet" type="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    </head>
    <body>
        <p>This is a test</p>

        <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

首先，最佳做法是在文件末尾加载脚本（jquery、自定义脚本等）。另外，我会去CDN。你可以找到几个理由这样做here（只需谷歌它）。

引号是单引号还是双引号，取决于您的风格。我要加倍，但只需以一种方式将它们放在任何地方，保持代码干净：D。

尽管您的帖子中有script 订单，但可能的唯一原因是您的 Apache 设置。也许相对路径和目录根不是正确的。你可以看看here

【讨论】：

【解决方案5】：

根据您的示例，您在加载 jQuery 之前加载自定义 JavaScript。

加载顺序

<script src="jquery-2.2.0.min.js"></script>
<script src="script.js"></script>

此外，但与 JavaScript 错误无关的是您对样式表的排序以及您正在使用的 type 属性值，它应该是 type="text/css"。

我在jsbin 上创建了一个工作示例。

【讨论】：

【解决方案6】：

如前所述，加载顺序很重要。像这样从他们的 cdn 加载 jquery 也是一个好主意：

<script type='text/javascript' src="//code.jquery.com/jquery-2.2.0.min.js></script>
<script type='text/javascript' src='script.js'></script>

还要确保所有外部资源都加载了href= 中http: 部分的正确协议（例如http 或https）条带：

<link rel='stylesheet' type='stylesheet' href='//code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>

如果更新代码后仍然出现错误，请尝试清除浏览器缓存。

【讨论】：