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

时间:2022-09-29 12:55:25

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代码
});