一、什么是API
API: 应用程序接口（Application Programming Interface）
作用：开发人员使用 JavaScript提供的接口来操作网页元素和浏览器
二、DOM简介
作用：DOM用来 操作网页文档，开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
document 对象 是 DOM 里提供的一个对象，是DOM顶级对象 作为网页内容的入口
三、获取DOM元素
1. CSS选择器来获取DOM元素
11，document.querySelector（css选择器）只能选择第一个元素，如果没有匹配到，则返回null
22，document.querySelectorAll（css选择器）
可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素
伪数组：有长度有索引号的数组但是没有 pop(）push（）等数组方法
（document：网页文档，query：查询，Selector：选中的）
<body>
<div class="box">我是一个div</div>
<ol>
<li>我是第一个孩子</li>
<li>我是第二个孩子</li>
<li>我是第三个孩子</li>
</ol>
<ul class="nav">
<li>新闻</li>
<li>体育</li>
<li>娱乐</li>
</ul>
<script>
// document.querySelector('CSS 选择器') : 匹配第一个元素对象，没有找到则返回 null
// querySelectorAll 返回伪数组，找不到则返回空伪数组
//有索引有长度，支持遍历
const lis = document.querySelectorAll('.nav li')
lis.forEach((el, index) => {
console.log(el, index)
})
</script>
</body>
2. 其他获取DOM元素（了解）
四、innerText、innerHTML
操作元素内容
DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）
1. 对象.innerText 属性。只识别文本，不能解析标签
2. 对象.innerHTML 属性。能识别文本，能够解析标签
<body>
<div class="box">这是一个div</div>
<script>
const box = document.querySelector(".box")
// innerText：不解析标签
box.innerText = 'jS加内容'
box.innerText = '<h1>(innerText)js加的标签不解析标签</h1>'
// innerHTML：解析标签
box.innerHTML = 'jS加内容'
box.innerHTML = '<h1>(innerHTML)js加的标签解析标签</h1>'
</script>
</body>
年会抽奖案例
<!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>年会抽奖</title>
<style>
.wrapper {
width: 840px;
height: 420px;
background: url(./images/bg01.jpg) no-repeat center / cover;
padding: 100px 250px;
box-sizing: border-box;
}
.wrapper span {
color: #b10e0d;
}
</style>
</head>
<body>
<div class="wrapper">
<strong>年会抽奖</strong>
<h1>一等奖：<span class="one">???</span></h1>
<h3>二等奖：<span class="two">???</span></h3>
<h5>三等奖：<span class="three">???</span></h5>
</div>
<script>
// 数组
const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']
//一等奖
const oneNum = Math.floor(Math.random() * arr.length)
document.querySelector('.one').innerHTML = arr[oneNum]
arr.splice(oneNum, 1)
//二等奖
const twoNum = Math.floor(Math.random() * arr.length)
document.querySelector('.two').innerHTML = arr[twoNum]
arr.splice(twoNum, 1)
//三等奖
const threeNum = Math.floor(Math.random() * arr.length)
document.querySelector('.three').innerHTML = arr[threeNum]
arr.splice(threeNum, 1)
</script>
</body>
</html>
五、事件监听
1，事件三要素：
事件源：谁要被监听，（哪个元素上触发）
事件类型：什么情况下触发监听的事件，
事件处理函数：触发后要的事情在函数里执行
注意：
1. 事件类型要加引号，小写
2. 函数是点击之后再去执行，每次点击都会执行一次
<body>
<button>点我呀</button>
<script>
//用户点击buttton，弹窗，你还真点啊
//谁要有事件呢→button→事件源
//要有什么样事件呢？用户是怎么操作的？→点击→事件类型
//点了之后发生什么事？弹窗，你还真点啊→ 事件处理函数
// 事件三要素：事件源 事件类型 事件处理函数
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
alert('你还真点啊')
})
</script>
</body>
2，环境对象this
环境对象：指的是函数内部特殊的 this , 它指向一个对象，并且受当前环境影响
this：谁调用，this就是谁，
箭头函数没有自己的this，this指向外层作用域中的this ，所以在事件处理函数，一般不用箭头函数
// 箭头函数没有this指向问题，他的this指向和外层作用域的保持一致
<body>
<div>这是按钮</div>
<p>this纸箱she76746</p>
<script>
// 谁调用，this 就是谁
const box = document.querySelector('div')
box.addEventListener('click', function() {
alert('点击了')
console.log(this) //div
})
console.log(this) //window对象
//箭头函数没有this，不满足谁调用 this指向谁
//箭头函数里面写this指向外层作用域的调用者
// box.addEventListener('click', () => {
// alert('点击了箭头函数')
// console.log(this) ///window对象
// })
</script>
</body>
3，事件监听版本
<body>
<button>按钮</button>
<script>
const btn = document.querySelector('button')
// L2：不覆盖(同名)
btn.addEventListener('click', function() {
alert('点击了一次')
})
btn.addEventListener('click', function() {
alert('点击了二次')
})
// add 添加 Event 事件 Listener 监听器
// query 查询的意思 Selector选中的
// L0：覆盖(同名)
btn.onclick = function() {
alert('l0点击了一次')
}
btn.onclick = function() {
alert('l0又击了一次~')
}
</script>
4，回调函数
回调函数：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
（回头调用的函数）
作用：完成某些特定任务
案例：点击按钮随机更换图片
<!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>随机显示图片案例</title>
<style>
img {
width: 600px;
}
button {
font-size: 16px;
height: 40px;
border-radius: 40px;
padding: 6px 15px;
color: white;
background-color: #1677ff;
box-shadow: 0 2px 0 rgba(5, 145, 255, .1);
outline: none;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
}
button:hover {
background-color: #4096ff;
}
</style>
</head>
<body>
<img src="./images/1.png" alt="">
<button>切换图片</button>
<script>
// 随机显示图片案例：点击按钮，随机换图
// 图片地址
const arr = [
'./images/1.png',
'./images/2.png',
'./images/3.png',
'./images/4.png'
]
//按钮注册点击事件，修改img的src属性值
//从arr里面随机取出一个路径设置到src属性值
const pic = document.querySelector('img')
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
const num = Math.floor(Math.random() * arr.length)
pic.src = arr[num]
})
</script>
</body>
</html>
六、操作元素常用属性
js中控制标签自带的属性写法和html属性写法都一样。class除外
<body>
<img src="./images/1.png" alt="我是播仔">
<div><button disabled>按钮</button></div>
<!--H5 属性名 和属性值 相同可以省略为一个单词checked='checked'-->
<input type="radio" checked>男
<script>
//js中控制标签自带的属性写法和html属性写法都一样
//class除外
const imgBox = document.querySelector('img')
//获取属性的值
// console.log(imgBox.alt)
imgBox.alt = '我是js修改后的alt的属性值'
console.log(imgBox.src)
imgBox.src = './images/3.png' //修改
// 类似于选中没选中，勾选没勾选的这种两种情况都是boolean类型
const btn = document.querySelector('button')
console.log(btn.disabled) //true
const inp = document.querySelector('input')
console.log(inp.checked)
inp.checked = false
</script>
案例：随机显示背景图
<!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>随机显示图片案例</title>
<style>
img {
width: 600px;
}
button {
font-size: 16px;
height: 40px;
border-radius: 40px;
padding: 6px 15px;
color: white;
background-color: #1677ff;
box-shadow: 0 2px 0 rgba(5, 145, 255, .1);
outline: none;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
}
button:hover {
background-color: #4096ff;
}
</style>
</head>
<body>
<img src="./images/1.png" alt="">
<button>切换图片</button>
<script>
// 随机显示图片案例：点击按钮，随机换图
// 图片地址
const arr = [
'./images/1.png',
'./images/2.png',
'./images/3.png',
'./images/4.png'
]
//按钮注册点击事件，修改img的src属性值
//从arr里面随机取出一个路径设置到src属性值
const pic = document.querySelector('img')
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
const num = Math.floor(Math.random() * arr.length)
pic.src = arr[num]
})
</script>
</body>
</html>
七、操作元素常用样式
修改样式很少的时候，使用 style
修改大量样式的可以选择类：className / classList
classList 是追加和删除不影响以前类名，更提倡
1，style
-
css属性有中横线的，去掉中横线，后面的单词首字母改大写
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
padding-left: 20px;
transition: all .5s;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//控制某个css属性用style属性
//css属性有中横线的，去掉中横线，后面的单词首字母改大写
const box = document.querySelector('.box')
box.addEventListener('click', function() {
box.style.width = '200px'
box.style.height = '300px'
// ji当中不支持-中横线,去掉中横线，第二个字母大写
box.style.backgroundColor = 'red'
box.style.paddinglef = '100px'
})
</script>
2， className
核心：把多个样式放到css一个类中，然后把这个类添加到这个元素身上
DOM对象.className ='active'----->active是一个类名
注意1，由于class是关键字，所以使用className去代替
2.直接使用className赋值会覆盖以前的类名（之前的不存在了 新值换旧值，）
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
text-align: center;
color: brown;
transition: all .5s;
}
.circle {
width: 300px;
height: 300px;
background-color: skyblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">单击变换外观</div>
<script>
const box = document.querySelector('div')
box.addEventListener('click', function() {
//新值替换旧值
box.className = 'box circle '
})
</script>
3、classList
<style>
.box {
margin: 100px auto;
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
line-height: 200px;
transition: all .5s;
}
.circle {
background-color: skyblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">classList</div>
<script>
const boxs = document.querySelector('div')
boxs.addEventListener('click', function() {
console.log("classLIST:" + boxs.classList) //伪数组
// 添加
boxs.classList.add('circle')
// 删除
boxs.classList.remove('circle')
// 切换
boxs.classList.toggle('circle')
//是否包含，包含返回true
console.log(boxs.classList.contains('circle'))
})
</script>
</body>
案例：王者荣耀关闭登录
<style>
.pop {
display: block;
visibility: visible;
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
width: 530px;
height: 254px;
margin-top: -127px;
margin-left: -265px;
background: url(./images/login.webp) no-repeat;
}
.close {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
}
@keyframes slideUp {
to {
height: 0;
}
}
@keyframes hidden {
to {
display: none;
}
}
.hide {
animation: slideUp .3s linear forwards, hidden .3s .3s forwards;
}
</style>
</head>
<body>
<div class="pop">
<a href="javascript:;" class="close"></a>
</div>
<script>
// 点击关闭按钮可以关闭父盒子
const pop = document.querySelector('.pop')
const closeBtn = document.querySelector('.close')
closeBtn.addEventListener('click', function() {
pop.classList.add('hide') //√
// pop.classList = 'pop hide'//√
})
</script>
八、自定义属性
标准属性：标签天生自带的属性比如class、id、title等,可以直接使用点语法操作比如：对象.title
自定义属性：data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以 dataset 对象方式获取
自定义属性通常是为了配合JS加功能用的
<body>
<div class="box" data-name="first" data-num="111">盒子</div>
<script>
const box = document.querySelector('.box')
console.log(box.dataset) //{}
console.log(box.dataset.name) //first
console.log(box.dataset.num) //111
</script>
</body>
九、综合案例
1，不同价格筛选（map forEach遍历）
<!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>商品渲染</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.list {
width: 990px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 240px;
margin-left: 10px;
padding: 20px 30px;
transition: all .5s;
margin-bottom: 20px;
}
.item:nth-child(4n) {
margin-left: 0;
}
.item:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -4px, 0);
cursor: pointer;
}
.item img {
width: 100%;
}
.item .name {
font-size: 18px;
margin-bottom: 10px;
color: #666;
}
.item .price {
font-size: 22px;
color: firebrick;
}
.item .price::before {
content: "¥";
font-size: 14px;
}
.filter {
display: flex;
width: 990px;
margin: 0 auto;
padding: 50px 30px;
}
.filter a {
padding: 10px 20px;
background: #f5f5f5;
color: #666;
text-decoration: none;
margin-right: 20px;
}
/* 鼠标点击当前链接高亮 */
.filter a:active,
.filter a:focus {
background: #05943c;
color: #fff;
}
</style>
</head>
<body>
<!-- 筛选链接 -->
<div class="filter">
<a data-index="1" href="javascript:;">0-100元</a>
<a data-index="2" href="javascript:;">100-300元</a>
<a data-index="3" href="javascript:;">300元以上</a>
<a href="javascript:;">全部区间</a>
</div>
<!-- 渲染盒子 -->
<div class="list">
<!-- <div class="item">
<img src="./images/1.png" alt="">
<p class="name">111</p>
<p class="price">111</p>
</div> -->
</div>
<script>
// 初始化数据
const goodsList = [{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: '289.00',
picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
}, {
id: '4001594',
name: '日式黑陶功夫茶组双侧把茶具礼盒装',
price: '288.00',
picture: 'https://yanxuan-item.nosdn.127.net/3346b7b92f9563c7a7e24c7ead883f18.jpg',
}, {
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: '109.00',
picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
}, {
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: '488.00',
picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
}, {
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: '139.00',
picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
}, {
id: '3997185',
name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
price: '108.00',
picture: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
}, {
id: '3997403',
name: '手工吹制更厚实白酒杯壶套装6壶6杯',
price: '100.00',
picture: 'https://yanxuan-item.nosdn.127.net/af2371a65f60bce152a61fc22745ff3f.jpg',
}, {
id: '3998274',
name: '德国百年工艺高端水晶玻璃红酒杯2支装',
price: '139.00',
picture: 'https://yanxuan-item.nosdn.127.net/8896b897b3ec6639bbd1134d66b9715c.jpg',
}, ]
// 筛选的时候根据数据筛选→渲染函数要有参数
// function render （data=[]）{
function render(data = goodsList) {
let str = data.map(item => {
return `
<div class="item">
<img src="${item.picture}" alt="">
<p class="name">${item.name}</p>
<p class="price">${item.price}</p>
</div>
`
}).join('')
document.querySelector('.list').innerHTML = str
// console.log(str)
}
render(goodsList)
let btns = document.querySelectorAll('.filter a')
btns.forEach(btn => {
btn.addEventListener('click', function() {
// console.log('点击了')
let arr = goodsList
let num = this.dataset.index
// console.log(num)
if (num == '1') {
// //console.log（显示0-100的"）
const newArr = arr.filter(item => {
return item.price >= 0 && item.price <= 100
})
render(newArr)
} else if (num == '2') {
const newArr = arr.filter(item => {
return item.price >= 100 && item.price <= 300
})
render(newArr)
} else if (num == '3') {
const newArr = arr.filter(item => {
return item.price > 300
})
render(newArr)
} else {
render(arr)
}
})
})
</script>
</body>
</html>
2，点击图片更换成相对应的背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<!-- 讲解视频链接：https://www.bilibili.com/video/BV1mS4y1j7YZ?p=21 -->
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url(./images/bg1.jpg);
}
#mask {
background-color: rgba(255, 255, 255, 0.3);
height: 200px;
text-align: center;
}
#mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="mask">
<img src="./images/bg1.jpg" alt="" />
<img src="./images/bg2.jpg" alt="" />
<img src="./images/bg3.jpg" alt="" />
<img src="./images/bg4.jpg" alt="" />
<img src="./images/bg5.jpg" alt="" />
</div>
<script>
// 1、找到每一个img标签，注册点击事件
const body = document.querySelector('body')
const img = document.querySelectorAll('#mask img')
img.forEach((el, index) => {
console.log(el.src)
el.addEventListener('click', function() {
body.style.backgroundImage = `url(${el.src})`
// document.body.style.backgroundImage = `url(${ el.src})`
})
})
// 2、点击之后，把img标签的src属性直接设置给body标签的backgroundImage即可
</script>
</body>
</html>
3，反馈满意度
<!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>反馈</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="container">
<!-- <div class="bold">谢谢您的支持!</div>
<div class="bold">您的反馈为: ${selectedRating}</div>
<p>您反馈的建议，将成为我们日后改进工作的重要参考内容。</p> -->
<h1 class="heading">反馈</h1>
<div class="ratings-container" id="ratings-container">
<div class="rating">
<img src="./imgs/sad.png" />
<small>不满意</small>
</div>
<div class="rating">
<img src="./imgs/normal.png" />
<small>一般吧</small>
</div>
<div class="rating">
<img src="./imgs/smile.png" />
<small>很满意</small>
</div>
</div>
<button class="btn" id="btn">确定反馈</button>
</div>
<!-- <script src="index.js"></script> -->
<script>
// 功能1： 笑脸有单击事件，点的这个区域高亮，其他区域不能高亮
let selectedRating = ''
const rats = document.querySelectorAll('.rating')
rats.forEach(rat => {
rat.addEventListener('click', function() {
// 把点击的这个标签添加类名active变绿，其他的都不能变绿
// 找到有active的标签，删除active
const activeEl = document.querySelector('.active') // 找到返回标签，找不到null
if (activeEl) {
activeEl.classList.remove('active')
}
// console.log(1)
this.classList.add('active')
// 存储数据 -- innerText 只获取文字内容，不获取标签
// let selectedRating = this.innerText
selectedRating = this.innerText
})
})
// 功能2： 确定反馈 按钮单击事件， 如果选了评价内容 就替换 container 内容变成文字内容；否则弹框提示
// 点确定按钮 找到 container 去替换html内容
// selectedRating 内容来自上面的点击事件 → 改的内容和这里用的内容是同一个变量 → 声明全局变量
//
const btn = document.querySelector('.btn')
const container = document.querySelector('.container')
btn.addEventListener('click', function() {
// 判断： 如果没有点上面的笑脸，弹窗提示 → 什么样表示没有点笑脸 → selectedRating 是 空
if (selectedRating == '') {
alert('请选择评价内容')
// 退出当前函数 → 退的是哪个函数 → 点击事件的function
return
}
container.innerHTML = `
<div class="bold">谢谢您的支持!</div>
<div class="bold">您的反馈为: ${ selectedRating }</div>
<p>您反馈的建议，将成为我们日后改进工作的重要参考内容。</p>
`
})
</script>
</body>
</html>
扫一扫
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
