Day20
-
Js的Dom编程
-
为什么学dom编程:
我们在前面把js的基础知识讲解完了,可是如果你认为js只能做类似点击一个按钮,显示当前时间,那你就太小看jsl,实际上js更重要的作用是可以让用户对网页元素进行交互操作,这才是学习js的精华所在。
-
通过dom编程,我们可以写出各种网页游戏
-
dom编程也是ajax的重要基础
-
dom编程简介
DOM=DocumentObject Model(文档对象模型),根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。
-
dom对象
js把浏览器,网页文档和网页文档中的html元素都用相应的内置对象来表示,这些对象与对象间的层次关系称为dom,针对网页(html,jsp,php,aspx.net)的dom就是html dom,我们这讲的就是html dom。
Dom编程其实分为htmldom编程和Xml dom编程。
Dom编程时,会把html文档看做是一棵dom树。
-
Bom介绍(Borwser ObjectModel)浏览器对象模型
-
通过使用BOM,可移动窗口、更改状态栏文本。Bom是W3C组织提出的,他建议所有的浏览器都应当遵循这样的设计规范,可以说bom和dom关系密切,相互影响,bom为纲,dom为目。我们可以简单的理解dom就是bom的具体实现。
-
-
Dom对象层次一览图
-
Dom对象详解
-
Window 对象
Window对象表示一个浏览器窗口或一个框架,在客户端javascript中,window对象是全局对象,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来用。
在使用window对象的方法和属性的时候,可以不带window,比如:window.alert(“Hello”);可以直接写成alert(“Hello”);
Window对象常用的函数和属性
-
-
alert() 显示消息和一个确认按钮的警告框
-
confirm() 显示消息以及确认按钮和取消按钮的对话框
-
compile()
-
setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式
-
clearInterval() 取消有setInterval设定的定时器
-
setTimeout() 指定的毫秒数后调用函数或计算表达式
-
clearTimeout() 取消有setTimeout()设定的定时器
(1)confirm案例:
<html>
<head>
<title>window.test</title>
<script language="javascript" type="text/javascript">
<!--
function test(){
var res = window.confirm("你要删除吗?");
if(res){
window.alert("删除成功");
}else{
window.alert("放弃删除");
}
}
//>
</script>
</head>
<body>
<input type="button" value="删除记录" οnclick="test()"/>
</body>
</html>
(2)setInterval():
该函数可以根据指定的时间,循环的执行某个函数,或者表达式
需求:请每隔1秒钟,弹出一个对话框:hello world
function sayHello(){
window.alert("Hello,world");
}
setInterval("sayHello()",1000);
显示时钟:
<html>
<head>
<title>window.test</title>
<script language="javascript" type="text/javascript">
<!--
function showTime(){
//在元素间的文本就是通过 对象名.innerText
document.getElementById("myTime").innerText = new Date().toLocaleString();
}
setInterval("showTime()",1000);
//>
</script>
</head>
<body>
<input type="button" value="删除记录" οnclick="test()"/>
<span id="myTime"></span>
</body>
</html>
需求:一个小人动起来
源码:
<html>
<head>
<title>window.test</title>
<script language="javascript" type="text/javascript">
<!--
//通过静态图片的切换实现动画
//改变img的src
var n=1;
function run(){
//得到img对象
var image = document.getElementById("image");
image.src=((n++)%5+1)+".jpg";
var imgLeft=image.style.left;
var imgLeftNum =(parseInt(imgLeft.substring(0,imgLeft.indexOf("p")))+20);
if(imgLeftNum>1200){
imgLeftNum =0;
}
image.style.left=imgLeftNum+"px";
}
setInterval("run()",100);
//>
</script>
</head>
<body>
<div style="height:387px;width:1350px;background-color:black">
<img id="image" style="width:171px;height:387px;position:absolute;left:0px;top:8px" src="1.jpg"/>
</div>
</body>
</html>
扩展要求:小人走10步就停下来
(3).clearInterval()取消由setInterval设定的定时器
<html>
<head>
<title>window.test</title>
<script language="javascript" type="text/javascript">
<!--
//通过静态图片的切换实现动画
//改变img的src
var n=1;
var count=0;
function run(){
count++;
if(count==11){
//停止定时器
clearInterval(myTimer);
}
//得到img对象
var image = document.getElementById("image");
image.src=((n++)%5+1)+".jpg";
var imgLeft=image.style.left;
var imgLeftNum =(parseInt(imgLeft.substring(0,imgLeft.indexOf("p")))+20);
if(imgLeftNum>1200){
imgLeftNum =0;
}
image.style.left=imgLeftNum+"px";
}
var myTimer = setInterval("run()",100);
//>
</script>
</head>
<body>
<div style="height:387px;width:1350px;background-color:black">
<img id="image" style="width:171px;height:387px;position:absolute;left:0px;top:8px" src="1.jpg"/>
</div>
</body>
</html>
需求:在打开页面后,延时5秒后弹出hello,world
(4)setTimeout()在指定毫秒数后调用函数或计算表达式(但是只调用一次)
<html>
<head>
<title>window.test</title>
<script language="javascript" type="text/javascript">
<!--
function sayHello(){
window.alert("Hello,world");
}
setTimeout("sayHello()",5000);
//>
</script>
</head>
<body>
</body>
</html>