浅谈Javascript 执行顺序


Posted in Javascript onDecember 18, 2013

Javascript是执行顺序是至上而下的,除非你特别说明, Javascript代码不会等到页面加载完毕后才执行。比如一个网页里含有以下HTML代码:

<div id="ele">welcome to 3water.com</div>

如果你在这行HTML代码前,加入如下Javascript代码:
<script type="text/javascript">
  document.getElementById('ele').innerHTML= 'welcome to my blog';
</script>

运行该页面,你会得到这样的错误信息:“document.getElementById(‘ele') is null。”原因是,当上面的javascript运行时,页面上还没有ID为‘ele'的DOM元素。
解决办法有两种:
1. 把javascript代码放在HTML代码之后:
 <div id="ele">welcome to 3water.com</div>
<script type="text/javascript">
  document.getElementById('ele').innerHTML='welcome to my blog';
</script>

2. 等到在网页加载完毕后,运行该javascript代码。你可以使用传统的解决办法(load):首先加HTML的body加入“<body load="load()”>,”然后在load()函数里调用上述javascript代码。这里要着重介绍的是用jQuery来实现:
<script>
$(document).ready(function(){
   document.getElementById('ele').innerHTML= 'welcome to my blog';
});
</script>
//当然,既然用到了jQuery,更简单的写法是:
<script>
$(document).ready(function(){
   $('#ele').html('welcome to my blog'); //这里也可用.text()方法
});
</script>

你可以把上述jQuery代码放在页面的任何位置,它总是等到页面加载完毕后才执行。
Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Javascript浅谈之引用类型
Dec 18 #Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 #Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 #Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 #Javascript
jquery中event对象属性与方法小结
Dec 18 #Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 #Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 #Javascript
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
简单JS代码压缩器
2006/10/12 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
如何一键升级Python所有包
2020/11/05 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
护士专业推荐信
2013/11/02 职场文书
房地产融资计划书
2014/01/10 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
九不准学习心得体会
2016/01/23 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python