一、Web API 基本认知
1. 作用和分类
2. 什么是DOM
3.dom树
4.dom对象
二、获取DOM对象
1. 根据CSS选择器来获取DOM元素 (重点)
多参看文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
2. 其他获取DOM元素方法(了解)
三、设置/修改DOM元素内容
四、设置/修改DOM元素属性
1. 设置/修改元素常用属性
2. 设置/修改元素样式属性
add -追加 remove-- 删除 toggle--切换(如果有此类名则删除,没有则追加)
3. 设置/修改 表单元素 属性
disabled--不可使用(比如注册,先填写必要信息才可以提交之类)
btn.disabled = false(启用按钮,一般用于追加必要信息条件才启用)
四、定时器-间歇函数
//第二种方法
setInterval(function () {
console.log('真好')
}, 1000)
五、综合案例-qq音乐轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐10屏轮播图</title>
<style>
.img-box {
width: 700px;
height: 320px;
margin: 50px auto 0;
background: #000;
position: relative;
}
.img-box .tip {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
.img-box .tip h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98E404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}
/* .img-box .tip a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
}
.img-box ul {
position: absolute;
bottom: 0;
right: 30px;
list-style: none;
z-index: 99;
} */
</style>
</head>
<body>
<div class="img-box">
<img class="pic" src="images/b01.jpg" alt="第1张图的描述信息">
<div class="tip">
<h3 class="text">挑战云歌单,欢迎你来</h3>
</div>
</div>
<script>
// 数据
let data = [
{
imgSrc: 'images/b01.jpg',
title: '挑战云歌单,欢迎你来'
},
{
imgSrc: 'images/b02.jpg',
title: '田园日记,上演上京记'
},
{
imgSrc: 'images/b03.jpg',
title: '甜蜜攻势再次回归'
}
]
// 1. 获取元素 图片 和 h3
let pic = document.querySelector('.pic')
let text = document.querySelector('.text')
// i 记录图片的张数
let i = 0
// 2.开启定时器
setInterval(function () {
i++
// 修改图片的src属性
// console.log(data[i].imgSrc)
pic.src = data[i].imgSrc
// 修改文字内容
text.innerHTML = data[i].title
// 无缝衔接
if (i === data.length - 1) {
i = -1
}
}, 1000)
</script>
</body>
</html>