JavaScript WebAPI 指南

DevilSeagull2025-09-13 2:30

JavaScript WebAPI 指南

    • [一、WebAPI 背景知识](#一、WebAPI 背景知识)
      • [1.1 什么是 WebAPI](#1.1 什么是 WebAPI)
      • [1.2 什么是 API](#1.2 什么是 API)
      • [1.3 API 参考文档](#1.3 API 参考文档)
    • [二、DOM 基本概念](#二、DOM 基本概念)
      • [2.1 什么是 DOM](#2.1 什么是 DOM)
      • [2.2 DOM 树](#2.2 DOM 树)
      • [2.3 重要概念](#2.3 重要概念)
    • 三、获取元素
    • 四、事件初识
      • [4.1 基本概念](#4.1 基本概念)
      • [4.2 事件三要素](#4.2 事件三要素)
      • [4.3 简单示例](#4.3 简单示例)
    • 五、操作元素
      • [5.1 获取/修改元素内容](#5.1 获取/修改元素内容)
      • [5.2 获取/修改元素属性](#5.2 获取/修改元素属性)
        • [5.2.1 获取属性](#5.2.1 获取属性)
        • [5.2.2 修改属性](#5.2.2 修改属性)
      • [5.3 获取/修改表单元素属性](#5.3 获取/修改表单元素属性)
        • [5.3.1 表单元素属性](#5.3.1 表单元素属性)
        • [5.3.3 代码示例：点击计数](#5.3.3 代码示例：点击计数)
      • [5.4 获取/修改样式属性](#5.4 获取/修改样式属性)
        • [5.4.1 行内样式操作](#5.4.1 行内样式操作)
        • [5.4.2 类名样式操作](#5.4.2 类名样式操作)
    • 六、操作节点
        • [6.1.1 创建元素节点](#6.1.1 创建元素节点)
        • [6.1.2 插入节点到 DOM 树中](#6.1.2 插入节点到 DOM 树中)
        • [6.1.3 使用`insertBefore`](#6.1.3 使用insertBefore)
        • [6.2 删除节点](#6.2 删除节点)
    • 七、代码案例
        • [7.1 猜数字游戏](#7.1 猜数字游戏)

一、WebAPI 背景知识

1.1 什么是 WebAPI

WebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。

参考文档: link

1.2 什么是 API

API（Application Programming Interface）是现成的函数和对象集合，供开发者使用。WebAPI 特指 DOM 和 BOM。API 可以看作是一个工具箱，帮助开发者快速实现功能。

1.3 API 参考文档

MDN（Mozilla Developer Network）提供了丰富的 WebAPI 文档，可以通过以下链接访问：

MDN WebAPI 文档\]([Web API \| MDN](https://developer.mozilla.org/zh-CN/docs/Web/API#%E8%A7%84%E8%8C%83)) ### 二、DOM 基本概念 #### 2.1 什么是 DOM DOM（Document Object Model）是 W3C 标准的一部分，提供了一系列函数，用于操作网页内容、结构和样式。DOM 将网页视为一个树形结构，称为 DOM 树。 #### 2.2 DOM 树 一个页面的结构是一个树形结构，形如： ```html 文档标题 我的链接

我的标题

``` DOM 树结构形如： 文档 ├── 根元素： │ ├── 元素： │ │ └── 元素： │ │ └── 文本：文档标题 │ └── 元素：<body> │ ├── 元素：<a> │ │ └── 属性：href │ │ └── 文本：我的链接 │ └── 元素：<h1> │ └── 文本：我的标题 #### 2.3 重要概念 • 文档：一个页面是一个文档，使用`document`表示。 • 节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点等），使用`node`表示。 ### 三、获取元素 #### 3.1`querySelector` `querySelector`是 HTML5 新增的方法，可以使用 CSS 选择器`获取页面中的元素`。返回文档中与指定选择器匹配的第一个元素。 ```javascript var elem1 = document.querySelector('.box'); var elem2 = document.querySelector('#id'); var elem3 = document.querySelector('h3 span input'); ``` #### 3.2`querySelectorAll` `querySelectorAll`返回文档中与指定选择器匹配的所有元素的列表。 ```javascript var elems = document.querySelectorAll('div'); ``` ### 四、事件初识 #### 4.1 基本概念 事件是用户对页面的操作（如点击、选择、修改等），这些操作会在浏览器中产生事件，被 JavaScript 获取并处理。 #### 4.2 事件三要素 • 事件源：哪个元素触发的事件。 • 事件类型：如点击、选中、修改等。 • 事件处理程序：处理事件的函数。 #### 4.3 简单示例 ```html <button id="btn">点我一下</button> <script> var btn = document.getElementById('btn'); btn.onclick = function() { alert("hello world"); }; </script> ``` ### 五、操作元素 #### 5.1 获取/修改元素内容 ##### 5.1.1`innerText` `innerText`表示一个节点及其后代的"渲染"文本内容。不识别 HTML 标签，是非标准的。 ```javascript var div = document.querySelector('div'); console.log(div.innerText); // 读取内容 div.innerText = 'hello js <span>hello js</span>'; // 修改内容 ``` ##### 5.1.2`innerHTML` `innerHTML`表示一个节点及其后代的 HTML 内容。识别 HTML 标签，是 W3C 标准的。 ```javascript var div = document.querySelector('div'); console.log(div.innerHTML); // 读取内容 div.innerHTML = '<span>hello js</span>'; // 修改内容 ``` #### 5.2 获取/修改元素属性 ##### 5.2.1 获取属性 可以通过`Element`对象的属性直接获取。 ```javascript var img = document.querySelector('img'); console.log(img.src); // 获取 src 属性 console.log(img.title); // 获取 title 属性 console.log(img.alt); // 获取 alt 属性 ``` ##### 5.2.2 修改属性 可以直接修改`Element`对象的属性。 ```javascript var img = document.querySelector('img'); img.onclick = function() { if (img.src.lastIndexOf('rose.jpg') !== -1) { img.src = './rose2.png'; } else { img.src = './rose.jpg'; } }; ``` #### 5.3 获取/修改表单元素属性 ##### 5.3.1 表单元素属性 表单元素（主要是`input`标签）的以下属性可以通过 DOM 修改： • `value`：输入框的值。 • `disabled`：禁用状态。 • `checked`：复选框的选中状态。 • `selected`：下拉框的选中状态。 • `type`：输入框的类型（文本、密码、按钮、文件等）。 5.3.2 代码示例：切换按钮文本 ```html <input type="button" value="播放"> <script> var btn = document.querySelector('input'); btn.onclick = function() { if (btn.value === '播放') { btn.value = '暂停'; } else { btn.value = '播放'; } }; </script> ``` ##### 5.3.3 代码示例：点击计数 ```html <input type="text" id="text" value="0"> <input type="button" id="btn" value='点我+1'> <script> var text = document.querySelector('#text'); var btn = document.querySelector('#btn'); btn.onclick = function() { var num = +text.value; num++; text.value = num; }; </script> ``` #### 5.4 获取/修改样式属性 ##### 5.4.1 行内样式操作 通过`style`属性操作行内样式。 ```javascript var div = document.querySelector('div'); div.onclick = function() { var curFontSize = parseInt(this.style.fontSize); curFontSize += 10; this.style.fontSize = curFontSize + 'px'; }; ``` ##### 5.4.2 类名样式操作 通过`className`属性操作类名样式。 ```javascript var div = document.querySelector('div'); div.onclick = function() { if (div.className.indexOf('light') !== -1) { div.className = 'container dark'; } else { div.className = 'container light'; } }; ``` ### 六、操作节点 ###6.1 新增节点 ##### 6.1.1 创建元素节点 使用`document.createElement`创建元素节点。 ```javascript var div = document.createElement('div'); div.id = 'mydiv'; div.className = 'box'; div.innerHTML = 'hehe'; console.log(div); ``` ##### 6.1.2 插入节点到 DOM 树中 使用`appendChild`将节点插入到指定节点的最后一个孩子之后。 ```javascript var container = document.querySelector('.container'); container.appendChild(div); ``` ##### 6.1.3 使用`insertBefore` 使用`insertBefore`将节点插入到指定节点之前。 ```javascript var newDiv = document.createElement('div'); newDiv.innerHTML = '我是新的节点'; var container = document.querySelector('.container'); container.insertBefore(newDiv, container.children[0]); ``` ##### 6.2 删除节点 使用`removeChild`删除子节点。 ```javascript var container = document.querySelector('.container'); var child = container.children[0]; container.removeChild(child); ``` ### 七、代码案例 ##### 7.1 猜数字游戏 ```html <button type="button" id="reset">重新开始一局游戏</button><br> <input type="text" id="guess"> <button type="button" id="button">猜</button> <br> 已经猜的次数：<span id="count">0</span> <br> 结果：<span id="result"></span> <script> var inputE = document.querySelector('#guess'); var countE = document.querySelector('#count'); var resultE = document.querySelector('#result'); var btn = document.querySelector('#button'); var resetBtn = document.querySelector('#reset'); var guessNumber = Math.floor(Math.random() * 100) + 1; var count = 0; btn.onclick = function() { var userGuess = parseInt(inputE.value, 10); if (isNaN(userGuess)) { resultE.innerText = '请输入一个有效的数字！'; return; } count++; countE.innerText = count; if (userGuess === guessNumber) { resultE.innerText = '恭喜你猜对了！'; } else if (userGuess < guessNumber) { resultE.innerText = '太小了，再试一次！'; } else { resultE.innerText = '太大了，再试一次！'; } }; resetBtn.onclick = function() { guessNumber = Math.floor(Math.random() * 100) + 1; count = 0; countE.innerText = count; resultE.innerText = ''; inputE.value = ''; }; </script> ``` </p></div></div><!----><!--]--></div></div><span data-v-9d593865></span><div class="article-tag-list" data-v-9d593865><!--[--><a href="/tag/3" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->java<!--]--></span></button></a><a href="/tag/13" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->开发语言<!--]--></span></button></a><a href="/tag/15" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->javascript<!--]--></span></button></a><a href="/tag/353" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->html<!--]--></span></button></a><a href="/tag/410" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->ecmascript<!--]--></span></button></a><a href="/tag/1045" class="" data-v-9d593865><button ariadisabled="false" type="button" class="el-button el-button--info is-text is-has-bg" style="" data-v-9d593865><!--v-if--><span class=""><!--[-->html5<!--]--></span></button></a><!--]--></div><div class="article-pre-next" data-v-9d593865><div data-v-9d593865><a href="/article/1966564831865651201" class="" data-v-9d593865><span data-v-9d593865>上一篇：</span><span class="article-pre-next-item-title" data-v-9d593865>OpenCV：图像直方图</span></a></div><div data-v-9d593865><a href="/article/1966570963925516289" class="" data-v-9d593865><span data-v-9d593865>下一篇：</span><span class="article-pre-next-item-title" data-v-9d593865>Vue3 + Element-Plus 抽屉关闭按钮居中</span></a></div></div></div><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-4340231068438843" data-ad-slot="3187524902" data-ad-format="auto" data-full-width-responsive="true" data-v-9d593865></ins><!----><div class="article-recommend-card" data-v-9d593865><span class="article-recommend-card-title" data-v-9d593865>相关推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><div class="article-recommend-list" data-v-9d593865><!--[--><a href="/article/1999770158999601153" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>八荒启_交互动画</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>2 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【基础篇007】GeoGebra工具系列_多边形(Polygon)</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--]--></div></a><a href="/article/1999769781503852545" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>知其然亦知其所以然</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>4 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>小米的奇幻编程之旅：当 JavaScript 语法变成了一座魔法城</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>面试</span><!--]--><!--]--></div></a><a href="/article/1999769701820465153" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>webkubor</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>4 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>一次 H5 表单事故：100vh 在 Android 上到底坑在哪</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>vue.js</span><!--]--><!--]--></div></a><a href="/article/1999767390930927617" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>222you</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>13 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Spring框架的介绍和IoC入门</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>后端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>spring</span><!--]--><!--]--></div></a><a href="/article/1999767235615850497" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>毕设源码-朱学姐</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>14 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【开题答辩全过程】以 基于Java的人体骨骼健康知识普及系统为例，包含答辩的问题和答案</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>开发语言</span><!--]--><!--]--></div></a><a href="/article/1999767021823787009" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>喵手</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>15 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>集合框架概述：让数据操作更高效、更灵活！</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>集合</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>集合框架</span><!--]--><!--]--></div></a><a href="/article/1999766900134445057" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>江公望</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>15 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>VUE3 data()函数浅谈</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>前端</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>javascript</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>vue.js</span><!--]--><!--]--></div></a><a href="/article/1999766320972365825" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>lly202406</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>18 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>Julia 函数</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>开发语言</span><!--]--><!--]--></div></a><a href="/article/1999765885247094785" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>Java爱好狂.</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>19 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>如何用JAVA技术设计一个高并发系统？</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>数据库</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>高并发</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>架构设计</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>java面试</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>java架构师</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>java八股文</span><!--]--><!--]--></div></a><a href="/article/1999765628983508993" class="article-recommend-list-item" data-v-9d593865><div class="article-recommend-list-item-info" data-v-9d593865><span data-v-9d593865>sheji3416</span><div class="el-divider el-divider--vertical" style="--el-border-style:solid;" role="separator" data-v-9d593865><!--v-if--></div><span data-v-9d593865>20 分钟前</span></div><span class="article-recommend-list-item-title" data-v-9d593865>【开题答辩全过程】以 基于JAVA的社团管理系统为例，包含答辩的问题和答案</span><div class="article-recommend-list-item-tag-list" data-v-9d593865><!--[--><!--[--><!----><span data-v-9d593865>java</span><!--]--><!--[--><span class="article-recommend-list-item-tag-list-divider" data-v-9d593865>·</span><span data-v-9d593865>开发语言</span><!--]--><!--]--></div></a><!--]--></div></div><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-4340231068438843" data-ad-slot="3187524902" data-ad-format="auto" data-full-width-responsive="true" data-v-9d593865></ins><!----></div><div class="right" data-v-9d593865><div class="right-body" data-v-9d593865><div class="hot-article-rank hot-article-rank-wrapper" data-v-9d593865 data-v-9f329d47><span class="title" data-v-9f329d47>热门推荐</span><div class="el-divider el-divider--horizontal" style="--el-border-style:solid;" role="separator" data-v-9f329d47><!--v-if--></div><div class="article-list" data-v-9f329d47><!--[--><a href="/article/1965957555249266689" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>01</span><span class="article-title" data-v-9f329d47>GitHub 镜像站点</span></a><a href="/article/1998924826392723458" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>02</span><span class="article-title" data-v-9f329d47>【AutoGLM部署】本地私有化部署AI手机Agent</span></a><a href="/article/1950564991094009857" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>03</span><span class="article-title" data-v-9f329d47>UV安装并设置国内源</span></a><a href="/article/1995737326551629825" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>04</span><span class="article-title" data-v-9f329d47>【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）</span></a><a href="/article/1998947105696710657" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>05</span><span class="article-title" data-v-9f329d47>Open-AutoGLM Windows 安装部署教程</span></a><a href="/article/1851806212014739457" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>06</span><span class="article-title" data-v-9f329d47>安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）</span></a><a href="/article/1999172193540964353" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>07</span><span class="article-title" data-v-9f329d47>Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser</span></a><a href="/article/1932679439594336257" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>08</span><span class="article-title" data-v-9f329d47>Linux下V2Ray安装配置指南</span></a><a href="/article/1915922587008487425" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>09</span><span class="article-title" data-v-9f329d47>BongoCat - 跨平台键盘猫动画工具</span></a><a href="/article/1997110638619983874" class="article" data-v-9f329d47><span class="article-index" data-v-9f329d47>10</span><span class="article-title" data-v-9f329d47>Windows 11 官方系统安装与重装完整教程（2025年最新版）</span></a><!--]--></div></div><!----></div></div></div></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":362,"once":365,"_errors":366,"serverRendered":368,"path":369},["ShallowReactive",3],{"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":4,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":170,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":172,"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":214},[5,19,36,53,70,88,101,116,135,158],{"id":6,"title":7,"description":8,"imgUrl":9,"views":10,"ownerId":11,"ownerName":12,"ownerHeadUrl":13,"tagList":14,"time":18},"1965957555249266689","GitHub 镜像站点","国内访问 GitHub 有时会遇到速度慢或不稳定的情况，这时 GitHub 镜像站点就能帮上忙。它们通过代理或缓存机制，让你更顺畅地浏览仓库、下载资源甚至克隆代码。","",29625,"1851173111697772545","BillKu","https://profile-avatar.csdnimg.cn/default.jpg",[15],{"id":16,"name":17},424,"github",1757555781000,{"id":20,"title":21,"description":22,"imgUrl":23,"views":24,"ownerId":25,"ownerName":26,"ownerHeadUrl":27,"tagList":28,"time":35},"1998924826392723458","【AutoGLM部署】本地私有化部署AI手机Agent","若对您有帮助的话，请点赞收藏加关注哦，您的关注是我持续创作的动力！有问题请私信或联系邮箱：funian.gm@gmail.com","https://i-blog.csdnimg.cn/direct/9446d5a803334c91bdcaaf56ccb91554.png",515,"1879337135652212738","周杰伦_Jay","https://profile-avatar.csdnimg.cn/517a18e302c240589d22c4cc6fd07101_weixin_44262492.jpg",[29,32],{"id":30,"name":31},39,"人工智能",{"id":33,"name":34},218,"智能手机",1765415791000,{"id":37,"title":38,"description":39,"imgUrl":40,"views":41,"ownerId":42,"ownerName":43,"ownerHeadUrl":44,"tagList":45,"time":52},"1950564991094009857","UV安装并设置国内源","国内网络问题无法下载解决方案 来到github下载自己对应系统的包： https://github.com/astral-sh/uv/releases","https://i-blog.csdnimg.cn/direct/f35ac3e06c9448d38fa3eb735254c454.png",18512,"1684403235311325185","落魄实习生","https://file.jishuzhan.net/user/1684403235311325185/head.png",[46,49],{"id":47,"name":48},58,"python",{"id":50,"name":51},4529,"uv",1753885908000,{"id":54,"title":55,"description":56,"imgUrl":57,"views":58,"ownerId":59,"ownerName":60,"ownerHeadUrl":61,"tagList":62,"time":69},"1995737326551629825","【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）","很多小伙伴在重装系统、制作U盘启动盘或安装虚拟机时，都需要用到 Windows 10 的官方 ISO 镜像文件。但网上所谓的“优化版”“精简版”系统往往捆绑垃圾软件、篡改注册表，甚至植入木马病毒 😱。","https://i-blog.csdnimg.cn/direct/6b06ccc074a142e083c658d4c30a284a.png",1746,"1761218396160004097","Blue桃之夭夭","https://file.jishuzhan.net/user/1761218396160004097/head.webp",[63,66],{"id":64,"name":65},44,"windows",{"id":67,"name":68},139,"microsoft",1764655832000,{"id":71,"title":72,"description":73,"imgUrl":74,"views":75,"ownerId":76,"ownerName":77,"ownerHeadUrl":78,"tagList":79,"time":87},"1998947105696710657","Open-AutoGLM Windows 安装部署教程","本教程记录在 Windows 系统上部署 Open-AutoGLM (Phone Agent) 的完整流程，包含常见问题的解决方案。","https://oss.xyyzone.com/jishuzhan/article/1998947105696710657/950be15f9722a9f16edd4d92e4158d3f.webp",319,"1902599386440478722","Charlo","https://p9-passport.byteacctimg.com/img/user-avatar/a526e74b8b5207e91eb1ab87e6173a4d~300x300.image",[80,83,86],{"id":81,"name":82},97,"算法",{"id":84,"name":85},188,"设计模式",{"id":16,"name":17},1765421103000,{"id":89,"title":90,"description":91,"imgUrl":92,"views":93,"ownerId":94,"ownerName":95,"ownerHeadUrl":13,"tagList":96,"time":100},"1851806212014739457","安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）","安娜的档案（Anna’s Archive）是一个颇受关注的资源库。它涵盖了广泛的内容，可能包括各类文献、资料等。其特色在于丰富的信息储备和一定的系统性。安娜的档案（Anna’s Archive）用户可以从中获取多样的知识和数据，为研究、学习等提供便利。然而，关于它的具体性质和运作方式可能因不同情境而有所差异。它在相关领域或特定群体中具有一定影响力，成为人们获取特定信息的渠道之一，但也需注意其信息的准确性等方面的问题。","https://i-blog.csdnimg.cn/direct/35f1832388a147ca80754ec861f014d0.png",3793,"1851806214443241473","码虫分享",[97],{"id":98,"name":99},84,"学习",1730339980000,{"id":102,"title":103,"description":104,"imgUrl":105,"views":106,"ownerId":107,"ownerName":108,"ownerHeadUrl":109,"tagList":110,"time":115},"1999172193540964353","Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser","凌晨 1 点，我正要关电脑睡觉，屏幕左下角突然弹出一个弹窗：Cursor 又上新功能了？带着好奇我仔细看了下文档：cursor.com/cn/docs/age…","https://oss.xyyzone.com/jishuzhan/article/1999172193540964353/e4328e01c65ece64745ea58b6f48c13d.webp",207,"1685812530397581314","张拭心","https://file.jishuzhan.net/user/1685812530397581314/head.png",[111,114],{"id":112,"name":113},14,"前端",{"id":30,"name":31},1765474768000,{"id":117,"title":118,"description":119,"imgUrl":9,"views":120,"ownerId":121,"ownerName":122,"ownerHeadUrl":123,"tagList":124,"time":134},"1932679439594336257","Linux下V2Ray安装配置指南","本文档提供了在Linux系统上安装、配置和使用V2Ray的完整流程，包括从订阅链接自动生成配置文件、设置代理环境变量以及常见问题的解决方案。",11171,"1932679443885109249","Bigbig.","https://profile-avatar.csdnimg.cn/d79b884ab2274031998690f8b491b6d7_weixin_45036087.jpg",[125,128,131],{"id":126,"name":127},9,"linux",{"id":129,"name":130},10,"运维",{"id":132,"name":133},43,"chrome",1749621660000,{"id":136,"title":137,"description":138,"imgUrl":139,"views":140,"ownerId":141,"ownerName":142,"ownerHeadUrl":143,"tagList":144,"time":157},"1915922587008487425","BongoCat - 跨平台键盘猫动画工具","本文翻译整理自：https://github.com/ayangweb/BongoCatBongoCat 是一款跨平台的键盘猫动画工具，能够实时显示用户键盘和鼠标操作的可视化效果。","https://i-blog.csdnimg.cn/direct/cce2f8b6f6ee48dc8212484e8b4ebef0.png",8303,"1682248433810804738","伊织code","https://file.jishuzhan.net/user/1682248433810804738/head.png",[145,148,151,154],{"id":146,"name":147},364,"计算机外设",{"id":149,"name":150},1135,"动画",{"id":152,"name":153},1636,"键盘",{"id":155,"name":156},88509,"bongocat",1745626515000,{"id":159,"title":160,"description":161,"imgUrl":9,"views":162,"ownerId":163,"ownerName":164,"ownerHeadUrl":165,"tagList":166,"time":169},"1997110638619983874","Windows 11 官方系统安装与重装完整教程（2025年最新版）","适用人群：普通用户、IT新手、需要重装系统的个人或办公用户 平台：Windows 11（家庭版 / 专业版 / 企业版） 来源：基于微软官方工具与流程编写，确保安全、纯净、无第三方捆绑 更新时间：2025年12月",235,"1783013904767520769","小二·","https://file.jishuzhan.net/user/1783013904767520769/head.webp",[167,168],{"id":64,"name":65},{"id":67,"name":68},1764983255000,{"adMap":171},["Map"],{"id":173,"title":174,"description":175,"content":176,"imgUrl":9,"views":177,"ownerId":178,"ownerName":179,"ownerHeadUrl":180,"tagList":181,"time":200,"articleSourceUrl":201,"preArticle":202,"nextArticle":208},"1966570208967573505","JavaScript WebAPI 指南","WebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。","#### JavaScript WebAPI 指南\n\n*\n * [一、WebAPI 背景知识](#一、WebAPI 背景知识)\n *\n * [1.1 什么是 WebAPI](#1.1 什么是 WebAPI)\n * [1.2 什么是 API](#1.2 什么是 API)\n * [1.3 API 参考文档](#1.3 API 参考文档)\n * [二、DOM 基本概念](#二、DOM 基本概念)\n *\n * [2.1 什么是 DOM](#2.1 什么是 DOM)\n * [2.2 DOM 树](#2.2 DOM 树)\n * [2.3 重要概念](#2.3 重要概念)\n * [三、获取元素](#三、获取元素)\n *\n * [3.1\\`querySelector\\`](#3.1`querySelector`)\n * [3.2\\`querySelectorAll\\`](#3.2`querySelectorAll`)\n * [四、事件初识](#四、事件初识)\n *\n * [4.1 基本概念](#4.1 基本概念)\n * [4.2 事件三要素](#4.2 事件三要素)\n * [4.3 简单示例](#4.3 简单示例)\n * [五、操作元素](#五、操作元素)\n *\n * [5.1 获取/修改元素内容](#5.1 获取/修改元素内容)\n *\n * [5.1.1\\`innerText\\`](#5.1.1`innerText`)\n * [5.1.2\\`innerHTML\\`](#5.1.2`innerHTML`)\n * [5.2 获取/修改元素属性](#5.2 获取/修改元素属性)\n *\n * [5.2.1 获取属性](#5.2.1 获取属性)\n * [5.2.2 修改属性](#5.2.2 修改属性)\n * [5.3 获取/修改表单元素属性](#5.3 获取/修改表单元素属性)\n *\n * [5.3.1 表单元素属性](#5.3.1 表单元素属性)\n * [5.3.3 代码示例：点击计数](#5.3.3 代码示例：点击计数)\n * [5.4 获取/修改样式属性](#5.4 获取/修改样式属性)\n *\n * [5.4.1 行内样式操作](#5.4.1 行内样式操作)\n * [5.4.2 类名样式操作](#5.4.2 类名样式操作)\n * [六、操作节点](#六、操作节点)\n *\n *\n * [6.1.1 创建元素节点](#6.1.1 创建元素节点)\n * [6.1.2 插入节点到 DOM 树中](#6.1.2 插入节点到 DOM 树中)\n * [6.1.3 使用\\`insertBefore\\`](#6.1.3 使用`insertBefore`)\n * [6.2 删除节点](#6.2 删除节点)\n * [七、代码案例](#七、代码案例)\n *\n *\n * [7.1 猜数字游戏](#7.1 猜数字游戏)\n\n### 一、WebAPI 背景知识\n\n#### 1.1 什么是 WebAPI\n\nWebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。\n> 参考文档: [link](https://developer.mozilla.org/zh-CN/docs/Web/API)\n\n#### 1.2 什么是 API\n\nAPI（Application Programming Interface）是现成的函数和对象集合，供开发者使用。WebAPI 特指 DOM 和 BOM。API 可以看作是一个工具箱，帮助开发者快速实现功能。\n\n#### 1.3 API 参考文档\n\nMDN（Mozilla Developer Network）提供了丰富的 WebAPI 文档，可以通过以下链接访问： \n\n\\[MDN WebAPI 文档\\]([Web API \\| MDN](https://developer.mozilla.org/zh-CN/docs/Web/API#%E8%A7%84%E8%8C%83))\n\n### 二、DOM 基本概念\n\n#### 2.1 什么是 DOM\n\nDOM（Document Object Model）是 W3C 标准的一部分，提供了一系列函数，用于操作网页内容、结构和样式。DOM 将网页视为一个树形结构，称为 DOM 树。\n\n#### 2.2 DOM 树\n\n一个页面的结构是一个树形结构，形如：\n\n```html\n\u003Chtml>\n \u003Chead>\n \u003Ctitle>文档标题\u003C/title>\n \u003C/head>\n \u003Cbody>\n \u003Ca href=\"\">我的链接\u003C/a>\n \u003Ch1>我的标题\u003C/h1>\n \u003C/body>\n\u003C/html>\n```\n\nDOM 树结构形如：\n\n 文档\n ├── 根元素：\u003Chtml>\n │ ├── 元素：\u003Chead>\n │ │ └── 元素：\u003Ctitle>\n │ │ └── 文本：文档标题\n │ └── 元素：\u003Cbody>\n │ ├── 元素：\u003Ca>\n │ │ └── 属性：href\n │ │ └── 文本：我的链接\n │ └── 元素：\u003Ch1>\n │ └── 文本：我的标题\n\n#### 2.3 重要概念\n\n• 文档：一个页面是一个文档，使用`document`表示。\n\n• 节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点等），使用`node`表示。\n\n### 三、获取元素\n\n#### 3.1`querySelector`\n\n`querySelector`是 HTML5 新增的方法，可以使用 CSS 选择器`获取页面中的元素`。返回文档中与指定选择器匹配的第一个元素。\n\n```javascript\nvar elem1 = document.querySelector('.box');\nvar elem2 = document.querySelector('#id');\nvar elem3 = document.querySelector('h3 span input');\n```\n\n#### 3.2`querySelectorAll`\n\n`querySelectorAll`返回文档中与指定选择器匹配的所有元素的列表。\n\n```javascript\nvar elems = document.querySelectorAll('div');\n```\n\n### 四、事件初识\n\n#### 4.1 基本概念\n\n事件是用户对页面的操作（如点击、选择、修改等），这些操作会在浏览器中产生事件，被 JavaScript 获取并处理。\n\n#### 4.2 事件三要素\n\n• 事件源：哪个元素触发的事件。\n\n• 事件类型：如点击、选中、修改等。\n\n• 事件处理程序：处理事件的函数。\n\n#### 4.3 简单示例\n\n```html\n\u003Cbutton id=\"btn\">点我一下\u003C/button>\n\u003Cscript>\n var btn = document.getElementById('btn');\n btn.onclick = function() {\n alert(\"hello world\");\n };\n\u003C/script>\n```\n\n### 五、操作元素\n\n#### 5.1 获取/修改元素内容\n\n##### 5.1.1`innerText`\n\n`innerText`表示一个节点及其后代的\"渲染\"文本内容。不识别 HTML 标签，是非标准的。\n\n```javascript\nvar div = document.querySelector('div');\nconsole.log(div.innerText); // 读取内容\ndiv.innerText = 'hello js \u003Cspan>hello js\u003C/span>'; // 修改内容\n```\n\n##### 5.1.2`innerHTML`\n\n`innerHTML`表示一个节点及其后代的 HTML 内容。识别 HTML 标签，是 W3C 标准的。\n\n```javascript\nvar div = document.querySelector('div');\nconsole.log(div.innerHTML); // 读取内容\ndiv.innerHTML = '\u003Cspan>hello js\u003C/span>'; // 修改内容\n```\n\n#### 5.2 获取/修改元素属性\n\n##### 5.2.1 获取属性\n\n可以通过`Element`对象的属性直接获取。\n\n```javascript\nvar img = document.querySelector('img');\nconsole.log(img.src); // 获取 src 属性\nconsole.log(img.title); // 获取 title 属性\nconsole.log(img.alt); // 获取 alt 属性\n```\n\n##### 5.2.2 修改属性\n\n可以直接修改`Element`对象的属性。\n\n```javascript\nvar img = document.querySelector('img');\nimg.onclick = function() {\n if (img.src.lastIndexOf('rose.jpg') !== -1) {\n img.src = './rose2.png';\n } else {\n img.src = './rose.jpg';\n }\n};\n```\n\n#### 5.3 获取/修改表单元素属性\n\n##### 5.3.1 表单元素属性\n\n表单元素（主要是`input`标签）的以下属性可以通过 DOM 修改：\n\n• `value`：输入框的值。\n\n• `disabled`：禁用状态。\n\n• `checked`：复选框的选中状态。\n\n• `selected`：下拉框的选中状态。\n\n• `type`：输入框的类型（文本、密码、按钮、文件等）。\n\n5.3.2 代码示例：切换按钮文本\n\n```html\n\u003Cinput type=\"button\" value=\"播放\">\n\u003Cscript>\n var btn = document.querySelector('input');\n btn.onclick = function() {\n if (btn.value === '播放') {\n btn.value = '暂停';\n } else {\n btn.value = '播放';\n }\n };\n\u003C/script>\n```\n\n##### 5.3.3 代码示例：点击计数\n\n```html\n\u003Cinput type=\"text\" id=\"text\" value=\"0\">\n\u003Cinput type=\"button\" id=\"btn\" value='点我+1'>\n\u003Cscript>\n var text = document.querySelector('#text');\n var btn = document.querySelector('#btn');\n btn.onclick = function() {\n var num = +text.value;\n num++;\n text.value = num;\n };\n\u003C/script>\n```\n\n#### 5.4 获取/修改样式属性\n\n##### 5.4.1 行内样式操作\n\n通过`style`属性操作行内样式。\n\n```javascript\nvar div = document.querySelector('div');\ndiv.onclick = function() {\n var curFontSize = parseInt(this.style.fontSize);\n curFontSize += 10;\n this.style.fontSize = curFontSize + 'px';\n};\n```\n\n##### 5.4.2 类名样式操作\n\n通过`className`属性操作类名样式。\n\n```javascript\nvar div = document.querySelector('div');\ndiv.onclick = function() {\n if (div.className.indexOf('light') !== -1) {\n div.className = 'container dark';\n } else {\n div.className = 'container light';\n }\n};\n```\n\n### 六、操作节点\n\n###6.1 新增节点\n\n##### 6.1.1 创建元素节点\n\n使用`document.createElement`创建元素节点。\n\n```javascript\nvar div = document.createElement('div');\ndiv.id = 'mydiv';\ndiv.className = 'box';\ndiv.innerHTML = 'hehe';\nconsole.log(div);\n```\n\n##### 6.1.2 插入节点到 DOM 树中\n\n使用`appendChild`将节点插入到指定节点的最后一个孩子之后。\n\n```javascript\nvar container = document.querySelector('.container');\ncontainer.appendChild(div);\n```\n\n##### 6.1.3 使用`insertBefore`\n\n使用`insertBefore`将节点插入到指定节点之前。\n\n```javascript\nvar newDiv = document.createElement('div');\nnewDiv.innerHTML = '我是新的节点';\nvar container = document.querySelector('.container');\ncontainer.insertBefore(newDiv, container.children[0]);\n```\n\n##### 6.2 删除节点\n\n使用`removeChild`删除子节点。\n\n```javascript\nvar container = document.querySelector('.container');\nvar child = container.children[0];\ncontainer.removeChild(child);\n```\n\n### 七、代码案例\n\n##### 7.1 猜数字游戏\n\n```html\n\u003Cbutton type=\"button\" id=\"reset\">重新开始一局游戏\u003C/button>\u003Cbr>\n\u003Cinput type=\"text\" id=\"guess\">\n\u003Cbutton type=\"button\" id=\"button\">猜\u003C/button>\n\u003Cbr>\n已经猜的次数：\u003Cspan id=\"count\">0\u003C/span>\n\u003Cbr>\n结果：\u003Cspan id=\"result\">\u003C/span>\n\u003Cscript>\n var inputE = document.querySelector('#guess');\n var countE = document.querySelector('#count');\n var resultE = document.querySelector('#result');\n var btn = document.querySelector('#button');\n var resetBtn = document.querySelector('#reset');\n var guessNumber = Math.floor(Math.random() * 100) + 1;\n var count = 0;\n\n btn.onclick = function() {\n var userGuess = parseInt(inputE.value, 10);\n if (isNaN(userGuess)) {\n resultE.innerText = '请输入一个有效的数字！';\n return;\n }\n count++;\n countE.innerText = count;\n\n if (userGuess === guessNumber) {\n resultE.innerText = '恭喜你猜对了！';\n } else if (userGuess \u003C guessNumber) {\n resultE.innerText = '太小了，再试一次！';\n } else {\n resultE.innerText = '太大了，再试一次！';\n }\n };\n\n resetBtn.onclick = function() {\n guessNumber = Math.floor(Math.random() * 100) + 1;\n count = 0;\n countE.innerText = count;\n resultE.innerText = '';\n inputE.value = '';\n };\n\u003C/script>\n\n```\n\n",0,"1966570213333843970","DevilSeagull","https://i-avatar.csdnimg.cn/c079bc3b34bf4ef0ab9f2dcdb3b12f9c_2501_92963994.jpg",[182,185,188,191,194,197],{"id":183,"name":184},3,"java",{"id":186,"name":187},13,"开发语言",{"id":189,"name":190},15,"javascript",{"id":192,"name":193},353,"html",{"id":195,"name":196},410,"ecmascript",{"id":198,"name":199},1045,"html5",1757701849000,"https://blog.csdn.net/2501_92963994/article/details/151586699",{"id":203,"title":204,"description":205,"imgUrl":206,"views":207},"1966564831865651201","OpenCV：图像直方图","目录一、什么是图像直方图？关键概念：BINS（区间）二、直方图的核心作用三、OpenCV 计算直方图：calcHist 函数详解","https://i-blog.csdnimg.cn/direct/f7ba2d104a8749209d72197ad464ae16.png",18,{"id":209,"title":210,"description":211,"imgUrl":212,"views":213},"1966570963925516289","Vue3 + Element-Plus 抽屉关闭按钮居中","应用效果：样式设置：","https://i-blog.csdnimg.cn/direct/2a44847ff8e84681aea92097c7b2e53b.png",7,[215,227,243,258,274,285,301,314,323,352],{"id":216,"title":217,"description":218,"imgUrl":219,"views":177,"ownerId":220,"ownerName":221,"ownerHeadUrl":222,"tagList":223,"time":226},"1999770158999601153","【基础篇007】GeoGebra工具系列_多边形(Polygon)","@TOC在传统教学中，画多边形只是个绘图动作。但在 GeoGebra 中，使用 “多边形”工具（或“向量多边形”工具）的瞬间，你创造的是一个活的数学对象。比如，如果你用的是两点定义多边形，那么这两个点就决定了多边形的长、宽、面积、周长；多边形绘制好后会立即在“代数区”同步生成其方程、所有顶点坐标、几何属性，方便关联其他元素；你可以随时拖动任何一个顶点或边，整个多边形及其所有关联数据（面积、对角线长度…）都会实时、连续地变化。那么本章，我们将从交互的角度一起研究一下多边形工具。","https://oss.xyyzone.com/jishuzhan/article/1999770158999601153/adb22915e06d6b13f3061c7ceb6bf9e2.webp","1999770171079196674","八荒启_交互动画","https://p3-passport.byteacctimg.com/img/user-avatar/0c3a4421050aeaa0e0e37add42a84b42~300x300.image",[224,225],{"id":112,"name":113},{"id":189,"name":190},1765617334000,{"id":228,"title":229,"description":230,"imgUrl":231,"views":232,"ownerId":233,"ownerName":234,"ownerHeadUrl":235,"tagList":236,"time":242},"1999769781503852545","小米的奇幻编程之旅：当 JavaScript 语法变成了一座魔法城","很多人第一次学 JavaScript 语法时，都觉得它像一座迷宫：规则很多、坑也不少。而我那天晚上敲代码敲到困，眼睛一闭一睁，居然穿越到了一个叫 “JS 魔法城” 的奇怪地方。城门口立着一块大牌子，上面写着：","https://oss.xyyzone.com/jishuzhan/article/1999769781503852545/8b65d9bca674a06f4f69557860e2beef.webp",1,"1717411994694324226","知其然亦知其所以然","https://file.jishuzhan.net/user/1717411994694324226/head.webp",[237,238,239],{"id":112,"name":113},{"id":189,"name":190},{"id":240,"name":241},211,"面试",1765617244000,{"id":244,"title":245,"description":246,"imgUrl":247,"views":232,"ownerId":248,"ownerName":249,"ownerHeadUrl":250,"tagList":251,"time":257},"1999769701820465153","一次 H5 表单事故：100vh 在 Android 上到底坑在哪","事情是这样的。我用 height: 100vh 写了一个很普通的 H5 页面， 结构也很常规：上面是内容，下面是输入框。","https://oss.xyyzone.com/jishuzhan/article/1999769701820465153/ef28896d359d2daa587c172a317cf10e.webp","1999769705138159617","webkubor","https://p9-passport.byteacctimg.com/img/user-avatar/a9ce7e6f40af3c6c7031445900fa9bab~300x300.image",[252,253,254],{"id":112,"name":113},{"id":189,"name":190},{"id":255,"name":256},36,"vue.js",1765617225000,{"id":259,"title":260,"description":261,"imgUrl":262,"views":232,"ownerId":263,"ownerName":264,"ownerHeadUrl":13,"tagList":265,"time":273},"1999767390930927617","Spring框架的介绍和IoC入门","目录1.Spring框架介绍1.1 Spring 框架的概述1.2 Spring框架的优点2.SpringIoC","https://i-blog.csdnimg.cn/direct/2f132ed80c374221a481ac6f90dc4517.png","1977670670176813057","222you",[266,267,270],{"id":183,"name":184},{"id":268,"name":269},55,"后端",{"id":271,"name":272},110,"spring",1765616674000,{"id":275,"title":276,"description":277,"imgUrl":278,"views":232,"ownerId":279,"ownerName":280,"ownerHeadUrl":13,"tagList":281,"time":284},"1999767235615850497","【开题答辩全过程】以 基于Java的人体骨骼健康知识普及系统为例，包含答辩的问题和答案","个人简介一名14年经验的资深毕设内行人，语言擅长Java、php、微信小程序、Python、Golang、安卓Android等","https://i-blog.csdnimg.cn/direct/5490928cd545408682cd6c0a95490509.png","1963245963118166017","毕设源码-朱学姐",[282,283],{"id":183,"name":184},{"id":186,"name":187},1765616637000,{"id":286,"title":287,"description":288,"imgUrl":9,"views":232,"ownerId":289,"ownerName":290,"ownerHeadUrl":291,"tagList":292,"time":300},"1999767021823787009","集合框架概述：让数据操作更高效、更灵活！","哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛","1717700317014921217","喵手","https://file.jishuzhan.net/user/1717700317014921217/head.webp",[293,294,297],{"id":183,"name":184},{"id":295,"name":296},1478,"集合",{"id":298,"name":299},7210,"集合框架",1765616586000,{"id":302,"title":303,"description":304,"imgUrl":305,"views":232,"ownerId":306,"ownerName":307,"ownerHeadUrl":308,"tagList":309,"time":313},"1999766900134445057","VUE3 data()函数浅谈","在 Vue 3 中，data()函数是选项式 API（Options API）中用于声明组件响应式数据的核心方法。它的作用是将组件的内部状态封装为一个响应式对象，使得数据的变化能自动触发视图更新。","https://i-blog.csdnimg.cn/direct/2b27e30c50fb44c4975931544b227f48.png","1943937847437864961","江公望","https://i-avatar.csdnimg.cn/85f891d0b4bd4c3b91229d5537ccd879_u013443950.jpg",[310,311,312],{"id":112,"name":113},{"id":189,"name":190},{"id":255,"name":256},1765616557000,{"id":315,"title":316,"description":317,"imgUrl":9,"views":232,"ownerId":318,"ownerName":319,"ownerHeadUrl":13,"tagList":320,"time":322},"1999766320972365825","Julia 函数","Julia 是一种高性能的编程语言，它结合了 Python 的易用性、R 的数值计算能力和 C 的性能。在 Julia 中，函数是构建程序的基本单元。本文将深入探讨 Julia 函数的概念、特点、定义以及在实际编程中的应用。","1802161870803570690","lly202406",[321],{"id":186,"name":187},1765616419000,{"id":324,"title":325,"description":326,"imgUrl":327,"views":177,"ownerId":328,"ownerName":329,"ownerHeadUrl":330,"tagList":331,"time":351},"1999765885247094785","如何用JAVA技术设计一个高并发系统？","不管是初入职场的小菜鸟还是有一些工作年限的老司机，系统设计问题对他们来说都是一大困扰。前者主要是在于面试；面试官来一个如何从零到一设计一个完整的系统？大多数人都会直接懵了，因为系统设计覆盖面广，而网上资料又不能面面俱到，单独背背文章肯定是不行的；后者主要在于晋升；想要从程序员进阶到架构师，系统设计是必须要踏入的一道坎，他对你的技术广度跟深度都会有一定程度的考察。","https://i-blog.csdnimg.cn/img_convert/f13517942e000015981b7da641b852d6.png","1984494768987111426","Java爱好狂.","https://profile-avatar.csdnimg.cn/6c696e88c80c4a709ba001cdb9fb78c4_wdj_yyds.jpg",[332,333,336,339,342,345,348],{"id":183,"name":184},{"id":334,"name":335},25,"数据库",{"id":337,"name":338},955,"高并发",{"id":340,"name":341},5030,"架构设计",{"id":343,"name":344},6387,"java面试",{"id":346,"name":347},27606,"java架构师",{"id":349,"name":350},55707,"java八股文",1765616315000,{"id":353,"title":354,"description":277,"imgUrl":355,"views":232,"ownerId":356,"ownerName":357,"ownerHeadUrl":13,"tagList":358,"time":361},"1999765628983508993","【开题答辩全过程】以 基于JAVA的社团管理系统为例，包含答辩的问题和答案","https://i-blog.csdnimg.cn/direct/c034876a19404dcca39f922d45aa9109.png","1960949593472548865","sheji3416",[359,360],{"id":183,"name":184},{"id":186,"name":187},1765616254000,["Reactive",363],{"$sisPC2":364},false,["Set"],["ShallowReactive",367],{"7tcBNj63mecCc0DjMZhkhzrD4EeNxaGiQoqbsxNV91Q":-1,"wDdEB1REj7eOVA0IINOW8By0h7e6k9_YCMGESItz9sY":-1,"glaIx14zzTwMHHGT3VRKOAAT2IWy941uSBVkEtcvnRA":-1,"1bxYCJxffYhoisMyPIbPoeuD9zHhjgQJZmCqlhbEeoc":-1,"qIlciY345ekoW5xxI7HGGLS3X9-8cAkpz62K8bBlpdM":-1},true,"/article/1966570208967573505"]</script><script>window.__NUXT__={};window.__NUXT__.config={public:{env:"prod",apiRootUrl:"https://jishuzhan.net/api"},app:{baseURL:"/",buildId:"ab5c42e1-054a-430d-b75b-67d3003b8fad",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>