北大青鸟PPT:DOM编程－document对象

第三章

DOM编程－document对象

回顾

•window对象有哪些常用的方法及其含义？

•请说明Date对象主要用来做什么？

•请详细解释setTimeout( )方法的功能。

回顾

……

<SELECT name="selTopic"  id="selPTopic">

  <OPTION value="gard.html">网上谈兵</OPTION>

  <OPTION value="IT.html">IT茶馆</OPTION>

  <OPTION value="news.html" >新闻贴图</OPTION>

  <OPTION value="education.html">教育大家谈</OPTION>

</SELECT>

……

预习检查

•document对象有哪些常用方法？

•bgcolor属性用来设置什么？

•简要说明如何制作浮动的广告图片。

本章任务

•制作浮动的广告图片特效

• 制作带关闭按钮的浮动窗口

• 制作全选/全不选特效

本章目标

document对象

•属性

•方法

制作浮动的广告图片-1

制作浮动的广告图片-2

•实现思路：

– 在页面中插入层，然后在层中插入图片

– 编写脚本

1、使用getElementByID( )方法获取层对象

2、捕获鼠标滚动事件，改变层对象的位置坐标

制作浮动的广告图片-3

常见的页面坐标的介绍

top:指定元素的上边界位置。

pixelTop:设置或返回元素的上边界。

left:指定元素的左边界位置。

scrolltop:页面滚动的高度

制作浮动的广告图片-4

制作带关闭按钮的浮动窗口-1

制作带关闭按钮的浮动窗口-2

•实现思路：

– 在页面中插入层，在层中插入图片

– 编写脚本

1、使用getElementById( )方法获得层对象

2、设置层的样式style的显示属性display="none"

制作带关闭按钮的浮动窗口-3

制作带关闭按钮的浮动窗口-4

制作带关闭按钮的浮动窗口-5

小结 1

制作右边栏浮动的带关闭按钮的广告图片

制作实现全选效果-1

制作实现全选效果-2

1、复选框是否选中的属性是哪个？

2、写代码逐个复选框设置为true，有没有更好的办法？

制作实现全选效果-3

•实现思路：

– 创建一组同名的复选框

– 编写脚本

1、使用getElementsByName( )方法获得一组同名的复选框对象。

2、通过循环来改变复选框是否被选中属性checked的值。

制作实现全选效果-4

小结 2

•编写如左图所示，通过全选/全不选前面加个复选框来实现全选/全不选切换的效果。

常见错误-1

常见错误-2

总结

•请介绍Document对象的常用属性？

•请详细解释Document对象的常用方法？

•请简述制作带关闭按钮的浮动窗口实现思路？

•请简要回答如何制作全选/全不选复选框效果？