企业官网建设流程全解析

01. 声明变量const优先

JS学习目录

课程安排

第一天：

变量声明：

那么，提出以下问题：

实操：

没有报错。
所以，为什么复杂数据类型就可以呢？

请看内存存储演示：


存储的数组，其地址没变，则不算改变。
如若改变数组地址，如赋值新的数组，则算改变。

总结：

02. DOM树和DOM对象

Web API基本认知

（1）API的作用和分类

注意：alert、prompt都是属于DOM内的。

（2）什么是DOM

操作网页内容，即操作标签。

总结：

（3）DOM树

整个页面都是document。

（4）DOM对象
上文提及DOM树主要目的是把DOM标签之间的关系展示出来，且这个API是通过JS的形式来操控这些标签，比如说让一个div，通过js的形式，让其里面的文字改变。

操作标签的第一步是获取标签，在js内，在dom内，每一个标签，都会有一个对应着的DOM树结构和它一一对应，它是以对象的形式来表示的。

在js内，任何一个标签都是一个对象。
（即，把标签获取过来，在js内，都是当对象来看的）

document对象：

03. 获取DOM元素

css是通过选择器获取标签。而js有它自己的方式。

我们想要操作某个标签首先要做什么？

根据CSS选择器来获取DOM元素

（1）选择匹配第一个元素
注意：只返回第一个
例如，通过标签名。

例如，通过其他的。

（2)选择匹配多个元素

总结：



遍历：




但也可以不遍历：

最后，注意：

其他获取DOM元素的方法

04. DOM修改元素内容以及年会抽奖案例

接下来，我们要讲的是操作元素的内容：

请看，我们所见到的倒计时，就是在修改文字内容：



但是，不解析标签

所以，我们可以更换使用innerHTML

总结：

年会抽奖案例：

实操：

定义一个数组，随机生成一个索引值，把名字填上一等奖，然后删除数组内该值，以此类推。

实操：

然后，

二三等奖的复制粘贴即可。

05. DOM修改元素常见属性以及案例

学习目录：

操作元素常用属性：

练习：

06. 通过style修改样式

通过style修改样式：

案例：随机更换背景图片（刷新更换）

07. 通过类名修改样式

如果我们需要给这个盒子修改的样式比较多，
那么采取style形式修改则需要写很多很多行代码
（如：下图）

解决方案：


赋值class：

08. 通过classList修改样式

因为通过className类名去修改样式的话，
他会覆盖原先的类名，则我们想添加某个类的时候，
就一定要去查找这个标签原来有没有类名。


（box是对象）

区别：

总结：

09. 随机轮播图案例

案例：

实操：

10. 获取设置表单的值

获取设置表单的值：

例子1（修改表单值用value、更改类型用属性）：


例子2（其他属性修改举例）：

11. H5自定义属性-data

我们先前操作的都是元素本身就有的属性

12. 定时器-间歇函数

定时器—间歇函数：



使用let是因为定时器有开有关，开的时候会重新赋予新值。

13. 用户倒计时效果

用户倒计时效果：

14. 综合案例—轮播图定时版

案例思路：