Question

好的，所以这是一个总的noob问题。我正在尝试使用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>标签有关，但我不确定是哪个。

Answer 1

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

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

加载优先级是从上到下，如果在加载脚本之前没有加载jQuery，它将无法工作。

Answer 2

订单不正确，先加载jquery然后再加载脚本

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

Answer 3

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

负载阶

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

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

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

Answer 4

尝试使用正确的标记顺序提及脚本标记的字符集。

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

Answer 5

<!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设置。也许相对路径和目录root不正确。你可以看看here

Answer 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>

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

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

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

我无法让jQuery在最简单的层面上工作

6 个答案: