运行如下代码：

<!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>

方法二：将其写入页面加载函数，这样也可以

jQuery_页面加载问题的更多相关文章

  1. AnjularJS系列4 —— 单个页面加载多个ng-App

    第四篇,插播, 单个页面加载多个ng-App 在写范例的时候发现的问题 一个页面有多个ng-app,angular只会处理第一个ng-app 需要加载两个ng-app,需要进行手动加载: angula ...

  2. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  3. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

  4. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  5. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  6. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  7. JavaScript在A页面判断B页面加载完毕（iframe load）

    今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画... 而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作. if(docume ...

  8. javascript 实现页面加载完再显示页面

    document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...

  9. java selenium (十三) 智能等待页面加载完成

    我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作.  否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操 ...

随机推荐

  1. oracle 插入数据之坑--------oracle字符类型varchar2一个中文占多少字节

    如果你误认为是两个字节,那就大错特错了 Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定 查看oracle server端字符集 select userenv('langu ...

  2. python-bioInfo-codes-2

    1. _tkinter.TclError: no display name and no $DISPLAY environment variable 解决方案: import matplotlibma ...

  3. Luogu P3810 【模板】三维偏序（陌上花开）（CDQ分治）

    题目 以三维偏序为例来讲一下CDQ分治. CDQ的本质就是把一个序列分成两段,计算左边对右边的贡献,然后分治. 不过一般都是先分治到底再从下往上算,这样可以先归并再算. 比如这道题,我们先按第一维排序 ...

  4. 安装Python环境

    首先我们来安装Python,Python3.5+以上即可 1.首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图 ...

  5. Qt表格导出图片

    概述:qt中把某个控件导出保存为图片导出并不复杂,网上也有一堆方法.但是对于tableview中数据很多的情况下势必会出现滚动条,用传统的截屏抓图势会有滚动条,图片数据展示不全.在这我使用了一种折中方 ...

  6. 打印canvas

    这里我是新开窗口打印,会存在一个问题:就是不关闭打印窗口回到父页面,父页面不响应的情况 所以,我另外写了一个监听离开新开窗口,弹窗提示的函数,提示用户关闭打印窗口,方可进行后续操作 额,发现问题更大了 ...

  7. java并发编程：锁的相关概念介绍

    理解同步,最好先把java中锁相关的概念弄清楚,有助于我们更好的去理解.学习同步.java语言中与锁有关的几个概念主要是:可重入锁.读写锁.可中断锁.公平锁 一.可重入锁 synchronized和R ...

  8. jenkins自动部署代码到多台服务器

    下面讲一下如何通过一台jenkins服务器构建后将代码分发到其他的远程服务器,即jenkins自动部署代码到多台服务器. 1.下载 pulish over ssh 插件 2.系统管理 -> 系统 ...

  9. VirtualBox给CentOS虚拟机挂载磁盘扩大空间

    VirtualBox给CentOS虚拟机挂载磁盘扩大空间 楼主,发现虚拟机使用存储空间不够用的情况,需要改虚拟机挂载磁盘,扩容,在网上找了一波资料,于是整合记录操详细作如下: 概要步骤如下: 1.设置 ...

  10. Linux配置iSCSI存储

    1.基础知识 1.1 存储相关     直接存储(DAS):例如本机上的磁盘,就是属于直接存储设备.     存储区域网络(SAN):来自网络内的其他存储设备提供的磁盘.Iscsi就是属于该方式.   ...