人民大2024Web前端技术-PPT模块四 任务2 主页榜单鼠标滑过功能实现.pptx

主页榜单鼠标滑过功能实现Web前端技术主讲老师：***延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述在页面浏览过程中，常常会遇到链接文字或者按钮的滑动动画。例如在下面的页面中鼠标滑过歌曲名称时，对应的播放，加入歌曲列表和收藏按钮就会出现；当鼠标滑出后，按钮又会再次隐藏。又比如，当鼠标滑过播放按钮时，按钮也会发生颜色等变化；当鼠标滑出后，按钮又会恢复到原来的样式。下面，我们将学习如何使用JavaScript相关知识完成鼠标滑过动画任务。效果如图4-2-1所示。延时符

学习目标延时符

学习目标掌握外部使用JavaScript的方法；掌握DOM基础知识，以及DOM对象获取和操作HTML元素的方法；掌握JavaScript中常用事件的使用方法；知识目标能够根据要求编写JavaScript代码实现鼠标滑过动画功能；能够通过DOM对象对html元素进行操作；能够使用外部JavaScript代码的方法；技能目标延时符培养分析问题能力；培养自主学习能力；素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符外部使用jsfor语句DOM简介获取DOM操作DOM元素常用事件

通过在前一个任务的学习，我们掌握了内部JavaScript代码的使用方法，由script.../script包含的代码就是JavaScript代码，它将直接被浏览器执行。现在我们将学习第二种JavaScript代码的使用方法，把JavaScript代码放到一个单独的.js文件，然后在HTML中通过scriptsrc=.../script引入这个文件：JavaScript的使用：外部使用延时符1.html??2.head??3.???script?src=js/abc.js/script?//使用外部JavaScript文件?abc.js4./head??5.body??6.???...??7./body??8./html??注意：每个html文件中可以多次使用script/script来使用JavaScript代码。每对script/script只能是内部或者外部使用JavaScript，而不能同时内部和外部使用。

JavaScript的使用：DOM基础延时符DOM(DocumentObjectModel)译为文档对象模型，是HTML和XML文档的API（应用程序编程接口）。其中HTMLDOM定义了访问和操作HTML文档的标准方法。DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。通过观察html代码和对应的DOM结构图，不难发现每一个html元素就是一个DOM树形结构中的节点（DOMNode）。一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。1.html??2.head??3.title文档标题/title??4./head??5.body??6.a?href=’’我的链接/a??7.h1我的标题/h1??8./body??9./html???

JavaScript的使用：DOM基础延时符浏览器原生提供document节点，代表整个文档。文档的第一层有两个节点，第一个是文档类型节点（!doctypehtml），第二个是HTML网页的顶层容器标签html。后者构成了树结构的根节点（rootnode），其他HTML标签节点都是它的下级节点。除了根节点，其他节点都有三种层级关系。?父节点关系（parentNode）：直接的那个上级节点。?子节点关系（childNodes）：直接的下级节点。?同级节点关系（sibling）：拥有同一个父节点的节点。DOM提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。在JavaScript中，将通过这些节点对html元素进行各种操作，比如：更新，遍历，添加和删除。

JavaScript的使用：DOM获取延时符在操作一个DOM节点前，我们需要通过各种方法获取DOM节点。最常用是获取单个DOM节点的方法，比如：document.getElementById()，由于ID属性值在HTML文档中的唯一性的，所以document.getElementById()可以直接定位唯一的一个