好吧，我最近开始学习 jQuery，但是我在使用 jQuery 网站上的一个小动画程序时遇到了问题。 所以问题就在这里。该程序的工作原理:
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script>
<STYLE type="text/css">
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
</HEAD>
<BODY>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
<script type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</script>
</BODY>
</HTML>
但是这个程序没有:
<HTML>
<HEAD>
<script type="text/javascript" src="javascript/jQuery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</script>
<STYLE type="text/css">
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
</HEAD>
<BODY>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
</BODY>
</HTML>
这两个程序之间的唯一区别是我放置 javscript 的位置，所以有人可以解释一下为什么这会产生影响吗？谢谢，因为这让我很困惑。
最佳答案
当第二个 jQuery 代码块运行时，文档尚未准备好，因此它不起作用。
始终将 jQuery 代码包装在 $(document).ready() 语句中:
$(document).ready() {
$("#right").click(function() {
$("#content").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function() {
$("#content").animate({"left": "-=50px"}, "slow");
});
});
您的第二个代码块是正确的。
关于javascript - jQuery 函数放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9450937/