JavaScrip的DOM操作（13号讲） - 绯色梧桐绯色月

JavaScrip的DOM操作（13号讲）

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
{
    width:270px;
    height:270px;
    background-repeat:no-repeat;
    background-position:center;
}
.pages
{
    top:250px;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.4;
    width: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;
}

效果图

五、相关元素操作

六、元素的创建、添加、删除

七、字符串的操作

八、日期时间的操作

九、数学函数的操作

十、小知识点

posted on 2016-07-14 11:14 绯色梧桐绯色月阅读(148) 评论(0) 编辑收藏举报

刷新页面返回顶部