1. 简介
<!--
Web APIs 操作页面元素，实现后台管理的操作
1. DOM 文档对象模型 使用JS去操作页面文档
2. BOM 浏览器对象模型 使用JS去操作浏览器
-->
<!--
API: 应用程序接口（Application Programming Interface）
开发人员使用 JavaScript提供的接口来操作网页元素和浏览器
-->
<!--
DOM（Document Object Model——文档对象模型）
作用：DOM用来 操作网页文档，开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
-->
<!--
document 对象
是DOM顶级对象
作为网页内容的入口
它提供的属性和方法都是用来访问和操作网页内容(document.querySelector())
-->
2. 获取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 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
const box = document.querySelector('.box1')
console.log(box)
// 如果有多个标签，只找第一个
// const li = document.querySelector('ol li')
// console.log(li)
// querySelectorAll 返回NodeList伪数组，找不到则返回空伪数组
// 有索引有长度，支持遍历 但是没有 pop() push() 等数组方法
const lis = document.querySelectorAll('.nav lii')
console.log(lis)
lis.forEach(function (el, index) {
console.log(el, index)
})
</script>
</body>
</html>
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>
</head>
<body>
<div class="box1">这是一个div</div>
<div class="box2">这是一个div</div>
<div class="box3">这是一个div</div>
<div class="box4">这是一个div</div>
<script>
const box1 = document.querySelector('.box1')
const box2 = document.querySelector('.box2')
const box3 = document.querySelector('.box3')
const box4 = document.querySelector('.box4')
// innerText：操作元素内容，不解析标签
box1.innerText = 'innerText' // innerText
box2.innerText = '<h1>innerText</h1>' // <h1>innerText</h1>
// innerHTML：操作元素内容，解析标签
box3.innerHTML = 'innerHTML' // innerHTML
box4.innerHTML = '<h1>innerHTML</h1>' // innerHTML(一级标题样式)
</script>
</body>
</html>
案例1_年会抽奖
<!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 random1 = Math.floor(Math.random() * arr.length)
const one = document.querySelector('.one')
one.innerHTML = arr[random1]
arr.splice(random1, 1)
console.log(arr)
const random2 = Math.floor(Math.random() * arr.length)
const two = document.querySelector('.two')
two.innerHTML = arr[random2]
arr.splice(random2, 1)
console.log(arr)
const random3 = Math.floor(Math.random() * arr.length)
const three = document.querySelector('.three')
three.innerHTML = arr[random3]
arr.splice(random3, 1)
console.log(arr) */
// 利用循环做
const arrH = ['one', 'two', 'three']
for (let i = 0; i < 3; i++) {
const random = Math.floor(Math.random() * arr.length)
document.querySelector(`.${arrH[i]}`).innerHTML = arr[random]
arr.splice(random, 1)
console.log(arr)
}
</script>
</body>
</html>
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>
</head>
<body>
<button>点我呀</button>
<!--
事件监听
元素对象.addEventListener('事件类型',事件处理函数)
-->
<!--
事件监听三要素
事件源（who 谁发生）
事件类型（when 事件触发条件 点击？鼠标滑动？）
事件处理函数（what 要做什么？把要做的事放到事件处理函数里面）
-->
<!--
1. 事件类型要加引号，小写
2. 函数是点击之后再去执行，每次点击都会执行一次
-->
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('哦耶，点了')
})
</script>
</body>
</html>
环境变量this
<!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>
<p>这是p</p>
<!-- 环境对象：指的是函数内部特殊的 this , 它指向一个对象，并且受当前环境影响 -->
<script>
// 谁调用，this 就是谁
const btn = document.querySelector('button')
// 普通函数
btn.addEventListener('click', function () {
alert('哦耶，点了')
console.log(this) // <button>这是按钮</button>
})
console.log(this) // Window
const p = document.querySelector('p')
// 箭头函数(事件处理函数基本不用箭头函数)
// 箭头函数没有自己的this，this指向外层作用域中的this
p.addEventListener('click', () => {
alert('哦耶，点了')
console.log(this) // Window
})
</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>
<button class="btn1">按钮</button>
<button class="btn2">按钮</button>
<!--
on 方式同名事件会被覆盖，
addEventListener则不会，同时拥有事件更多特性，推荐使用
-->
<script>
// L2：不覆盖
/*
新语法
querySelector,addEventListener
*/
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
alert('addEventListener1')
})
btn1.addEventListener('click', function () {
alert('addEventListener2')
})
// L0：覆盖
// 同名事件会覆盖
/*
onclick
*/
const btn2 = document.querySelector('.btn2')
btn2.onclick = function () {
alert('onclick1')
}
btn2.onclick = function () {
alert('onclick2')
}
</script>
</body>
</html>
5. 操作元素属性
5.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>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="./images/1.png" alt="我是播仔">
<div><button disabled>按钮</button></div>
<input type="radio" checked>男
<!--
1. 操作元素常用属性
href、title、src 、value、checked、disabled...
表单的disabled、checked、selected属性值一律使用布尔值表示
-->
<script>
const img = document.querySelector('img')
img.src = './images/2.png'
console.log(img.alt) // 我是播仔
const btn = document.querySelector('button')
console.log(btn.disabled) // true
btn.disabled = false // 取消禁用
const input = document.querySelector('input')
console.log(input.checked) // true
input.checked = false // 取消默认选中
</script>
</body>
</html>
案例2_随机显示图片
<!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'
]
const img = document.querySelector('img')
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
// console.log('点了?')
const random = Math.floor(Math.random() * arr.length)
console.log(random)
console.log(arr[random])
img.src = arr[random]
// img.src = `./images/${random+1}.png`
})
</script>
</body>
</html>
5.2 操作元素样式属性
5.2.1 style
<!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>
.box {
width: 100px;
height: 100px;
background-color: pink;
transition: all .5s;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 操作元素样式属性 -->
<!--
使用 style、 className 和classList 怎么选择？
修改样式很少的时候，使用 style
修改大量样式的可以选择类：className / classList
classList 是追加和删除不影响以前类名，更提倡
-->
<!-- 1. 通过 style 属性操作元素样式 （行内css） -->
<script>
const box = document.querySelector('.box')
console.log(box)
/*
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位
*/
box.addEventListener('click', function () {
box.style.marginLeft = '20px'
box.style.backgroundColor = 'red'
})
</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>
<style>
body {
overflow: hidden;
min-height: 620px;
background: url(./images/bg1.jpg) no-repeat center center/cover;
}
button {
font-size: 16px;
height: 40px;
border-radius: 40px;
padding: 6px 15px;
color: black;
background-color: #f7ff16;
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: #ffcf40;
}
</style>
</head>
<body>
<button>切换背景</button>
<script>
// 随机显示背景图片案例：点击按钮，按随机索引取图片地址，设置给body背景图属性
// 背景图片地址数组
const arr = [
'./images/bg1.jpg',
'./images/bg2.jpg',
'./images/bg3.jpg',
'./images/bg4.jpg',
'./images/bg5.jpg'
]
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
const random = Math.floor(Math.random() * arr.length)
/* background-image: url(); */
// document.documentElement 获取html
// document.body 获取body
// document.body.style.backgroundImage = `url(${arr[random]})`
document.body.style.backgroundImage = `url(${arr[random]})`
})
</script>
</body>
</html>
5.2.2 className（理解）
<!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>
.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>
<!-- 2. 通过类名(className) 操作元素样式（理解） -->
<!--
由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
-->
<script>
const div = document.querySelector('div')
div.addEventListener('click', function () {
// div.className = 'circle'
div.className = 'box circle'
})
</script>
</body>
</html>
5.2.3 classList（推荐）
<!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>
.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>
<!-- 3. 通过 classList 操作元素样式（推荐） -->
<!--
为了解决className 容易覆盖以前的类名，
我们可以通过classList方式追加和删除类名
-->
<script>
const div = document.querySelector('div')
div.addEventListener('click', function () {
// 新增类名
// div.classList.add('circle')
// 移除类名
// div.classList.remove('box')
// 切换类名
div.classList.toggle('circle')
// 判断是否有指定类名
console.log(div.classList.contains('box')) // true
console.log(div.classList.contains('box1')) // false
})
</script>
</body>
</html>
案例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>
.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;
}
/* 定义动画 slideUp动画名 */
@keyframes slideUp {
to {
height: 0;
}
}
@keyframes hidden {
to {
display: none;
}
}
.hide {
/* 调用动画 */
/* slideUp .3s linear forwards → 动画名称 动画持续时长 速度曲线为线性linear forwards动画结束后保持结束时状态 */
/* hidden .3s .3s forwards → 动画名称 延迟时间 持续时间 */
animation: slideUp .3s linear forwards, hidden .3s .3s forwards;
}
</style>
</head>
<body>
<div class="pop">
<a href="javascript:;" class="close"></a>
</div>
<script>
// 点击关闭按钮可以关闭父盒子
const closeX = document.querySelector('.close')
const pop = document.querySelector('.pop')
// 1. style
/* closeX.addEventListener('click', function () {
// opacity: 1;
pop.style.opacity = 0
}) */
// 利用提供的 hide 类名 来实现隐藏功能
// 2. classList
closeX.addEventListener('click', function () {
pop.classList.add('hide')
})
// 3. className
/* closeX.addEventListener('click', function () {
pop.className = 'pop hide'
}) */
</script>
</body>
</html>
5.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>
</head>
<body>
<div class="box" data-name="first" data-id="1">盒子</div>
<!-- 自定义属性（淘宝常用？） -->
<!--
标准属性: 标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如：对象.title
自定义属性：
在html5中推出来了专门的data-自定义属性
使用场景：通过自定义属性可以存储数据，后期可以使用这个数据
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
-->
<script>
const box = document.querySelector('div')
console.log(box.dataset) // {name: 'first', id: '1'}
console.log(box.dataset.name) // first
console.log(box.dataset.id) // 1
</script>
</body>
</html>
6. 案例5_价格筛选
<!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="" alt="">
<p class="name"></p>
<p class="price"></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',
},
]
const list = document.querySelector('.list')
render()
function render(array = goodsList) {
list.innerHTML = array.map((el, index) => {
const { name, price, picture } = el
return `
<div class="item">
<img src="${picture}" alt="">
<p class="name">${name}</p>
<p class="price">${price}</p>
</div>
`
}).join('')
}
const btns = document.querySelectorAll('.filter a')
btns.forEach((item, index) => {
item.addEventListener('click', function () {
// console.log(this)
// console.log(this.dataset.index)
// console.log(item)
// console.log(item.dataset.index)
// console.log(typeof item.dataset.index) // string
// item.dataset.index为字符串型 所以if括号内不能用全等
if (item.dataset.index == 1) {
const newArr = goodsList.filter(el => {
return el.price <= 100
})
render(newArr)
// console.log(newArr)
} else if (item.dataset.index == 2) {
const newArr = goodsList.filter(el => {
return el.price > 100 && el.price <= 300
})
render(newArr)
} else if (item.dataset.index == 3) {
const newArr = goodsList.filter(el => {
return el.price > 300
})
render(newArr)
} else {
render()
}
})
})
</script>
</body>
</html>
7. 作业
7.1 百度换肤
<!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标签，注册点击事件
// 2、点击之后，把img标签的src属性直接设置给body标签的backgroundImage即可
const imgs = document.querySelectorAll('img')
imgs.forEach(element => {
// console.log(element)
// console.log(element.src)
element.addEventListener('click', function () {
document.body.style.backgroundImage = `url(${element.src})`
})
})
</script>
</body>
</html>
7.2 计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计数器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
<style>
/* .value {
color: red;
} */
</style>
</head>
<body>
<main>
<div>
<h1>计数器</h1>
<span class="value">0</span>
<div>
<button data-type="decrease" class="btn btn-danger decrease"><i class="fa fa-minus"
aria-hidden="true"></i></button>
<button class="btn btn-secondary reset" data-type="reset">重置</button>
<button class="btn btn-success increase" data-type="increase"><i class="fa fa-plus"
aria-hidden="true"></i></button>
</div>
</div>
</main>
<script>
const value = document.querySelector('.value')
const btns = document.querySelectorAll('.btn')
let num = 0
// 能够通过dataset获取元素身上绑定的自定义属性
btns.forEach(btn => {
btn.addEventListener('click', function () {
// console.log(btn.dataset)
// console.log(btn.dataset.type)
// console.log(type)
const type = btn.dataset.type
if (type === 'decrease') {
num--
} else if (type === 'increase') {
num++
} else {
num = 0
}
value.innerHTML = num
if (num < 0) {
value.style.color = 'red'
} else if (num > 0) {
value.style.color = 'green'
} else {
value.style.color = 'black'
}
})
})
</script>
<!-- 自做 -->
<!-- <script>
const value = document.querySelector('.value')
const decrease = document.querySelector('.decrease')
const reset = document.querySelector('.reset')
const increase = document.querySelector('.increase')
let num = 0
changeNum()
function changeNum() {
value.innerHTML = num
}
valueColor()
function valueColor() {
if (num < 0) {
value.style.color = 'red'
} else if (num > 0) {
value.style.color = 'green'
} else {
value.style.color = 'black'
}
}
decrease.addEventListener('click', function () {
// console.log(this)
// console.log('decrease')
// console.log(num)
num--
changeNum()
valueColor()
})
reset.addEventListener('click', function () {
num = 0
changeNum()
valueColor()
})
increase.addEventListener('click', function () {
// console.log('increase')
num++
changeNum()
valueColor()
})
</script> -->
<!-- <script src="index.js"></script> -->
</body>
</html>
7.3 按钮禁用效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>个人注册</title>
<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div class="register py-container">
<!--head-->
<div class="logoArea">
<a href="home.html" class="logo"></a>
</div>
<!--register-->
<div class="registerArea">
<h3>
注册新用户<span class="go">我有账号，去<a href="login.html">登陆</a></span>
</h3>
<div class="info">
<form class="sui-form form-horizontal">
<div class="control-group">
<label class="control-label">用户名：</label>
<div class="controls">
<input type="text" class="input-xfat input-xlarge" placeholder="用户名" />
</div>
</div>
<div class="control-group">
<label class="control-label">邮箱：</label>
<div class="controls">
<input type="text" class="input-xfat input-xlarge" placeholder="邮箱" />
</div>
</div>
<div class="control-group">
<label class="control-label">登录密码：</label>
<div class="controls">
<input type="password" class="input-xfat input-xlarge" placeholder="设置登录密码" />
</div>
</div>
<div class="control-group">
<label class="control-label">确认密码：</label>
<div class="controls">
<input type="password" class="input-xfat input-xlarge" placeholder="再次确认密码" />
</div>
</div>
<div class="control-group">
<span class="control-label"> </span>
<label class="controls">
<!-- <input id="agree" name="m1" type="checkbox" checked /> -->
<input id="agree" name="m1" type="checkbox" />
<span>同意协议并注册《品优购用户协议》</span>
</label>
</div>
<div class="control-group">
<span class="control-label"></span>
<div class="controls btn-reg">
<button id="registerBtn" class="sui-btn btn-block btn-xlarge btn-danger" href="#" disabled>
完成注册
</button>
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
<!--foot-->
<div class="py-container copyright">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#">商家入驻</a></li>
<li><a href="#">营销中心</a></li>
<li><a href="#">手机品优购</a></li>
<li><a href="#">销售联盟</a></li>
<li><a href="#">品优购社区</a></li>
<li><a href="#">品优购公益</a></li>
<li><a href="#">English Site</a></li>
<li><a href="#">Contact U</a></li>
</ul>
<div class="address">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
电话：400-618-4000 传真：010-82935100
</div>
<div class="beian">京ICP备08001421号京公网安备110108007702</div>
</div>
</div>
<script>
const agree = document.querySelector('#agree')
const registerBtn = document.querySelector('#registerBtn')
// console.log(agree, registerBtn)
agree.addEventListener('click', function () {
// console.log(registerBtn.disabled)
// registerBtn.disabled = !registerBtn.disabled
// console.log(registerBtn.disabled)
// console.log(this)
// 在click事件中，将复选框的checked属性取反并赋值给按钮的disabled属性
registerBtn.disabled = !this.checked
})
</script>
</body>
</html>
7.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>
<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>
// 判断是否有指定类名
// console.log(div.classList.contains('box')) // true
const rBtns = document.querySelectorAll('.rating')
const btn = document.querySelector('.btn')
const container = document.querySelector('.container')
let selectedRating = null
rBtns.forEach(element => {
element.addEventListener('click', function () {
if (element.classList.contains('active')) {
element.classList.remove('active')
selectedRating = null
} else {
let activeRBtn = document.querySelector('.active')
if (activeRBtn) {
activeRBtn.classList.remove('active')
}
element.classList.add('active')
selectedRating = element.innerText
}
// console.log(selectedRating)
})
})
btn.addEventListener('click', function () {
if (selectedRating) {
container.innerHTML = `
<div class="bold">谢谢您的支持!</div>
<div class="bold">您的反馈为: ${selectedRating}</div>
<p>您反馈的建议，将成为我们日后改进工作的重要参考内容。</p>
`
} else {
alert('请选择一个选项！')
}
})
</script>
<!-- <script src="index.js"></script> -->
</body>
</html>
<!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>
<!-- 241123 课上跟练 -->
<script>
// 判断是否有指定类名
// console.log(div.classList.contains('box')) // true
const rats = document.querySelectorAll('.rating')
const btn = document.querySelector('.btn')
const container = document.querySelector('.container')
let selectedRating = null
rats.forEach(rat => {
rat.addEventListener('click', function () {
if (rat.classList.contains('active')) {
rat.classList.remove('active')
selectedRating = null
} else {
const active = document.querySelector('.active')
// 写法错误 active为null时无classList属性，报错
// active.classList.remove('active')
// 正确写法
if (active) {
active.classList.remove('active')
}
rat.classList.add('active')
selectedRating = rat.innerText
}
})
})
btn.addEventListener('click', function () {
/* // if (document.querySelector('.active')) {
if (selectedRating) {
container.innerHTML = `
<div class="bold">谢谢您的支持!</div>
<div class="bold">您的反馈为: ${selectedRating}</div>
<p>您反馈的建议，将成为我们日后改进工作的重要参考内容。</p>
`
} else {
alert('请选择一个选项！')
} */
if (!selectedRating) {
alert('请选择一个选项！')
return
}
container.innerHTML = `
<div class="bold">谢谢您的支持!</div>
<div class="bold">您的反馈为: ${selectedRating}</div>
<p>您反馈的建议，将成为我们日后改进工作的重要参考内容。</p>
`
})
</script>
</body>
</html>
7.5 知乎想法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./fonts/iconfont.css">
<title>Modal</title>
</head>
<body>
<div class="box">
<header>
<div class="h-left">
<span class="iconfont icon-user"></span>
<span>创作者中心</span>
</div>
<span class="h-right">草稿箱（0）</span>
</header>
<nav>
<div class="item">
<span class="iconfont icon-wendang"></span>
<span>回答问题</span>
</div>
<div class="item">
<span class="iconfont icon-shipin"></span>
<span>发视频</span>
</div>
<div class="item">
<span class="iconfont icon-tianxie"></span>
<span>发文章</span>
</div>
<div class="item show-modal">
<span class="iconfont icon-lightbulb"></span>
<span>写想法</span>
</div>
</nav>
<img src="./imgs/www.zhihu.com_ (1).png" alt="">
<button class="add">
<span class="iconfont icon-add"></span>
开始创作
</button>
</div>
<div class="modal">
<button class="close-modal">×</button>
<div class="content"></div>
<button class="submit">发布</button>
</div>
<div class="overlay"></div>
<!-- 能够使用classList操作元素类名，控制元素的显示和隐藏 -->
<!--
点击写想法，弹出模态框
点击模态框中的✕，关闭模态框
-->
<script>
const showModal = document.querySelector('.show-modal')
const modal = document.querySelector('.modal')
const overlay = document.querySelector('.overlay')
const closeModal = document.querySelector('.close-modal')
// .show { display: block; }
showModal.addEventListener('click', function () {
modal.classList.add('show')
overlay.classList.add('show')
})
closeModal.addEventListener('click', function () {
modal.classList.remove('show')
overlay.classList.remove('show')
})
</script>
<!-- <script src="./data.js"></script>
<script src="script.js"></script> -->
</body>
</html>
7.6 innerText和textContent的异同
<!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.hide 类选择器与元素选择器的组合
表示选择所有既是 <div> 元素又具有 class="hide" 属性的元素。
*/
div.hide {
background-color: red;
display: none;
}
</style>
</head>
<body>
<div class="hide">
<div>看不见的div</div>
<span>看不到的span</span>
</div>
<!-- innerText和textContent的异同 -->
<!--
textContent和innerText都能够获取节点的文本
其主要区别如下：
1. textContent 会获取所有元素的内容，包括script 和 style元素，空格，换行。
2. innerText 受 CSS 样式的影响，只获取显示在页面的元素，不会返回隐藏元素的文本，
例如display: none或visibility: hidden的元素将不会被包含在返回的文本中。
-->
<script>
console.log(document.body.innerText)
//空
console.log(document.body.textContent)
/*
看不见的div
看不到的span
console.log(document.body.innerText)
console.log(document.body.textContent)
*/
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
