01-经典案例
1.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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
transition: all 0.3s;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
display: none;
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本" />
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
/*思路分析
1.事件源 : 输入框
2.事件类型:
onfouces: 成为焦点。 点击输入框出现光标的时候(此时用户可以输入文字)
onblur: 失去焦点。 点击空白区域输入框光标消失的时候(此时用户不可以输入文字)
3.事件处理
成为焦点:(1)显示下拉菜单 (2)文本框添加颜色
失去焦点:(1)隐藏下拉菜单 (2)文本框去掉颜色
*/
// 1. 获取元素 input
let search = document.querySelector('input')
let list = document.querySelector('.result-list')
// 2. 注册事件
//2.1 成为焦点
search.onfocus = function () {
// 3.1 显示下拉菜单
list.style.display = 'block'
// 3.2 文本框变色
this.classList.add('search')
}
// 2.2 失去焦点
search.addEventListener('blur', function () {
// 3.1 隐藏下拉菜单
list.style.display = 'none'
// 3.2 文本框去色
this.classList.remove('search')
})
</script>
</body>
</html>
1.2-购物车加减
![在这里插入图片描述](https://img-blog.csdnimg.cn/9fbf72b3e7864f9d
a870e05b0f0289a1.png)
<!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" />
<title>Document</title>
<style>
div {
width: 80px;
}
input[type='text'] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type='button'] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly />
<input type="button" value="+" id="add" />
<input type="button" value="-" id="reduce" />
<script>
/* 思路分析:
1.点击+号: 商品数量 自增
2.点击-号: (1)商品数量 自减 (2)如果商品数量为0,则禁用减号按钮
*/
// 1. 获取元素
let total = document.querySelector('#total')
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
// 2.注册事件
//2.1 点击加号
add.onclick = function () {
//3.1 自增 : 自增运算符可以隐式转换
total.value++
//3.2 无条件设置减号按钮允许点击
reduce.disabled = false
}
// 2.2 点击减号
reduce.onclick = function () {
//3.1 自减
total.value--
//3.2 如果商品数量为0,则禁用减号按钮
if (total.value == 0) {
reduce.disabled = true
}
}
</script>
</div>
</body>
</html>
1.3-图片切换
[效果预览]
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.title {
background-color: skyblue;
color: white;
}
img {
width: 200px;
height: 200px;
box-shadow: 0 0 20px hotpink;
}
</style>
</head>
<body>
<h2 class="title">图片切换</h2>
<img alt="" src="./images/01.jpg" />
<br />
<input id="prev" type="button" value="上一张" />
<input id="next" type="button" value="下一张" />
<script>
/*需求
1.点击下一张 : img标签显示下一张照片
2.点击上一张 : img标签显示上一张照片
*/
//使用数组存储六张图片路径
let arr = [
'./images/01.jpg',
'./images/02.jpg',
'./images/03.jpg',
'./images/04.jpg',
'./images/05.jpg'
]
//使用全局变量存储当前图片下标(默认第一张下标为0)
let index = 0
//1.获取元素
let prev = document.querySelector('#prev')
let next = document.querySelector('#next')
let img = document.querySelector('img')
//2.注册事件
//2.1 下一张
next.onclick = function () {
//3.事件处理
//如果是最后一张,则变成第一张下标为0
if (index == arr.length - 1) {
index = 0
} else {
//不是最后一张,就显示下一张
index++
}
//修改图片路径
img.src = arr[index]
}
//2.2 上一张
prev.onclick = function () {
//3.事件处理
//如果是第一张,则变成最后一张
if (index == 0) {
index = arr.length - 1
} else {
index--
}
//修改图片路径
img.src = arr[index]
}
</script>
</body>
</html>
02-核心案例:排他思想
- 排他思想:干掉其他兄弟,复活我自己
1.1-案例:排他思想
[效果预览]
<!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" />
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
/* 思路分析:点击每一个按钮 : 排他思想修改样式(我自己样式改变,其他人样式恢复默认) */
//1.获取元素
let buttonList = document.querySelectorAll('button')
console.log(buttonList) //伪数组
//2.注册事件
//五个按钮都要注册事件,使用循环语句
for (let i = 0; i < buttonList.length; i++) {
//i = 0 1 2 3 4
//注册点击事件
buttonList[i].onclick = function () {
//3.事件处理
console.log(this) //事件源: 当前点击的按钮
/* 排他思想: 排除他人,复活自己*/
//排除他们
for(let j = 0;j<buttonList.length;j++){
buttonList[j].style.backgroundColor = ''
}
//复活自己
this.style.backgroundColor = 'pink'
}
}
</script>
</body>
</html>
1.2-案例:突出展示
[效果预览]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 5px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
padding: 5px;
}
.wrap img {
display: block;
border: 0;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt=""/></a>
</li>
</ul>
<script>
/* 思路分析: 鼠标移入每一个li元素: 排他思想修改opacity
1.注册事件:鼠标移入每一个li元素(需要使用循环)
2. 排他思想修改opacity : 需要循环
* 移入的元素: 1
* 其他兄弟: 0.5
*/
//1.获取元素
let liList = document.querySelectorAll('.wrap li')
//2.循环遍历数组给每一个li元素注册事件
for (let i = 0; i < liList.length; i++) {
//鼠标移入事件
liList[i].onmouseenter = function () {
//3.排他思想修改样式
//排除他人
for (let j = 0; j < liList.length; j++) {
liList[j].style.opacity = 0.5
}
//复活自己
this.style.opacity = 1
}
}
</script>
</div>
</body>
</html>
1.3-排他思想升级版
<!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" />
<title>Document</title>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
/*需求
给每一个按钮注册点击事件 :
(1)当前点击的按钮样式变化: 背景变粉色
(2)其他所有按钮(除我之外)样式恢复默认
排他思想升级版有一个前提条件: 需要通过类名来修改样式
第一步: 先使用类选择器找出上一次点击的元素, 通过classList语法进行移除
第二步: 给本次点击的按钮(this),通过classList添加类名
*/
//1.获取元素
let buttonList = document.querySelectorAll('button')
console.log(buttonList)
//2.注册事件
//这个循环: 只是遍历所有的按钮,给每一个按钮注册事件
for (let i = 0; i < buttonList.length; i++) {
//注册事件
buttonList[i].onclick = function () {
//3.事件处理
//3.1 先干掉那个唯一的pink类,移除掉
document.querySelector('.pink').classList.remove('pink')
//3.2 给当前点击的按钮添加pink类
this.classList.add('pink')
}
}
</script>
</body>
</html>
03-核心案例:开关思想
1.1-全选全不选及反选
[效果预览]
<!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">
<title>Document</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全选">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反选">
<script>
/*需求
1.点击全选 : 设置每一个选择框的checked属性为true
2.点击全不选 : 设置每一个选择框的checked属性为false
3.点击反选 :设置每一个选择框的checked属性与自身当前相反 (true变false,false变true)
*/
//1.获取元素
let checkAll = document.querySelector('#checkAll');
let unCheckAll = document.querySelector('#unCheckAll');
let reverseCheck = document.querySelector('#reverseCheck');
let inputList = document.querySelectorAll('.check');
console.log(checkAll,unCheckAll,reverseCheck,inputList);
//2.注册事件
//2.1点击全选
checkAll.onclick = function(){
//3.事件处理: 设置每一个选择框的checked属性为true
for(let i = 0;i<inputList.length;i++){
inputList[i].checked = true;
};
};
//2.2点击全不选
unCheckAll.onclick = function(){
//3.事件处理: 设置每一个选择框的checked属性为true
for(let i = 0;i<inputList.length;i++){
inputList[i].checked = false;
};
};
//2.3点击反选
reverseCheck.onclick = function(){
//3.事件处理: 设置每一个选择框的checked属性与自身当前相反 (true变false,false变true)
for(let i = 0;i<inputList.length;i++){
//写法三 : 逻辑非表达式
inputList[i].checked = !inputList[i].checked;
//写法二 : 三元表达式
// inputList[i].checked = inputList[i].checked ? false : true;
//写法一 : 双分支
// if( inputList[i].checked ){
// inputList[i].checked = false;
// }else{
// inputList[i].checked = true;
// };
};
};
</script>
</body>
</html>
1.2-点餐选择框:开关思想
[效果预览]
需求分析:切入点:交互
1.点击上方选择框:让下方选择框列表的checked值与自身保持一致
2.点击下方选择框列表:判断上方选择框列表状态
选中:所有的选择框checked值都是true
未选中:只要有一个选择框checked值是false
思路分析:事件三要素
1 获取元素:
2 注册事件:
3 事件处理:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="checkAll" />全选/全不选</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>¥200</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>¥998</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>¥88</td>
</tr>
</table>
<script>
/*需求
1.点击上方选择框 : 修改下方选择框的checked值与上方选择框一致
2.点击下方选择框: 判断上方选择框是否选中
选中 : 下方所有选择框都要选中
不选: 下方选择框任何一个没有选中
*/
//1.获取元素
let checkAll = document.querySelector('#checkAll')
let checkList = document.querySelectorAll('.check')
console.log(checkAll, checkList)
//2.注册事件
//2.1 点击上方选择框
checkAll.onclick = function () {
//this : checkAll选择框
console.log(this.checked)
//3.修改下方选择框的checked值与上方选择框一致
for (let i = 0; i < checkList.length; i++) {
checkList[i].checked = this.checked
}
}
//2.2 点击下方选择框
for (let i = 0; i < checkList.length; i++) {
checkList[i].onclick = function () {
//this : 当前点击的选择框
// console.log( checkList[0].checked );
// console.log( checkList[1].checked );
// console.log( checkList[2].checked );
//3.开关思想 检查选择框有没有选中
/* 普通写法 */
//3.1 提出假设
let flag = true
//3.2 验证假设
for (let j = 0; j < checkList.length; j++) {
if (!checkList[j].checked) {
flag = false
break
}
}
//3.3 根据开关结果实现需求
checkAll.checked = flag
// if( flag ){
// checkAll.checked = true;
// }else{
// checkAll.checked = false;
// };
/* 高端写法 */
// for(let i = 0;i<checkList.length;i++){
//无条件的把每一个下方选择框的checked值赋值给上方选择框
// checkAll.checked = checkList[i].checked;
// if(!checkAll.checked){//只要发现false,后面就没必要继续的,直接循环结束
// break;
// };
// };
}
}
</script>
</body>
</html>
- 箩筐思想实现全选:
选中状态的选择框数量 == 所有选择框数量
//1.声明空箩筐(记录选中状态的数量)
let sum = 0;
//2.遍历萝卜堆数
for(let j = 0;j<checkList.length;j++){
//3.如果选中,则放入箩筐
if(checkList[j].checked == false){
sum++
};
};
//如果选中状态数量 == 所有选择框数量 说明全部选中
checkAll.checked = (sum == checkList.length);
04-核心案例(tab栏切换)
1.1-tab栏切换01
[效果预览]
- 需求:点击上面tab栏按钮:
- (1)按钮的颜色变成粉色
- (2)下方显示对应的大盒子内容
- 核心思路:
- (1)点击按钮时设置自身的类为current ,设置对应大盒子的display属性为block
- 如何保证上面按钮与下方大盒子对应:给按钮添加index属性
- (2)使用排他思想去除其他按钮的类和其他大盒子的display属性为none
- (1)点击按钮时设置自身的类为current ,设置对应大盒子的display属性为block
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>tab栏切换</title>
<style>
.Box {
width: 240px;
border: 1px solid #000;
margin: 100px auto;
padding: 20px;
}
.con {
width: 100%;
height: 200px;
background-color: #cccccc;
border: 1px solid #000;
margin-top: 10px;
display: none;
}
.current {
background-color: pink;
border: 2px black solid;
}
</style>
</head>
<body>
<div class="Box" id="box">
<button class="current">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div class="con" style="display:block">内容1</div>
<div class="con">内容2</div>
<div class="con">内容3</div>
<div class="con">内容4</div>
</div>
<script>
/* 需求
点击上方四个按钮: 排他思想修改按钮样式 + 显示下方"对应"(下标一致)盒子
*/
//1.获取元素
let buttonList = document.querySelectorAll('#box>button')
let divList = document.querySelectorAll('#box>.con')
console.log(buttonList, divList)
//2.遍历tab栏(上面四个按钮)
for (let i = 0; i < buttonList.length; i++) {
//2.1 注册点击事件
buttonList[i].onclick = function () {
//3.事件处理 this:当前点击的按钮
//排他思想修改样式 + 显示对应盒子
for (let j = 0; j < buttonList.length; j++) {
if (i == j) {
//当前下标
buttonList[j].className = 'current'
divList[j].style.display = 'block'
} else {
//其他下标
buttonList[j].className = ''
divList[j].style.display = 'none'
}
}
}
}
</script>
</body>
</html>
1.2-tab栏切换选项卡
[效果预览]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
<script>
/*1.获取事件源
2.添加事件
3.事件处理
*/
//1.获取元素
let liList = document.querySelectorAll('.tab>li')
let mainList = document.querySelectorAll('.products>.main')
//2.添加事件
//遍历liList
for (let i = 0; i < liList.length; i++) {
//注册事件
liList[i].onclick = function () {
//3.1 先移除之前选中的样式
document.querySelector('.active').classList.remove('active')
document.querySelector('.selected').classList.remove('selected')
//3.2 给本次点击的元素添加样式
liList[i].classList.add('active')
mainList[i].classList.add('selected')
}
}
</script>
</body>
</html>
05-attribute语法学习
1.1-attribute操作自定义属性语法
<!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" />
<title>Document</title>
<style>
.one {
height: 100px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div
id="box"
aaa="啊啊啊"
class="one"
style="width: 100px;background-color: red"
></div>
<script>
/*知识点学习目标: attribute语法操作元素属性
1.什么是自定义属性
1.1 标准属性: W3C中的标准属性,浏览器可以识别
1.2 自定义属性: 浏览器不能识别样式的属性,用户自定义添加(用于存储一些数据)
2.attribute语法场景 : 操作元素行内自定义属性
获取属性: 元素.getAttribute('属性名')
设置属性: 元素.setAttribute('属性名',属性值)
移除属性: 元素.removeAttribute('属性名')
*/
let one = document.querySelector('.one')
//(1)获取元素属性
console.log(one.getAttribute('aaa'))
//(2)设置属性
one.setAttribute('aaa', '坤哥') //如果存在则修改
one.setAttribute('bbb', '班长') //如果不存在则动态
//(3)移除属性
one.removeAttribute('aaa')
</script>
</body>
</html>
1.2-案例:隔行变色高级版
- 需求: (1)单数行显示黄色 双数行显示绿色 (2)鼠标移入哪一个就显示红色高亮,移开就恢复原状
- 思路分析:
- 1.先获取到界面所有的li标签
- 2.遍历数组,实现li标签的隔行变色
- 3.给每一个li标签注册鼠标移入和移出事件
- 4.移入则修改颜色为红色
- 对象的赋值操作先回收旧值,再赋新值
- 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" />
<title>Document</title>
</head>
<body>
<ul>
<li>我是班长1</li>
<li>我是班长2</li>
<li>我是班长3</li>
<li>我是班长4</li>
<li>我是班长5</li>
<li>我是班长6</li>
<li>我是班长7</li>
<li>我是班长8</li>
<li>我是班长9</li>
<li>我是班长10</li>
</ul>
<script>
/*需求
1.单数行显示黄色,双数行显示绿色
2.鼠标移入每一个li元素 : 自身变色变红
3.鼠标移出每一个li元素 : 自身变色恢复原先的颜色
*/
//1.获取li元素
let liList = document.querySelectorAll('li')
console.log(liList)
//2.循环遍历每一个li元素
for (let i = 0; i < liList.length; i++) {
console.log(liList[i])
//2.1 修改默认颜色
if (i % 2 == 0) {
//单数行
liList[i].style.backgroundColor = 'yellow'
} else {
liList[i].style.backgroundColor = 'green'
}
//2.2 注册鼠标移入事件
liList[i].onmouseover = function () {
//3.事件处理 this:当前移入的li元素
/*
(1)发现问题 : 对象的属性赋值会先销毁就如,存入新值。 一旦赋值red,以前的颜色就会被回收
(2)解决问题: 背包思想 。 给每一个li元素添加一个自定义属性用于存储自己原先的颜色
*/
this.setAttribute('lv', this.style.backgroundColor)
this.style.backgroundColor = 'red'
}
//2.3 注册鼠标移出事件
liList[i].onmouseout = function () {
//3.事件处理 this:当前移出的li元素
this.style.backgroundColor = this.getAttribute('lv')
}
}
</script>
</body>
</html>
06-案例学习总结
- 1.巧用this关键字
- this关键字:谁触发了这个方法,this就代表谁
- 2.排他思想
- 循环遍历元素数组,只要不是自己就设置属性为默认值(排他)
- 3.开关思想
- 应用场景:某种操作的结果只有两种情况(声明布尔类型变量存储这两种情况true和false)
- 步骤
- 1.提出假设(变量声明默认值)
- 2.验证假设
- 3.根据·开关结果实现需求