浅谈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 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
JS中递归函数
Jun 17 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
详解php中的implements 使用
2017/06/13 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
python版本五子棋的实现代码
2018/12/11 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
判断单链表中是否存在环
2012/07/16 面试题
教师求职推荐信范文
2013/11/20 职场文书
业务员自荐信范文
2014/04/20 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
股份转让协议书范本
2015/01/27 职场文书
青岛导游词
2015/02/12 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python