javascript代码放置位置对程序的影响
在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响。由于 HTML 文档是由浏览器从上到下依次载入的,javascript的放置位置主要影响获取网页元素。如果你的代码中包含获取网页元素的代码例如document.getElementById(),那么你需要确保你的javascript代码要在你想要获取的元素的位置之后。如过在你想要获取的元素的位置之前调用这个些代码,由于网页还没加载,造成你无法获取那个元素,下面用例子说明:
例如:
<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title> <script >
document.getElementById("ceshi").onclick=function(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞";
}
</script>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" >测试</button> </body>
</html>
这时候程序是错误的,因为javascript代码加载在前,所以document.getElementById("ceshi") 会出现错误。因为此时页面还没加载,找不到这个元素。
放在<body>中,但是在想要获取的元素之前,程序也是错误的
<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
</head>
<body>
<script >
document.getElementById("ceshi").onclick=function(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞"; }
</script>
<p id="text">提示</p>
<button id="ceshi" >测试</button> </body>
</html>
放在<p>元素之后,程序正确
<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" >测试</button>
<script >
document.getElementById("ceshi").onclick=function(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞"; }
</script>
</body>
</html>
但是如果用jQuery或者是通过定义函数的形式可以不用考虑javascript代码的放置位置。比如
html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
<script>
function abc(){
document.getElementById("text").innerHTML="海阔凭鱼跃,天高任鸟飞"; }
</script>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" onclick="abc()" >测试</button> </body>
</html>
<html>
<head>
<meta http-equiv="content-type", content="html/text; charset=UTF-8">
<title>测试</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){ $("#text").html("海阔凭鱼跃,天高任鸟飞"); });
});
</script>
</head>
<body> <p id="text">提示</p>
<button id="ceshi" onclick="abc()" >测试</button> </body>
</html>
javascript代码放置位置对程序的影响的更多相关文章
- JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符
内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符 我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...
- JavaScript代码存放位置
JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...
- Python读写文件的路径,关于os.chdir(path)位置对程序的影响,
关于os.chdir(path)位置对程序的影响,import os import time#直接把path放到open()里面 def fu0(): star = time.time() for i ...
- javascript标签放置位置
首先:放置位置哪里都能放 但是js代码很有可能不起作用:例如:往id为span的标签中定时插入数字 var time=document.getElementById("span") ...
- 拼团商品列表页 分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参
w TypeError : Cannot set property 'innerHTML' of nullTypeError : Cannot set property 'value' of null ...
- 分析JavaScript代码应该放在HTML代码哪个位置比较好
本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...
- JavaScript代码放在HTML代码不同位置的差别
通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...
- 如何正确的加载和执行 JavaScript 代码
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...
- JavaScript代码-----位置决定结果
刚学JavaScript的时候,即使照着书上的代码敲一遍,运行的时候,得到的结果要么总是和书上的结果不同,要么是没产生效果.学到后面,才明白到其实程序的代码是没错的,错误的是代码的位置! 首先看下面这 ...
随机推荐
- JS简易时钟
HTML <div id="clock"> <span></span>:<span></span>:<span&g ...
- P1896 [SCOI2005]互不侵犯King
题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入输出格式 输入格式: 只有一行,包 ...
- poj Fishnet
http://poj.org/problem?id=1408 #include<cstdio> #include<cstring> #include<cmath> ...
- HDU 3446 daizhenyang's chess
http://acm.hdu.edu.cn/showproblem.php?pid=3446 题意:一个棋盘,有个KING,有一些能走的点,每次只能走到没走过的地方,没路可走的输,求先手是否必胜. 思 ...
- [Android] 输入系统(一)
Android输入系统是人与机器交互最主要的手段.我们通过按键或者触碰屏幕,会先经由linux产生中断,进行统一的处理过后,转换成Android能识别的事件信息,然后Android的输入系统去获取事件 ...
- Table Lookup
做OJ的时候,做过类似的,即hash.算法很简单,关键是书上写的和做OJ,是完全不同的风格.有很多值得学习的地方. /* * Table Lookup * 详见<<C程序设计语言>& ...
- windows客户端连接到samba服务器(如何使用samba)
首先确保你的服务端已经配置好samba并成功启动服务,方法可参考此文章http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.aspx ...
- Java---IO加强(2)
转换流 ★转换流功能1:充当字节流与字符流之间的桥梁 需求:模拟英文聊天程序,要求: (1) 从键盘录入英文字符,每录一行就把它转成大写输出到控制台: (2) 保存聊天记录到字节流文件. 要求1的设计 ...
- http://blog.163.com/db_teacher/blog/static/194540298201110723712407/
实验(七).第五章 数据库完整性 2011-11-07 14:37:12| 分类: 默认分类 | 标签: |字号大中小 订阅 一.实验目的 1.熟悉通过SQL语句对数据进行完整性控制 2. ...
- 通过百度获取IP地址对应的经纬度
/** * 获取指定IP对应的经纬度(为空返回当前机器经纬度) * * @param ip * @return */ public static String[] getIPXY(String ip ...