版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
主页榜单鼠标滑过功能实现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()可以直接定位唯一的一个DOM节点。获取多个DOM节点的方法，例如：document.getElementsByTagName()和document.getElementsByClassName()方法返回一组符合要求的DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。1.//
返回ID为'test'的节点：
2.var
test
=
document.getElementById('test');
3.//
先定位ID为'test-table'的节点，再返回其内部所有tr节点：
4.var
trs
=
document.getElementById('test-table').getElementsByTagName('tr');
5.//
先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
6.var
reds
=
document.getElementById('test-div').getElementsByClassName('red');
7.//
获取节点test下的所有直属子节点:
8.var
cs
=
test.children;
9.//
获取节点test下第一个、最后一个子节点：
10.var
first
=
test.firstElementChild;
11.var
last
=
test.lastElementChild;
JavaScript的使用：DOM获取延时符另外，第二类方法是使用querySelector()和querySelectorAll()，需要了解css语法中选择器(selector)语法，然后使用条件来获取节点，更加方便：1.//
通过querySelector获取ID为q1的节点：
2.var
q1
=
document.querySelector('#q1');
3.//
通过querySelectorAll获取q1节点内的符合条件的所有节点：
4.var
ps
=
q1.querySelectorAll('div.highlighted
>
p');
注意：IE浏览器对querySelector的支持比较复杂，其中低版本的IE<8不支持querySelector和querySelectorAll。IE8有限支持，只支持ID属性获取。IE9和更高版本完全支持。JavaScript的使用：DOM操作延时符在获取DOM节点后，可以直接修改对应元素内容，常用方法有两种：修改节节点的innerHTML属性或者修改节点的innerText属性。（1）innerHTML属性。innerHTML属性这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。例如：1.//
获取<p
id="p-id">原来的段落文字</p>
2.var
p
=
document.getElementById('p-id');
3.//
设置文本为abc:
4.p.innerHTML
=
'修改后的段落文字';
//
<p
id="p-id">修改后的段落文字</p>
5.//
设置HTML:
6.p.innerHTML
=
'修改后的<span
style="color:red">段落</span>文字';
7.//
<p>...</p>的内部结构已修改
上面代码运行结果如图4-2-5所示：JavaScript的使用：DOM操作延时符（2）innerText属性。修改innerText属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签。1.//
获取<p
id="p-id">...</p>
2.var
p
=
document.getElementById('p-id');
3.//
设置文本:
4.p.innerText
=
'<script>alert("Hi")</script>';
5.//
HTML被自动编码，无法设置一个<script>节点:
6.//
<p
id="p-id"><script>alert("Hi")</script></p>
JavaScript的使用：常用事件延时符HTMLDOM允许JavaScript对HTML事件作出反应。当事件发生时，可以执行JavaScript，比如当用户点击一个HTML元素时。onchange事件。onload和onunload事件。onmouseover和onmouseout事件。onmousedown、onmouseup。onclick事件。JavaScript的使用：事件监听延时符DOM的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。该接口主要提供三个实例方法。addEventListener：绑定事件的监听函数removeEventListener：移除事件的监听函数JavaScript的使用：事件监听
addEventListener()延时符1.EventTarget.addEventListener()。EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。该方法接受三个参数。type：事件名称，大小写敏感。listener：监听函数。事件发生时，会调用该监听函数。useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发（参见后文《事件的传播》部分），默认为false（监听函数只在冒泡阶段被触发）。该参数可选。上面地案例中，button节点的addEventListener方法绑定click事件的监听函数hello，该函数只在冒泡阶段触发。1.target.addEventListener(type,listener[,useCapture]);
1.functionhello(){2.console.log('Helloworld');3.}4.5.varbutton=document.getElementById('btn');6.button.addEventListener('click',hello,false);
JavaScript的使用：事件监听
removeEventListener())延时符EventTarget.removeEventListener方法用来移除addEventListener方法添加的事件监听函数。该方法没有返回值。removeEventListener方法的参数，与addEventListener方法完全一致。它的第一个参数“事件类型”，大小写敏感。注意：removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一个元素节点，否则无效。target.addEventListener('click',listener,false);target.removeEventListener('click',listener,false);
JavaScript的使用：for语句延时符例如，根据年龄显示不同内容，可以用if语句实现如下：注意：其中else语句是可选的。如果语句块只包含一条语句，那么从JavaScript的语法规定而言，可以省略{}，但是强烈建议保留。1.varage=prompt(“输入年龄”);2.if(age>=18){//如果age>=18为true，则执行if语句块3.alert('adult');4.}else{//否则执行else语句块5.alert('teenager');6.}任务实施延时符任务分析技术分析与实现完成代码任务分析延时符实现鼠标滑动动画任务，由于需要在页面加载时自动运行，所以可以使用window对象onload事件。本任务的实现，主要在window.onload的事件处理函数中，通过document.querySelectorAll()获取所有播放、加入播放列表和收藏按钮组成的对象。再对每个对象通过addEventListener()进行mouseover和mouserout事件监听，每当mouseov
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 关于换热器的课程设计
- 关于小班动物的课程设计
- 关于多媒体的课程设计
- 关于区域游戏的课程设计
- 关于储能方面的课程设计
- 关于prime算法的课程设计
- 共享自行车的课程设计
- 2024年护士试用期转正述职报告范文（三篇）
- 2024年骨科护士述职报告范文（三篇）
- 水果收购合同范文
- 银屑病规范化诊疗中心认证标准PPT课件
- 不要随便亲我
- 大学物理第二章液体表面现象
- 初一新生入学教育ppt课件
- 自主选择课余生活PPT课件
- 护照旅行证过期情况说明
- 班级控辍保学工作总结（通用5篇）
- (完整版)高三数学复习学法指导
- 总分结构优秀课件
- 关于开展“庸懒散慢虚粗”问题专项整治的工作方案
- 企业科技管理与技术创新的建议和措施
评论
0/150
提交评论