JavaScript代码放在哪里？
浏览器在渲染HTML页面时，是从头到尾，一行一行地检查执行的。如果JavaScript代码在前面，HTML元素在后面，遇到JavaScript选择一个还未渲染的HTML元素将会选择失败。因此，通常的做法是将脚本放在页面最后（紧跟在</body>标签之前）。
ready()事件
如果将JavaScript代码分和HTML离出来，脚本又在<head></head>之间引入，会不会出问题？
要避免上述问题，可以使用ready()事件。
jQuery的ready()事件通常在DOMContentLoaded事件加载后执行。因此可以保证JavaScript代码被执行。
ready()事件写法：
|
1
2
3
|
$(document).ready(function(){
// 要被执行的JavaScript代码
});
|
这样写，可以保证要被执行的JavaScript被执行，不管这些要被执行的JavaScript代码放在页面的哪个地方。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ready()使外置JS代码正常运行</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script src="dh.js"></script>
<style>
li{
max-width: 200px;
background-color: #6cc0ac;
color: #fff;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li id="a">鼠标</li>
<li id="b">键盘</li>
<li id="c">屏幕</li>
<li id="d"><a>主机</a></li>
</ul>
</div>
<script>
$(document).ready(function () {
// 要被执行的JavaScript代码
dh();
});
</script>
</body>
</html>
ready()事件简写
jQuery还提供了ready()事件的简写方式：
|
1
2
3
|
$(function () {
// 要被执行的JavaScript代码
});
|