JavaScript —— APIs（一）

一、 变量声明

【示例】

可以改

num 和 i 不可以将 let 改为 const

数组和对象可以把 let 换为 const

注意：若数组或者对象的地址不一样时，就不可以

黄框中的是新数组，新对象 （新地址）

蓝框中的，是同一个数组，往里面加数据

【总结】

二、Web API 基本认知

（一）作用与分类

（二）DOM定义

（三）DOM树

（四）DOM对象

在 html 里面叫标签

在 DOM 里面叫对象

注意：document 是网页里最大的对象

           页面中所有的元素都在document里面（即所有标签都在document里面获得）

三、获取DOM对象 

（一）选择匹配的第一个元素

（二）选择匹配的多个元素

1. 定义与打印

返回的是一个伪数组

注意：

2. 返回的是一个伪数组

【 for 循环遍历来获取元素】

注意：哪怕只有一个元素，也是数组（只是数组里面只有一个元素）

（三）其他获取DOM元素的方法 

四、操作元素内容

（一）innerText 

直接打印，则获取文字内容 

修改内容

只显示文本，不解析标签

（二）innerHTML

可以识别文本，也可以解析标签

（三）抽奖案例

HTML代码

JS代码

注意：若 html 的元素用的 id 选择器，则获取元素时，用 #

注意：获取元素时，定义的那个名字，就是对象名；接下来要是写入或者修改元素内容时，则用这个名字 （ 名字 . innerHTML = 值 ）

五、操作元素属性 

（一）操作元素常用属性

【案例】

【代码】

注意：生成随机数函数名字不要和随机数变量名字一样，否则就更换不了图片

（二）操作元素样式属性 

注意：简写

 ——> 

1.  通过 style 属性修改样式

注意：若修改的属性值里面有px等字母，则修改时必须加 ' ' 引号，将其整体变为一个字符串

注意：当 css 中的属性是多组单词时，js 中采取小驼峰命名法

注意：页面中的 body 是唯一的，所以可以直接用 document.body 直接获取body标签

垂直方向上：靠上   水平方向上：居中 

cover 某一方向上拉满（即撑满）

2.  通过类名修改样式

可以同时修改多个样式。

直接使用className复赋值时，会覆盖以前的类名

写的是 className 但是解析到 html 中，所获得的标签属性是 class

注意：后面的类名会覆盖掉前面写的类名（前面类名所写的所有样式都会被后面的覆盖掉）

          （前面红字，后面没有声明字体颜色，则字体会变成后面样式中默认的黑色）

注意：若还想要原来的类名，则可以再用className 赋值时，把原先类名也加上，中间用空格隔开

3.  通过 classList 修改样式 

classList 是追加和删除不影响以前的类名

①、add 追加

②、 删除类 remove（）类名不加点，并且是字符串

③、 切换类 toggle（） 有还是没有，有该属性就删掉 没有就加上

4.【随机轮播图案例】

【html —— body 部分】

<1> 声明一个数组对象

<2> 把对应的数据渲染到标签里面

a、产生随机数

注意：数组中产生随机数的方法

①、用 Math.floor（Math.random（）*  数组名.length ）

②、用 parseInt ( Math.random ( )  *  数组名.length)

       parseInt 取整函数     Math.floor 向下取整

b、获取图片元素，并且修改图片路径

 注意：

sliderData是一个数组  没有 url

sliderData [ random ] 是一个对象（也是数组中的一个元素）， 有 url  ，可以通过 对象.url 来修改图片地址（即url的值）

c、把p里面的文字内容更换

d、修改背景颜色

e、高亮小圆点

注意：数组随机数是0-7 ， 但是小圆点 li 的总数是1-8 ， 所以用 random + 1

注意：li.classList.add('active')  让当前的 li 添加 active 属性

5.  【总结】 

注意：行内样式表的权重比较高，只有 important 才可以盖掉该样式属性

           通过 style 生成的就是行内样式表，所以它会盖掉之前写的大部分样式

（三）表单元素属性

1.  定义

注意：想要获取表单里面的值，应该用 表单 . value ，innerHTML 得不到表单的内容

设置 或 修改表单的值

  ——> 

2.  布尔值

 ①、  checked 选项框是否被选中

true 为被选中

false 为没有被选中

注意：' ' 引号里面只要不是空，返回的布尔值都为 true

②、  disabled  按钮禁用吗

true 为禁用

false 为不禁用

（四）自定义属性

定义自定义属性

自定义属性集合 dataset  ，会打印里面的所有 data 自定义属性

会产生一个对象

获取单个的 data 数据 

六、定时器 - 间歇函数 

（一）开启定时器

注意：定时器返回的是一个 id 数字，每个定时器的符号都是独一无二的

注意：函数名 （ ） 是函数调用

注意：若已有函数时，里面就要写函数名，不可以加（），加了就直接调用了，实现不了一秒打印一次setInterval(函数名，间隔时间)

注意：若要加小括号，则必须在外面加 ' ' 引号

【错误】

【正确】

（二）关闭定时器

 （三）【总结】

（四）【用户协议倒计时案例】

注意：textarea 文本域

注意：button 是一个双标签，不能用 value 来获取内容，必须用 innerHTML 来获取内容

【代码】 注意：到 0 就关闭定时器  ，定时器停止

【完整代码】

七、综合案例

定义一个数组对象来获取初始数据

注意：代码运行时，会直接显示第一张图片。所以直接从第二张图片开始倒计时

 定时器超了的话，结果就是undefined

得到每一个对象

黄色：选择第 i + 2 个小圆点

蓝色：给这个小圆点加高亮属性 active

但是这样写的话，会每次都加一个高亮小圆点，最后有几个元素，会加几个小圆点

想要实现只有一个高亮小圆点

必须先删除原有的 li 中的 active 属性，再给当前被选中的 li 加 active 属性

注意：html里面 li 的 active 属性不可以删除，否则程序会报错

 

无缝衔接位置：必须在 i++ 的后面

结果：从第一张图运行到最后一张图时，再返回回来从第一张图再次运行，实现循环播放

【总代码】

【HTML代码】

【JS代码】

好啦！本周的分享就到这里啦！我们下周同一时间同一地点不见不散！！！

大家记得下去要练习哦！记得把案例多敲几遍。