变量声明:
变量声明有三个 var 、let 和 const:首先var 先排除,老派写法,问题很多,可以淘汰掉…
let or const 建议: const 优先
,尽量使用const
,
原因是:
- const 语义化更好
- 很多变量我们声明的时候就知道他不会被更改了,那直接用 const
- 实际开发中也是,比如react框架,基本const
数组和对象建议使用const来声明
- const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化
- 但是对于引用数据类型,const声明的变量,里面存的不是 值,不是值,不是值,是
地址
。
1. Web API 基本认知
1.1 作用和分类
- 作用:就是使用JS去操作 html 和浏览器
- 分类: DOM(文档对象模型)、BOM (浏览器对象模型)
1.2 DOM
DOM(Document Object Model — 文档对象模型
)是用来呈现以及与任意HTML或XML文档交互的API
简言之 DOM 是浏览器提供的一套操作网页内容的功能(用来动态修改 HTML ),其目的是开发网页特效及用户交互。
1.3 DOM树
- 将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用:
文档树直观的体现了标签与标签之间的关系
1.4 DOM对象(重点)
浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想:
- 把网页内容当做
对象
来处理
document 对象
- 是 DOM 里提供的一个
对象
- 所以它提供的居性和方法都是
用来访问和操作网页内容的
例: document.write() - 网页所有内容都在document里面
2. 获取DOM对象
2.1 根据CSS选择器获取(重点)
查找/获取元素DOM元素利用JS选择页面中标签元素
- 选择匹配的第一个元素
语法:document.querySelector('css选择器')
参数:包含一个或多个有效的css选择器字符串(所以要加引号
)
返回值:css选择器匹配的第一个元素
,一个HTMLElement对象
- 如果没有匹配到,则返回null
const box = document.querySelector('div')
const box = document.querySelector('.box')
const nav = document.querySelector( '#nav')
// 1.我要获取第一个小 uL Li
const li = document.querySelector('ul li:first-child')
- 选择匹配多个元素
语法:document.querySelectorAll('css选择器')
参数:包含一个或多个有效的css选择器字符串(所以要加引号
)
返回值:css选择器匹配的NodeList对象集合
,一个HTMLElement对象
// 2.选择所有的小Li
const lis = document.querySelectorAll('ul li')
document.querySelectorAll(‘css选择器’)得到的是个伪数组
:有长度有索引号但是没有pop()push()等数组方法。先得到里面的每一个对象,需要遍历(for)的方式获得
2.2 其他获取DOM元素方法(了解)
// 根id获取一个元素
document .getElementById('nav')
// 根据标签获取一类元素 获取页面 所有div
document .getElementsByTagName('div')
// 根 名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
3. 操作元素内容
目标:修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象(即使用点语法)。
3.1 对象.innerText属性
- 将文本内容添加/更新到任意标签位置
- 显示纯文本,不解析标签
3.2 对象.innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 会解析标签,多标签建议使用模板字符
4. 操作元素属性
4.1 操作元素常用属性
通过JS 设置/修改标签元素属性,比如通过 src更换 图片
最常见的属性比如: href、title、src 等
语法:对象.属性 = 值
// 举例说明
// 1. 获取元素
const pic = document.querySelector( 'img')
// 2. 操作元素
pic.src = './images/b02.jpg'
pic.title ='刘德华演唱会'
4.2 操作元素样式
属性
还通过]S 设置/修改标签元素的样式属性比如通过 轮播图小回点自动更换颜色样式
点击按钮可以滚动图片,这是移动的图片的位置 left 等等
- 通过 style 属性操作CSS
- 操作类名(className)操作CSS
- 通过 classList 操作类控制CSS
const box = document.querySelector('.box')
// 修改元素样式
box.style.width = '200px'
box.style.marginTop = '15px'
box.style.backgroundColor = 'pink'
注意:
- 修改样式通过
style
属性引出 - 如果属性有-连接符,需要转换为
小驼峰
命名法 - 赋值的时候,需要的时候不要忘记加
CSS单位
4.2.1 通过 style 属性操作CSS
语法:对象.style.样式属性=值
4.2.2 操作类名(className)操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式
语法:
// active 是一个css类名
元素.className =active
注意:
- 由于class是关键字,所以使用className去代替
- className是使用新值
换
旧值,如果需要添加一个类,需要保留之前的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.nav {
color: red;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="nav">123</div>
<script>
// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名 class 是个关键字 我们用 className
div.className = 'nav box'
</script>
</body>
</html>
4.2.3 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
语法:
// 追加一个类 类名不加点,并且是字符串
元素.classList.add('类名')
// 删除一个类元素 类名不加点,并且是字符串
元素.classList.remove('类名')
// 切换一个类 有就删除,没有就加上
元素.classList.toggle('类名')
4.3 操作表单元素
属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置:DOM对象属性名=新值
表单.value ='用户名'
表单.type ='password'
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性。如: disabled、checked、selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <input type="text" value="电脑"> -->
<input type="checkbox" name="" id="">
<button>点击</button>
<script>
// 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'
// 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 // 禁用按钮
</script>
</body>
</html>
4.4 自定义属性
标准属性:标签天生自带的属性 比如lass id title等,可以直接使用点语法操作比如:disabled、checked、selectedt
自定义属性:
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以
data-
开头 - 在DOM对象上一律以
dataset
对象方式获取
<body>
<div class="box" data-id="19" data-spm="不知道">盒子</div><script>
const box = document.querySelector('.box')
console.log(box.dataset.id)
console.log(box.dataset.spm)
</script>
</body>
5. 定时器 – 间歇函数
5.1 定时器函数介绍
网页中经常会需要一种功能: 每隔一段时间需要自动执行一段代码,不需要我们手动去触发。如:网页中的倒计时
要实现这种需求,需要定时器函数
5.2 定时器函数基本使用
5.2.1 开启定时器
语法:setInterval(函数,间隔时间)
作用: 每隔一段时间调用这个函数;间隔时间单位是毫秒
function repeat() {
console.log('前端程序员,就是头发多')
}
// 每隔一秒调用repeat函数
setInterval(repeat, 1000)
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id数字
5.2.2 关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterva1(变量名)
一般不会刚创建就停止,而是满足一定条件再停止
let timer = setInterval(function() {
console.log('hi~~')
},1000)
clearInterval(timer)
注意:
- 函数名字不需要加括号
- 定时器返回的是一个id数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// setInterval(函数, 间隔时间)
// setInterval(function () {
// console.log('一秒执行一次')
// }, 1000)
function fn() {
console.log('一秒执行一次')
}
// setInterval(函数名, 间隔时间) 函数名不要加小括号
let n = setInterval(fn, 1000)
// setInterval('fn()', 1000)
console.log(n)
// 关闭定时器
clearInterval(n)
// let m = setInterval(function () {
// console.log(11)
// }, 2000)
// console.log(m)
// const num = 10
// num = 10
// console.log(num)
let i = 1
setInterval(function () {
i++
document.write(`${i} `)
}, 200)
</script>
</body>
</html>