Question

我一直在关注Codecademy的课程，我已经完成了HTML / CSS和大约一半的jQuery教程。

我想我应该尝试通过编写代码并在我的网络浏览器中打开它来测试我的知识，这是Chrome（版本34.0.1847.131 m）。

我的HTML和CSS工作得很好，但我似乎无法使jQuery（script.js是文件名）代码正常工作。这是我的测试项目中所有三个文件的代码：

的index.html

<!DOCTYPE html>
<html>  
    <head>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head> 
    <body>
        <div><br/><strong>Click Me!</strong></div> 
    </body>
</html>

stylesheet.css中

div
{
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}

的script.js

$(document).ready(function()
{   
   $('div').hide();    
});

这段代码基本上应该立即隐藏我正在创建的div框。但是，每当我在chrome中打开index.html页面时，它只显示左上角的框（因此，我的$('div').hide();未运行。

我的文件都在同一个位置：

我在Sublime Text 2 IDE中编写代码。

我在SO上看到了类似的多个问题，但是每个人的问题都是他们没有将他们的js代码包装在$（document）.ready（）函数中。

有人可以告诉我我做错了什么吗？

Answer 1

你还没有加载jQuery。

将此行添加到<head>

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

修改：如果您离线使用此功能，则需要使用http://，因为它默认为file://

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

由谷歌主持。 Source

Answer 2

尝试在最终脚本

之前包含jquery文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...your script....

Answer 3

你需要在之前加入jQuery 包含你的javascript文件，如下所示：

<head> <link rel='stylesheet' type='text/css' href='stylesheet.css'/> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type='text/javascript' src='script.js'></script> </head>

Answer 4

您必须在页面上附加一个jquery库才能运行它。

只需添加

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

在你的html的主题部分

Answer 5

您需要在html文件中包含jquery库，如下所示：

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

让jQuery在我的浏览器中工作的问题（chrome）

5 个答案: