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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。