为什么我的javascript文件没有链接?

时间:2014-01-09 09:27:00

标签: javascript jquery html

这是我第一次尝试让我的jQuery代码在codeacademy.com以外的地方工作,所以请耐心等待。

我有三个文件,index.html,stylesheet.css和script.js(加上几张图片)都在同一个文件夹中。 index.html和style.css相互配合得很好,但是无论我放入什么内容,script.js似乎根本不想采取任何效果(使用命令就像在$上隐藏段落一样简单(文档) )。就绪...

这是index.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type='text/javascript' src='script.js'></script>
</head>

<body>
<p>test test test</p>
<div class="mainh1">
    <h1 id="header1">Hi I'm <a href="mailto:redacted@gmail.com" id="email">James</a></h1>
    <h1 id="header2">I live in <a href="www.seattle.gov" id="city">Seattle</a></h1>
    <h1 id="header3">I like <a href="www.makerhaus.com" id="tinker">tinkering</a></h1>
    <h1 id="header4">and I <em>really</em> like <a href="www.analogcoffee.com" id="coffee">coffee</a></h1>
</div>

<div class="image">
    <img src="james.jpg"/>
</div>

<div class="navbar">
</div>

</body>
</html>

这是stylesheet.css:

a {
    text-decoration:none;
}

body {
    background-image: url("debut_light.png");
}
.mainh1 {
    text-align: left;
    font-family: 'Cantora One', sans-serif;
    color: #556270;
    font-size: 25px;
    text-shadow: 0 2px 0 #fff;
    margin: 0;
    margin-top: 75px;
    margin-left: 25px;
    line-height: 150%;
    display: inline-block;
}

#email {
    color: #03738E;
}

#city {
    color: #F1B703;
}

#tinker {
    color: #F15B07;
}

#coffee {
    color: #D92D01;
}

.image {
    height: 400px;
    width: 400px;
    float: right;
    overflow: hidden;
    margin-top: 75px;
    margin-right: 50px;
    border-radius: 20px;
}

.image img {
    width: 100%;
    height: 100%;
}

这是script.js:

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

我也尝试过连接script.js的整个源路径,我尝试将它上传到hostgator.com上的服务器但无济于事。知道为什么我的jquery不工作吗?如果这是一个简单的错误,请耐心等待,这是我编码的第5天。

4 个答案:

答案 0 :(得分:7)

你还没有加载jQuery。在加载脚本之前添加此代码:

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

答案 1 :(得分:1)

好像你没有将jQuery库链接到html文件。您需要它才能运行jQuery函数,例如$(document).ready()

有关如何下载jQuery或从CDN中包含jQuery的不同选项,请查看this page

答案 2 :(得分:1)

您正在使用jquery而不将其包含在您的页面中。

您必须下载jquery脚本文件,例如将其重命名为jquery.js并包含它。

<script language="JavaScript" type="text/javascript" src="/js/jquery.js"></script>

在下载jquery之间和之后添加它,它将起作用。

答案 3 :(得分:0)

转到jquery.com并下载jQuery:)

http://jquery.com/download/