目录
一,Web API基本认知
1.1,变量声明
- 变量声明有三个 var let 和const
- 建议 const 优先,尽量使用const
- 有了变量先给const ,如果发现变量可变,就改为let
const是没问题的
<script>
const arr = ["red", "blue"]
arr.push('clor')
console.log(arr);
</script>
const 有问题的情况
<script>
const arr = ["red", "blue",'clor']
arr = [1, 2, 3]
console.log(arr);
</script>
1.2,Web API 的作用和分类
- 作用:就是使用JS去操作Html 和浏览器
- 分类DOM(文档对象模型),BOM(浏览器对象模型)
1.3,什么是DOM
- DOM(Document Object Model 文档对象模型)是用来呈现以及计算任意HTML或XML文档交互的API
- 白话文:DOM是浏览器提供的一套专门用来操作网页内部的功能
- DOM作用
1.4,DOM树
- DOM树是什么
- 作用 :文档树直观的体现了标签与标签之间的关系
1.5,DOM对象(重要)
1.5.1,DOM对象
- DOM对象:浏览器根据html标签生成的JS对象
- 所以标签属性都可以在这个对象上找到.
- 修改这个对象的属性会自动映射到标签身上
1.5.2,DOM的核心思想 演示
将网页内容当做对象来处理
dir()方法获得标签对象(object)
在JS中div叫DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<script>
const div = document.querySelector('div')
//对象
console.dir(div);
</script>
</body>
</html>
1.5.3,document对象
-
是DOM里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作网页内容的
-
网页所有内容都在document里面
1.6,获取DOM元素
- 根据CSS选择器获取DOM元素(重点)
- 其他获取DOM元素方法(了解)
- 查找元素DOM就是利用JS选择页面中标签元素
1.6.1,根据CSS选择器来获取DOM元素(重点)
语法:
<script>
document.querySelector('css选择器')
</script>
参数:
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的第一个元素,一个HTMLelement
如果有匹配到,则返回空(null)
1.6.2,选多个元素
语法:
<script>
document.querySelectorAll('css选择器')
</script>
演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
//匹配所以的li 返回的是一个列表 []
const lis = document.querySelectorAll('ul li')
console.log(lis);
console.dir(lis)
</script>
</body>
</html>
对象点属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<p id="nav">导航栏</p>
<script>
const nav = document.querySelector('#nav')
//对象.属性
nav.style.color = 'red'
//匹配所以的li 返回的是一个列表 []
const lis = document.querySelectorAll('ul li')
console.log(lis);
console.dir(lis)
</script>
</body>
</html>
document.querySelectAll() 获取的是一个伪数组
哪怕只有一个元素,通过querySelectall()获取过来的也是一个伪数组,里面只有一个元素而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<p id="nav">导航栏</p>
<script>
//获取元素
const lis = document.querySelectorAll('.nav li')
//得到的是一个伪数组
//注意:
//哪怕只有一个元素,通过querySelectall()获取过来的也是一个伪数组,里面只有一个元素而已
console.log(lis);
//遍历每一个li对象
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
//操作一个
const p = document.querySelectorAll('#nav')
p[0].style.color = 'red'
</script>
</body>
</html>
小结:
1.6.3,其他获取DOM元素方法(了解)比较古老的方法了
1.7,操作元素的内容
- 对象.innerText属性
- 对象.innerHTML 属性
1.7.1,innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">我是文字内容</div>
<script>
const box = document.querySelector('.box')
//对象.innerText 属性
//获取文字内容
console.log(box.innerText)
//修改文字内容
box.innerText = '我是一个盒子'
//<strong>我是一个盒子</strong> innerText 不解析标签
box.innerText = '<strong>我是一个盒子</strong>'
</script>
</body>
</html>
1.7.2,innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">我是文字内容</div>
<script>
const box = document.querySelector('.box')
//对象.innerText 属性
//获取文字内容
console.log(box.innerText)
//修改文字内容
// box.innerText = '我是一个盒子'
//<strong>我是一个盒子</strong> innerText 不解析标签
// box.innerText = '<strong>我是一个盒子</strong>'innerHeighth
//innerHTML 解析标签
console.log(box.innerHTML);
//box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>'
</script>
</body>
</html>
1.8,抽奖小案例
视频演示:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
width: 840px;
height: 420px;
padding: 100px 250px;
box-sizing: border-box;
background-color: url(./imag/Background.jpg) no-repeat center / cover;
}
</style>
</head>
<body>
<div>
<strong></strong>
<h1>一等奖:<span id="one"> </span></h1>
<h3>二等奖:<span id="two"> </span></h3>
<h5>三等奖:<span id="three"> </span></h5>
<script>
//声明数组
const personArr = ['小明', '小红', '小兰', '小黑', '小黑子']
//先做一等奖
const random = Math.floor(Math.random() * personArr.length)
console.log(personArr[random]);
//获取one元素
const one = document.querySelector('#one')
//随机抽一个人 为一等奖
one.innerHTML = personArr[random]
//删除被抽中的那个人
personArr.splice(random, 1)
console.log(personArr);
//再做二等奖
const random2 = Math.floor(Math.random() * personArr.length)
console.log(personArr[random2]);
//获取two元素
const two = document.querySelector('#two')
//随机抽一个人 为二等奖
two.innerHTML = personArr[random2]
//删除被抽中的那个人
personArr.splice(random2, 1)
console.log(personArr);
//再做三等奖
const random3 = Math.floor(Math.random() * personArr.length)
console.log(personArr[random3]);
//获取three元素
const three = document.querySelector('#three')
//随机抽一个人 为三等奖
three.innerHTML = personArr[random3]
//删除被抽中的那个人
personArr.splice(random3, 1)
console.log(personArr);
</script>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrapper {
width: 840px;
height: 420px;
padding: 100px 250px;
box-sizing: border-box;
background-color: url(./imag/Background.jpg) no-repeat center / cover;
}
</style>
</head>
<body>
<div>
<strong></strong>
<h1>一等奖:<span id="one"> </span></h1>
<h3>二等奖:<span id="two"> </span></h3>
<h5>三等奖:<span id="three"> </span></h5>
<script>
//声明数组
const personArr = ['小明', '小红', '小兰', '小黑', '小黑子']
//先做一等奖
const random = Math.floor(Math.random() * personArr.length)
console.log(personArr[random]);
//获取one元素
const one = document.querySelector('#one')
//随机抽一个人 为一等奖
one.innerHTML = personArr[random]
//删除被抽中的那个人
personArr.splice(random, 1)
console.log(personArr);
//再做二等奖
const random2 = Math.floor(Math.random() * personArr.length)
console.log(personArr[random2]);
//获取two元素
const two = document.querySelector('#two')
//随机抽一个人 为二等奖
two.innerHTML = personArr[random2]
//删除被抽中的那个人
personArr.splice(random2, 1)
console.log(personArr);
//再做三等奖
const random3 = Math.floor(Math.random() * personArr.length)
console.log(personArr[random3]);
//获取three元素
const three = document.querySelector('#three')
//随机抽一个人 为三等奖
three.innerHTML = personArr[random3]
//删除被抽中的那个人
personArr.splice(random3, 1)
console.log(personArr);
</script>
</div>
</body>
</html>
1.9,操作元素常用属性
- 通过JS,设置/修改标签元素属性,比如通过src更换图片
- 最常见的属性比如:href,title,src等
- 语法 对象.属性 = 值
目录:
举例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./imag/Background.jpg" alt="">
</body>
<script>
//获取图片元素
const img = document.querySelector('img')
//修改图片对象的属性
//对象.属性 = 值
img.src = './imag/focus3.jpg'
img.title = '替换的照片'
</script>
</html>
1.9.1,小案例随机刷新图片刷新
视频演示:
目录:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./imag/pic1.jpg" alt="">
</body>
<script>
//获取图片元素
const img = document.querySelector('img')
//修改图片对象的属性
//对象.属性 = 值
//建立储存随机图片的数组
const pics = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg',]
//生成随机数
const random = Math.floor(Math.random() * pics.length)
console.log(random);
//更换路径 刷新生成随机照片
img.src = `./imag/${pics[random]}`
img.title = '替换的照片'
</script>
</html>
1.9.2,操作元素样式属性
- 通过style属性操作CSS
- 操作类名(className)操作CSS
- 通过classList操作类控制CSS
1.9.3,随机更换背景图像案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: url(./imag/pic1.jpg) no-repeat top center;
}
</style>
</head>
<body>
<script>
//随机数函数 取N-M
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
//生成随机数
const random = getRandom(1, 4)
document.body.style.backgroundImage = `url(./imag/pic${random}.jpg)`
</script>
</body>
1.9.4,通过类名修改(修改数量较多的情况)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
.nav {
color: red;
}
</style>
</head>
<body>
<!-- //className覆盖div的类名 -->
<div class="nav">123</div>
<script>
//获取元素
const div = document.querySelector('div')
//添加类名 class是关键字 我们用className
//用nav box
div.className = 'nav box'
</script>
</body>
</html>
1.9.5,通过classList操作类控制CSS
- 为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
- 语法:
元素.classList.add('类名')
元素.classList.remove('类名')
元素.classList.toggle('类名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
.nav {
color: red;
}
.active {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<!-- //className覆盖div的类名 -->
<div class="box">123</div>
<script>
// 通过classList添加
const box = document.querySelector('.box')
//修改样式 add() 类名不点
box.classList.add('active')
</script>
</body>
</html>
classList.remove()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
.nav {
color: red;
}
.active {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<!-- //className覆盖div的类名 -->
<div class="box">123</div>
<script>
// 通过classList添加
const box = document.querySelector('.box')
//修改样式 add() 类名不点
// box.classList.add('active')
box.classList.remove('box')
</script>
</body>
</html>
classList.toggle() 切换一个类 有就删掉 无就添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
.nav {
color: red;
}
.active {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<!-- //className覆盖div的类名 -->
<div class="box">123</div>
<script>
// 通过classList添加
const box = document.querySelector('.box')
//修改样式 add() 类名不点
// box.classList.add('active')
// box.classList.remove('box')
box.classList.toggle('active')
</script>
</body>
</html>
className和classList的区别是什么
1.9.6,随机轮播图案例(在改bug)略
1.9.7,获取表单属性
- 表单.value = '用户名'
- 表单.type = 'password'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="电脑">
<script>
//获取元素
const uname = document.querySelector('input')
//获取值 获取表单里面的值用到是 表单.value
// console.log(uname.value);
// console.log(uname.innerHTML);innerHTML 得不到表单的内容
uname.value = '我要买电脑'
console.log(uname.type);
uname.type = 'password'
</script>
</body>
</html>
- disabled ,checked,selected
- 布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="" id="">
<script>
//获取
const ipt = document.querySelector('input')
// 字符串只有一种情况为false ‘’ ,其他都为true
ipt.checked = true
</script>
</body>
</html>
disabled:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="checkbox" name="" id="">
<button disabled>点击</button>
<script>
//获取
const ipt = document.querySelector('input')
// 字符串只有一种情况为false ‘’ ,其他都为true
ipt.checked = true
//获取
const button = document.querySelector('button')
//disabled 是禁用吗的意思 true是禁用 false 是不禁用
button.disabled = true
</script>
</body>
</html>
1.9.8,自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div data-id="1" data-name="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset.id);
console.log(one.dataset.name);
</script>
</body>
</html>
二,间歇函数(定时器)
2.1,间歇函数
- 函数名不需要加括号
- 定时器的返回值是一个id数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn() {
console.log('一秒执行一次');
}
setInterval(fn, 1000) //一秒执行一次函数
//调用 写函数名 不要加小括号
</script>
</body>
</html>
关闭定时器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fn() {
console.log('一秒执行一次');
}
//一千毫秒 = 一秒
let n = setInterval(fn, 1000) //一秒执行一次函数
//调用 写函数名 不要加小括号
console.log(n)
let m = setInterval(fn,3000)
//关闭定时器
clearInterval(n)
</script>
</body>
</html>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let i = 0
setInterval(function () {
i++;
document.write(`${i}<br>`)
}, 200)
</script>
</body>
</html>
2.1,用户注册倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="btn" disabled>我以阅读用户协议(60)</button>
<script>
//获取元素
const btn = document.querySelector('.btn')
console.log(btn.innerHTML);
//倒计时
let i = 5
//开启定时器
let n = setInterval(function () {
i--
btn.innerHTML = `我以阅读用户协议${i}`
if (i === 0) {
clearInterval(n)
//定时器停了,就可以打开按钮了
btn.disabled = false
btn.innerHTML = '同意'
}
}, 1000)
</script>
</body>
</html>
2.3,定时轮播图(略)
三,事件监听
- 事件监听
- 事件监听版本
- 事件:事件是在编程时系统内发生的动作或者发生的事情
- 比如:用户在网页上单击一个按钮
什么是事件监听:
语法:
<script>
元素对象.addEvenListener('事件类型',要执行的函数)
</script>
事件监听三要素:
- 事件源:那个DOM元素被事件触发了,要获取DOM元素
- 事件类型 :用什么方式触发,比如鼠标单击click,鼠标经过mouseover等
- 事件调用函数:要做什么事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
// 元素对象.addEvenListener('事件类型',要执行的函数)
//需求: 点击了按钮,弹出一个对话框
//1,事件源 按钮
//2,事件类型 点击了按钮 字符串'click'
//3,事件处理程序 弹出一个对话框
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert("sbjs")
})
</script>
</body>
</html>