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

时间 2019-11-15

原文原文链接

JavaScript代码放在哪里？

浏览器在渲染HTML页面时，是从头至尾，一行一行地检查执行的。若是JavaScript代码在前面，HTML元素在后面，遇到JavaScript选择一个还未渲染的HTML元素将会选择失败。所以，一般的作法是将脚本放在页面最后（紧跟在</body>标签以前）。html

ready()事件

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

要避免上述问题，能够使用ready()事件。ajax

jQuery的ready()事件一般在DOMContentLoaded事件加载后执行。所以能够保证JavaScript代码被执行。浏览器

ready()事件写法：spa

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

这样写，能够保证要被执行的JavaScript被执行，无论这些要被执行的JavaScript代码放在页面的哪一个地方。code

示例：cdn

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

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