0

HTML 和 CSS 工作正常,但我无法让 Webstorm 链接和使用我的 .js 文件。

我有现场编辑工作。在调试器控制台中,它显示:

Uncaught ReferenceError: $ is not defined script.js:3 script.js:3

我猜“3”是指 .js 文件中的三个 $ 。

在 Webstorm 设置中,我全局启用了 jQuery-2.0.0。我已经尝试过 jquery-1.7.1,但我仍然遇到同样的问题。

涉及三个文件。我将它们都包括在内,以尽可能完整地提供图片。它们都在同一个项目文件中。这是我的代码 -

网页.html:

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

    <body>
        <div>
            <p>
                Random text
            </p>
        </div>
    </body>

</html>

样式表.css:

div {
    height: 18px;
    width: 100px;
    background-color: orange;
}

脚本.js

$(document).ready(function(){
   $("div").onmouseover(function(){
      $("div").css("background-color", "green")
   });
});

我猜有一个简单的新手解决方案,但我是编程新手,Webstorm 有点不知所措。我确实检查了该站点的解决方案,但找不到有效的答案。

4

3 回答 3

1

不知道“Webstorm”是什么,但您的 HTML 不包含对 jQuery 库的引用。这是$定义的地方。

在现有<script>标签上方的以下内容中:

 <script type="text/javascript" src="[ PATH TO JQUERY ]"></script>
于 2013-08-29T22:34:16.507 回答
1

更新您的 HTML 以反映这些更改:

<!DOCTYPE html>
<html>
    <head>
        <title>For Testing</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css">
        <script type="text/javascript" src="script.js"></script>
        <!--Add this line below which will add the jquery library-->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <div>
            <p>
                Random text
            </p>
        </div>
    </body>
</html>
于 2013-08-29T23:01:37.103 回答
0
  1. 尝试使用mouseover而不是onmouseover

    $(document).ready(function(){ $("div").mouseover(function(){ $("div").css("background-color", "green") }); });

  2. 在您的 HTML 中添加指向 jquery 的链接(请参阅第一个答案)

于 2013-08-30T15:46:14.140 回答