Question

好的，所以我最近开始学习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的位置，所以有人可以解释一下为什么会有所不同吗？谢谢，因为这让我感到困惑。

Answer 1

当第二个jQuery代码块运行时，文档还没有准备好，所以它不起作用。

始终将jQuery代码包装在$(document).ready()语句中：

$(document).ready() {
  $("#right").click(function() {
    $("#content").animate({"left": "+=50px"}, "slow");
  });

  $("#left").click(function() {
    $("#content").animate({"left": "-=50px"}, "slow");
  });
});

你的第二个代码块是正确的。

Answer 2

浏览器加载/解析/渲染html和javascript从上到下，一个不起作用，因为你把它放在那些html元素之前，当它运行时它找不到那些html标签，使用jQuery就绪可以避免这个：http://api.jquery.com/ready/

Answer 3

css应该出现在任何javascript之前，以便文档预先加载所有元素。

Answer 4

第二个代码块在#right被声明之前引用right。

jQuery函数放置

4 个答案: