网页设计与制作——JavaScript+jQuery标准教程 教案 第5章 文档对象模型和事件.docx

《网页设计与制作——JavaScript+jQuery标准教程 教案 第5章 文档对象模型和事件.docx》由会员分享，可在线阅读，更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第5章 文档对象模型和事件.docx（9页珍藏版）》请在第一文库网上搜索。

1、电子商务网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称电子商务网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内：课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外：序号5授课日期月日月日月日月日授课班级课内教学内容：第5章文档对象模型和事件课外学习任务：(1)课前：以小组为单位，分析如何使用文档对象模型和事件实现网页的动态效果并以PPT的形式记录下来。(2)课后：使用鼠标点击事件实现控制图片的显示和隐藏。实现将input输入框输入的内容显示在div元素中。教学目标：知识目标 掌握DOM树结构； 掌

2、握document对象； 掌握操作元素； 掌握事件； 掌握DoM节点操作。能力目标 能够使用文档对象模型和事件实现动态页面效果； 能够合理使用节点设置元素； 能够灵活控制每个元素。素质目标 较强的专业知识和自学能力； 丰富知识结构，提升专业知识； 掌握对象模型和事件的使用，理解并应用专业知识。重点难点及解决方法：(1)重点：对元素的操作与事件解决方法：通过知识点讲解+课堂示例相结合的方法,教师讲解对元素操作以及事件的实现原理和相关样式的使用，引导学生积极思考，掌握相应知识；同时通过课堂示例展示,使学生可以掌握元素操作和事件的相关知识;培养学生的思维能力和分析问题解决问题的能力。(2)难点：DO

3、M节点解决方法：通过窠例解析+启发式教学讲解的方式，细致讲解使用DOM节点实现元素的创建、查找、插入等操作。帮助学生掌握DOM节点的使用方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课

4、后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“”。【导引示例】DOM和事件是JavaScript中十分重要的部分。通过DOM和事件可以轻松实现网页的动态交互，让用户有丰富的操作体验。例如，点击按钮之后，按钮的背景色发生改变。1初识DoM【D0M树】HTM1DOM标准会将HTM1文档中的所有内容全部处理为节点，并且每个节点之间会产生关联形成DOM树形结构，通过这个结构可以根据一个节点访问到另外一个节点。在HTM1文档中，元素、文本、属性和注释都属于节点。DoM树如图5.2所示。document对象简单理解就是整个HTM1文档内容。通过docume

5、nt对象的属性和方法，可以对HTM1文档中的所有元素进行访问和设置。document对象的属性如表5.1所示。属性功能bodV提供对bo1y元素的直接访问也可以引用最外层的VihUnese元素cookie设置或返回与当前文档相关的所有cookiedomain返回当前文档的域名IasiModified返回文档被最后修改的日期和时间referrer返回载入当前文档的文档的UR1tit1e返回当前文档的标题JUR1返回当前文档的UR1document对象的方法如表5.2所示。方法功能C1OSen关闭用documcm.open()方法打开的输出流并显示选定的数据netE1ementBvId()返回对拥

6、有指定id的第一个对象的引用SetE1ementsBvNameO返回带有指定名称的对象集合uciE1cncnsBvTa1iNamc()ODenC返回带有指定标签名的对象集合打开一个流以收集来自任何documen1WriI()或documm.wrie1n()方法的输出write，)向文档写HTM1表达式或JavaScript代码Write1neI等同于Write()方法不同的是在每个表达式之后写一个换行符I2.元素的操作【查找元素】查找HTM1文档中的元素的方法有5种，分别为通过id属性、标签名、类名、CSS选择器以及HTM1对象集合查找。1 .通过id属性查找元素通过id属性查找HTM1元素，

7、需要使用document对象的getE1ementById()方法，其语法形式如下所示。document.getE1ementById(id属性名)；2 .通过标签名查找元素通过标签名查找HTM1元素，需要使用document对象的getE1ementsByTagName()方法，其语法形式如下所示。document.getE1ementsByTagName(标签名)；3 .通过类名查找元素通过类名查找HTM1元素需要使用document对象的getE1ementsByCIassName(),其语法形式如下所示。document.getE1ementsByC1assName(类属性名)；4 .

8、通过CSS选择器查找元素通过CSS选择器查找HTM1元素需要使用document对象的querySe1ectorA()方法，其语法形式如下所示。document.querySe1ectorA(CSS选择器)；使用querySe1ectorAH()方法可以实现通过CSS选择器选择HTM1文档中的元素。该方法返回的也是一个数组，也可以通过索引的方式访问指定的元素。例如，查找一个div元素中id值为a1的元素的代码如下所示。document.querySeIectorA(div#a1);5 .通过HTM1对象集合查找元素通过HTM1对象集合可以获取到对应的元素集合，其语法形式如下所示。documen

9、t.集合；document对象提供的HTM1对象集合如表5.3所示。集合功能aim提供对文档中所有HTM1元素的i悯anchors1返回对文档中所有An4hor对象的引用aDD1ets返回对文档中所有ApNet对象的GI用fbrms1I返回对文档中所有ForTI对象引用imawes返回对文档中所有Image对象引月1inks返回对文档中所有Arda和1ink对象引用设置元素的文本内容和属性值】通过JaVaSCriPt代码可以动态地设置HTM1文档中元素的文本内容和属性值。设置元素的文本内容需要使用innerHTM1属性，而设置元素的属性值直接使用标签的属性名即可。设置它们都需要基于查找元素的方

10、法先获取元素，其语法形式如下所示。查找元素的方法.innerHTM1=文本内容；查找元素的方法.标签属性名=属性值；【设置元素样式】设置元素的样式需要使用到Sty1e对象的属性。该对象的属性分为12类，包括背景、边框、边距、布局、列表、杂项、定位、打印、滚动条、表格、文本和规范。每个分类又可以细化为各种与CSS样式对应的具体属性。例如，定位分类包含的属性如表5.4所示。属性功能bottom设置元素的底边缘距离父元素底;力缘的垂直i巨离1eft设置元素的左边缘距离父元素左:力缘的水平I而距离Dosition把元素放置在staticre1ativeabso1ute或fixed的位置riht设置元素

11、的右边缘距离父元素右3。缘的水平田离too设置元素的顶边缘距离父元素顶之缘的垂直iz1ndex设置元素的堆叠次序【案例分析51】侧边栏折叠效果网页的侧边栏是十分常见的一种导航方式。为了节约页面空间，侧边栏一般会以折叠方式进行隐藏。当用户点击或指向对应按钮后，侧边栏才会展开显示。本案例就通过设置元素样式的方式对侧边栏进行折叠隐藏和展开显示。3.事件【事件概述】事件在使用时需要嵌入到元素标签中，而每个元素标签可以一次嵌入多个事件，每个事件之间使用空格进行分割，其语法形式如下所示。其中，事件处理程序可以为代码块、函数调用或函数定义语句。例如，为div元素添加事件的代码如下所示。其中，Onc1ick事

12、件触发的是一行语句，Ondb1C1iCk事件触发的是一个函数a(),函数的定义语句在JaVaSCriPt文件中定义。【鼠标事件】鼠标事件可以捕获鼠标的不同操作触发的对应事件。这些操作包含单击、右击、双击、悬浮于元素上方、离开元素上方等多种事件。在前文中用到的事件Onc1ick就是鼠标点击事件的一种。鼠标事件如表5.5所Jo事件功能onc1ick当用户单击元素时发生此事件oncontex(menu当用户右键单击某个元素并打开上下文菜单时,发生此事件Ondb1c1ick当用户双击元素时发生此事件onmousedown当用户在元素上按下鼠标按钮时发生此事件Onmouseenter当指针移动到元素上B

13、勺发生此拿件Onmouse1eave当指针从元素上移出时发生此孽件Onmousemove当指针在元素上方移动时发生世事件onmouseout当用户将鼠标指针移出元素或其牛的子元素时发江此事件onmouseover当指针移动到元素或其中的子元素上时发生此事，牛OnmouseuD当用户在元素上释放鼠标按钮时,发生此事件【键盘事件】键盘事件是按键盘上的按键后触发的事件。通过键盘事件，可以捕获按键被按下、释放和按某个按键3种状态。键盘事件如表5.6所示。事件功能onkevdown当用户正在按下键时发生此季件Onkevnress当用户按下并释放某个键时,发生此事件onkevuo当用户松开键时发生此事件【表单事件】4.DOM节点【节点基础】DOM树中的每个节点之间都有一定的层级关系，这些关系使用一些专有名词进行描述。例如，某个节点的上级节点被称为父节点(parentNode)；某个节点的下级节点被称为子节点(ChiIdNode)；拥有相同父节点的多个节点被称为兄弟节点或同胞节点(Sib1ingNode)。在DOM树中，最基础的节点也就是最顶端的节点,被称为根节点(rootNode)。除了根节点，所有节点都有父节点。一个简单的节点关系如图5.11所示。【创建节点】在HTM1文档的DoM树中，要添加节点，首先要创建相应的节点。对于不同类型的节点，创建节点的方法也不同，具