APIs学习

栉甜

380人浏览 · 2026-05-17 18:43:42

栉甜 · 2026-05-17 18:43:42 发布

DOM获取元素

Web-API基本认知

const优先使用
原因：

语义化更好
不会被更改

作用和分类

作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

DOM(document Object MOdel)是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
作用：开发网页内容特效和实现用户交互

DOM树

将HTML文档以树状结构直观表现出来
描述网页内容关系的名词
作用：文档树直观体现出标签与标签之间的关系

DOM对象

DOM对象：浏览器根据html标签生成的JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签上

DOM的核心思想：把网页内容当成对象处理
document.write对象

是DOM里提供的一个对象
用来访问和操作网页内容
网页所有内容都在document内容里

拓展

console.log()：直接显示内容
console.dir():展示对象的完整结构、属性、原型链

获取DOM对象

根据CSS选择器方式获取

获取一个
获取匹配的第一个元素

document.querySelector()

获取多个

document.querySelectorAll()

得到一个伪数组：没有数组方法
如须获得里面的每个对象，需使用for循环

其他方式

操作元素内容

方式：

对象.innerText属性:不解析标签
对象.innerHTML属性:解析标签

操作元素属性

修改元素常用属性

href、title、src等
语法：对象.属性 = 值

修改元素样式属性

通过style属性操作CSS

语法：

box.style.属性 = ''

通过类名修改样式

语法：

元素.className = 'active'

注意：className是用新值换旧值，如果需要添加一个类，需要保持之前的类名

通过classList修改样式

为了解决className容易覆盖以前的类名，可以通过classList方式追加和删除类名
语法：
元素.classList.add(‘类名’)
元素.classList.remove(‘类名’)
元素.classList.toggle(‘类名’) 切换

className 和 classList的q区别：
修改大量样式的时候方便
修改不多样式的时候方便
classLiat是追加和删除不影响以前的类名

操作表单元素属性

获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加该属性，否则为移除
disabled、checked、selscted

H5自定义属性

标准属性：标签天生自带的属性，可以直接使用点语法操作
自定义属性：

在html5中堆出来了专门的data-自定义属性
在DOM对象上一律以dataset对象方式获取
一律以data-开头

定时器-间歇函数

每隔一段时间需要自动执行一段代码，无需手动触发
定时器函数有两种：间歇函数，

开启定时器：setInterval(函数，间隔时间)
关闭定时器：clearInterval(变量名)

事件监听

事件：事件是在编程时系统内发生的动作或者发生的事情
事件监听：有事件触发，则立即调用一个函数做出响应，也称绑定事件或注册事件

语法：元素对象.addEventListener(‘事件类型’,执行函数)
三要素：

事件源
事件类型
事件调用的函数

事件监听版本

在这里插入图片描述

事件类型

鼠标事件 **right.click()**自动调用点击事件

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

焦点事件

focus 获取光标
blur 失去焦点

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

文本事件

input 用户输入

事件对象

获取事件对象

语法：如何获取
在事件绑定的函数的第一个参数就是

常见事件对象属性

在这里插入图片描述

环境对象

指的是函数内部特殊的变量this，代表所处的环境
谁调用，this就是谁

回调函数

如果将函数A作为参数传递给函数B，我们称A为回调函数
如：定时器、绑定事件
使用匿名函数作为回调函数比较常见

DOM事件进阶

事件流

事件流值的是时间完整执行过程的流动路径

两个阶段：捕获阶段、冒泡阶段

事件捕获

从大到小、从外到内

事件捕获概念：从DOM的根元素开始去执行对应事件
事件捕获需要写对应代码才能看到效果
代码：

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

说明：

addEventListener第三个参数传入true代表捕获阶段触发
若传入false代表冒泡阶段触发
若使用L0监听，只有冒泡阶段

事件冒泡

从小到大、从里到外

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的

阻止冒泡

导致事件影响到父级元素
前提：拿到事件对象
语法：

事件对象.stopPropagation()

阻止流动传播

解绑事件

on事件方式，直接使用null覆盖就可以实现事件解绑
匿名函数无法被解绑
L0语法：

btn.onclick = function() {
    alert('')
}
btn.onclick = null

L2语法：

const btn = document.querySelector('button')
        function fn() {
            alert('点击了')
        }
        btn.addEventListener('click', fn)
        btn.removeEventListener('click', fn)

鼠标经过事件的区别

mouseover、mouseenter、mouseleave、mouseout

mouseover、mouseout会有事件冒泡
mouseenter、mouseleave没有

事件委托

利用事件流的特征解决一些开发需求的知识技巧
优点：减少在注册次数，提高程序性能
原理：利用事件冒泡

给父元素注册事件，当触发子元素，会冒泡到父元素
找到真正出发的元素：e.target.tagName = ‘’

阻止默认行为

如：链接跳转、表单域跳转
事件对象.preventDefault()

<body>
    <form action="">
        <input type="text" value="免费注册">
    </form>
    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
        })
    </script>
</body>

其它事件

页面加载事件

加载外部资源加载完毕时触发的事件
原因：

需要等页面资源全部处理完了做一些事情
老代码喜欢吧script写在head中，这是直接找dom元素找不到

事件名：load

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert(11)
            })
        })
    </script>
</head>

<body>
    <button>点击</button>
</body>

</html>

不仅可以监视整个页面，也可而已针对某个资源绑定
DOMContentLoaded 给document添加，运行更快

元素滚动事件

滚动条在滚动的时候持续触发
应用场景：固定导航栏、返回顶部
事件名：scroll
监听整个页面滚动：

window.addEventListener('scroll', function () {
            console.log(我滚了);

        })

获取位置
scrollLeft和scrollTop
拓展-获取html的写法 document.documentElement
scrollTo()

页面尺寸事件

会在窗口改变时触发
事件名： resize
获取元素宽高：client家族

元素尺寸与位置

尺寸

获取宽高

获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth、offsetHeight
获取出来的是数值
获取的是可视宽高、若隐藏则为0

获取位置
距离最近得有定位元素的父盒子的位置

offsetLeft、offsetTop
element.getBoundingClientRect() 返回元素的大小及其相对于视口的位置

总结

在这里插入图片描述

日期对象

用来表示时间的对象
作用：可以获得当前系统时间

实例化

使用new关键字都称为实例化

const date = new Date()
console.log(date);

时间对象方法

date.toLocalString() 直接返回时间
在这里插入图片描述

时间戳

使用场景：计算倒计时效果，无法直接计算，需要借助时间戳
定义：是指时间的毫秒数，是一种特殊的计算时间的方法
算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间

获取时间戳的三种方法

getTime()
实例化，可以返回当前时间

const date = new Date()
console.log(date.getTime());

+new Date()
无需实例化，可以返回当前时间

console.log(+new Date());

Date.now()
无需实例化，不能返回当前时间

console.log(Date.now());

节点操作

DOM节点

定义：DOM树里每一个内容都称之为节点
节点类型：

元素节点：所有的标签、html是根节点
属性节点：所有的属性
文本节点：所有的文本
其他：

查找结点

节点关系：针对的找亲戚返回的都是对象

父节点：parentNode属性最近一级的父盒子
子节点: childern属性选择最近一级的子元素
兄弟节点：
下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling属性

增加节点

一般我们新增节点，有如下操作：

创建新节点
把新节点放入指定元素内部

创建节点
方法：‘document.creatElement()’
追加节点

插入到父元素的最后一个子元素
‘父元素.appendChild(要插入的元素)’
插入到父元素中某个子元素的前面
‘父元素.insertBefore(要插入的元素，在那个元素前面)’

克隆节点

复制一个原有的节点，并放入指定元素内部
元素.cloneNode(布尔值)

布尔值为true，则会包含后代节点一起克隆
若为false，则不包含后代节点
默认为false

浅克隆：只克隆标签

删除节点

要删除节点必须通过父元素
父元素.removeChild(要删除的元素)
如果不存在父子关系则删除不成功
删除节点与隐藏节点有区别：隐藏节点仍存在，但删除节点则从html中删除

M端事件

触屏事件：touch
在这里插入图片描述

JS插件

swiper插件

BOM

Window对象

在这里插入图片描述

浏览对象模型-BOM

BoM在整个浏览器，BOM包含DOM

在这里插入图片描述

定时器-延时函数

延迟函数：setTimeout(回调函数，时间)
仅执行一次
清除延迟函数：clearTimeout()
间歇函数与延时函数区别：
延时函数执行一次
间歇函数多次执行

JS执行机制

JS的一大特点为单线程，同一时间只能做一件事，如果JS执行过程太长，回造成页面渲染不连贯，导致页面加载阻塞
为解决这一问题，JS出现同步和异步
同步：程序执行顺序与任务排列顺序一致
异步：同时执行其他人物
同步任务与异步人物
先执行执行栈中的同步任务，异步任务放入任务队列，一旦同步任务执行完毕，系统会依次读取异步任务，称为事件循环（event loop）

location对象

拆分并保存URL地址
href属性 location.href可以跳转页面
search属性获取地址中携带的参数，符号？后面部分
reload方法刷新当前页面 true强制刷新
hash属性获取地址中的啥希值，符号# 后面部分

navigator对象

记录了浏览器自身的相关信息
userAgent记录浏览器的版本以及平台

history对象

主要管理历史记录，如前进、后退、历史记录
常见属性和方法：

本地存储

本地存储介绍

数据存储在用户浏览器中
设置、读取方便，页面刷新也不会丢失数据
容量大
只能存储字符串数据类型

本地存储分类-localStorage

作用：将数据永久存储在本地，除非手动删除
语法：

存储数据：localStorage.setUtem(key,value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
修改数据：localStorage.setItem(key1,key2)

本地存储分类-sessionStorage

特征：

生命周期为关闭浏览器窗口
以键值对的方式存储
在同一个窗口下数据可以共享
用法跟localStorage基本相同

存储复杂数据类型

将复杂数据类型转换为字符串
JSON.stringify(复杂数据类型) / 深拷贝方法

<script>
        const obj = {
            uname: 'pink老师',
            age: 18,
            gender: '女'
        }
        localStorage.setItem('obj', JSON.stringify(obj))
</script>

将JSON字符串转换为对象
JSON.parse()

<script>
const str = localStorage.getItem('obj')
console.log(JSON.parse(str))
</script>

map和join方法字符串拼接方法

map方法

使用场景：遍历数组处理数据，返回新数组
语法：

const arr = ['red', 'green', 'blue']
        const newArr = arr.map(function (ele, index) {
            return ele + '颜色'
        })
        console.log(newArr)

join方法

作用：用于把数组中的所有元素转换为一个字符串
语法：

console.log(newArr.join()) //有逗号分隔
console.log(newArr.join(''))//无分隔符

正则表达式字面量：//

介绍

正则表达式用于匹配字符串中字符组合的模式，正则表达式也是对象
许多语言都具有正则表达式
应用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框可以输入中文
可以过滤掉页面内容中的敏感词，或从字符串中获取特定部分

语法

定义规则

const 变量名 = /表达式/
返回的是true/false
2. 根据规则查找

test() 方法

<script>
        const str = '我们一起学前端'
        const reg = /前端/

        console.log(reg.test(str));

    </script>

exec() 方法
返回的是一个数组，否则为null

元字符

一些具有特殊含义的字符，可以极大提高灵活性和匹配功能
如：26个英文字母 [a-z]

分类：

边界符（表示位置，开头和结尾，用什么开头，用什么结尾）
^ 以什么开头
& 以什么结尾

 console.log(/哈/.test('哈哈'))
        console.log(/^哈/.test('哈哈'))
        console.log(/^哈/.test('二哈'))
        console.log(/哈$/.test('哈哈'))
        console.log(/^哈$/.test('哈哈'))//这种为false
        console.log(/^哈$/.test('哈')) //这种情况为true

量词(表示重复次数)
*类似 >=0
+类似 >=1
? 0或1
{n} 写几就必须出现几次
{n,} >= n
{n,m} 大于等于n小于等于m
字符类(比如/d或 0~9)

[] 匹配字符集合
只能选一个

[]里加上-连字符
使用连字符-表示一个范围

console.log(/[a-z]/.test('c'))
console.log(/^[1-9][0-9]{4,}/.test('917754904'))

[]里加^取反符号

预定义：常见模式的简写方式
在这里插入图片描述

修饰符

约束正则执行的某些细节行为，如区分大小写、是否支持多行匹配

/表达式/修饰符

i忽略大小写
g匹配所有正则表达式，全局查找
replace 替换

<script>
        const str = 'java是一门编程语言，学完JAVA工资很高'
        const re = str.replace(/java/ig, '前端')
        console.log(re);

    </script>

案例展示

年会抽奖

<!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>
<style>
    .wrapper {
        width: 840px;
        height: 420px;
        background-color: pink;
        padding: 100px 250px;
        box-sizing: border-box;
    }
</style>

<body>
    <div class="wrapper">
        <strong>传智教育年会抽奖</strong>
        <h1>一等奖：<span id="one"></span></h1>
        <h3>二等奖：<span id="two"></span></h3>
        <h5>三等奖：<span id="three"></span></h5>
    </div>
    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', 'pink老师', '张学友']
        const random = Math.floor(Math.random() * personArr.length)
        const one = document.querySelector('#one')
        one.innerHTML = personArr[random]
        personArr.splice(random, 1)

        const random2 = Math.floor(Math.random() * personArr.length)
        const two = document.querySelector('#two')
        two.innerHTML = personArr[random2]
        personArr.splice(random2, 1)

        const random3 = Math.floor(Math.random() * personArr.length)
        const three = document.querySelector('#three')
        three.innerHTML = personArr[random3]

    </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>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .slider {
        width: 1000px;
        height: 450px;
        margin: 100px auto;
        border: 1px solid;
        display: flex;
        flex-direction: column;
        background-color: aquamarine;
    }

    .slider-wrapper {
        flex: 4;
    }

    img {
        width: 1000px;
        height: 363px;
    }

    .slider-footer {
        height: 80px;
        position: relative;
        padding: 20px 5px;
        box-sizing: border-box;
        line-height: 20px;
    }

    .slider-footer p {
        color: #fff;
        font-size: 20px;
    }

    ul li {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #ccc;
        margin-right: 5px;
        border-radius: 50%;
        cursor: pointer;
    }

    .active {
        width: 10px;
        height: 10px;
        background-color: #fff;
    }
</style>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="../项目3/OIP-C.webp" alt="">
        </div>
        <div class="slider-footer">
            <p>脆脆大王万岁</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script>
        const sliderData = [
            { url: '../项目3/OIP-C.webp', title: '脆脆大王万岁', color: 'pink' },
            { url: '../项目3/OIP-C(6).jpg', title: '宋亚轩天天开心', color: 'lightblue' },
            { url: '../项目3/OIP-C (1).webp', title: '时代少年团万岁', color: 'yellow' },
            { url: '../项目3/OIP-C(3).webp', title: '4399', color: 'gray' },
            { url: '../项目3/OIP-C(4).jpg', title: '碗盆大势CP', color: 'green' },
            { url: '../项目3/OIP-C(5).jpg', title: '6666666', color: 'red' }
        ]
        const img = document.querySelector('.slider-wrapper img')
        const p = document.querySelector('p')
        const li = document.querySelectorAll('li')
        let i = 0
        let n = setInterval(function () {
            i++

            //无缝衔接位置
            if (i >= sliderData.length) {
                i = 0
            }
            //
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            document.querySelector('.active').classList.remove('active')
            document.querySelector(` li:nth-child(${i + 1})`).classList.add('active')

        }, 1000)

    </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>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .slider {
        width: 1000px;
        height: 450px;
        margin: 100px auto;
        border: 1px solid;
        display: flex;
        flex-direction: column;
        background-color: aquamarine;
    }

    .slider-wrapper {
        flex: 4;
    }

    img {
        width: 1000px;
        height: 363px;
    }

    .slider-footer {
        height: 80px;
        position: relative;
        padding: 20px 5px;
        box-sizing: border-box;
        line-height: 20px;
    }

    .slider-footer p {
        color: #fff;
        font-size: 20px;
    }

    ul li {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #ccc;
        margin-right: 5px;
        border-radius: 50%;
        cursor: pointer;
    }

    .active {
        width: 10px;
        height: 10px;
        background-color: #fff;
    }

    .toggle {
        position: absolute;
        top: 20px;
        right: 5px;
    }

    button {
        color: rgba(0, 0, 0, 0.4);
        width: 40px;
        height: 30px;
    }
</style>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="../项目3/OIP-C.webp" alt="">
        </div>
        <div class="slider-footer">
            <p>脆脆大王万岁</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="left">&lt;</button>
                <button class="right">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        const sliderData = [
            { url: '../项目3/OIP-C.webp', title: '脆脆大王万岁', color: 'pink' },
            { url: '../项目3/OIP-C(6).jpg', title: '宋亚轩天天开心', color: 'lightblue' },
            { url: '../项目3/OIP-C (1).webp', title: '时代少年团万岁', color: 'yellow' },
            { url: '../项目3/OIP-C(3).webp', title: '4399', color: 'gray' },
            { url: '../项目3/OIP-C(4).jpg', title: '碗盆大势CP', color: 'green' },
            { url: '../项目3/OIP-C(5).jpg', title: '6666666', color: 'red' }
        ]
        const img = document.querySelector('.slider-wrapper img')
        const p = document.querySelector('p')
        const li = document.querySelectorAll('li')
        const right = document.querySelector('.right')
        let i = 0
        right.addEventListener('click', function () {
            i++
            if (i >= 6) {
                i = 0
            }
            toggle()
        })
        const left = document.querySelector('.left')
        left.addEventListener('click', function () {
            i--
            if (i < 0) {
                i = sliderData.length
            }
            toggle()
        })

        //复用
        function toggle() {
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            document.querySelector('.active').classList.remove('active')
            document.querySelector(`li:nth-child(${i + 1})`).classList.add('active')
        }

        //自动播放
        let n = setInterval(function () {
            right.click()
        }, 1000)

        //鼠标经过事件
        const slider = document.querySelector('.slider')
        slider.addEventListener('mouseenter', function () {
            clearInterval(n)
        })

        slider.addEventListener('mouseleave', function () {
            clearInterval(n)
            n = setInterval(function () {
                right.click()
            }, 1000)
        })
    </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>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
        color: black;
    }

    body {
        width: 1000px;
        margin: 50px auto;
    }

    h1 {
        text-align: center;
    }

    form {
        margin-bottom: 50px;
    }

    button {
        background-color: dodgerblue;
        color: #fff;
        border: none;
        font-size: 15px;
        border-radius: 3px;
        padding: 5px;
    }

    input {
        border: none;
        font-size: 15px;
    }

    select {
        width: 60px;
    }

    table {
        border-collapse: collapse;
    }

    table th,
    table td {
        width: 140px;
        height: 40px;
        border: 1px solid;
        text-align: center;
        border-collapse: collapse;

        font-size: 15px;
    }

    table th {
        background-color: lightblue;
        color: blue;
    }

    tr:hover {
        background-color: lightcyan;
    }
</style>

<body>
    <h1>新增成员</h1>
    <form action="" class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname">
        年龄：<input type="text" class="age" name="age">
        性别：<select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary">
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="西安">西安</option>
        </select>
        <button class="add">录入</button>
    </form>
    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>

        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        const uname = document.querySelector('.uname')
        const age = document.querySelector('.age')
        const gender = document.querySelector('.gender')
        const salary = document.querySelector('.salary')
        const city = document.querySelector('.city')
        const tbody = document.querySelector('tbody')
        const items = document.querySelectorAll('[name]')
        const arr = []

        const info = document.querySelector('.info')
        info.addEventListener('submit', function (e) {
            e.preventDefault()

            //进行表单验证
            for (let i = 0; i < items.length; i++) {
                if (items[i].value === '') {
                    return alert('内容不能为空')
                }
            }
            const obj = {
                stuId: arr.length + 1,
                uname: uname.value,
                age: age.value,
                gender: gender.value,
                salary: salary.value,
                city: city.value
            }
            arr.push(obj)
            this.reset()
            render()
        })

        function render() {
            tbody.innerHTML = ''
            for (let i = 0; i < arr.length; i++) {
                const tr = document.createElement('tr')
                tr.innerHTML = `
                <td>${arr[i].stuId}</td>
                <td>${arr[i].uname}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].gender}</td>
                <td>${arr[i].salary}</td>
                <td>${arr[i].city}</td>
                <td>
                    <a href="javaScript:;" data-id="${i}">删除</a>
                </td>
                `
                tbody.appendChild(tr)
            }

        }

        //删除操作
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                arr.splice(e.target.dataset.id, 1)
                render()
            }
        })


    </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>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    a {
        display: inline-block;
        width: 40px;
        text-decoration: none;
        color: #fff;
        background-color: orangered;
        border-radius: 5px;
    }

    body {
        width: 1000px;
        margin: 50px auto;
    }

    h1 {
        text-align: center;
    }

    form {
        margin-bottom: 50px;
    }

    button {
        background-color: dodgerblue;
        color: #fff;
        border: none;
        font-size: 15px;
        border-radius: 3px;
        padding: 5px;
    }

    input {
        border: none;
        font-size: 15px;
    }

    select {
        width: 60px;
    }

    table {
        border-collapse: collapse;
    }

    table th,
    table td {
        width: 140px;
        height: 40px;
        border: 1px solid;
        text-align: center;
        border-collapse: collapse;

        font-size: 15px;
    }

    table th {
        background-color: lightblue;
        color: blue;
    }

    tr:hover {
        background-color: lightcyan;
    }

    .title {
        width: 1000px;
        height: 50px;
        line-height: 50px;
        padding-right: 15px;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        background-color: #f2f2f2;
        text-align: right;
    }
</style>

<body>
    <h1>新增成员</h1>
    <form action="" class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname">
        年龄：<input type="text" class="age" name="age">
        性别：<select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary">
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="西安">西安</option>
        </select>
        <button class="add">添加</button>
    </form>
    <div class="title">
        共有数据<span></span>条
    </div>
    <h1>学生就业信息表</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>录入时间</th>
                <th>操作</th>
            </tr>

        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        const tbody = document.querySelector('tbody')
        const span = document.querySelector('.title span')
        const initData = [
            {
                stuId: 1,
                uname: '迪丽热巴',
                age: 22,
                gender: '女',
                salary: '12000',
                city: '北京',
                time: '2099/9/9 08:08:08'
            }
        ]
        //localStorage.setItem('data', JSON.stringify(initData))

        const arr = JSON.parse(localStorage.getItem('data')) || []
        console.log(arr);

        function render() {
            const trArr = arr.map(function (ele, index) {
                return `
            <tr>
                <td>${ele.stuId}</td>
                <td>${ele.uname}</td>
                <td>${ele.age}</td>
                <td>${ele.gender}</td>
                <td>${ele.salary}</td>
                <td>${ele.city}</td>
                <td>${ele.time}</td>
                <td><a href="" data-id="${index}">删除</a></td>
            </tr>
            `
            })
            console.log(trArr)
            tbody.innerHTML = trArr.join('')
            span.innerHTML = arr.length
        }
        render()
        const add = document.querySelector('.add')
        const info = document.querySelector('.info')
        const uname = document.querySelector('.uname')
        const age = document.querySelector('.age')
        const salary = document.querySelector('.salary')
        const gender = document.querySelector('.gender')
        const city = document.querySelector('.city')

        add.addEventListener('click', function (e) {
            e.preventDefault()
            if (!uname.value || !age.value || !salary.value) {
                return alert('内容不能为空！')
            }
            arr.push(
                {
                    stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
                    uname: uname.value,
                    age: age.value,
                    gender: gender.value,
                    salary: salary.value,
                    city: city.value,
                    time: new Date().toLocaleString()
                }
            )
            render()
            info.reset()


            localStorage.setItem('data', JSON.stringify(arr))
        })

        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                if (confirm('你确定要删除吗')) {
                    arr.splice(e.target.dataset.id, 1)
                    render()
                    localStorage.setItem('data', JSON.stringify(arr))
                }

            }
        })
    </script>

</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>
<style>
    span {
        display: inline-block;
        width: 250px;
        height: 30px;
        vertical-align: middle;
        line-height: 30px;
        padding-left: 15px;
    }

    .error {
        color: red;
    }

    .right {
        color: green;
    }
</style>

<body>
    <input type="text">
    <span></span>
    <script>
        const reg = /^[a-zA-Z0-9-_]{6,16}/
        const input = document.querySelector('input')
        input.addEventListener('blur', function () {
            if (reg.test(this.value)) {
                document.querySelector('span').innerHTML = '输入正确'
                document.querySelector('span').classList.add('right')
            } else {
                document.querySelector('span').innerHTML = '请重新输入'
                document.querySelector('span').classList.add('error')
            }
        })
    </script>
</body>

</html>

只展示了几个综合案例，由于案例过多，就不一一展示
在这里插入图片描述

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

Megatron Core 并行训练主线：不看代码版

Megatron Core 的代码里同时交织着模型结构、并行切分、通信调度、优化器状态和低精度后端。本文按训练主线梳理这些模块各自解决的问题，以及它们如何接到同一条 GPT 训练流程上。

AtomGit开源社区

操作简便吗？8款AI写作辅助软件梯队榜，毕业论文轻松搞定！

AtomGit开源社区

3.RAG

RAG(Retrieval-Augmented Generation，检索增强生成)是一种将信息检索与文本生成相结合的技术框架。它通过以下流程解决大模型(LLM)的“知识盲区”问题:用户问题->从知识库检索相关文档->将文档作为上下文输入LLM->生成精准答案。

AtomGit开源社区

所有评论(0)

查看更多评论

栉甜

@2501_93804161

已为社区贡献1条内容

APIs学习

栉甜

DOM获取元素

Web-API基本认知

作用和分类

什么是DOM

DOM树

DOM对象

拓展

获取DOM对象

操作元素内容

操作元素属性

修改元素常用属性

修改元素样式属性

操作表单元素属性

H5自定义属性

定时器-间歇函数

事件监听

事件监听版本

事件类型

事件对象

获取事件对象

常见事件对象属性

环境对象

回调函数

DOM事件进阶

事件流

事件捕获

事件冒泡

阻止冒泡

解绑事件

鼠标经过事件的区别

事件委托

阻止默认行为

其它事件

页面加载事件

元素滚动事件

页面尺寸事件

元素尺寸与位置

尺寸

总结

日期对象

实例化

时间对象方法

时间戳

获取时间戳的三种方法

节点操作

DOM节点

查找结点

增加节点

删除节点

M端事件

JS插件

BOM

Window对象

浏览对象模型-BOM

定时器-延时函数

JS执行机制

location对象

navigator对象

history对象

本地存储

本地存储介绍

本地存储分类-localStorage

本地存储分类-sessionStorage

存储复杂数据类型

map和join方法 字符串拼接方法

map方法

join方法

正则表达式 字面量：//

介绍

语法

元字符

修饰符

案例展示

年会抽奖

定时器版轮播图

完整版轮播图

学生信息案例

学生就业统计表案例

map和join方法字符串拼接方法

正则表达式字面量：//