在编写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代码放置位置对程序的影响的更多相关文章

  1. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  2. JavaScript代码存放位置

    JavaScript代码存放位置 HTML的head中 HTML的body代码块底部(推荐) 由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置 ...

  3. Python读写文件的路径，关于os.chdir(path)位置对程序的影响，

    关于os.chdir(path)位置对程序的影响,import os import time#直接把path放到open()里面 def fu0(): star = time.time() for i ...

  4. javascript标签放置位置

    首先:放置位置哪里都能放 但是js代码很有可能不起作用:例如:往id为span的标签中定时插入数字 var time=document.getElementById("span") ...

  5. 拼团商品列表页 分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参

    w TypeError : Cannot set property 'innerHTML' of nullTypeError : Cannot set property 'value' of null ...

  6. 分析JavaScript代码应该放在HTML代码哪个位置比较好

    本文总结了多种放置JS代码的方法,需要的朋友可以参考下 在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代 ...

  7. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  8. 如何正确的加载和执行 JavaScript 代码

    无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...

  9. JavaScript代码-----位置决定结果

    刚学JavaScript的时候,即使照着书上的代码敲一遍,运行的时候,得到的结果要么总是和书上的结果不同,要么是没产生效果.学到后面,才明白到其实程序的代码是没错的,错误的是代码的位置! 首先看下面这 ...

随机推荐

  1. 编程规范之 if 语句的简单规则

    原文: http://www.oschina.net/translate/basic-rules-for-code-readability-and-the-if-statement 代码应该是可阅读就 ...

  2. c语言之函数指针

    一.基础研究 这里研究的内容是函数指针,需要我们在研究后构造程序来描述函数指针数组的用法和向函数传函数指针的方法. 指针有很多种:整型指针.结构体指针.数组指针等等,它们的本质是它们的值都是一个地址, ...

  3. How to solve “sudo: /etc/sudoers.d is world writable”

    Run pkexec chmod 0440 /etc/sudoers

  4. [项目构建 十四]babasport Mycat配置及使用详解.

    首先我们来看下什么是Mycat:MyCat:开源分布式数据库中间件, 这里定义的很简单, 就是分布式数据库的中间件. 其实Mycat 是可以时mysql进行集群的中间件, 我们可以对mysql来分库分 ...

  5. UVALive 4959 Jumping monkey

    题意就是: 一个猎人在森林里捕猎. 然后有只猴子,喜欢躲树的后边,猎人看不见它 然后给出了一张图,表示有哪些树是相邻的. 数据保证任意图中两个树都可以直接或间接的到达 猎人有一个枪,每次他可以选择一颗 ...

  6. Oracle执行计划——使用index full scan的几种情况

    常见有三种情况都有用到indexfull scan. 1. 查询列就是索引列 2. 对索引列进行order by时 3. 对索列进行聚合计算时

  7. iOS内存管理（一）

    最近有时间,正好把iOS相关的基础知识好好的梳理了一下,记录一下内存相关方面的知识. 在理解内存管理之前我觉得先对堆区和栈区有一定的了解是非常有必要的. 栈区:就是由编译器自动管理内存分配,释放过程的 ...

  8. UVA1588（Kickdown）。

    只需要固定长串,拿着短串移动就好了. 我是从右往左移动,需要注意的是要判断两头重叠部分(左端重叠和右端重叠)的大小关系. #include <iostream> #include < ...

  9. windows 编程 —— 消息与参数（定时器、初始化消息、改变大小）

    目录: 定时器 WM_TIMER 初始化消息 WM_CREATE 改变大小 WM_SIZE 定时器: 接收消息:WM_TIMER 参数wParam:wParam参数等于定时器的ID值(上述情形为1). ...

  10. motan源码分析七：序列化

    motan的序列化支持两种协议,一种是json,另一种是hessian2.主要涉及到的类和接口是是:FastJsonSerialization.Hessian2Serialization.Serial ...