jQuery函数放置

好的，所以我最近开始学习jQuery，但是我在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，所以任何人都可以解释我为什么有差别？谢谢，因为这使我感到困惑。

来源

2012-02-26 Jack Davis

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

始终包装jQuery代码在$(document).ready()声明：

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

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

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

来源

2012-02-26 05:56:58 Blender

总是？你可以把你的脚本块放在身体的尽头...... – nnnnnn 2012-02-26 06:24:53

你为什么要这么做？ – Blender 2012-02-26 06:26:00

为什么不呢？它可以让浏览器继续渲染实际页面，而不必先解析脚本。在document.ready（或onload）和脚本的头部使用脚本是最常用的两种方法，不是吗？ – nnnnnn 2012-02-26 07:01:31

浏览器从上到下加载/解析/呈现html和javascript，其中一个不起作用，因为您将它放在这些html元素之前，当它运行时找不到这些html标记，请使用jQuery准备好避免这种情况：http://api.jquery.com/ready/

来源

2012-02-26 05:58:34

css应该放在任何javascript之前，以便文档具有所有预加载的元素。

来源

2012-02-26 05:58:45

css？你的意思是html。 – nnnnnn 2012-02-26 06:25:36

我的意思是CSS应该出现在DOM之前的js – 2012-02-28 15:29:42

如果CSS是在JS之后没关系，如果html元素是重要的。 – nnnnnn 2012-02-28 20:36:38

在right被声明之前，第二个代码块是指#right。

来源

2012-02-26 05:59:29

jQuery函数放置

回答

相关问题