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- 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()事件的简写方式：

$(function () {
    // 要被执行的JavaScript代码
});