最近Web開発を始めました。jQueryを使ってページを作ろうとしているので、いろいろと困っています。私が書いて HTML ページからリンクするコードが読み込まれず、ブラウザーでコンソールを見ると、読み込まれているスクリプトが表示されません。それらをロードできるようにする唯一の方法は、コードを<script>HTML ドキュメント自体のタグでラップすることです。その後、正常に動作します。タグ内だけでなく、クロージング前にも使用<script src="source.js">してみました<head><body>タグしますが、何も起こりません。.css ファイルが読み込まれ、Javascript は別として、Web サイトは正常に動作します。コード自体の書式設定や不適切なスタイルの使用など、私が間違っていることが他にある場合は、それも指摘してください。私は開発者として前進しようとしているので、あなたが与えることができるどんな助けも大歓迎です. 私が問題を抱えている多くのサイトの1つのファイルは次のとおりです。
<!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);
});
});
ファイルが長くなって申し訳ありませんが、もう一度お役に立てれば幸いです。