第六章 BOM编程 ① 笔记
内容回顾
理解文档对象模型
熟练掌握document对象访问页面元素
熟练掌握动态添加页面元素
通过DOM操作html页面中的标签，属性，样式等。
本章内容
第一节 BOM编程
BOM:Browser Object Model，浏览器对象模型。
BOM编程: 在浏览器中，js代码是通过内嵌在浏览器中的javascript解释器来运行的。在浏览器加载页面的时候，如果页面中有js代码，js解释器会将浏览器的各个部分封装成对应的对象，然后通过访问这些对象的属性和方法来实现特定的功能，这就是BOM编程。
1.window对象
window对象是一个顶层对象，其中包含很多属性和方法，其中的属性也对应一些子对象:document,history,location,screen等等。
| 属性/方法 | 说明 |
|---|---|
| history | 历史记录对象 |
| location | 地址栏对象 |
| document | 文档对象 |
| screen | 客户窗口屏幕 |
| event | 客户窗口屏幕 |
| stauts | 状态条 |
| open | 打开子窗口的方法 |
| close | 关闭窗口的方法 |
| alert | 消息提示框 |
| prompt | 输入提示框 |
| confirm | 输入提示框 |
2.history历史记录对象
history记录了用户在浏览器中的浏览器记录，通过history可以访问用户的浏览记录历史信息。对应于浏览器工具栏上的前进和后退按钮。
方法:
history.forward():前往下一页
history.back():返回上一页
history.go(索引）:跳到某一页
<!DOCTYPE html>
<html>
<head>
<title> new document 1 -A </title>
<meta charset="gbk"/>
</head>
<body>
<h3>这是Noname1-A页面</h3>
<a href="Noname1-B.html">Noname1-B页面</a>
<!--
history.forward(): 前进到历史记录中的下一个页面
-->
<input type="button" value="下一个页面" onclick="window.history.forward()"/
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> new document 1 -B </title>
<meta charset="gbk"/>
</head>
<body>
<h3>Noname1-B页面</h3>
<!--
history.back(): 后退到历史记录中的上一个页面
-->
<input type="button" value="回退上一页" onclick="history.back()"/>
</body>
</html>
3.location地址栏对象
URL ：统一资源占位符，定位符
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
//当下拉框选项切换的时候，跳转网站
function goWebSite(){
//获取选中的网站
var site = document.getElementById("website").value;
//alert(site);
//选中的站点数据不为空时，才跳转网站
if(site!=""){
//通过浏览器的地址栏对象，跳转页面
window.location.href=site;
}
}
</script>
</head>
<body>
网址:
<!--
onchange:下拉选项切换时触发的事件
-->
<select id="website" onchange="goWebSite()">
<option value="">请选择</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.taobao.com">淘宝</option>
<option value="http://www.jd.com">京东</option>
</select>
</body>
</html>
4.window对象的常用方法
window.alert();//弹出消息框
window.prompt();//输入消息框
window.confirm();//确认框
window.setTimeout(函数名,延时时间); //延迟指定时间(毫秒)调用一次函数
window.setInterval(函数名,延时时间); //每隔特定时间(毫秒)，重复调用函数
定时器方法
setTimeout(函数名,延时时间) :延迟指定的时间后，执行一次函数
setInterval(函数名,延迟时间) :每隔指定的延迟时间，就执行一次函数
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
function test(){
alert(123);
//使用递归方式调用函数，实现每隔指定时间，调用一次的效果
//等价于setInterval
setTimeout("test()",3000);
}
//调用函数
//test();
//延迟调用
//延迟时间是毫秒数:1s = 1000ms
//延迟指定时间(毫秒数),调用一次函数
//setTimeout(test,3000);
//调用函数加双引号,函数后要加括号。函数外没有双引号时，直接写函数名
setTimeout("test()",3000);
//每隔指定时间调用一次函数
//setInterval(test,3000);
</script>
</head>
<body>
</body>
</html>
电子时钟
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
#time
{
width:300px;
height:100px;
line-height:100px;
border:2px solid black;
text-align:center;
font-size:20px;
}
</style>
<script type="text/javascript">
//显示系统时间
function showTime()
{
//创建新的日期对象，用于获取当前的系统时间,并存入变量d中
var d = new Date();
//通过d获取系统日期的各个部分
var year = d.getFullYear();
//月份默认:0-11
var month = d.getMonth()+1;
var day = d.getDate();
var hour = d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
//获取div元素
var div = document.getElementById("time");
//设置div的内容
div.innerHTML=year+"年"+month+"月"+day+"日"+" "+
hour+"时"+min+"分"+sec+"秒";
//递归调用，实现循环处理的效果
t = setTimeout(showTime,1000);
}
//定义变量，用于存储定时器对象
var t;
//通过开始函数，实现循环调用
//函数命名要避免系统的关键字
function startTime()
{
//setTimeout:会创建出一个定时器对象，我们可以保存这对象。
//使用保存的对象，可以清除定时器
//t = setTimeout(showTime,1000);
showTime();
}
//停止计时
function stopTime()
{
//将定时器对象清除，结束定时器效果
clearTimeout(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="停止" onclick="stopTime()"/>
<hr/>
<div id="time"></div>
</body>
</html>
短信倒计时
<script type="text/javascript">
//1.点击按钮按钮不可用
//2.按钮上出现10s倒计时
//3.倒计时结束，按钮恢复可用
function sendCode(){
//设置按钮元素禁用
btnSend.disabled=true;
var i=10;
//每隔1s调用一次
var t = setInterval(function(){
//大于0做正常的提示
if(i>=0){
btnSend.value="发送验证码("+i+"s)";
i--;
}else{
//小于0就停止
clearInterval(t);
//恢复按钮可用
btnSend.disabled=false;
//恢复内容
btnSend.value="发送验证码";
}
},1000);
}
</script>
</head>
<body>
验证码:
<input type="text" />
<input type="button"
id="btnSend"
value="发送验证码"
onclick="sendCode()"
/>
</body>
5.HTML页面常用事件
onclick :元素的单击事件
onload :页面加载完成事件
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//页面加载事件 window.onload
//需求:页面显示之后，动态的设置标题和内容
/*
var bt = prompt("请输入新闻标题:","");
var nr = prompt("请输入新闻内容:","");
document.getElementById("title").innerHTML=bt;
document.getElementById("content").innerHTML=nr;
*/
function test(){
var bt = prompt("请输入新闻标题:","");
var nr = prompt("请输入新闻内容:","");
//innerHTML(元素内部内容)/outerHTML(包含元素自己的标签在内的内容):用于非表
//value:用于表单元素的设值和取值
document.getElementById("title").innerHTML=bt;
document.getElementById("content").innerHTML=nr;
//对比
alert(document.getElementById("title").innerHTML);
alert(document.getElementById("title").outerHTML);
}
//页面加载完成事件,test做事件绑定时，不要加括号
//等页面中的所有元素都加载完成的时候，会触发该事件，并自动调用事件绑定的函数
//window.onload=test; //这是事件函数绑定
//绑定页面加载事件，关联一个匿名函数
window.onload=function(){
alert(123);
}
</script>
</head>
<body>
<h1 id="title"></h1>
<p id="content"></p>
</body>
</html>
事件对象：IE事件对象模型，W3C事件对象
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#mydiv{
width:100px;
height:100px;
border:2px solid red;
}
#myspan{
border:2px solid black;
}
</style>
<script type="text/javascript">
function test(e){
//alert(123);
//ie事件模型对象: window.event,
// 包含了事件发生时的相关信息,比如鼠标事件,鼠标单击的位置,单击的目标
// id: mydiv ===> document.getElementById("mydiv")
// window.event.clientX:鼠标点击事件，x轴坐标
// window.event.clientY:鼠标点击事件，y轴坐标
// window.event.target：触发事件的目标元素
// window.event.target.tagName: 事件元素的标签名(body,html,span,div)
//mydiv.innerHTML=window.event.clientX+" "+window.event.clientY+"<br
//mydiv.innerHTML+=window.event.target.tagName;
//w3c事件模型对象: 通过事件绑定的函数，传入事件对象参数
//e:代表w3c事件模型的事件对象
// e.pageX:鼠标点击事件，x轴坐标
// e.pageY:鼠标点击事件，y轴坐标
// e.target：触发事件的目标元素
// e.target.tagName: 事件元素的标签名(body,html,span,div)
mydiv.innerHTML=e.pageX+" "+e.pageY;
mydiv.innerHTML+=e.target.tagName;
}
//绑定文档的单击事件
document.onclick=test;
</script>
</head>
<body>
<input type="button" value="测试按钮"/>
<div id="mydiv"></div>
<span id="myspan">这是一个内容</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
<script type="text/javascript">
//绑定文档单击事件
document.onclick=function(x){
//获取IE的事件对象
//var e = window.event;
//获取触发事件的目标元素
//alert(e.srcElement)
//设置鼠标点击的位置
//mydiv.innerHTML=e.clientX+" "+e.clientY;
//W3C事件对象:
//在与事件绑定的函数的参数中定义变量(名字随便起),当事件发生时，
//浏览器会自动将事件对象传入该变量
//获取w3c时间对象的目标元素
//alert(x.srcElement);
}
//键盘按下
document.onkeydown=function(e){
//e.key:字符 e.keyCode:编码
//alert(e.key);
mydiv.innerHTML=e.key+" "+e.keyCode;
//获取按键的键值
switch(e.keyCode){
case 37: //向左
break;
case 38: //向上
break;
case 39: //向右
mydiv.style.left=(mydiv.offsetLeft+10)+"px";
break;
case 40: //向下
break;
}
}
</script>
</head>
<body>
<div id="mydiv" style="border:1px solid red;width:100px;height:100px;posit
这是一个DIV
</div>
<p id="myp" style="border:2px solid black;width:50px;height:50px;">
这是一个P
</p>
<button type="button" id="btn">这是一个button</button>
</body>
</html>
作业
1.课堂练习的所有代码打熟练
2.根据提供的小人动画素材，实现通过按键控制小人移动（参看素材文件夹下的《小人
动画》）
3.根据提供素材实现图片的自动切换（参看素材文件夹下的《定时切换图片》）
4.五分钟倒计时
8447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
