首页 > 文章 > 前端

JavaScript实现复制到剪贴板功能在JavaScript中，实现复制文本到剪贴板的功能可以通过两种主要方法实现：一种是使用document.execCommand('copy')方法，另一种是使用现代的navigator.clipboardAPI。以下是这两种方法的详细实现和使用说明。使用document.execCommand('copy')这种方法通过创建一个临时的textarea元素来

时间：2025-05-02 12:38:54 292浏览收藏

在JavaScript中实现复制到剪贴板功能可以通过两种主要方法实现：使用现代的navigator.clipboard API或备用的document.execCommand('copy')方法。navigator.clipboard.writeText()方法在HTTPS环境下提供了一种简便且安全的复制文本到剪贴板的方式，而备用方法则通过创建临时textarea元素并执行复制命令，适用于兼容性需求更高的场景。无论选择哪种方法，实现这一功能时需考虑用户体验、权限问题、性能优化以及安全性等方面，以确保在实际应用中能够高效且用户友好地完成复制操作。

在JavaScript中实现复制到剪贴板功能可以使用navigator.clipboard API或备用方法。1) 使用navigator.clipboard.writeText()方法进行复制，需在HTTPS环境下使用。2) 备用方法通过创建临时元素并使用document.execCommand('copy')实现。</p><p><img src="/uploads/20250502/174616068768144c2f406c0.jpg" alt="怎样在JavaScript中实现复制到剪贴板？"></p><p>在JavaScript中实现复制到剪贴板功能是非常实用的技能，特别是在需要快速分享文本或数据的时候。让我们来探讨一下如何实现这个功能，以及在实际应用中可能遇到的一些挑战和优化方法。</p><h3>实现复制到剪贴板功能</h3><p>要在JavaScript中实现复制到剪贴板，现代浏览器提供了一个非常简便的方法：<code>navigator.clipboard</code> API。这个API允许我们直接与浏览器的剪贴板进行交互。以下是一个简单的示例代码：</p><pre class="brush:javascript;toolbar:false;">async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); console.log('Text copied to clipboard'); } catch (err) { console.error('Failed to copy text: ', err); } } // 使用示例 copyToClipboard('Hello, World!');</pre><p>这个代码片段展示了如何使用<code>navigator.clipboard.writeText()</code>方法将文本复制到剪贴板。它是一个异步操作，因此我们使用<code>async/await</code>来处理。</p><h3>兼容性和安全性考虑</h3><p>虽然<code>navigator.clipboard</code> API非常方便，但它并不是在所有浏览器中都支持，特别是旧版本的浏览器。为了提高兼容性，我们可以使用一个备用的方法，即创建一个临时的<code><textarea></code>元素，并使用<code>document.execCommand('copy')</code>来复制内容。以下是一个兼容性更强的实现：</p><pre class="brush:javascript;toolbar:false;">function copyToClipboardFallback(text) { const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { document.execCommand('copy'); console.log('Text copied to clipboard'); } catch (err) { console.error('Failed to copy text: ', err); } finally { document.body.removeChild(textArea); } } function copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { return navigator.clipboard.writeText(text); } else { return copyToClipboardFallback(text); } } // 使用示例 copyToClipboard('Hello, World!');</pre><p>这个方法首先检查是否支持<code>navigator.clipboard</code>，如果不支持，则使用备用方法。注意，这里还检查了<code>window.isSecureContext</code>，因为在非安全上下文（如HTTP而不是HTTPS）中，<code>navigator.clipboard</code> API可能无法使用。</p><h3>实际应用中的挑战和优化</h3><p>在实际应用中，使用复制到剪贴板功能时可能会遇到一些挑战和需要优化的点：</p><ol><li><strong>用户体验</strong>：用户可能希望在复制后得到一些反馈。可以添加一个通知或更改UI来告知用户复制操作已完成。例如：</li></ol><pre class="brush:javascript;toolbar:false;">function copyToClipboardWithFeedback(text) { copyToClipboard(text).then(() => { // 显示一个通知 const notification = document.createElement('div'); notification.textContent = 'Copied to clipboard!'; notification.style.position = 'fixed'; notification.style.bottom = '20px'; notification.style.right = '20px'; notification.style.backgroundColor = '#4CAF50'; notification.style.color = 'white'; notification.style.padding = '10px'; notification.style.borderRadius = '5px'; document.body.appendChild(notification); // 3秒后移除通知 setTimeout(() => { document.body.removeChild(notification); }, 3000); }); } // 使用示例 copyToClipboardWithFeedback('Hello, World!');</pre><ol start="2"><li><p><strong>权限问题</strong>：在某些情况下，浏览器可能会要求用户授予权限才能访问剪贴板。需要在用户界面中告知用户如何授予权限。</p></li><li><p><strong>性能优化</strong>：如果需要频繁地进行复制操作，确保操作是高效的。避免不必要的DOM操作，特别是在备用方法中。</p></li><li><p><strong>安全性</strong>：在处理敏感数据时，要确保数据不会在不安全的上下文中被复制。始终使用HTTPS来确保数据传输的安全性。</p></li></ol><h3>总结</h3><p>实现复制到剪贴板功能在JavaScript中并不复杂，但要确保兼容性和用户体验，需要考虑更多细节。在实际项目中，根据具体需求和环境，可以选择不同的实现方法。通过上述代码和建议，希望你能在自己的项目中灵活应用并优化这一功能。</p><p>本篇关于《JavaScript实现复制到剪贴板功能在JavaScript中，实现复制文本到剪贴板的功能可以通过两种主要方法实现：一种是使用document.execCommand('copy')方法，另一种是使用现代的navigator.clipboardAPI。以下是这两种方法的详细实现和使用说明。使用document.execCommand('copy')这种方法通过创建一个临时的textarea元素来实现复制功能。具体代码如下：functioncopyToClipboard(text){//创建一个临时的textarea元素consttextarea=document.createElement('textarea');textarea.value=text;//将textarea添加到body中document.body.appendChild(textarea);//选择textarea中的文本textarea.select();//执行复制命令document.execCommand('copy');//从body中移除textareadocument.body.removeChild(textarea);console.log('已复制到剪贴板:',text);}//使用示例copyToClipboard('你想复制的文本');这个方法通过创建一个临时textarea元素，将要复制的文本放入其中，然后使用document.execCommand('copy')命令来执行复制操作。完成后，临时元素会被移除。这个方法在现代浏览器中通常有效，但需要注意的是，document.execCommand已被标记为过时，未来可能会被移除。使用navigator.clipboardAPI对于更现代和可靠的解决方案，可以考虑使用navigator.clipboardAPI。具体代码如下：asyncfunctioncopyToClipboardModern(text){try{awaitnavigator.clipboard.writeText(text);console.log('已复制到剪贴板:',text);}catch(err){console.error('无法复制到剪贴板:',err);}}//使用示例copyToClipboardModern('你想复制的文本');这个方法使用了navigator.clipboard.writeText方法，是一种更现代和安全的方法来访问剪贴板。不过，它需要HTTPS环境或本地开发环境（localhost）才能工作。通过以上两种方法，你可以根据实际需求选择适合的实现方式来实现JavaScript中的复制到剪贴板功能。》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！</p> </div> <div class="labsList"> <a href="javascript:;" class="aLightGray" title="HTTPS">HTTPS</a> <a href="javascript:;" class="aLightGray" title="兼容性">兼容性</a> <a href="javascript:;" class="aLightGray" title="用户体验">用户体验</a> <a href="javascript:;" class="aLightGray" title="navigator.clipboard">navigator.clipboard</a> <a href="javascript:;" class="aLightGray" title="document.execCommand">document.execCommand</a> </div> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.html" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a> <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="团队合作">团队合作</a> <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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年前 | </div> <div class="tit lineOverflow"><a href="/article/91359.html" title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="91359" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="hasOwnProperty">hasOwnProperty</a> <a href="javascript:;" class="aLightGray" title="in操作符">in操作符</a> <a href="javascript:;" class="aLightGray" title="直接访问属性">直接访问属性</a> </div> <div class="tit lineOverflow"><a href="/article/203834.html" title="用JavaScript检查对象是否包含某属性最简单的方法是使用in运算符：constobj={name:'John',age:30};if('name'inobj){console.log('对象包含name属性');}else{console.log('对象不包含name属性');}这种方法简单且高效，适用于大多数场景。" class="aBlack">用JavaScript检查对象是否包含某属性最简单的方法是使用in运算符：constobj={name:'John',age:30};if('name'inobj){console.log('对象包含name属性');}else{console.log('对象不包含name属性');}这种方法简单且高效，适用于大多数场景。</a></div> <div class="opt"> <span><i class="view"></i>389</span> <span class="collectBtn user_collection" data-id="203834" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 11分钟前 | <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="navigator.clipboard">navigator.clipboard</a> <a href="javascript:;" class="aLightGray" title="document.execCommand('copy')">document.execCommand('copy')</a> </div> <div class="tit lineOverflow"><a href="/article/203829.html" title="JavaScript复制到剪贴板的终极攻略" class="aBlack">JavaScript复制到剪贴板的终极攻略</a></div> <div class="opt"> <span><i class="view"></i>347</span> <span class="collectBtn user_collection" data-id="203829" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 13分钟前 | <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> </div> <div class="tit lineOverflow"><a href="/article/203828.html" title="JavaScript正则表达式创建方法与技巧" class="aBlack">JavaScript正则表达式创建方法与技巧</a></div> <div class="opt"> <span><i class="view"></i>423</span> <span class="collectBtn user_collection" data-id="203828" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 17分钟前 | </div> <div class="tit lineOverflow"><a href="/article/203825.html" title="requestAnimationFrame在JavaScript中的使用技巧" class="aBlack">requestAnimationFrame在JavaScript中的使用技巧</a></div> <div class="opt"> <span><i class="view"></i>326</span> <span class="collectBtn user_collection" data-id="203825" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 26分钟前 | <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="ES6类语法">ES6类语法</a> </div> <div class="tit lineOverflow"><a href="/article/203822.html" title="JavaScript单例模式创建攻略" class="aBlack">JavaScript单例模式创建攻略</a></div> <div class="opt"> <span><i class="view"></i>318</span> <span class="collectBtn user_collection" data-id="203822" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 36分钟前 | </div> <div class="tit lineOverflow"><a href="/article/203817.html" title="Object.getPrototypeOf在JS中的用法与示例" class="aBlack">Object.getPrototypeOf在JS中的用法与示例</a></div> <div class="opt"> <span><i class="view"></i>384</span> <span class="collectBtn user_collection" data-id="203817" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 37分钟前 | <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="DOM引用">DOM引用</a> </div> <div class="tit lineOverflow"><a href="/article/203816.html" title="JavaScript如何防止内存泄漏？" class="aBlack">JavaScript如何防止内存泄漏？</a></div> <div class="opt"> <span><i class="view"></i>273</span> <span class="collectBtn user_collection" data-id="203816" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 47分钟前 | </div> <div class="tit lineOverflow"><a href="/article/203810.html" title="Vue.js异步操作处理技巧与实战应用" class="aBlack">Vue.js异步操作处理技巧与实战应用</a></div> <div class="opt"> <span><i class="view"></i>384</span> <span class="collectBtn user_collection" data-id="203810" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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小时前 | </div> <div class="tit lineOverflow"><a href="/article/203805.html" title="Bootstrap4多项目轮播实现攻略" class="aBlack">Bootstrap4多项目轮播实现攻略</a></div> <div class="opt"> <span><i class="view"></i>353</span> <span class="collectBtn user_collection" data-id="203805" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="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="UTC">UTC</a> <a href="javascript:;" class="aLightGray" title="夏令时">夏令时</a> </div> <div class="tit lineOverflow"><a href="/article/203796.html" title="JavaScript时区处理技巧与实战经验" class="aBlack">JavaScript时区处理技巧与实战经验</a></div> <div class="opt"> <span><i class="view"></i>184</span> <span class="collectBtn user_collection" data-id="203796" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="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="this绑定">this绑定</a> <a href="javascript:;" class="aLightGray" title="语法灵活">语法灵活</a> </div> <div class="tit lineOverflow"><a href="/article/203769.html" title="JavaScript箭头函数的定义与使用技巧" class="aBlack">JavaScript箭头函数的定义与使用技巧</a></div> <div class="opt"> <span><i class="view"></i>253</span> <span class="collectBtn user_collection" data-id="203769" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="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> </div> <div class="tit lineOverflow"><a href="/article/203763.html" title="JavaScript下拉菜单（Dropdown）实现攻略" class="aBlack">JavaScript下拉菜单（Dropdown）实现攻略</a></div> <div class="opt"> <span><i class="view"></i>299</span> <span class="collectBtn user_collection" data-id="203763" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>542次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>508次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>497次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>484次学习</span> </dd> </dl> </li> </ul> </div> </div>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>