day01 - Web APIs

day01 - Web APIs

学习目标:

可以对元素属性进行操作

可以对元素内容进行设置

可以对元素样式进行设置

1. 变量声明

1.1 var、 let 和 const

变量声明有三个,我们应该用哪个呢?

  • 首先 var 先排除,老派写法,问题很多,可以淘汰掉。

  • let or const ?

  • 建议:const优先,尽量使用const,原因是:

    • const 语义化更好

    • 很多变量我们声明的时候就知道他不会被更改了,那为什么不用 const呢?

    • 实际开发中也是,比如react框架,基本const

  • 如果你还在纠结,那么我建议:

    • 有了变量先给const,如果发现它后面是要被修改的,再改为let

练习:j

请问以下的 可不可以把let 改为 const?

// 测试1
document.write('我叫' + 'wyy')
let uname = 'wyy'
let song = '原来'
document.write(uname + song)
​
// 测试2
let num1 = +prompt('请输入第一个数值:')
let num2 = +prompt('请输入第二个数值:')
alert(`两者相加的结果是:${num1 + num2}`)
​

请问以下的 可不可以把let 改为 const?

// 测试1
let num = 1
num = num + 1
console.log(num)  // 结果是2
​
// 测试2
for (let i = 0; i < nums.length; i++) {
    document.write(nums[i])
}

请问以下的 可不可以把let 改为 const?

// 测试1
let arr = ['red', 'green']
arr.push('pink')
console.log(arr)  // ['red', 'green', 'pink']
​
// 测试2
let person = {
    uname: 'wyy',
    age: 18,
    gender: '女'
}
person.address = '杭州'
console.log(person)

注意:

  • const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化

  • 但是对于引用数据类型,const声明的变量,里面存的不是 值,不是值,不是值,是 地址。

测试

// 可以改为 const 吗
let person = {
    uname: 'shadow',
    age: 18,
    gender: '女'
}
person.gender = '男'
console.log(person.gender)  // 男
console.log(person)
​
// 下面写法可以吗?
const names = []
names = [1, 2, 3]
​
const obj = {}
obj = {
    uname: 'shadow'
}

总结:

  1. 以后声明变量我们优先使用哪个?

  2. 为什么const声明的对象可以修改里面的属性?

  3. 什么时候使用let声明变量?

2. Web API 基本认知

2.1 作用和分类
  • 作用: 就是使用 JS 去操作 html 和浏览器

  • 分类:DOM (文档对象模型)、BOM(浏览器对象模型)

2.2 什么是DOM
  • DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API

  • 简单理解:DOM是一个对象,用来操作网页的。

    • 例如:改变网页内容、样式等。

2.3 总结:
  • Web API阶段我们学习哪两部分?

  • DOM是什么?有什么作用?

2.4 DOM树
  • 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树

  • 作用:文档树直观的体现了标签与标签之间的关系

节点是文档树的组成部分,每一个节点都是一个 DOM 对象,主要分为元素节点、属性节点、文本节点等。

  1. 【元素节点】其实就是 HTML 标签,如上图中 headdivbody 等都属于元素节点。

  2. 【属性节点】是指 HTML 标签中的属性,如上图中 a 标签的 href 属性、div 标签的 class 属性。

  3. 【文本节点】是指 HTML 标签的文字内容,如 title 标签中的文字。

2.5 DOM对象
  • DOM对象:浏览器根据html标签生成的 JS对象

    • 所有的标签属性都可以在这个对象上面找到

    • 修改这个对象的属性会自动映射到标签身上

  • DOM的核心思想

    • 把网页内容当做对象来处理

  • document 对象

    • 是 DOM 里提供的一个对象

    • 网页所有内容都在document里面

2.6 总结
  • DOM 树是什么?

  • DOM对象怎么创建的?

  • document 是什么?

3. 获取DOM对象

  • 根据CSS选择器来获取DOM元素 (重点)

  • 其他获取DOM元素方法(了解)

    思考:我们想要操作某个标签首先做什么?

3.1 根据CSS选择器来获取DOM元素 (重点)
3.1.1 选择匹配的第一个元素
// 语法
document.querySelector('css选择器')
​
// 参数 包含一个或多个有效的CSS选择器 字符串
​
// 返回值  匹配的第一个元素,如果没有匹配到,则返回null
​
// 示例
document.querySelector('#box div')
3.1.2 选择匹配的多个元素
// 语法
document.querySelectorAll('css选择器')
​
// 参数 包含一个或多个有效的CSS选择器 字符串
​
// 返回值 元素对象集合
​
// 示例
document.querySelectorAll('ul li')
3.1.3 总结
  • 获取一个DOM元素我们使用谁?

  • 获取多个DOM元素我们使用谁?能直接修改吗? 如果不能可以怎么做到修改?

3.1.5 注意
  • document.querySelectorAll('css选择器') 得到的是一个伪数组

    • 有长度有索引号

    • 但是没有数组的方法,如push(),pop()

    • 想要得到里面的每一个元素对象,需要遍历

3.2 总结
  • 获取页面中的标签我们最终常用那两种方式?

  • 他们两者的区别是什么?

  • 他们两者小括号里面的参数有神马注意事项?

    • 里面写的是css选择器

    • 必须是字符串

3.3 其它获取DOM元素的方法(了解)
// 根据id获取一个元素对象
document.getElementById('id')
​
// 根据 标签名 获取多个元素对象
document.getElementsByTagName('tagName')
​
// 根据 类名 获取多个元素对象
document.getElementsByClassName('className')

4. 操作元素内容

  • 元素对象.innerText 属性

  • 元素对象.innerHTML 属性

4.1 元素.innerText 属性

获取或设置标签内容

示例:

const box = document.querySelector('.box')
console.log(box.innerText)  // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容

注意:不识别 html 标签

4.2 元素.innerHTML 属性

获取或设置标签内容

示例:

const box = document.querySelector('.box')
console.log(box.innerHTML) // 获取标签内容
box.innerHTML = '<strong>我要更换</strong>' // 设置标签内容

注意:识别 html 标签 

4.3 总结
  • 设置/修改DOM元素内容有哪2种方式?

  • 二者的区别是什么?

4.4 年会抽奖案例
  • 需求:从数组随机抽取一等奖、二等奖和三等奖,显示到对应的标签里面。

  • 分析

    • 声明数组: const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']

    • 一等奖:随机生成一个数字(0~数组长度),找到对应数组的名字

    • 通过innerText 或者 innerHTML 将名字写入span元素内部

    • 二等奖依次类推

5. 操作元素属性

5.1 操作元素常用属性
  • 通过 JS 设置/修改标签元素属性,比如通过 src更换 图片

  • 常见的属性比如: href、title、src 等

  • 语法:元素对象.属性 = 值

示例:

// 1. 获取图片元素
const img = document.querySelector('img')
// 2. 修改图片对象的属性   对象.属性 = 值
img.src = './images/2.webp'
5.1.2 练习 页面刷新,图片随机更换
  • 需求:当我们刷新页面,页面中的图片随机显示不同的图片

  • 分析:

    • 随机显示,则需要用到随机函数

    • 更换图片需要用到图片的 src 属性,进行修改

    • 核心思路:

      • 获取图片元素

      • 随机得到图片序号

      • 图片.src = 图片随机路径

5.2 操作元素样式属性
  • 可以通过 JS 设置/修改标签元素的样式属性

  • 比如通过 轮播图小圆点自动更换颜色样式等

5.2.1 通过 style 属性操作CSS
  • 语法:对象.style.样式属性 = 值

示例:

// 1. 获取元素
const box = document.querySelector('.box')
//2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
box.style.width = '300px'
// 多组单词的采取 小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'

注意:

  • 修改样式通过style属性引出

  • 如果属性有-连接符,需要转换为小驼峰命名法

  • 赋值的时候,需要的时候不要忘记加css单位

  • bn的是行内样式

案例: 页面刷新,页面随机更换背景图片

  • 需求 当我们刷新页面,页面中的背景图片随机显示不同的图片

  • 分析:

    • 随机函数

    • css页面背景图片 background-image

    • 标签选择body, 因为body是唯一的标签,可以直接写 document.body.style

// console.log(document.body)
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
    return Math.floor(Math.random() * (M - N + 1)) + N
}
// 随机数
const random = getRandom(1, 10)
document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
5.2.2 操作类名(className) 操作CSS
  • 如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。

  • 语法:元素对象.className = 'active'

示例:

// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名  class 是个关键字 我们用 className
div.className = 'nav box'

注意:

  • 由于class是关键字, 所以使用className去代替

  • className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

5.2.3 总结
  • 使用 className 有什么好处?

  • 使用 className 有什么注意事项?

5.2.4 通过 classList 操作类控制CSS
  • 为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

  • 语法:

    // 追加一个类
    元素.classList.add('类名')
    // 删除一个类
    元素.classList.remove('类名')
    // 切换一个类
    元素.classList.toggle('类名')
5.2.5 总结

使用 classNameclassList的区别?

  • className修改大量类名的时候更方便

  • classList修改不多类名的时候更方便

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

5.2.6 轮播图随机版

需求:当我们刷新页面,页面中的轮播图会显示不同图片以及样式

  • 图片会随机变换

  • 底部盒子背景颜色和文字内容会变换

  • 小圆点随机一个高亮显示

分析:

  • 准备一个数组对象,里面包含详细信息

  • 随机选择一个数字,选出数组对应的对象,更换图片,底部盒子背景颜色,以及文字内容

  • 利用这个随机数字,让小圆点添加高亮的类(addClass) 利用css 结构伪类选择器

5.3 操作表单元素 属性
  • 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框

  • 正常的有属性有取值的 跟其他的标签属性没有任何区别

  • 语法

    • 获取: 元素对象.属性名

    • 设置: DOM对象.属性名 = 新值

示例:

// 1 获取元素
// const uname = document.querySelector('input')
// 2. 获取值  获取表单里面的值 用的  表单.value
// console.log(uname.value) // 电脑
// console.log(uname.innerHTML)  innertHTML 得不到表单的内容
// 3. 设置表单的值
// uname.value = '我要买电脑'
// console.log(uname.type)
// uname.type = 'password'
  • 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性

  • 比如: disabled、checked、selected

示例:

// 1. 获取
const ipt = document.querySelector('input')
// console.log(ipt.checked)  // false   只接受布尔值
ipt.checked = true
// ipt.checked = 'true'  // 会选中,不提倡  有隐式转换
​
// 1.获取
const button = document.querySelector('button')
// console.log(button.disabled)  // 默认false 不禁用
button.disabled = true   // 禁用按钮
5.4 自定义属性
  • 内置属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如: disabled、checked、selected

  • 自定义属性:

    • 在html5中推出来了专门的data-自定义属性

    • 在标签上一律以data-开头

    • 在DOM对象上一律以dataset对象方式获取

6. 定时器-间歇函数

  • 网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发

  • 例如:网页中的倒计时

  • 要实现这种需求,需要定时器函数

  • 定时器函数有两种,今天我先讲间歇函数

6.1 定时器函数基本使用
6.1.1 开启定时器
  • setInterval(函数名, 间隔时间) 函数名不要加小括号

示例:

setInterval(function () {
    console.log('一秒执行一次')
}, 1000)

注意:

  • 函数名字不需要加括号

  • 定时器返回的是一个数字,作为定时器的 ID

6.1.2 关闭定时器
  • clearInterval(定时器ID)

示例:

let m = setInterval(function () {
    console.log(11)
}, 2000)
console.log(m)
6.1.3 总结
  • 定时器函数有什么作用?

  • 定时器函数如何开启?

  • 定时器函数如何关闭?

6.2 案例 阅读注册协议

需求:按钮60秒之后才可以使用

分析:

  • 开始先把按钮禁用(disabled 属性)

  • 一定要获取元素

  • 函数内处理逻辑

    • 秒数开始减减

    • 按钮里面的文字跟着一起变化

    • 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击

7. 综合案例 轮播图定时器版

需求:每隔一秒钟切换一个图片

分析:

  • 准备一个数组对象,里面包含详细信息

  • 获取元素

  • 设置定时器函数

    • 设置一个变量++

    • 找到变量对应的对象

    • 更改图片、文字信息

    • 激活小圆点:移除上一个高亮的类名,当前变量对应的小圆点添加类

  • 处理图片自动复原从头播放(放到变量++后面,紧挨)

    • 如果图片播放到最后一张, 就是大于等于数组的长度,则把变量重置为0

转载请说明出处内容投诉
CSS教程_站长资源网 » day01 - Web APIs

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买