浅谈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 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
javascript如何创建对象
Aug 29 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
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
php开发文档 会员收费1期
2012/08/14 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python实现简单成绩录入系统
2019/09/19 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
基于PyTorch中view的用法说明
2021/03/03 Python
读书演讲主持词
2014/03/18 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
员工升职自荐信
2015/03/27 职场文书
开学第一天的感想
2015/08/10 职场文书
初中班干部工作总结
2015/08/10 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
python分分钟绘制精美地图海报
2022/02/15 Python