1、DOM的基本概念
DOM是文档对象模型，这种模型为树模型，文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西
2、Windows对象操作
一、属性和方法
二、Window.open（"第一部分"，"第二部分"，第三部分"，"第四部分"）
三、Window.close():关闭当前窗口；
四、间隔与延迟
间隔执行一段代码（函数）：Window.setInterval("要执行的代码",间隔的毫秒数);
清除间隔执行：Window.clearInterval(间隔的id);循环一次之后用来清除间隔执行的代码；
延迟一段时间执行某一段代码（函数）：window.setTimeout("要执行的代码",延迟的毫秒数);
清除延迟：window.clearTimeout(延迟的id);清除setTimeout；
五、调整页面
六、模态对话框和非模态对话框
3、Windows.history对象
4、Windows.location对象
5、Windows.status对象
6、Windows.document对象 ☆
一、找到元素
二、操作元素
1.非表单元素：
1）获取内容
2）设置内容
2.表单元素
1）获取内容
2）设置内容
3.一个小知识点：
三、操作属性
四、操作样式
例子：展示图片的手动自动切换
源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片切换</title> <link href="切换样式表.css" rel="stylesheet" type="text/css" /> </head> <body bgcolor="#66FF99"> <div id="tuijian" style="background-image:url(aony.png);"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div> </body> </html> <script language="javascript"> var jpg=new Array(); jpg[0]="url(aony.png)"; jpg[1]="url(bdec.png)"; jpg[2]="url(nkss.jpg)"; var tjimg=document.getElementById("tuijian"); var xb=0; var n=0; function huan() { xb++; if(xb==jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; n=0; if(n==0) { var id=window.setTimeout("huan()",2000); } } function dodo(m) { n=1; xb=xb+m; if(xb<0) { xb=jpg.length-1; } else if(xb>=jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",1000); </script>
CSS样式表
@charset "utf-8";
/* CSS Document */
*
{
margin:0px auto;
padding:0px;
}
#tuijian
{
270px;
height:270px;
background-repeat:no-repeat;
background-position:center;
}
.pages
{
top:250px;
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
60px;
height:60px;
}
#p1
{
background-image:url(left2.png);
float:left;
margin:150px 0px 0px 10px;
}
#p2
{
background-image:url(right2.png);
float:right;
margin:150px 10px 0px 0px;
}
效果图
五、相关元素操作
六、元素的创建、添加、删除
七、字符串的操作
八、日期时间的操作
九、数学函数的操作
十、小知识点