-2

我最近开始了网络开发。由于我一直在尝试使用 jQuery 制作页面,因此遇到了很多麻烦。我从 HTML 页面编写和链接的代码不会加载,当我在浏览器中查看控制台时,它不会显示任何正在加载的脚本。我可以让它们加载的唯一方法是将我的代码包装<script>在 HTML 文档本身的标签中,然后它就可以正常工作了。我试过<script src="source.js"><head>标签中使用,以及在关闭之前<body>标签,但没有任何反应。.css 文件加载,除了 Javascript,网站运行良好。如果您发现我做错了什么,例如格式化代码本身或使用不良样式,请同时指出。当我试图成为一名开发人员时,您可以提供的任何帮助将不胜感激。以下是我遇到问题的众多网站之一的文件:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <link rel="stylesheet" href="dot_grid.css">
    <script src="dot_grid.js"></script>
    <title></title>
  </head>
  <body>
    <div id="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <br>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="reset">RESET</div>
    <div id="opac">Change opacity</div>
  </body>
</html>

所有这些<div>标签都在制作网格......如果有更好的方法,请告诉我:P

CSS:

div div{
    height:25px;
    width:25px;
    display:inline-block;
    border-radius:100%;
    background:orange;
    position:static;
    border:none;
}
.other1 {
    background:teal;
}
#addRow {
    height:25px;
    width:35px;
    background:#334477;
    border-radius:5px;
    text-align:center;

}
#reset {
    height:1em;
    width:3.25em;
    font-size:1em;
    padding:5px;
    text-align:center;
    border-radius:5px;
    opacity:0.3;
    background:blue;
    color:white;
    border:1px solid black;
}
#reset:hover {
    color:black;
    background:#666600;
    text-decoration:underline;
}
#opac {
    height:1em;
    width:6.5em;
    font-size:1em;
    padding:5px;
    text-align:center;
    border-radius:5px;
    background:blue;
    color:white;
    opacity:0.3;
    border:1px solid black;
}
#opac:hover {
    color:black;
    background:#666600;
    text-decoration:underline;
}

...和 ​​jQuery 文件:

$(document).ready(function() {
    $("div div").mouseenter(function(){
        $(this).css("background","red");
    });
    $("div div").mouseleave(function(){
        $(this).css("background","orange");
    });
    $(".other1").mouseenter(function(){
        $(this).css("background","blue");
    });
    $(".other1").mouseleave(function(){
        $(this).css("background","teal");
    });
    $("div div").click(function(){
        $(this).fadeTo("slow",0);
    });
    $("#reset").click(function(){
        $("div div").fadeTo("slow",1);
    });
    $("#reset").mouseenter(function(){
    $(this).fadeTo("fast",1);
    });
    $("#reset").mouseleave(function(){
    $(this).fadeTo("fast",0.3);
    });
    $("#opac").click(function(){
        $("div div").fadeTo("slow",Math.random());
    });
    $("#opac").mouseenter(function(){
    $(this).fadeTo("fast",1);
    });
    $("#opac").mouseleave(function(){
    $(this).fadeTo("fast",0.3);
    });
});

很抱歉文件太长了,但如果你能帮助我,那就太好了。

4

2 回答 2

1

您忘记在文件中包含 jQuery 库。试试这个 head 标签,如果你发现更多问题,请告诉我们。

<head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <link rel="stylesheet" href="dot_grid.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="dot_grid.js"></script>
    <title></title>
</head>

你也可以在这里下载它,把它放在你的.js目录中,然后像你用你的一样添加它。dot_grid.js

于 2013-07-10T23:42:51.110 回答
0

您必须加载 jQuery 库才能使用它。<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>之后 添加这个 <link rel="stylesheet" href="dot_grid.css">

于 2013-07-10T23:41:46.207 回答