Я новичок в jquery и JavaScript и плохо понимаю, как они работают.Как получается, что скрипт внизу не запускается.Если я вставлю его в конец jquery-1.10.0.js, он будет работать, но не тогда, когда я добавлю его в файл HTML.Я понимаю, что это старая версия jquery, но я должен ее использовать.
<html>
<head>
<title>jQuery Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/sandbox.css">
<script type="text/javascript" src="js/jquery-1.10.0.js">
$(document).ready(function () {
$("td.odd").css("background-color","green");
var squares=$("td");
for (var i=0; i<squares.length; i++) {
squares[i].innerHTML = "X";
}
$("#heading").css("background-color","green").css("color","red");
$("#instructions").fadeOut();
$("#instructions").fadeIn();
$("#instructions").slideUp();
$("#instructions").slideDown();
$("#instructions").animate({left:"150px", width:"250px", height:"150px"})
$("td.odd").addClass("temp").removeClass("odd");
$("td.even").addClass("odd").removeClass("even");
$("td.temp").addClass("even").removeClass("temp");
$("#googlelink").attr("href","https://www.google.ca");
//three new things
//1
$("#checkerboard").focusin(function(){
$("body").css("background-color", "red");
});
//2
$("#checkerboard").focusout(function(){
$("body").css("background-color", "white");
});
//3
$("#googlelink").removeAttr("href");
$("#googlelink").attr("href","https://www.facebook.ca");
});
</script>
</head>
<body>
<h1 id="heading">The jQuery Sandbox</h1>
<div id="instructions">
<p><b>The jQuery 1.10.0 library is loaded up and ready to go. Open your browser's JavaScript console and start experimenting.</b></p>
<p><b>Here are some ideas:</b></p>
<ul>
<li>Choose one of the colors on the checkerboard and change it with the <b>.css()</b> function (hint: it's made of "td" tags with classes named "even" and "odd")</li>
<li>Fill in every checkerboard square with an X using the <b>.html()</b> function.</li>
<li>Make this box (id="instructions") <b>.fadeIn()</b>, <b>.fadeOut()</b>, <b>.slideUp()</b> and <b>.slideDown()</b>.</li>
<li>This box has the "position:absolute" property. Make it slide around with the <b>.animate()</b> function.</li>
<li>Now make it slide around and change size at the same time. Create a command in this way that makes it "fold down"?</li>
<li>Change the foreground and background color of the id="heading" element at the same time using chaining.</li>
<li>Exchange the "odd" and "even" squares using <b>.addClass()</b> and <b>.removeClass()</b>. This can be done using 3 separate commands.</li>
<li>Change <a id="googlelink" href="http://www.google.com" target="googlewindow">this link</a> (id="googlelink") so that it goes somewhere else using the <b>.attr()</b> function.</li>
</ul>
</div>
<br>
<div id="checkerboard">
<table>
<tr id="row1">
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
</tr>
<tr id="row2">
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
</tr>
<tr id="row3">
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
</tr>
<tr id="row4">
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
</tr>
<tr id="row5">
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
</tr>
<tr id="row6">
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
</tr>
<tr id="row7">
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
<td class="odd"></td><td class="even"></td>
</tr>
<tr id="row8">
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
<td class="even"></td><td class="odd"></td>
</tr>
</table>
<form id="testForm" name="testForm">
<input class="input" type="text" name="textField" value="Type Something Here">
</form>
</div>
<script>
$(document).ready(function () {
$("td.odd").css("background-color","green");
var squares=$("td");
for (var i=0; i<squares.length; i++) {
squares[i].innerHTML = "X";
}
$("#heading").css("background-color","green").css("color","red");
$("#instructions").fadeOut();
$("#instructions").fadeIn();
$("#instructions").slideUp();
$("#instructions").slideDown();
$("#instructions").animate({left:"150px", width:"250px", height:"150px"})
$("td.odd").addClass("temp").removeClass("odd");
$("td.even").addClass("odd").removeClass("even");
$("td.temp").addClass("even").removeClass("temp");
$("#googlelink").attr("href","https://www.google.ca");
//three new things
//1
$("#checkerboard").focusin(function(){
$("body").css("background-color", "red");
});
//2
$("#checkerboard").focusout(function(){
$("body").css("background-color", "white");
});
//3
$("#googlelink").removeAttr("href");
$("#googlelink").attr("href","https://www.facebook.ca");
});
</script>
</body>
</html>
Обратите внимание, что она у меня в двух местах.Ни то, ни другое не работает.