jQuery_页面加载问题

原创

mb610134e9c087f 2021-07-29 09:31:42 博主文章分类：jQurey ©著作权

©著作权归作者所有：来自51CTO博客作者mb610134e9c087f的原创作品，请联系作者获取转载授权，否则将追究法律责任

运行如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>页面未加载执行失败</title>
        <script type="text/javascript">
            document.getElementById("panel").onclick = function() {
                alert("元素已经加载完毕 !");
            }

        </script>
    </head>

    <body>
        <div id="panel">click me.</div>
    </body>

</html>

发现怎么点都不会出现提示的内容，这是为什么呢

那是因为dom还未加载完毕，那么如何解决呢？

　　　　　　　　方式一：将JS代码移到需要操作的html代码后面，建议放到body的外面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>4-1-2</title>
    </head>

    <body>
        <div id="panel">click me.</div>
        <script type="text/javascript">
                document.getElementById("panel").onclick = function() {
                    alert("元素已经加载完毕 !");
                }
        </script>
    </body>

</html>