变量声明
变量声明有三个 var(老派写法)let 和 const
const 优先
- const 声明的值不能更改,而且const声明变量的时候需要里面进行初始化。
- 对于引用数据类型,const声明的变量,里面存的不是值,是地址。所以const声明的对象可以修改里面的属性,只要地址不变,就不会报错。
- 建议数组和对象使用 const 来声明
let
- 基本数据类型的值或者引用类型的地址发生变化的时候使用
- 一个变量进行加减运算,比如 for循环中的 i++
<script>
// 引用数据类型,const声明的变量,里面存的不是值,是地址。
//可以改为const
let person = {
uname: '张三',
age: 18,
gender: '男'
}
person.gender = '女'
console.log(person.gender);
console.log(person);
//错误,地址不一样了,改变了对象
const names = []
names = [1,2,3]
//正确
const names = []
names[0] = '1'
names[1] = '2'
names[2] = '3'
//错误,地址不一样了,改变了对象
const obj ={}
obj={
uname:'张三'
}
//正确
const obj = {}
obj.names = '张三'
</script>
Web API 基本认知
作用和分类
作用: 就是使用 JS 去操作 html 和浏览器(开发网页内容特效和实现用户交互)
分类:DOM (文档对象模型)、BOM(浏览器对象模型)
DOM
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API
DOM树
将 HTML 文档以树状结构直观的表现出来,称之为文档树或 DOM 树
作用:文档树直观的体现了标签与标签之间的关系
DOM对象
- DOM对象:浏览器根据html标签生成的 JS对象
(1)所有的标签属性都可以在这个对象上面找到
(2)修改这个对象的属性会自动映射到标签身上
- DOM的核心思想 :把网页内容当做对象来处理
- document 对象
(1)DOM 里提供的一个对象
(2)它提供的属性和方法都是用来访问和操作网页内容的 例:document.write()
(3)网页所有内容都在document里面
获取DOM对象
根据CSS选择器来获取DOM元素 (重点)
选择匹配的第一个元素
语法:
document.querySelector('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串(必须加' ')
返回值:
CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到,则返回null。
注意:
可以直接修改操作
选择匹配的多个元素
语法:
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串(必须加' ')
返回值:
CSS选择器匹配的NodeList 对象集合
注意:
(1)不可以直接修改操作,只能通过遍历的方式一次给里面的元素做修改。
(2)得到的是一个伪数组:有长度有索引号的数组 ,但是没有 pop() push() 等数组方法。
(3)想要得到里面的每一个对象,则需要遍历(for)的方式获得。
(4)哪怕只有一个元素,通过querySelectorAll() 获取过来的也是一个伪数组,里面只有一个元素而已。
其他获取DOM元素方法(了解)
- 根据id获取一个元素
document.getElementById('nav')
- 根据标签获取一类元素 获取页面所有的div
document.getElementsByTagName('div')
- 根据类名获取元素 获取页面所有的类名为w的
document.getElementsByClassName('w')
操作元素内容
目标:修改元素的文本更换内容
对象.innerText 属性
(1)将文本内容添加/更新到任意标签位置
(2)显示纯文本,不解析标签
对象.innerHTML 属性
(1)将文本内容添加/更新到任意标签位置
(2)会解析标签,多标签建议使用模板字符
info.innerText = `<strong>你好啊</strong>` //<strong>你好啊</strong>
info.innerHTML = `<strong>你好啊</strong>` //你好啊(字体加粗)
年会抽奖案例
<div class="wrapper">
<strong>年会抽奖</strong>
<h2>一等奖:<span id="one">???</span></h2>
<h2>二等奖:<span id="two">???</span></h2>
<h2>三等奖:<span id="three">???</span></h2>
</div>
<script>
//数据准备
const personArr = ['小张', '小陈', '小袁', '小红', '小蓝', '小江']
//一等奖
const random1 = Math.floor(Math.random() * personArr.length)
// console.log(personArr[random1]);
//获取元素
const one = document.querySelector('#one')
one.innerHTML = personArr[random1]
personArr.splice(random1, 1)
//二等奖
const random2 = Math.floor(Math.random() * personArr.length)
// console.log(personArr[random2]);
//获取元素
const two = document.querySelector('#two')
two.innerHTML = personArr[random2]
personArr.splice(random2, 1)
//三等奖
const random3 = Math.floor(Math.random() * personArr.length)
// console.log(personArr[random3]);
//获取元素
const three = document.querySelector('#three')
three.innerHTML = personArr[random3]
personArr.splice(random3, 1)
</script>
操作元素属性
操作元素常用属性
通过 JS 设置/修改标签元素属性
语法:
对象.属性 = 值
页面刷新 图片随机更换
<img src="./images/1.webp" alt="">
<script>
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
//获取元素
const img = document.querySelector('img')
const random = getRandom(1, 6)
img.src = `./images/${random}.webp`
</script>
操作元素样式属性
通过 style 属性操作CSS
语法:
对象.style.样式属性 = 值
注意:
(1)修改样式通过style属性引出
(2)如果属性有-连接符,需要转换为小驼峰命名法,如:backgroundColor
(3)赋值的时候,需要的时候不要忘记加css单位。
(4)style是行内样式,会覆盖其他样式。
更换背景图片
<script>
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)`
</script>
操作类名(className) 操作CSS
修改的样式比较多的情况下使用
语法:
元素.className = 'active' (active只是一个类名)
注意:
(1)由于class是关键字, 所以使用className去代替。
(2)className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名。
(3)直接使用 className 赋值会覆盖以前的类名
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,可以通过classList方式追加和删除类名。
语法:
- 追加一个类 元素.classList.add('类名')
- 删除一个类 元素.classList.remove('类名')
- 切换一个类 元素.classList.toggle('类名')
注意:
(1)类名不用加'.',且必须是字符串。
(2)toggle 有就删掉,没有就加上。
轮播图随机版
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了?</p>
<ul class="slider-indicator">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 初始数据
const sliderData = [
{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
]
//获取随机数
const random = parseInt(Math.random() * sliderData.length)
//获取图片
const img = document.querySelector('.slider-wrapper img')
//修改图片
img.src = sliderData[random].url
//获取文字
const p = document.querySelector('.slider-footer p')
//修改文字
p.innerHTML = sliderData[random].title
//修改背景色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundColor = sliderData[random].color
//修改圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
li.classList.add('active')
</script>
操作表单元素属性
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
例如:
表单.value = '用户名'
表单.type = 'password'
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 ;如果是false 代表移除了该属性。
<Button>点击</Button>
<input type="checkbox" name="" id="">
<script>
const btn = document.querySelector('button')
btn.disabled = true
const ipt = document.querySelector('input')
ipt.checked = true
//ipt.checked = 'true'也会选中,但不提倡,有隐式转换
</script>
自定义属性
(1)在html5中推出来了专门的data-自定义属性
(2)在标签上一律以data-开头
(3)在DOM对象上一律以dataset对象方式获取
定时器-间歇函数
每隔一段时间需要自动执行一段代码,不需要手动去触发。
开启定时器
setInterval(函数,间隔时间)
注意:
(1)每隔一段时间调用这个函数,间隔时间单位是毫秒。
(2)函数名字不需要加括号
(3)定时器返回的是一个id数字
关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
注意:
(1)一般不会刚创建就停止,而是满足一定条件再停止。
(2)函数名字不需要加括号
(3)定时器返回的是一个id数字
如果函数后面加括号,其写法为 :setInterval('函数()',间隔时间) 不提倡
阅读注册协议
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册为京东用户!在您注册过程中,您需要完成我们注册流程,【请您注意】如果不同意以下协议,请你停止注册。
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
const btn = document.querySelector('.btn')
let i = 5;
let n = setInterval(function () {
i--
btn.innerHTML = `我已经阅读用户协议${i}`
if (i === 0) {
clearInterval(n)
//定时结束,开启按钮
btn.disabled = false
//button按钮特殊,用innerHTML来修改
btn.innerHTML = '同意'
}
}, 1000)
</script>
综合案例
轮播图定时器版
<div class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了?</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 初始数据
const sliderData = [
{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
]
//获取图片
const img = document.querySelector('.slider-wrapper img')
//获取文字
const p = document.querySelector('.slider-footer p')
//获取背景色
const footer = document.querySelector('.slider-footer')
//定时器
let i = 0
setInterval(function () {
i++
if (i >= sliderData.length) {
i = 0
}
//修改元素
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
footer.style.backgroundColor = sliderData[i].color
//小圆点
//先删除以前的小圆点
document.querySelector('.slider-indicator .active').classList.remove('active')
//只让当前li添加active
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}, 1000)
</script>
时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页时钟</title>
<style>
* {
box-sizing: border-box;
}
.clock {
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
transform: rotate(270deg);
}
.ss {
background-image: url(./images/second.png);
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hh" id="h"></div>
<div class="mm" id="m"></div>
<div class="ss" id="s"></div>
</div>
<script>
/*
知识点:
1. 创建日期对象 获取当前时间
2. 多次定时器,重复获取时间,让指针动起来
*/
// 查找页面的元素,定时器调用的函数外面,查找一次即可
const second = document.querySelector('.ss');
// 封装时钟效果,定时器定时调用的函数
// 通过定时器每隔一秒钟再调用一次。
let du = 0
setInterval(function () {
//一秒钟秒钟转6°
du += 6
if (du >= 360) {
du = 0
}
second.style.transform = `rotate(${du}deg)`;
}, 1000);
</script>
</body>
</html>