Question

我从Codeacademy jQuery ex复制/粘贴代码。 4，“什么是jQuery？”，在我的笔记本电脑上使用相同的html，css和javascript文件。然后我把它推到了我的github.io; jQuery代码似乎不适用于我的Firefox浏览器（Ubuntu规范的版本26 - 1.0）。代码肯定在Codeacademy屏幕上工作。

这是index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>What Say You?</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="ready">I'm ready!</div>
        <div id="notready">You'll never take me alive, jQuery!</div>
    </body>
</html>

这是stylesheet.css

div {
    height:100px;
    width:100px;
    border-radius:5px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-family: Verdana, Arial, Sans-Serif;
    margin-right:5px;
}

#ready {
    background-color:#008800;
    color:#FFFFFF;
}

#notready {
    background-color:#FF0000;
    color:#FFFFFF;
}

这是script.js：

$(document).ready(function() {
    $('#notready').fadeOut(1000);
});

页面位于：http://bonza-times.github.io/

如何让这段代码在Firefox中正常运行？谢谢！

Answer 1

在codeacademy中，jquery是隐式加载的，但是如果你想在你的独立页面上加载它，你需要将它包含在你的<head>

中。

使用cdn：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

或在您的项目中下载并添加

<script src="path/to/your/js/jquery.js"></script>

Answer 2

您需要在HTML页面中显式加载jQuery。 jQuery是一个自定义框架，默认情况下不在浏览器中提供。

只需在现有<head>代码之前将此行添加到<script>：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

结果应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <title>What Say You?</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="ready">I'm ready!</div>
        <div id="notready">You'll never take me alive, jQuery!</div>
    </body>
</html>

jQuery适用于Codeacademy，但在通过github.io部署时不适用于Firefox

2 个答案: