Web APIs
一、字符串
1.类似数组的特性
2.属性length当前字符串的长度
3.字符串可以通过下标来访问
let str = 'abc';
str[1]=b
4.字符串可以遍历
二、案例
1.案例-购物车数量改变
（1）思路
①获取标签
let btn1 = document.querySelector(".btn1");
let btn2 = document.querySelector(".btn2");
let box1 = document.querySelector(".box1");
②分别绑定了点击事件
//
btn1.addEventListener("click", function () {
})
btn2.addEventListener("click", function () {
})
③业务 只需要 对 数量做增加即可
num++;
box1.innerText = +num;
num--;
box1.innerText = +num;
④业务 判断 如果数量等于 0 那么就需要禁用 按钮
if (num === 0) {
// disabled 禁用按键 状态 true 或 false
btn2.disabled = true;
}
<!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>
.box {
display: flex;
}
.box1 {
width: 60px;
height: 60px;
border: 1px solid rgb(198, 191, 191);
text-align: center;
line-height: 60px;
font-size: 14px;
}
.box2 {
flex-direction: column;
justify-content: space-between;
}
button {
display: block;
width: 30px;
height: 30px;
}
.btn1 {
margin-bottom: 2px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">0</div>
<div class="box2">
<button class="btn1">+</button>
<button class="btn2">-</button>
</div>
</div>
<script>
let btn1 = document.querySelector(".btn1");
let btn2 = document.querySelector(".btn2");
let box1 = document.querySelector(".box1");
let num = 0;
btn1.addEventListener("click", function () {
num++;
box1.innerText = +num;
});
btn2.addEventListener("click", function () {
num--;
//innerText 输出 字符串
box1.innerText = +num;
if (num === 0) {
btn2.disabled = true;
}
});
</script>
</body>
</html>
2.排他思想
（1）先获取所有同类型的元素
（2）遍历，挨个设置一种样式
（3）单独找到 想要选中的标签 给他设置选中的样式
（4）思路
①先获取到每一个li标签
let list = document.querySelectorAll("li");
②再li标签绑定点击事件
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
});
}
③写处理其他所有的元素 让让他们的背景颜色都变成白色
for (let j = 0; j < list.length; j++) {
list[j].style.backgroundColor = "#fff";
}
④事件触发 设置 被点击的li标签 选中的样式
list[index].addEventListener("click", function () {
this.style.backgroundColor = "red";
});
<!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;
}
ul {
display: flex;
list-style: none;
}
li {
width: 100px;
height: 100px;
border: 1px solid #000;
text-align: center;
line-height: 100px;
margin-left: 10px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
let list = document.querySelectorAll("li");
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
for (let j = 0; j < list.length; j++) {
list[j].style.backgroundColor = "#fff";
}
this.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>Document</title>
</head>
<body>
<h2></h2>
<ul>
<li>我是数字1</li>
<li>我是数字2</li>
<li>我是数字3</li>
<li>我是数字4</li>
<li>我是数字5</li>
<li>我是数字6</li>
</ul>
<script>
let list = document.querySelectorAll("li");
let h2 = document.querySelector("h2");
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
console.log(`${list[index].innerHTML}`);
});
}
</script>
</body>
</html>
4.案例-tab栏
<script>
let liList = document.querySelectorAll("li"); // 获取所有的li标签 数组
for (let index = 0; index < liList.length; index++) {
// 对所有的li标签 开始绑定点击事件
liList[index].addEventListener("click", function () {
// 设置所有的li标签 背景颜色为白色
setAllLiColor();
// 设置被点击的li标签 为红色
this.style.backgroundColor = "red";
});
}
// 设置所有li标签的背景颜色为白色
function setAllLiColor() {
for (let j = 0; j < liList.length; j++) {
liList[j].style.backgroundColor = "#fff";
}
}
</script>
三、节点操作
1.DOM节点：DOM树里每一个内容都称之为节点
2.节点类型：元素、属性、文本
3.查找节点：能够具备根据节点关系查找目标节点的能力
（1）节点关系：父节点、子节点、兄弟节点
①父节点
子元素.parentNode
//返回最近一级的父节点 找不到返回为null
<!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></style>
</head>
<body>
<div class="box">
<button class="btn">x</button>
<img src="./imgs/erweima.png" alt="" />
</div>
<div class="box">
<button class="btn">x</button>
<img src="./imgs/erweima.png" alt="" />
</div>
<div class="box">
<button class="btn">x</button>
<img src="./imgs/erweima.png" alt="" />
</div>
<div class="box">
<button class="btn">x</button>
<img src="./imgs/erweima.png" alt="" />
</div>
<div class="box">
<button class="btn">x</button>
<img src="./imgs/erweima.png" alt="" />
</div>
<script>
let closeBtns = document.querySelectorAll("button");
// 遍历
for (let index = 0; index < closeBtns.length; index++) {
closeBtns[index].addEventListener("click", function () {
// this 获取到 对应的父元素 隐藏
// this.parentNode.style.display = 'none';
// 如果你们写代码的时候也想我一样 没有代码提示
// 如 像老师一样 手敲每一个字母
// 真记不住
// document.parentNode
// document.body.style.display="none";
// document.parentNode
// document.body.style.display="none";
this.parentNode.style.display = "none";
});
}
</script>
</body>
</html>
②子节点
父元素.children
// 获得所有子节点、包括文本节点（空格、换行）、注释节点等
// 仅获得所有元素节点
// 返回的还是一个伪数组
<body>
<ul>
<li>a1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let ul = document.querySelector("ul");
let list = document.querySelectorAll("li");
// 获取ul标签下的 子节点
// console.log(ul.children);
// console.log(ul.childNodes); //
ul.addEventListener("click", function () {
for (let index = 0; index < list.length; index++) {
ul.children[index].style.display = "none";
}
});
</script>
</body>
③兄弟节点：下一个兄弟节点nextElementSibling、上一个兄弟节点previousElementSibling
<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>
let list = document.querySelectorAll("li");
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
list[index].nextElementSibling.style.backgroundColor = "pink";
list[index].previousElementSibling.style.backgroundColor = "skyblue";
});
}
</script>
</body>
4.增加节点
（1）创建节点：即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
document.createElement('标签名 如 li div')
（2）追加节点
// 插入到父元素的最后
父元素.appendChild(要插入的元素)
//插入到某个子元素的前面
父元素.insertBefore(插入的元素，在哪个元素前面)
（3）案例
// appendChild案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>13-创建节点和追加节点.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
padding: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1 创建一个 li标签 节点
let li = document.createElement("li");
li.innerText = "这个是新创建的li标签";
li.style.backgroundColor = "green";
// 2 把li标签插入到 ul标签中
let ul = document.querySelector("ul");
ul.appendChild(li); // 把li标签插入到ul中 父元素的底部 插入子元素
</script>
</body>
</html>
//insertBefore案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-insertBefore.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: space-between;
padding: 100px;
}
ul {
border: 1px solid #000;
width: 400px;
}
</style>
</head>
<body>
<ul class="left">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<ul class="right">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
/*
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
*/
let c = document.querySelector(".left li:nth-child(3)");
let two = document.querySelector(".right li:nth-child(2)");
let right = document.querySelector(".right");
// right.insertBefore(c, two);
let li = document.createElement("li");
li.innerText = "新创建的";
right.insertBefore(li, two);
// 父元素.insertBefore(要插入的元素,哪个元素的上面);
</script>
</body>
</html>
(4)节点的移动和剪切
①实现过程：box1里面的li标签通过点击事假，转移（剪切）到box2里面
②使用到知识点： 父元素.appendChild（换言之 其具备移动 剪切效果）
<body>
<div class="box">
<ul class="box1">
<li>龙虾</li>
<li>鲍鱼</li>
<li>青菜</li>
<li>火锅</li>
</ul>
<ul class="box2"></ul>
</div>
<script>
let list = document.querySelectorAll("li");
let box2 = document.querySelector(".box2");
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
box2.appendChild(list[index]);
});
}
</script>
</body>
③优化：左右两边点击 能够 左右移动（知识点：子元素.parentNode），通过确定点击下的li标签在哪个ul(box1/box2)里面，实现左右移动（list[index].parentNode是否box1或box2）
<script>
/*
问题
1 移动的方向不确定
在判断 点击时候 先判断 哪个ul标签的子元素的长度为 0 就移动到谁哪里
*/
let list = document.querySelectorAll("li");
let box1 = document.querySelector(".box1");
let box2 = document.querySelector(".box2");
// 准备要插入新元素的 父元素
let parent;
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
parent = this.parentNode !== box2 ? box2 : box1;
parent.appendChild(this);
});
}
</script>
四、环境参数this
1.目标：能够分析判断函数运行在不同环境中 this 所指代的对象
2.环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境 作用：弄清楚this的指向，可以让我们代码更简洁
①函数的调用方式不同，this 指代的对象也不同 ②【谁调用， this 就是谁】 是判断 this 指向的粗略规则 ③直接调用函数，其实相当于是 window.函数，所以 this 指代 window
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
let list = document.querySelectorAll("li");
for (let index = 0; index < list.length; index++) {
list[index].addEventListener("click", function () {
for (let j = 0; j < list.length; j++) {
list[j].style.backgroundColor = "#fff";
}
this.style.backgroundColor = "red";
});
}
</script>
</body>
五、统计文本框数字案例、小米搜索框案例
1.数字统计运用到知识点：元素.value.length = num
2.内容替换：元素.innerText/innerHtml
3.隐藏列表：元素.style.display='none'
4.边框样式：元素.style.borderColor = "orangered"
