ready()事件;使外置JS代码正常运行

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JavaScript代码放在哪里？

浏览器在渲染HTML页面时，是从头到尾，一行一行地检查执行的。如果JavaScript代码在前面，HTML元素在后面，遇到JavaScript选择一个还未渲染的HTML元素将会选择失败。因此，通常的做法是将脚本放在页面最后（紧跟在</body>标签之前）。

ready()事件

如果将JavaScript代码分和HTML离出来，脚本又在<head></head>之间引入，会不会出问题？

要避免上述问题，可以使用ready()事件。

jQuery的ready()事件通常在DOMContentLoaded事件加载后执行。因此可以保证JavaScript代码被执行。

ready()事件写法：

$(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>