I am new to jquery and JavaScript and have little understanding of how they work. How come the script at the bottom does not run. If I insert it at the bottom of the jquery-1.10.0.js it works, but not if I put it in the HTML file. I understand that this is an old version of jquery but I have to use it.
<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>
Notice I have it in two spots. Neither seem to work.
Moved code into Snippet Tool and it works properly.
If you're calling the script in your head, it should be something like:
You can also do this:
In this second example, you do not need to call
.ready()as the jQuery code will load after the other elements. That's all that.ready()does, is wait till the document has fully loaded before executing the jQuery.Hope that helps.