☕导航小助手☕
🍚写在前面
🍰🍰2.1 获取元素
🍣🍣2.2 事件
🥩🥩3.1 新增节点
🍛🍛3.2 删除节点
🧀🧀4.2 留言墙
写在前面
在上一篇博客中，我们已经学习了关于 JS 的基本用法，在这一篇博客中，我们将会学习关于 WebAPI 方面的内容 ~
WebAPI 是浏览器给 JS 提供的一些 API，可以通过这些 API 来操作页面内容，或者操作浏览器窗口 ~
当然，由于 WebAPI 的体系也是过于庞大，本篇博客介绍的内容 也是相对较基础的内容，但也足够现阶段的学习了 ~
至于更多的关于这方面的内容，可以自己去查一查相关的资料，开阔自己的眼界 ~
那么现在，正文开始 ......
一、前置知识
1.1 什么是WebAPI
其实，在学习 JS 的时候，会分为 三个部分：
- 核心语法
- DOM API
- BOM API
其中，我们把 DOM、BOM两个部分统称为 WebAPI，即是浏览器提供的 API ~
单单学习语法部分，可以实现的程序是有限的；但是搭配上 API，可以做的事情就多多了 ~
1.2 什么是API
所谓的 API 就是一些现成的函数/对象，拿来给程序员用，用以方便开发 ~
就相当于是一个工具箱，里面有许多已经封装好的工具 ~
API 的种类是非常多的，这么多的 API 不可能全部都记住，所以需要学会使用 MDN文档来进行查询 ~
下面就附上 MDN文档链接：
WebAPI接口 MDN参考文档
https://developer.mozilla.org/zh-CN/docs/Web/API
当然，还是需要去熟悉一些常用的 API ~
二、与 元素 相关的操作
2.1 获取元素
一个页面上，有很多 HTML标签，每个 标签(tag) 也称为是一个 元素(element)，获取元素 就是：把页面上指定的元素 得到，得到了这个元素 才可以进行获取操作 ~
这就类似于 之前的博客中，介绍数据库的时候，要想去操作数据库，首先需要 use 数据库名; 这样才可以进行后续操作 ~
在 JS 中获取元素有很多种方式，此处 只介绍一种最强大、最通用的方式 —— querySelector ~
<!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>
<h1 class="abc">这是一个标题</h1>
<script>
//可以使用 querySelector 来选中上述的 h1元素对应的对象
//querySelector 是 document 的方法,document 是一个页面内置的全局对象(由浏览器提供出来的)
//只要页面加载成功，显示出来了，此时 document对象 就有了
//querySelector() 方法的参数就是 CSS选择器
let elem = document.querySelector('h1');
//执行到这一步的时候，就说明 elem变量 就对应着上述的 h1标签
//进一步的就可以通过 elem变量 获取到 h1标签 里面的信息(也可以进行修改了)
</script>
</body>
</html>如果有多个h1标签，那就需要看自身的需求是什么：
需求是只选择一个h1标签，可以使用其他的选择器,以保证选择的唯一性；
需求是选中所有的h1标签，可以使用 querySelectorAll方法，得到的结果就是一个 "数组"，这个 "数组" 里面包含了多个对象 ~
querySelector 和 querySelectorAll 方法 是属于 新版本HTML 支持的，针对一些比较老的浏览器，可能是无法使用的 ~
2.2 事件
事件，是用来实现和用户之间交互的关键操作 ~
用户针对浏览器页面的每个动作，都可以视为 "事件"（比如：鼠标移动、鼠标点击、鼠标单击、鼠标拖动、鼠标按键、浏览器窗口改变、浏览器位置改变 ......）~
事件什么时候发生并不确定，取决于用户的具体行为 ~
当某个事件发生，浏览器就能观察到这个事件，观察到这个事件之后，浏览器就可以决定 是忽略 还是触发一个对应的程序(代码) 来处理这个事件 ~
事件的三个要素：
- 事件源（哪个事件触发的事件）
- 时间类型（事件具体是啥：点击、选择、拖拽 ......）
- 事件处理程序（事件出现之后要执行哪个代码）
示例1：
演示1：
示例2：
演示2：
2.3 获取/修改 元素内容
我们可以通过 innerHTML属性 获取或者修改 元素的内容 ~
示例1：
演示1：
示例2：
演示2：
计数器：
示例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>
.screen {
width:200px;
height:100px;
margin:0 auto;
background-color: grey;
color: white;
font-size: 30px;
line-height: 100px;
text-align: center;
border-radius: 10px;
}
.add-btn {
margin: 10px auto;
width: 150px;
height: 80px;
font-size: 30px;
line-height: 66px;
display: block;
}
</style>
</head>
<body>
<div class="screen">0</div>
<button class = "add-btn"> + </button>
<script>
let screen = document.querySelector('.screen');
let addBtn = document.querySelector('.add-btn');
addBtn.onclick = function() {
//1.拿到 screen 里面的数值
let number = screen.innerHTML;
//2.对其进行 +1 操作(由于 InnerHTML 拿到的结果是 string类型，要想进行算术运算，需要把 string => number)
number = parseInt(number);
number += 1;
screen.innerHTML = number;
}
</script>
</body>
</html>演示3：
2.4 获取/修改 元素属性
点击图片切换：
示例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>
</head>
<body>
<img src="image/male.png">
<script>
let img = document.querySelector('img');
img.onclick = function() {
if (img.src.indexOf('female.png') >= 0) {
//此处的 indexOf 和 Java 中 String 的 indexOf 是一样的,查询字符串子串;
//返回值是一个下标，如果找到的话 返回子串的下标，如果没有找到 返回值是 -1
img.src = 'image/male.png';
} else if (img.src.indexOf('male.png') >= 0) {
img.src = 'image/female.png';
}
}
</script>
</body>
</html>演示：
注意：
不仅仅是 src属性 这样，其他的各种属性，都是可以在 JS 中通过 对象.属性名 的方式来操作的 ~
通过这种方法，就可以随心所欲的 获取 / 修改 到 自己所希望的属性了 ~
一个 HTML元素 的属性有很多，不同的元素 可能还有不同的属性，我们可以直接把对象给打印出来，就可以看到这些属性了（console.log 或者 console.dir）~
显示 / 隐藏 密码：
input标签，有密码框，显示的是实心圆点；也有 文本框，显示的是原文 ~
我们可以使用一个按钮，来进行来回切换 ~
示例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>
</head>
<body>
<input type="password">
<button>显示密码</button>
<script>
let input = document.querySelector('input');
let button = document.querySelector('button');
button.onclick = function() {
if(input.type == 'text') {
input.type = 'password';
button.innerHTML = '显示密码';
}else if(input.type = 'password') {
input.type = 'text';
button.innerHTML = '隐藏密码';
}
}
</script>
</body>
</html>演示2：
2.5 获取/修改 样式属性
获取/修改样式属性 有两种方式：
- 行内样式操作
- 类名样式操作
行内样式操作：相当于给元素加了 内联样式（style属性 来表示的样式）
示例：
演示：
类名样式操作：直接指定某个元素 应用上某个 CS类名
实现 夜间/日间模式切换 的效果：
日间模式：文字是深色，背景是浅色的（如：画图板）
夜间模式：文字是浅色，背景是深色的（如：VsCode）
<!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>
/* 日间模式 */
.light {
color: balck;
background-color: white;
}
/* 夜间模式 */
.dark {
color: white;
background-color: black;
}
</style>
</head>
<body>
<!-- 实现 夜间/日间模式切换 的效果 -->
<div class = 'light'>
这是一段话:Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti natus voluptatibus eaque dignissimos provident explicabo laborum veritatis doloremque, facere reprehenderit hic voluptate reiciendis dolore distinctio ducimus, perspiciatis expedita suscipit!
</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
if(div.className == 'light') {
div.className='dark';
}else{
div.className='light';
}
}
</script>
</body>
</html>演示：
三、操作节点
上面所介绍的，是操作一个元素里面的东西 ~
接下来所要介绍的，是针对页面上的元素进行 增加、删除 ~
3.1 新增节点
新增节点，需要进行两个步骤：
- 将元素创建出来
- 把元素加入到 DOM树 上
创建元素：使用 createElement(标签名);
演示：
把元素放到 DOM树 上：
方法有很多，这里介绍一个简单粗暴的办法：先确定要把新元素放到哪个父元素下，接下来根据父节点 使用 appendChild方法（插入到某个元素的后面） 即可 ~
示例1：
演示1：
示例2：
演示2：
3.2 删除节点
删除节点也有两个步骤：
- 先确定要删除的父节点
- 然后再确定要删除的节点
可以使用 removeChild(标签名); 来删除节点 ~
比如说，想要有一个按钮，按一下就可以删除刚刚创建的新的元素：
<!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>
<div class="container">
<div>这是之前的 div</div>
<button>删除新 div</button>
</div>
<script>
//创建一个新的 div标签,并且设置一些 div 的相关属性
let div = document.createElement('div');
div.innerHTML = '这是新创建的 div';
div.id='one';
div.className='one-div';
div.style.fontSize='100px';
//放到 container 下面
//1.获取到 container对象
let container = document.querySelector('.container');
//2.使用 appendChild方法
container.appendChild(div);
//删除节点
let button = document.querySelector('button');
button.onclick = function() {
container.removeChild(div);
}
</script>
</body>
</html>
演示：
四、综合案例
4.1 猜数字游戏
目标样式：
示例：
<!DOCTYPE html>
<html lang="ch">
<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>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: aliceblue;
}
h3 {
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
color: blueviolet;
margin: 10px 0;
}
.guessdiv {
width: 100%;
height: 30px;
text-align: center;
display: flex;
justify-content: center;
}
.guessdiv #b1{
height: 20px;
width: 20%;
background-color: rgb(100,200,255);
color: aliceblue;
border: 0cm;
border-radius: 5px;
}
.guessdiv #b1:active{
background-color: gray;
}
.guessdiv #guess{
width: 50%;
height: 20px;
border: 1px solid rgb(100,200,255);
border-radius: 5px;
text-indent: 0.6em;
outline: none;
}
.guessdiv #number{
width: 30%;
text-align: right;
}
.guessdiv #in {
width: 70%;
margin-left: 2%;
text-align: left;
}
.cnt, .ret{
width: 100%;
height: 30px;
text-align: center;
}
.rev{
width: 100%;
height: 20px;
text-align: center;
}
.rev #b2{
margin: 4px;
height: 20px;
width: 100px;
background-color: rgb(100,200,100);
color: aliceblue;
border: 0cm;
border-radius: 5px;
}
.rev #b2:active{
background-color: gray;
}
.ret, .cnt{
width: 100%;
height: 30px;
display: flex;
justify-content:center;
}
.guessdiv #messr, .guessdiv #messc {
width: 30%;
text-align: right;
}
.guessdiv #result, .guessdiv #count{
width: 70%;
text-align: left;
margin-left: 5%;
}
</style>
<h3>猜数字游戏</h3>
<div class="guessdiv">
<span id="number">要猜的数字:</span>
<span id="in">
<input id="guess" type="text" value placeholder="请猜1-100之间的数字,否则你永远猜不对!">
<button id="b1">我就要猜它</button>
</span>
</div>
<div class="guessdiv">
<span id="messr">结果:</span>
<span id="result">你还没有猜哦！</span>
</div>
<div class="guessdiv">
<span id="messc">次数:</span>
<span id="count">0</span>
</div>
<div class="rev">
<button id="b2">
开始/重新开始猜数字
</button>
</div>
<script>
//获取元素
let input = document.querySelector("#guess");
let ret = document.querySelector("#result");
let cnt = document.querySelector("#count");
let guessBtn = document.querySelector("#b1");
let flash = document.querySelector("#b2");
//1.生成随机数字
//JS 中可以使用 Math.random() 生成随机数,得到的随机数的取值范围是 [0,1)
//这里需要生成的是 [0,100],可以用数学方法得到：先乘100,再加上1,还需要向下取整(Math.floor()方法)
let ansNumber = Math.floor(Math.random() * 100) + 1;
console.log(ansNumber);
// //2.针对按钮的点击操作进行处理
guessBtn.onclick = function(){
//输入框没有值，表示用户没有输入，不处理
if(input.value == '') {
return;
}
//3.拿到输入框中的值，然后和 ansNumber 进行比较
//针对输入框，使用 value属性 来获取到输入框中的内容,并且需要把这个拿到的字符串类型的内容 转化成整数类型的
let guessNumber = parseInt(input.value);
if (guessNumber > ansNumber) {
ret.innerHTML = "YO!猜大了！";
ret.style.color = "red";
} else if (guessNumber < ansNumber) {
ret.innerHTML = "YO!猜小了！";
ret.style.color = "red";
} else {
ret.innerHTML = "Bingo!猜对了！";
ret.style.color = "green";
}
if (ret.innerHTML != "Bingo!猜对了！") {
let guessCount = parseInt(cnt.innerHTML) + 1;
cnt.innerHTML = guessCount;
}
}
//点击flash按钮刷新页面，重置游戏
flash.onclick = function() {
location.reload();
}
</script>
</body>
</html>
演示：
4.2 留言墙
目标样式：
示例：
<!DOCTYPE html>
<html lang="ch">
<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>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: aliceblue;
}
.container {
width: 100%;
}
h3 {
text-align: center;
padding: 30px 0;
font-size: 24px;
color: rgb(255, 140,160);
}
p {
text-align: center;
color: gray;
padding: 5px 0;
}
.row {
width: 400px;
height: 50px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.row span{
width: 100px;
height: 40px;
text-align:center;
padding-right: 0px;
font-size: 24px;
color: rgb(255, 140,160);
}
.row input{
width: 300px;
height: 40px;
border: 2px solid rgb(255, 140,160);
border-radius: 5px;
outline: 0;
text-align: left;
padding-left: 0px;
margin-left: 0px;
text-indent: 0.4em;
font-size: 20px;
color: rgb(100,160,255);
}
.row #submit{
width: 200px;
height: 40px;
border-radius: 10px;
font-size: 24px;
border: 0px solid rgb(255, 140, 160);
background-color: rgb(255, 140, 160);
color: aliceblue;
line-height: 40px;
margin-top: 8px;
}
.row #submit:active{
background-color: rgb(140,180,255);
}
.oh {
width: 100%;
height: 30px;
margin-top: 8px;
font-size: 16px;
color: rgb(180,140,220);
text-align: center;
line-height: 30px;
}
</style>
<div class="container">
<h3>温馨版留言墙</h3>
<p>输入后点击提交, 会将信息显示在留言按钮下方</p>
<p>这真真真的是一个留言墙</p>
<P>-------------------------------------------------------------</P>
<div class="row">
<span>是哪个：</span>
<input type="text" value placeholder="同学A">
</div>
<div class="row">
<span>向哪个：</span>
<input type="text" value placeholder="同学B">
</div>
<div class="row">
<span>留言：</span>
<input type="text" value placeholder="想说的话">
</div>
<div class="row">
<button id="submit">留言</button>
</div>
</div>
<script>
//获取元素
let loveBtn = document.querySelector("#submit");
let adv = [" 深情地 ", " 温柔地 ", " 高兴地 ", " 眼神中充满光地 ", " 幽默地 ", " 滑稽地 ", " 开心地 "];
//用户点击留言将留言记录显示在留言按钮下面
let record = [];
let i = 0;
loveBtn.onclick = function() {
//1.获取留言内容
let inputs = document.querySelectorAll("input");
let from = inputs[0].value;
let to = inputs[1].value;
let message = inputs[2].value;
//2.如果有一项内天为空，不处理
if (from == '' || to == '' || message == '') {
return;
}
//3.汇总留言语言
let n = adv.length;
let index = (Math.floor(Math.random() * 1000) + 1) % n;
let romAdv = adv[index];
let loveMess = "\"" + from + "\"" + romAdv + " 对 " + "\"" + to + "\"" + " 说 " + ":\"" + message + "\"" + "!";
record[i] = "留言" + (i+1) + ":" + loveMess;
//4.新建结点，插入留言记录
let div = document.createElement("div");
div.innerHTML = record[i];
div.className = 'oh';
let container = document.querySelector(".container");
container.appendChild(div);
i++;
//5.留言完，清空输入框
for (let i = 0; i < inputs.length; i++) {
inputs[i].value = '';
}
}
</script>
</body>
</html>
演示：
好了，关于 WebAPI 的知识点就介绍到这里了 ~
怎么样，是不是很简单 ~
如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
