当前位置：首页 > 文章列表 > 文章 > 前端 > JS获取表单值的几种方式

JS获取表单值的几种方式

2025-08-19 11:20:28 0浏览收藏

本文深入探讨了JavaScript中获取HTML表单输入值的多种方法，旨在帮助开发者更高效地处理表单数据。文章首先介绍了通过DOM操作获取表单元素`.value`属性的核心方法，并针对不同类型的表单元素（如文本框、复选框、单选按钮、下拉选择框）提供了不同的取值方案。接着，详细对比了在表单提交时和实时获取值的应用场景和实现方式，强调了事件监听的重要性。最后，文章还总结了批量获取表单数据的三种策略：手动映射、FormData API和自定义遍历，并分析了各自的优缺点和适用场景，助力开发者根据实际需求选择最佳方案，提升Web应用的用户体验和数据处理效率。

获取表单输入值的核心方法是通过DOM操作定位元素后访问其.value属性；2. 不同表单元素获取值的方式不同：文本类输入直接使用.value，复选框和单选按钮需判断.checked并获取其value，下拉框通过.value获取选中项，多选需遍历收集；3. 表单提交时获取值适合整体校验和数据提交，通过监听submit事件并阻止默认行为实现，而实时获取值通过input、change等事件实现，用于即时反馈和用户体验优化；4. 批量获取表单数据可采用手动映射、FormData API或遍历带name属性的元素，其中FormData适用于文件上传和AJAX提交，自定义遍历则更适合复杂表单的精细化数据处理，最终选择应根据表单复杂度和实际需求决定。

js怎么获取表单输入的值

在JavaScript中获取表单输入的值，最核心的办法就是通过DOM操作找到对应的表单元素，然后访问其.value属性。这听起来很简单，但不同的表单元素类型，以及在什么时机去获取这些值，里面还是有些值得聊聊的门道。

解决方案

要获取表单输入的值，我们通常会先通过document.getElementById()、document.querySelector()或document.querySelectorAll()等方法定位到具体的HTML表单元素。一旦拿到这个元素的引用，对于大多数文本类的输入（如、、、</code>等），直接访问其<code>.value</code>属性就能得到用户输入的内容。</p><p>举个最常见的例子：</p><pre class="brush:language-html;toolbar:false;"><input type="text" id="usernameInput" placeholder="请输入用户名"> <button onclick="getUserInput()">获取</button> <script> function getUserInput() { const username = document.getElementById('usernameInput').value; console.log("用户名为:", username); // 实际应用中，你可能会把这个值发送到后端，或者进行前端验证 } </script></pre><p>但表单可不仅仅是文本框那么简单，还有复选框、单选按钮、下拉选择框等等，它们获取值的方式就得稍作区分了。</p><h3>如何处理不同类型的表单元素值？</h3><p>这事儿吧，看似简单，但真要抠细节，还是有些门道的。不同的表单元素类型，它“值”的体现方式确实不一样。</p><p>对于<strong>文本输入框（<code><input type="text|number|email|password|date|url|tel"></code>）和多行文本域（<code><textarea></code>）</strong>，它们的值都直截了当地存储在<code>.value</code>属性里。这个是最没有悬念的，也是我们平时打交道最多的。比如一个密码输入框，你直接<code>passwordInput.value</code>就拿到了。</p><p><strong>复选框（<code><input type="checkbox"></code>）</strong>就有点意思了。它不像文本框那样直接有个<code>value</code>属性来表示“用户输入了什么”，而是通过<code>.checked</code>属性来判断它是否被选中，这是一个布尔值（<code>true</code>或<code>false</code>）。当然，复选框本身也有<code>value</code>属性，这个<code>value</code>是你在HTML里预设的，用来标识这个选项代表什么。比如，如果你想知道用户选择了哪些兴趣爱好，可能需要获取所有同名的复选框，然后遍历它们，只收集那些<code>.checked</code>为<code>true</code>的元素的<code>value</code>。</p><pre class="brush:language-javascript;toolbar:false;">// 假设有多个 <input type="checkbox" name="interest" value="reading"> const interests = []; document.querySelectorAll('input[name="interest"]:checked').forEach(checkbox => { interests.push(checkbox.value); }); console.log("用户选择的兴趣:", interests);</pre><p><strong>单选按钮（<code><input type="radio"></code>）</strong>和复选框类似，也是通过<code>name</code>属性关联起来的。不同的是，同一组<code>name</code>的单选按钮，一次只能选中一个。所以，获取其值的方法也是找到组内被选中的那个单选按钮，然后取它的<code>value</code>。我个人习惯用<code>querySelector</code>配合CSS选择器来直接定位：</p><pre class="brush:language-javascript;toolbar:false;">// 假设有多个 <input type="radio" name="gender" value="male"> const selectedGender = document.querySelector('input[name="gender"]:checked'); if (selectedGender) { console.log("用户选择的性别:", selectedGender.value); } else { console.log("用户未选择性别。"); }</pre><p><strong>下拉选择框（<code><select></code>）</strong>获取值也相对直接。单选的下拉框，直接访问<code><select></code>元素的<code>.value</code>属性就能拿到当前选中<code><option></code>的<code>value</code>值。如果你想获取选中项的显示文本，那得稍微绕一下，通过<code>selectElement.options[selectElement.selectedIndex].text</code>。如果是多选的下拉框（<code><select multiple></code>），那就需要遍历其所有的<code><option></code>子元素，检查每个<code><option></code>的<code>.selected</code>属性是否为<code>true</code>，然后收集它们的<code>value</code>。</p><pre class="brush:language-javascript;toolbar:false;">// 单选下拉框 const citySelect = document.getElementById('citySelect'); console.log("选择的城市ID:", citySelect.value); console.log("选择的城市名称:", citySelect.options[citySelect.selectedIndex].text); // 多选下拉框 const selectedFruits = []; document.querySelectorAll('#fruitSelect option:checked').forEach(option => { selectedFruits.push(option.value); }); console.log("选择的水果:", selectedFruits);</pre><p>你看，虽然都是获取“值”，但根据元素类型的不同，方法上还是有些细微的差别的。这需要我们在实际开发中多留意，避免出现一些意料之外的错误。</p><h3>在表单提交时获取值与实时获取值的区别与应用场景？</h3><p>获取表单值，时机选择是个关键。这就像你给朋友发信息，是等他把话说完再总结，还是边听边记，实时反馈。两种方式各有各的用处。</p><p><strong>表单提交时获取值</strong>，这是最传统、最常见的做法。通常我们会监听<code><form></code>元素的<code>submit</code>事件。当用户点击提交按钮时，这个事件会被触发。在事件处理函数里，我们会调用<code>event.preventDefault()</code>来阻止表单的默认提交行为（比如页面刷新），然后在这个函数内部集中获取所有表单元素的值。</p><pre class="brush:language-javascript;toolbar:false;">const myForm = document.getElementById('myForm'); myForm.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 const username = document.getElementById('usernameInput').value; const email = document.getElementById('emailInput').value; // ... 获取所有其他字段的值 console.log("提交时获取的数据:", { username, email }); // 可以在这里进行最终验证，然后通过 AJAX 发送数据 });</pre><p>这种方式的优点是<strong>集中处理</strong>，适合在数据需要整体校验、打包发送到后端时使用。比如注册、登录、订单提交这类场景，你肯定希望所有数据都填好、校验无误了再一起处理。我个人觉得，对于涉及到后端交互的表单，这种模式是必不可少的。</p><p><strong>实时获取值</strong>，则是在用户输入或选择的过程中，即时地获取表单元素的值。这通常通过监听<code>input</code>、<code>change</code>、<code>keyup</code>等事件来实现。</p><ul><li><code>input</code>事件：适用于文本输入框，只要内容发生变化就会触发。非常适合做字符计数、即时搜索过滤、密码强度提示等。</li><li><code>change</code>事件：适用于<code><select></code>、<code><input type="checkbox"></code>、<code><input type="radio"></code>等，当元素的值发生改变并且失去焦点时（或对于选择框、复选框、单选框，值改变即触发）触发。</li><li><code>keyup</code>事件：当用户松开键盘按键时触发，也可以用于实时获取文本框内容，但<code>input</code>事件通常更推荐，因为它能捕获所有输入方式（如粘贴）。</li></ul><pre class="brush:language-javascript;toolbar:false;">const liveInput = document.getElementById('liveInput'); liveInput.addEventListener('input', function() { console.log("实时输入内容:", this.value); // 比如：实时显示输入字符数 document.getElementById('charCount').textContent = this.value.length; });</pre><p>实时获取的优点在于<strong>即时反馈</strong>和<strong>增强用户体验</strong>。它能让用户在填写过程中就得到提示，减少错误，提高效率。比如，一个注册页面，你可能希望用户输入用户名后立刻检查是否已被占用，或者输入密码时实时显示密码强度。虽然这些功能看起来很小，但累积起来对用户感受影响很大。</p><p>实际项目中，这两种方式往往是结合使用的。实时获取用于前端的即时校验和UI反馈，而提交时获取则用于最终的业务逻辑处理和数据发送。</p><h3>批量获取表单数据：构建一个数据对象？</h3><p>当表单字段不多时，一个个<code>getElementById().value</code>确实没什么问题。但想象一下，一个有几十个字段的复杂表单，你还一个个去取值，那代码会变得又臭又长，维护起来简直是噩梦。这时候，把所有表单数据组织成一个JavaScript对象，就显得尤为重要了。这不仅让数据结构更清晰，也方便后续的传输（比如通过AJAX发送给后端）。</p><p>这里有几种常见的做法，每种都有它的适用场景。</p><p><strong>1. 手动映射（适用于小型或结构简单的表单）</strong></p><p>这是最直接的方式，你依然通过ID或name获取每个元素，然后手动地把它们的值赋给一个预定义的对象属性。</p><pre class="brush:language-javascript;toolbar:false;">function getFormDataManually() { const data = { username: document.getElementById('usernameInput').value, email: document.getElementById('emailInput').value, age: parseInt(document.getElementById('ageInput').value) || 0, // 注意类型转换 newsletter: document.getElementById('newsletterCheckbox').checked }; return data; }</pre><p>这种方式的好处是<strong>直观、可控</strong>，你可以精确地控制每个字段的键名和值的类型（比如把字符串转成数字）。但缺点是<strong>重复性高</strong>，一旦表单字段增多，代码量会迅速膨胀，而且容易出错。</p><p><strong>2. 利用<code>FormData</code> API（现代Web开发推荐，尤其适合AJAX提交）</strong></p><p><code>FormData</code>是一个非常强大的Web API，专门为处理表单数据而生。它可以直接从<code><form></code>元素构建数据，而且会自动处理各种输入类型，包括文件上传。这是我个人在做AJAX提交时最喜欢用的方式。</p><pre class="brush:language-javascript;toolbar:false;">function getFormDataWithFormDataAPI() { const form = document.getElementById('myForm'); // 获取 <form> 元素本身 const formData = new FormData(form); // FormData 对象可以直接用于 XMLHttpRequest 或 fetch API 发送 // 但如果想转换成普通JS对象，需要手动遍历 const data = {}; for (let [key, value] of formData.entries()) { // 对于多选的复选框或多选下拉框，FormData会把所有值都取出来， // 但如果name相同，它默认只保留最后一个，需要特殊处理 // 或者手动检查并转换为数组 if (data[key] !== undefined) { if (!Array.isArray(data[key])) { data[key] = [data[key]]; } data[key].push(value); } else { data[key] = value; } } return data; }</pre><p><code>FormData</code>的优点是<strong>自动化程度高</strong>，尤其在处理文件上传时非常方便，它能直接构建出<code>multipart/form-data</code>格式的数据。缺点是，它默认不会处理同名多选（如多个复选框）为数组，需要额外的逻辑来转换。不过，对于大部分后端API，直接发送<code>FormData</code>对象通常就能很好地工作。</p><p><strong>3. 遍历带有<code>name</code>属性的元素（灵活且可定制）</strong></p><p>这种方式介于手动映射和<code>FormData</code>之间，它利用了<code>name</code>属性来作为对象键，通过遍历表单内的所有输入元素来动态构建数据对象。这种方式给予了我们很大的控制权，可以根据元素的类型进行不同的处理。</p><pre class="brush:language-javascript;toolbar:false;">function getFormDataDynamic() { const form = document.getElementById('myForm'); const data = {}; // 找到所有带有 name 属性的表单元素 const formElements = form.querySelectorAll('input, select, textarea'); formElements.forEach(element => { if (!element.name) return; // 确保元素有 name 属性 if (element.type === 'checkbox') { // 复选框：如果name相同，收集到数组中 if (element.checked) { if (!data[element.name]) { data[element.name] = []; } data[element.name].push(element.value); } } else if (element.type === 'radio') { // 单选按钮：只取选中的那个 if (element.checked) { data[element.name] = element.value; } } else if (element.tagName === 'SELECT' && element.multiple) { // 多选下拉框 data[element.name] = Array.from(element.options) .filter(option => option.selected) .map(option => option.value); } else { // 其他类型（text, number, email, textarea, select单选等） data[element.name] = element.value; } }); return data; }</pre><p>这种方式的优点是<strong>高度灵活和可定制</strong>，你可以根据自己的需求精确地处理每种类型的输入，包括将同名复选框或多选下拉框的值自动收集到数组中。我个人在遇到比较复杂的表单时，经常会采用这种自定义遍历的方式，因为它能更好地满足各种数据结构的需求，避免了<code>FormData</code>在某些特定场景下的局限性，同时又比完全手动编写要高效得多。</p><p>选择哪种方式，最终还是取决于你的具体需求和表单的复杂程度。小表单手动映射无妨，需要发送到后端且有文件上传就考虑<code>FormData</code>，而当表单结构复杂，需要精细控制数据格式时，自定义遍历往往是最好的选择。</p><p>本篇关于《JS获取表单值的几种方式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/290292.html" title="JavaScript的BigInt类型是什么？怎么用？" class="img_box"> <img src="/uploads/20250819/175557356868a3ed4027969.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript的BigInt类型是什么？怎么用？">JavaScript的BigInt类型是什么？怎么用？ </a> <dl> <dt class="lineOverflow"><a href="/article/290292.html" title="JavaScript的BigInt类型是什么？怎么用？" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">JavaScript的BigInt类型是什么？怎么用？</dd> </dl> </div> <div class="cateItem"> <a href="/article/290294.html" title="代码可读性：简洁清晰的编程技巧" class="img_box"> <img src="/uploads/20250819/175557368868a3edb887c35.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="代码可读性：简洁清晰的编程技巧"> </a> <dl> <dt class="lineOverflow"><a href="/article/290294.html" class="aBlack" title="代码可读性：简洁清晰的编程技巧">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">代码可读性：简洁清晰的编程技巧</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/620112.html" class="img_box" title="前端发布后白屏复盘：Service Worker 缓存旧入口导致 JS 资源 404"> <img src="/uploads/20260630/1782799139-sw-old-entry-404-path.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端发布后白屏复盘：Service Worker 缓存旧入口导致 JS 资源 404"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/322_new_0_1.html" class="aLightGray" title="缓存">缓存</a> · <a href="/articletag/14884_new_0_1.html" class="aLightGray" title="Service Worker">Service Worker</a> · <a href="/articletag/40077_new_0_1.html" class="aLightGray" title="白屏">白屏</a> · <a href="/articletag/40078_new_0_1.html" class="aLightGray" title="发布故障">发布故障</a> · <a href="javascript:;" class="aLightGray" title="缓存策略">缓存策略</a> <a href="javascript:;" class="aLightGray" title="前端白屏">前端白屏</a> <a href="javascript:;" class="aLightGray" title="Service Worker">Service Worker</a> <a href="javascript:;" class="aLightGray" title="CacheStorage">CacheStorage</a> <a href="javascript:;" class="aLightGray" title="资源404">资源404</a> <a href="javascript:;" class="aLightGray" title="发布回滚">发布回滚</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620112.html" class="aBlack" target="_blank" title="前端发布后白屏复盘：Service Worker 缓存旧入口导致 JS 资源 404">前端发布后白屏复盘：Service Worker 缓存旧入口导致 JS 资源 404</a> </dt> <dd class="cont2"> <span><i class="view"></i>469浏览</span> <span class="collectBtn user_collection" data-id="620112" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620092.html" class="img_box" title="前端批量导出接口怎么设计：异步任务、状态查询和下载链接"> <img src="/uploads/20260629/1782718967-export-api-error-panel.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端批量导出接口怎么设计：异步任务、状态查询和下载链接"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/2436_new_0_1.html" class="aLightGray" title="异步任务">异步任务</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/39770_new_0_1.html" class="aLightGray" title="接口设计">接口设计</a> · <a href="/articletag/40045_new_0_1.html" class="aLightGray" title="后台系统">后台系统</a> · <a href="/articletag/40046_new_0_1.html" class="aLightGray" title="批量导出">批量导出</a> · <a href="javascript:;" class="aLightGray" title="异步任务">异步任务</a> <a href="javascript:;" class="aLightGray" title="文件下载">文件下载</a> <a href="javascript:;" class="aLightGray" title="接口设计">接口设计</a> <a href="javascript:;" class="aLightGray" title="前端导出">前端导出</a> <a href="javascript:;" class="aLightGray" title="状态查询">状态查询</a> <a href="javascript:;" class="aLightGray" title="报表导出">报表导出</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620092.html" class="aBlack" target="_blank" title="前端批量导出接口怎么设计：异步任务、状态查询和下载链接">前端批量导出接口怎么设计：异步任务、状态查询和下载链接</a> </dt> <dd class="cont2"> <span><i class="view"></i>296浏览</span> <span class="collectBtn user_collection" data-id="620092" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620091.html" class="img_box" title="前端表格列设置刷新后丢失怎么办：可见列、列宽和顺序这样保存"> <img src="/uploads/20260629/1782717813-frontend-table-columns-lifecycle.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端表格列设置刷新后丢失怎么办：可见列、列宽和顺序这样保存"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/39813_new_0_1.html" class="aLightGray" title="localStorage">localStorage</a> · <a href="/articletag/40043_new_0_1.html" class="aLightGray" title="表格配置">表格配置</a> · <a href="/articletag/40044_new_0_1.html" class="aLightGray" title="用户偏好">用户偏好</a> · <a href="/articletag/40045_new_0_1.html" class="aLightGray" title="后台系统">后台系统</a> · <a href="javascript:;" class="aLightGray" title="用户偏好">用户偏好</a> <a href="javascript:;" class="aLightGray" title="localStorage">localStorage</a> <a href="javascript:;" class="aLightGray" title="前端表格">前端表格</a> <a href="javascript:;" class="aLightGray" title="列配置">列配置</a> <a href="javascript:;" class="aLightGray" title="可见列">可见列</a> <a href="javascript:;" class="aLightGray" title="列宽保存">列宽保存</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620091.html" class="aBlack" target="_blank" title="前端表格列设置刷新后丢失怎么办：可见列、列宽和顺序这样保存">前端表格列设置刷新后丢失怎么办：可见列、列宽和顺序这样保存</a> </dt> <dd class="cont2"> <span><i class="view"></i>351浏览</span> <span class="collectBtn user_collection" data-id="620091" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620087.html" class="img_box" title="前端实时通知方案选型：短轮询、SSE、WebSocket 怎么选"> <img src="/uploads/20260629/1782712475-frontend-notify-choice-timeline.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端实时通知方案选型：短轮询、SSE、WebSocket 怎么选"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/1017_new_0_1.html" class="aLightGray" title="websocket">websocket</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="/articletag/27659_new_0_1.html" class="aLightGray" title="sse">sse</a> · <a href="/articletag/40036_new_0_1.html" class="aLightGray" title="实时通知">实时通知</a> · <a href="/articletag/40037_new_0_1.html" class="aLightGray" title="方案选型">方案选型</a> · <a href="javascript:;" class="aLightGray" title="websocket">websocket</a> <a href="javascript:;" class="aLightGray" title="消息推送">消息推送</a> <a href="javascript:;" class="aLightGray" title="EventSource">EventSource</a> <a href="javascript:;" class="aLightGray" title="SSE">SSE</a> <a href="javascript:;" class="aLightGray" title="前端实时通知">前端实时通知</a> <a href="javascript:;" class="aLightGray" title="短轮询">短轮询</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620087.html" class="aBlack" target="_blank" title="前端实时通知方案选型：短轮询、SSE、WebSocket 怎么选">前端实时通知方案选型：短轮询、SSE、WebSocket 怎么选</a> </dt> <dd class="cont2"> <span><i class="view"></i>498浏览</span> <span class="collectBtn user_collection" data-id="620087" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620079.html" class="img_box" title="前端接口超时告警运行手册：从瀑布图到降级回滚"> <img src="/uploads/20260629/1782702426-frontend-api-timeout-alert-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端接口超时告警运行手册：从瀑布图到降级回滚"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/40002_new_0_1.html" class="aLightGray" title="接口排查">接口排查</a> · <a href="/articletag/40021_new_0_1.html" class="aLightGray" title="运维手册">运维手册</a> · <a href="/articletag/40024_new_0_1.html" class="aLightGray" title="性能告警">性能告警</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="接口超时">接口超时</a> <a href="javascript:;" class="aLightGray" title="Network瀑布图">Network瀑布图</a> <a href="javascript:;" class="aLightGray" title="降级回滚">降级回滚</a> <a href="javascript:;" class="aLightGray" title="线上告警">线上告警</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620079.html" class="aBlack" target="_blank" title="前端接口超时告警运行手册：从瀑布图到降级回滚">前端接口超时告警运行手册：从瀑布图到降级回滚</a> </dt> <dd class="cont2"> <span><i class="view"></i>287浏览</span> <span class="collectBtn user_collection" data-id="620079" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620076.html" class="img_box" title="CSS sticky 不生效排查清单：从 top、overflow 到滚动容器逐层定位"> <img src="/uploads/20260629/1782698249-css-sticky-failure-check.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS sticky 不生效排查清单：从 top、overflow 到滚动容器逐层定位"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/9935_new_0_1.html" class="aLightGray" title="sticky">sticky</a> · <a href="/articletag/40022_new_0_1.html" class="aLightGray" title="布局调试">布局调试</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="Overflow">Overflow</a> <a href="javascript:;" class="aLightGray" title="position sticky">position sticky</a> <a href="javascript:;" class="aLightGray" title="滚动容器">滚动容器</a> <a href="javascript:;" class="aLightGray" title="前端调试">前端调试</a> <a href="javascript:;" class="aLightGray" title="吸顶布局">吸顶布局</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620076.html" class="aBlack" target="_blank" title="CSS sticky 不生效排查清单：从 top、overflow 到滚动容器逐层定位">CSS sticky 不生效排查清单：从 top、overflow 到滚动容器逐层定位</a> </dt> <dd class="cont2"> <span><i class="view"></i>179浏览</span> <span class="collectBtn user_collection" data-id="620076" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620069.html" class="img_box" title="前端静态资源上云部署选型：对象存储、CDN 和容器服务怎么选"> <img src="/uploads/20260627/1782572123-frontend-static-cache-architecture.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端静态资源上云部署选型：对象存储、CDN 和容器服务怎么选"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/652_new_0_1.html" class="aLightGray" title="静态资源">静态资源</a> · <a href="/articletag/5322_new_0_1.html" class="aLightGray" title="cdn">cdn</a> · <a href="/articletag/40011_new_0_1.html" class="aLightGray" title="云部署">云部署</a> · <a href="javascript:;" class="aLightGray" title="对象存储">对象存储</a> <a href="javascript:;" class="aLightGray" title="静态资源">静态资源</a> <a href="javascript:;" class="aLightGray" title="缓存策略">缓存策略</a> <a href="javascript:;" class="aLightGray" title="cdn">cdn</a> <a href="javascript:;" class="aLightGray" title="前端部署">前端部署</a> <a href="javascript:;" class="aLightGray" title="容器服务">容器服务</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620069.html" class="aBlack" target="_blank" title="前端静态资源上云部署选型：对象存储、CDN 和容器服务怎么选">前端静态资源上云部署选型：对象存储、CDN 和容器服务怎么选</a> </dt> <dd class="cont2"> <span><i class="view"></i>433浏览</span> <span class="collectBtn user_collection" data-id="620069" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620045.html" class="img_box" title="前端表单重复提交防护工作流：从按钮状态到请求取消和幂等键"> <img src="/uploads/20260622/1782110788-frontend-idempotent-key-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端表单重复提交防护工作流：从按钮状态到请求取消和幂等键"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/39982_new_0_1.html" class="aLightGray" title="接口联调">接口联调</a> · <a href="/articletag/39989_new_0_1.html" class="aLightGray" title="表单交互">表单交互</a> · <a href="/articletag/39990_new_0_1.html" class="aLightGray" title="重复提交">重复提交</a> · <a href="/articletag/39991_new_0_1.html" class="aLightGray" title="用户体验">用户体验</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="表单提交">表单提交</a> <a href="javascript:;" class="aLightGray" title="重复请求">重复请求</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="幂等键">幂等键</a> <a href="javascript:;" class="aLightGray" title="按钮禁用">按钮禁用</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620045.html" class="aBlack" target="_blank" title="前端表单重复提交防护工作流：从按钮状态到请求取消和幂等键">前端表单重复提交防护工作流：从按钮状态到请求取消和幂等键</a> </dt> <dd class="cont2"> <span><i class="view"></i>374浏览</span> <span class="collectBtn user_collection" data-id="620045" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620039.html" class="img_box" title="前端 CORS 预检失败排查流程：从请求头到网关响应"> <img src="/uploads/20260618/1781767364-frontend-cors-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 CORS 预检失败排查流程：从请求头到网关响应"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4720_new_0_1.html" class="aLightGray" title="cors">cors</a> · <a href="/articletag/39980_new_0_1.html" class="aLightGray" title="跨域排查">跨域排查</a> · <a href="/articletag/39981_new_0_1.html" class="aLightGray" title="浏览器网络">浏览器网络</a> · <a href="/articletag/39982_new_0_1.html" class="aLightGray" title="接口联调">接口联调</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="cors">cors</a> <a href="javascript:;" class="aLightGray" title="请求头">请求头</a> <a href="javascript:;" class="aLightGray" title="跨域">跨域</a> <a href="javascript:;" class="aLightGray" title="预检请求">预检请求</a> <a href="javascript:;" class="aLightGray" title="Options">Options</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620039.html" class="aBlack" target="_blank" title="前端 CORS 预检失败排查流程：从请求头到网关响应">前端 CORS 预检失败排查流程：从请求头到网关响应</a> </dt> <dd class="cont2"> <span><i class="view"></i>422浏览</span> <span class="collectBtn user_collection" data-id="620039" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620035.html" class="img_box" title="前端 position sticky 不生效排查：从滚动容器到 overflow 限制"> <img src="/uploads/20260618/1781761300-frontend-sticky-check-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 position sticky 不生效排查：从滚动容器到 overflow 限制"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/9935_new_0_1.html" class="aLightGray" title="sticky">sticky</a> · <a href="/articletag/39972_new_0_1.html" class="aLightGray" title="布局排查">布局排查</a> · <a href="/articletag/39973_new_0_1.html" class="aLightGray" title="滚动容器">滚动容器</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="Overflow">Overflow</a> <a href="javascript:;" class="aLightGray" title="position sticky">position sticky</a> <a href="javascript:;" class="aLightGray" title="滚动容器">滚动容器</a> <a href="javascript:;" class="aLightGray" title="吸顶失效">吸顶失效</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620035.html" class="aBlack" target="_blank" title="前端 position sticky 不生效排查：从滚动容器到 overflow 限制">前端 position sticky 不生效排查：从滚动容器到 overflow 限制</a> </dt> <dd class="cont2"> <span><i class="view"></i>449浏览</span> <span class="collectBtn user_collection" data-id="620035" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620015.html" class="img_box" title="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程"> <img src="/uploads/20260617/1781673768-frontend-image-lazyload-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/39948_new_0_1.html" class="aLightGray" title="图片加载">图片加载</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="图片懒加载">图片懒加载</a> <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> <a href="javascript:;" class="aLightGray" title="LCP">LCP</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620015.html" class="aBlack" target="_blank" title="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程">前端图片懒加载实战：首屏 LCP 与滚动加载完整流程</a> </dt> <dd class="cont2"> <span><i class="view"></i>105浏览</span> <span class="collectBtn user_collection" data-id="620015" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620013.html" class="img_box" title="前端表单联动校验失效排查：旧状态、重复提交和提交锁"> <img src="/uploads/20260617/1781671884-frontend-form-bug-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端表单联动校验失效排查：旧状态、重复提交和提交锁"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/39947_new_0_1.html" class="aLightGray" title="表单校验">表单校验</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="表单校验">表单校验</a> <a href="javascript:;" class="aLightGray" title="重复提交">重复提交</a> <a href="javascript:;" class="aLightGray" title="提交锁">提交锁</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620013.html" class="aBlack" target="_blank" title="前端表单联动校验失效排查：旧状态、重复提交和提交锁">前端表单联动校验失效排查：旧状态、重复提交和提交锁</a> </dt> <dd class="cont2"> <span><i class="view"></i>285浏览</span> <span class="collectBtn user_collection" data-id="620013" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13109.html" target="_blank" title="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" class="img_box"> <img src="/uploads/ai/20260616/ljg-skills-icon-8bbe1468e5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13109.html" class="aBlack" target="_blank" title="ljg-skills">ljg-skills</a></dt> <dd class="cont1 lineTwoOverflow"> ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。 </dd> <dd class="cont2">2998次使用</dd> </dl> </li> <li> <a href="/ai/13108.html" target="_blank" title="MELO音乐 - AI 音乐生成平台，支持多模态创作能力" class="img_box"> <img src="/uploads/ai/20260616/melo-icon-10bf590762.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MELO音乐 - AI 音乐生成平台，支持多模态创作能力" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13108.html" class="aBlack" target="_blank" title="MELO音乐">MELO音乐</a></dt> <dd class="cont1 lineTwoOverflow"> MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！ </dd> <dd class="cont2">2768次使用</dd> </dl> </li> <li> <a href="/ai/13107.html" target="_blank" title="UniScribe - AI 免费在线音视频转文字平台" class="img_box"> <img src="/uploads/ai/20260616/uniscribe-icon-3c88366a15.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="UniScribe - AI 免费在线音视频转文字平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13107.html" class="aBlack" target="_blank" title="UniScribe">UniScribe</a></dt> <dd class="cont1 lineTwoOverflow"> UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。 </dd> <dd class="cont2">2706次使用</dd> </dl> </li> <li> <a href="/ai/13106.html" target="_blank" title="剧云 - 免费 AI 智能中文剧本创作平台" class="img_box"> <img src="/uploads/ai/20260615/d36c7176-icon-2b0cd581ce.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="剧云 - 免费 AI 智能中文剧本创作平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13106.html" class="aBlack" target="_blank" title="剧云">剧云</a></dt> <dd class="cont1 lineTwoOverflow"> 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。 </dd> <dd class="cont2">2935次使用</dd> </dl> </li> <li> <a href="/ai/13105.html" target="_blank" title="万象有声 - AI 一站式有声内容创作平台" class="img_box"> <img src="/uploads/ai/20260615/50267bac-icon-c146b001b5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="万象有声 - AI 一站式有声内容创作平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13105.html" class="aBlack" target="_blank" title="万象有声">万象有声</a></dt> <dd class="cont1 lineTwoOverflow"> 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！ </dd> <dd class="cont2">2882次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/611774.html" class="aBlack" title="data-*属性详解：HTML数据存储与DOM操作技巧">data-*属性详解：HTML数据存储与DOM操作技巧</a></dt> <dd> <span class="left">2026-05-25</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//17golang.com/article/290293.html"/> <input type="hidden" name="__token__" value="40383c9121d78450b6bed1f153843a7f" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//17golang.com/article/290293.html"/> <input type="hidden" name="__token__" value="40383c9121d78450b6bed1f153843a7f" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; hm.async = true; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/frontend/common.js"></script> </body> </html>