【发布时间】：2018-12-01 08:33:58
【问题描述】：
我是 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>
请注意，我有两个地方。两者似乎都不起作用。
【问题讨论】：
-
检查一下：stackoverflow.com/questions/6770234/…（请注意：目前，您的脚本在
<div>内） -
如果您正在使用 document.ready，您应该可以将它与您的其他脚本一起使用（加载 jquery 后）
-
是的，这行得通，问题是我的教授希望它出现在 html 页面上。这样他就可以快速看到我们添加的新代码。有点愚蠢，但我能做什么？ @Katie.Sun 我也关注了那篇文章中的所有内容，但没有帮助
-
您不需要标题中的脚本。只需将其放在结束正文标记之前。尝试将您当前的 jQuery 链接替换为：
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js">以消除您的问题 -
基本规则是如果
<script>标签有src，那么标签内不能有代码作为文本。文本代码将被忽略
标签： javascript jquery jquery-1.10