教案：JavaScript第3章DOM编程－document对象

最新推荐文章于 2021-09-16 20:16:30 发布

默然说话

最新推荐文章于 2021-09-16 20:16:30 发布

阅读量3.3k

点赞数 1

分类专栏：默然说话文章标签： javascript 编程 function css html div

本文链接：https://blog.csdn.net/mouyong/article/details/2303004

版权

默然说话专栏收录该内容

209 篇文章 9 订阅

订阅专栏

由于种种原因，部分内容被隐藏，请大家原谅。

如果有什么问题，可以与我联系，我会尽快解答。

如果你觉得这篇文章对你有用，请回贴，谢谢。

授课教师：牟勇

课时：100分钟

l 本章技能目标

n 会使用document对象的getElementById()方法访问DIV层对象

n 会使用document对象的getElementsByName()方法访问表单元素

n 会使用DIV对象的样式属性控制层的隐藏和显示

l 本章重点

ndocument对象getElementById()，getElementsByName()方法的应用

l 本章难点

n制作带关闭按钮随滚动条滚动的广告特效

l 本章工作任务

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

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

n制作全选/全不选特效

l 整章授课思路

n先演示本章要实现的效果页面，然后逐一告诉学员如何做，穿插讲解理论。

ndocument对象的常用属性和方法介绍

n介绍如何制作能随鼠标浮动的广告层图片

n升级：制作带关闭按钮的浮动窗口

n讲解如何制作“全选效果”

n课堂练习：改成全选/全不选切换的效果，全选/全不选前面加个复选框，不使用超链接

n常见错误

回顾上一章: [10分钟]

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

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

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

预习检查: [5分钟]

document对象有哪些常用方法？

bgcolor属性用来设置什么？

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

课程知识点讲解：

document对象：[10分钟]

引入：认识了DOM的重要性，我们就来学习在HTML中最常用的一个对象：document对象的属性和方法吧

属性或方法	说明
bgColor	背景颜色
getElementById()	通过ID获得元素
getElementsByName()	通过name属性获得一组元素

由于4.0中已经学过了document对象的属性和方法，所以，只需要简单介绍即可，重点强调getElementById()与getElementsByName()方法，它们的相同的地方就是都能获得HTML元素对象，不同的地方就是getElementById()方法是根据id来获得一个元素对象，而getElementsByName()方法是根据name来获得一组元素对象。

如何制作随滚动条滚动的浮动广告：[30分钟]

引入：通过简单的学习，我们已经知道几个document重要的属性和方法，下面我们来具体运用一下它们，看看我们都能做些什么吧!

问题：如何在页面上方显示广告图片？如何控制图片的移动？

分析：使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标

实现思路：在页面中插入层，然后在层中插入图片。编写脚本，使用getElementById()方法获取层对象，然后根据鼠标滚动的距离移动层的位置。

常见页面的坐标介绍

top：左上角的y坐标。

pixelTop：左上角的y坐标，与top的区别仅在于：ixelTop是一个整数，所以可以直接参与算术运算，而top是一个字符串，不能直接参与算术运算。

scrollTop：滚动条滚动的距离。

关键代码：

var advInitTop=0;

function inix( ){

x=document.getElementById("advLayer").style.pixelTop; }

function move( ){

document.getElementById("advLayer").style.pixelTop=

advInitTop+document.body.scrollTop;

}

window.οnscrοll=move ; //当页面滚动时调用move( )函数

</SCRIPT>

……

……

<DIV id="advLayer" style="position:absolute; left:16px;

top:129px; width:144px; height:95px; z-index:1;">

<A href="http://www.taobao.com"><IMG src="images/advpic.gif"

width="180" height="230" border="0"></A>

</DIV>

教员应讲解关键代码(红色部分)，重点说明函数的两种调用方式：HTML调用和JS调用(土红色部分)。

升级：制作带关闭按钮的浮动广告[20分钟]

引入：我们前面已经实现了一个可以随着滚动条跑的广告窗口，但这样的广告窗口有个缺点，就是当用户不想看到它的时候无法关闭它。

问题：如何实现带关闭功能的浮动窗口？

分析：做一个图片，再作一个层，把图片贴到这个层里面，用它来实现关闭(点击时隐藏层)。

实现思路：

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

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

var advInitTop=0;

function inix( ){

advInitTop=document.getElementById("advLayer").style.pixelTop; }

function move( ){

document.getElementById("advLayer").style.pixelTop=

advInitTop+document.body.scrollTop; }

function closeMe( ){

document.getElementById("closeLayer").style.display="none";

document.getElementById("advLayer").style.display="none"; }

window.οnscrοll=move ; //当页面滚动时调用move( )函数

</SCRIPT>

<DIV id="closeLayer" οnclick="closeMe( )"

style="position:absolute;left:166px;top:132px;width:27px;

height:19px;z-index:2;">

教员应强调隐藏层的代码(土红色部分)。

如果要隐藏，使用“none”字面量，如果要显示，使用“block”字面量。

下面是参考内容(这部分内容教员可以有选择性的与学员说明，不需要全部讲)：

block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
table : 　CSS2　将对象作为块元素级的表格显示
table-caption : 　CSS2　将对象作为表格标题显示
table-cell : 　CSS2　将对象作为表格单元格显示
table-column : 　CSS2　将对象作为表格列显示
table-column-group : 　CSS2　将对象作为表格列组显示
table-header-group : 　CSS2　将对象作为表格标题组显示
table-footer-group : 　CSS2　将对象作为表格脚注组显示
table-row : 　CSS2　将对象作为表格行显示
table-row-group : 　CSS2　将对象作为表格行组显示

问题：上一张PPT中示例能实现关闭了，但关闭图片不能跟随滚动，怎么办？

分析：让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。

var advInitTop=0;

var closeInitTop=0;

function inix( ){

advInitTop=document.getElementById("advLayer").style.pixelTop;closeInitTop=document.getElementById("closeLayer").style.pixelTop; }

function move( ){

document.getElementById("advLayer").style.pixelTop=

advInitTop+document.body.scrollTop ;

document.getElementById("closeLayer").style.pixelTop=

closeInitTop+document.body.scrollTop ; }

function closeMe( ) {

document.getElementById("closeLayer").style.display="none";

document.getElementById("advLayer").style.display="none"; }

window.οnscrοll=move ; //窗口的滚动事件

</SCRIPT>

在原来的基础上再添加一句代码就可以了(土红色部分)。教员可以让学员到老师机上来添加这一句代码，以加强学员对getElementById()方法的使用。

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

教员提供练习代码(幻灯片上的超链接已提供了练习代码的链接)，学员完成代码填空。

制作实现全选效果[20分钟]

引入：制作浮动广告图片到此告一段落。在网页上，我们还会常常看到如下的情况。

如何给那些复选框提供全选和全不选的功能呢？

这要解决如下2个问题：

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

答案：checked

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

答案：让所有需要选中的复选框为同一个名字，让它们成为一个数组，然后使用循环解决问题。

实现思路：

1.创建一组同名复选框

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

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

function checkAll(boolValue ) {

var allCheckBoxs=document.getElementsByName("isBuy") ;

for (var i=0;i<allCheckBoxs.length ;i++)

{

if(allCheckBoxs[i].type=="checkbox")

allCheckBoxs[i].checked=boolValue ;

} }

</SCRIPT>

……

<TR>

<TD width="6%"><A href="javascript: checkAll(false)">全不选

</A></TD>

<TD width="88%"><IMG src="images/top.jpg" width="845"

height="18"></TD>

</TR>

……

教员解释关键代码(红色部分)，可以提醒学员：循环中的if语句是否必须？(这个if是为了预留退路的代码，避免将来HTML网页进行修改时别的元素使用了相同name的情况)，href=;javascript:的意思(href=javascript:的意思是让原来的超链接失效，使得在我们点击一个超链接时不是跳转到另一个页面，而是执行一个javascript函数，javascript:仅用于href属性)