<script>标签在HTML中的位置
来源:互联网 发布:物体识别软件 编辑:程序博客网 时间:2024/05/17 23:01
通常,我们把<script>元素都放在页面的<head>元素中,例如:
<!DOCTYPE html >
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
var btn = document.getElementById("btn"); //获取id为btn的元素(button)
btn.onclick = function(){ //给元素添加onclick事件
var arrays = new Array(); //创建一个数组对象
var items = document.getElementsByName("check"); //获取name为check的一组元素(checkbox)
for(i=0; i < items.length; i++){ //循环这组数据
if(items[i].checked){ //判断是否选中
arrays.push(items[i].value); //把符合条件的 添加到数组中. push()是javascript数组中的方法.
}
}
alert( "选中的个数为:"+arrays.length);
}
}
</script>
</head>
<body>
<form method="post" action="#">
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn"/>
</form>
</body>
</html>
这样做法的目的是把所有的外部文件的引用都放在相同的位置可是,在文挡的<head>元素中包含所有JavaScript 文
件,意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到
<body>标签时才开始呈现内容) 。对于那些需要很多JavaScript 代码的页面来说,这无疑会导致浏览器在呈现页面
时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web应用程序一般都把全部
JavaScript引用放在<body>元索中,放在页面的内容后面。如下例所示:
<!doctype>
<html>
<head>
<meta charset="utf-8">
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<title>例子3</title>
</head>
<body>
<input type="checkbox" value="1" name="check" checked>
<input type="checkbox" value="2" name="check" >
<input type="checkbox" value="3" name="check" checked>
<input type="button" value="你选中的个数" id="btn">
<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
var btn = document.getElementById("btn");//获取id为btn的元素button
btn.onclick = function(){//给元素添加一个onclick事件
var arrays = new Array();//创建一个数组对象
var item = document.getElementsByName("check");//获取name为check的一组元素
for(i=0;i<items.length;i++){//循环这组数据
if(item[i].checked){//判断是否选中
arrays.push(item[i].value);//把符合条件的添加到数组中。push()是javascript数组中的方法
}
}
alert("选中的个数为:"+arrays.length)
}
</script>
</body>
</html>
这样,在解析包含的JavaScript 代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页
面的时间缩短而感到打开页面的速度加快了。
- <script>标签在html中的位置
- script标签在html中的位置
- <script>标签在HTML中的位置
- script在Html中的摆放位置
- script在html中的摆放位置
- 关于<Script>标签在html页面放置位置
- 关于<Script>标签在html页面放置位置
- 关于<Script>标签在html页面放置位置
- JavaScript 获取HTML标签当前在网页中的绝对位置
- 获取HTML标签当前在网页中的绝对位置
- 关于Script放在html中的位置是否影响页面加载
- <script>标签书写位置
- HTML <script> 标签
- html标签之<script>
- html的script标签
- JavaScript在HTML中的位置
- js在html中的位置
- script标签位置的放置
- Java 继承
- java中equal和==的比较
- 小白上手Mysql数据库指南~~
- 华科201601
- 简单springboot及springboot cloud环境搭建
- <script>标签在HTML中的位置
- 字符型
- 2017.07.12 学习记录 js基础学习及代码
- 227. Basic Calculator II
- tensorflow API简单整理(一、常量与变量基础)
- * 24种设计模式——建造者模式
- 十六进制转十进制
- CountdownLatch 模拟 玩家就位
- PAT--1053. Path of Equal Weight