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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
