当前位置：首页 > news >正文

web APIs

news 2025/11/10 17:48:44

Web APIs第一天
- Dom获取&属性操作
- - Web API基本认知
  - - 变量声明
    - 作用和分类
    - 什么是DOM
    - DOM树
    - DOM对象
  - 获取Dom对象
  - - 根据CSS选择器来获取DOM元素（重点）
    - 其他获取DOM元素方法（了解）
  - 操作元素内容
  - - 对象.innerText 属性
    - 对象.innerHTML 属性
    - 年会抽奖案例
  - 操作元素属性
  - - 操作元素常用属性
    - 操作元素样式属性
    - 操作表单元素属性
    - 自定义属性
  - 定时器-间歇函数
  - - 定时器函数介绍
    - 定时器函数基本使用
  - 综合案例

Web APIs第一天

Dom获取&属性操作

Web API基本认知

变量声明

变量声明有三个 var let 和 const

建议： const 优先，尽量使用const，原因是：

const 语义化更好
很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
实际开发中也是，比如react框架，基本const

⭐️有了变量先给const，如果发现它后面是要被修改的，再改为let

以下可以把let改成const：

    let arr = ['red','green']arr.push('pink')console.log(arr)

    let person = {uname:'pink老师',age:18,gender:'女'}person.address = '武汉黑马'console.log(person)

const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型，const声明的变量，里面存的不是值，不是值，不是值，是地址。

const arr = [1,2,3]

在这里插入图片描述

🐱

// 错误，他们地址不一样const names = []names = [1,2,3]const obj = {}obj = {uname:'pink老师'}

// 正确const names = []names = [1,2,3]const obj = {}obj = {uname:'pink老师'}

作用和分类

作用: 就是使用 JS 去操作 html 和浏览器

API分类：DOM (文档对象模型)、BOM（浏览器对象模型）

在这里插入图片描述

什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用：开发网页内容特效和实现用户交互

DOM树

DOM树是什么

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

在这里插入图片描述

DOM对象

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

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

DOM的核心思想

把网页内容当做对象来处理

document 对象

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的，例：document.write()
网页所有内容都在document里面

<body><div>123</div><script>const div = document.querySelector('div')// 打印对象console.dir(div) // dom 对象</script>
</body>

获取Dom对象

根据CSS选择器来获取DOM元素（重点）

⭐️1.选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。

如果没有匹配到，则返回null。

<body><div>123</div><div>abc</div><script>// 获取第一个匹配元素const box = document.querySelector('div')console.log(box)</script>
</body>

<body><p id="nav">导航栏</p><script>const nav = document.querySelector('#nav')console.log(nav)</script>
</body>

<body><ul><li>测试1</li><li>测试2</li><li>测试3</li></ul></script> --><script>const li = document.querySelector('ul li:first-child')console.log(li)</script>
</body>

⭐️2.选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数:

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的NodeList 对象集合

例如：

document.querySelectorAll('ul li')

🐱

得到的是一个伪数组：

有长度有索引号的数组
但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（for）的方式获得。

⭕️哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

其他获取DOM元素方法（了解）

// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素获取页所有div
document.getElementsByTagName('div')
// 根据类名获取元素获取页面所有类名为w的
document.getElementsByclassName('w')

操作元素内容

对象.innerText 属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

	const info = ducument.querySelect('.info')// 获取标签内部文字// console.log(info.innerText)// 添加/修改标签内部文字内容info.innerText = '你好，我是刘德华'

对象.innerHTML 属性

将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符

	const info = ducument.querySelect('.info')// 获取标签内部文字// console.log(info.innerHTML)// 添加/修改标签内部文字内容info.innerHTML = `你好，我是<strong>刘德华</strong>`

年会抽奖案例

在这里插入图片描述

<!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;}</style>
</head><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 random1 = Math.floor(Math.random() * personArr.length)const one = document.querySelector('#one')one.innerHTML = personArr[random1]personArr.splice(random1, 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]personArr.splice(random3, 1)</script>
</body></html>

在这里插入图片描述

操作元素属性

操作元素常用属性

可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片
最常见的属性比如： href、title、src 等

⭐️语法：

对象.属性 = 值

🌰举例说明：

    // 1.获取元素const img = document.querySelector('img')// 2.修改元素img.src = './images/2.webp'img.title = '刘德华'

操作元素样式属性

可以通过 JS 设置/修改标签元素的样式属性。

比如通过轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等

⭐️1.通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

🌰举例说明：

    const box = document.querySelector('.box')// 修改元素样式box.style.width = '200px'box.style.marginTop = '15px' // margin-topbox.style.backgroundColor = 'pink' // background-color

⭕️

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

☁️练习：页面刷新，页面随机更换背景图片

<!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>body {background: url(./images/desktop_1.jpg) no-repeat top center/cover;}</style>
</head><body><script>function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}const random = getRandom(1, 10)document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`</script>
</body></html>

在这里插入图片描述

⭐️2.操作类名(className) 操作CSS

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：

// active 是一个css类名
元素.className = 'active'

⭕️

由于class是关键字, 所以使用className去代替
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>div {width: 200px;height: 200px;background-color: pink;}.box {width: 300px;height: 300px;background-color: skyblue;margin: 100px auto;padding: 10px;border: black}</style>
</head><body><div></div><script>// 1.获取元素const div = document.querySelector('div')// 2.添加类名 class 是个关键字 我们用classNamediv.className = 'box'</script>
</body></html>

⭐️3.通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

🌰例子：

<!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: 200px;height: 200px;}.ative {color: red;background-color: pink;}</style>
</head><body><div class='box'>文字</div><script>// 1.获取元素const box = document.querySelector('.box')// 2.修改样式// 2.1 追加类 add() 类名不加点，并且是字符串box.classList.add('ative')// 2.2 删除类 remove() 类名不加点，并且是字符串box.classList.remove('box')// 2.3 切换类 toggle() 有就删掉，没有就加上box.classList.toggle('active')</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><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]// 1.需要一个随机数const random = parseInt(Math.random() * sliderData.length)// console.log(sliderData[random])// 2.把对应的数据渲染到标签里面// 2.1 获取图片const img = document.querySelector('.slider-wrapper img')// 2.2 修改图片路径 = 对象.urlimg.src = sliderData[random].url// 3. 把p里面的文字内容更换// 3.1 获取pconst p = document.querySelector('.slider-footer p')// 3.2 修改pp.innerHTML = sliderData[random].title// 4.修改背景颜色const sf = document.querySelector('.slider-footer')sf.style.backgroundColor = sliderData[random].color// 5.小圆点const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)li.classList.add('active')</script>
</body></html>

在这里插入图片描述

操作表单元素属性

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性
比如： disabled、checked、selected

<body><input type="checkbox"><button>60秒后再次获取验证码</button><script>// checkedconst ipt = document.querySelector('input')ipt.checked = true// ipt.checked = 'true' // 会选中，不提倡 有隐式转换// disabledconst button = document.querySelector('button')// console.log(button.disabled) // 默认false 不禁用button.disabled = true</script>
</body>

在这里插入图片描述

自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、

selected

自定义属性：

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

<body><div class="box" data-id="10">盒子</div><script>const box = document.querySelector('.box')console.log(box.dataset.id)</script>
</body>

定时器-间歇函数

定时器函数介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数有两种，其中一种是间歇函数

定时器函数基本使用

定时器函数可以开启和关闭定时器

⭐️1. 开启定时器

setInterval(函数,间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒

🌰举例说明：

    // setInterval(函数名,间隔时间)setInterval(function () {console.log('一秒钟执行一次')}, 1000)function fn() {console.log('一秒执行一次')}setInterval(fn, 1000)

⭕️

函数名字不需要加括号
定时器返回的是一个id数字

⭐️2. 关闭定时器

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

🌰

    let timer = setInterval(function () {console.log('一秒钟执行一次')}, 1000)clearInterval(timer)

一般不会刚创建就停止，而是满足一定条件再停止

☁️案例：阅读注册协议

在这里插入图片描述

<!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><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>// 1.获取元素const btn = document.querySelector('.btn')// 2.开启定时器let i = 5let n = setInterval(function () {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {clearInterval(n) // 3.关闭定时器btn.disabled = falsebtn.innerHTML = '同意'}}, 1000)</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><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" 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><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]// 1.获取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const sf = document.querySelector('.slider-footer')let i = 0// 2.开启定时器setInterval(function () {i++img.src = sliderData[i].url // 更改图片路径p.innerHTML = sliderData[i].title // 把字写到p里sf.style.backgroundColor = sliderData[i].color // 更改背景颜色// 小圆点// 先删除以前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')// 只让当前的li添加activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')if (i >= sliderData.length - 1) {i = -1}}, 1000)</script>
</body></html>

在这里插入图片描述

web APIs

目录 Web APIs第一天Dom获取&属性操作Web API基本认知变量声明作用和分类什么是DOMDOM树DOM对象获取Dom对象根据CSS选择器来获取DOM元素（重点）其他获取DOM元素方法（了解） 操作元素内容对象.innerText 属性对象.innerHTML 属性…...

编程日记 2024/10/21 11:04:57

【Web前端概述】

HTML 是用来描述网页的一种语言，全称是 Hyper-Text Markup Language，即超文本标记语言。我们浏览网页时看到的文字、按钮、图片、视频等元素，它们都是通过 HTML 书写并通过浏览器来呈现的。一、HTML简史 1991年10月：一个非正式…...

编程日记 2024/10/21 11:03:56

文献阅读：一种基于艾伦脑图谱的空间表达数据可视化、空间异质性描绘和单细胞配准工具

::: block-1 文献介绍文献题目： AllenDigger，一种基于艾伦脑图谱的空间表达数据可视化、空间异质性描绘和单细胞配准的工具研究团队： 王晓群（北京师范大学） 发表时间： 2023-03-16 发表期刊&#xff1a…...

编程日记 2024/10/21 11:02:54

Redis学习笔记（三）--Redis客户端

文章目录一、命令行客户端二、图形界面客户端1、Redis Desktop Manager2、RedisPlus 三、java代码客户端本文参考： Redis学习汇总（已完结） Redis超详细入门教程（基础篇） Redis视频从入门到高级，redis视频…...

编程日记 2024/10/21 11:01:53

面试知识梳理

一、vue篇章 1.vue2和vue3性能方面的提升最主要的原因是什么？ 1、1响应式的系统优化： vue3使用了es6的proxy对象来实现响应式系统，取代了vue2中基于Object.defineProperty的方法。Proxy提供了更强大和灵活的拦截能力，可以更有效地…...

编程日记 2024/10/21 10:59:51

Unity3D ScrollView 滚动视图组件详解及代码实现

前言在Unity3D中，ScrollView（滚动视图）是一种常用的UI组件，它允许用户通过滚动来查看超出当前视图范围的内容。ScrollView通常用于显示长列表、大量文本或图像等。本文将详细介绍Unity3D中的ScrollView组件，并提供代…...

编程日记 2024/10/21 10:58:50

13.java面向对象：封装

java面向对象：封装我们程序设计要追求“高内聚，低耦合”。高内聚就是类的内部数据操作细节自己完成，不允许外部干涉；低耦合：仅暴露少量的方法给外部使用。封装(数据的隐藏）通常应禁止直接访问一个对象中…...

编程日记 2024/10/21 10:57:48

记录：网鼎杯2024赛前热身CRYPT01密码学

题目下载并打开附件判断为凯撒密码，尝试移位解密在第10位发现flag字样提交得分解密脚本为个人自用，因比赛未结束故不开源...

编程日记 2024/10/21 10:55:47

GitHub加速终端命令行支持终端命令行 git clone , wget , curl 等工具下载. 支持 raw.githubusercontent.com , gist.github.com , gist.githubusercontent.com 文件下载.注意：不支持 SSH Key 方式 git clone 下载. git clone git clone https://ghp.ci/https:…...

编程日记 2024/10/21 10:54:46

每天学习一个Linux命令：xrandr

xrandr 是一个用于在 X Window 系统中管理显示器的命令行工具。它可以用来设置显示器的分辨率、刷新率、旋转方向和连接状态等。下面是 xrandr 的详细用法和案例。基本用法 xrandr [选项]常用选项 -q 或 --query: 查询当前显示器的状态。-s 或 --size: 设置显示器的分辨率。…...

编程日记 2024/10/21 10:53:44

路由表来源（基于华为模拟器eNSP）

概叙在交换网络中，若要实现不同网段之间的通信，需要依靠三层设备（路由器、三层交换机等），而路由器只知道其直连网段的路由条目，对于非直连的网段，在默认情况下，路由器是不可达的&a…...

编程日记 2024/10/21 10:52:43

并查集（Union-Find）

并查集（Disjoint Set，也称为Union-Find数据结构）是一种用于高效处理不相交集（即集合内元素互相独立，没有交集）的数据结构。它主要用于解决以下两种操作： 查找（Find）&…...

编程日记 2024/10/21 10:51:42

Linux上的AI框架都有哪些?哪些AI框架适合驱动EACO地球链自动发展完善？

Linux上的AI框架种类繁多，涵盖了深度学习、机器学习、自然语言处理等多个领域。以下是一些常用的AI框架： 深度学习框架 Deeplearning4j 简介：Deeplearning4j（Deep Learning For Java）是Java和Scala环境下的一个开源分…...

编程日记 2024/10/21 10:50:40

java的第一个游戏界面

看视频02_大鱼吃小鱼_添加背景图_尚学堂_哔哩哔哩_bilibili 学习方法： 就对的视频小代码，书籍没有，遇到不懂的问ai 今日成果， 界面代码 package new_gameobj;import java.awt.Graphics; import java.awt.Image; import java.…...

编程日记 2024/10/21 10:49:39

【AIGC】ChatGPT提示词Prompt高效编写模式：Self-ask Prompt、ReACT与Reflexion

博客主页： [小ᶻZ࿆] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯自我提问 (Self-ask Prompt)如何工作应用实例优势结论 💯协同思考和动作 (ReACT)如何工作应用实例优势结论 💯失败后自我反思 (Reflexion)如何工作…...

编程日记 2024/10/21 10:48:37

android studio无法下载依赖包问题

新建Flutter项目Android项目后，点击运行出现报错！ error.png 这是镜像站点无法访问造成的！只需要修改为国内可访问的站点即可。第一步:修改项目Android目录下的build.gradle buildscript { ext.kotlin_version 1.3.50 repositorie…...

编程日记 2024/10/21 10:47:36

SQL入门

一、SQL 语言概述数据库就是指数据存储的库，作用就是组织数据并存储数据，数据库如按照：库 -> 表 -> 数据三个层级进行数据组织，而 SQL 语言，就是一种对数据库、数据进行操作、管理、查询的工具，通过…...

编程日记 2024/10/21 10:46:35

Java中的Math类

关于Math类的介绍，这是一个在Java和其他许多编程语言中常见的内置库或模块，主要用于提供各种数学运算的方法。在Java中，Math类位于java.lang包下，它包含大量静态方法执行基本的数学函数，如三角函数、指数函数、对数函数…...

编程日记 2024/10/21 10:45:34

大厂常问iOS面试题–Runloop篇

大厂常问iOS面试题–Runloop篇一.RunLoop概念 RunLoop顾名思义就是可以一直循环(loop)运行(run)的机制。这种机制通常称为“消息循环机制” NSRunLoop和CFRunLoopRef就是实现“消息循环机制”的对象。其实NSRunLoop本质是由CFRunLoopRef封装的，提供了面向对象的AP…...

编程日记 2024/10/21 10:44:33

【解决】mac报错“zsh: command not found: nvm”

问题描述： 安装nodejs时要先安装nvm,按照网上教程安装之后出现以下异常情况： 1.终端运行npm -v能查到版本，idea运行同样命令提示没找到，像是没安装一样 2.终端关闭重新打开之后，也像是没安装一样，需要重…...

编程日记 2024/10/21 10:39:28

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/11/7 14:02:32

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/10/18 21:05:27

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程新知 2025/11/8 3:16:46

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如中文，英文，日语），语音情感（如开心，悲伤）&#x…...

编程新知 2025/11/8 9:01:43

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别直接训练提示词嵌入向量的核心区别您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Go 并发编程基础：通道（Channel）的使用

在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。一、Channel…...

编程新知 2025/8/28 22:40:10

push [特殊字符] present

push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示前言在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/11/8 6:45:40

Python 训练营打卡 Day 47

注意力热力图可视化在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/10/26 9:51:09

目录

Web APIs第一天

Dom获取&属性操作

Web API基本认知

变量声明

作用和分类

什么是DOM

DOM树

DOM对象

获取Dom对象

根据CSS选择器来获取DOM元素（重点）

其他获取DOM元素方法（了解）

操作元素内容

对象.innerText 属性

对象.innerHTML 属性

年会抽奖案例

操作元素属性

操作元素常用属性

操作元素样式属性

操作表单元素属性

自定义属性

定时器-间歇函数

定时器函数介绍

定时器函数基本使用

综合案例

相关文章：