0

0

js如何解析XML数据 XML数据解析的3种常用方法解析

尼克

尼克

发布时间:2025-06-29 18:46:01

|

425人浏览过

|

来源于php中文网

原创

解析 xml 数据在 javascript 中可通过三种主要方法实现:domparser、xmlhttprequest 和第三方库。1.domparser 是浏览器内置的解析器,通过 parsefromstring() 方法将 xml 字符串转换为 document 对象,便于操作 xml dom;2.xmlhttprequest 可用于从服务器获取并解析 xml 文件,设置 responsetype 为 "document" 后通过 responsexml 获取解析后的 document 对象;3.第三方库如 jquery 提供更简洁的 api,使用 $.parsexml() 方法简化解析和数据提取过程。此外,处理命名空间需使用 getelementsbytagnamens() 和 getattributens() 方法;复杂结构可通过递归函数遍历元素和属性;错误处理则应检查 parsererror 元素以判断解析是否失败。每种方法各有适用场景,开发者可根据需求选择合适方案。

js如何解析XML数据 XML数据解析的3种常用方法解析

直接使用 JavaScript 解析 XML 数据,核心在于将 XML 字符串转换为 JavaScript 可以操作的对象。通常有三种常见方法:DOMParser、XMLHttpRequest (配合 responseXML) 以及使用第三方库(例如 jQuery)。选择哪种方法取决于你的具体需求,比如是否需要兼容老版本浏览器,或者是否需要更便捷的 API。

js如何解析XML数据 XML数据解析的3种常用方法解析

DOMParser XMLHttpRequest 第三方库

js如何解析XML数据 XML数据解析的3种常用方法解析

DOMParser 解析 XML 数据

DOMParser 是浏览器内置的 XML 解析器,使用起来相当直接。首先,你需要创建一个 DOMParser 实例,然后调用其 parseFromString() 方法将 XML 字符串转换为 Document 对象。之后,你就可以像操作 HTML DOM 一样操作 XML DOM 了。

const xmlString = `
  
    Everyday Italian
    Giada De Laurentiis
    2005
    30.00
  
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

const title = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
console.log(title); // 输出 "Everyday Italian"

需要注意的是,如果 XML 格式不正确,parseFromString() 方法可能会返回一个包含错误信息的 Document 对象。因此,在使用前最好检查一下 xmlDoc.getElementsByTagName("parsererror") 是否为空。

js如何解析XML数据 XML数据解析的3种常用方法解析

XMLHttpRequest 获取并解析 XML 数据

如果你需要从服务器获取 XML 数据,XMLHttpRequest 是一个不错的选择。设置 responseType 为 "document" 可以让浏览器自动将响应解析为 XML Document 对象。

const xhr = new XMLHttpRequest();
xhr.open("GET", "books.xml", true);
xhr.responseType = "document";

xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const xmlDoc = xhr.responseXML;
    const title = xmlDoc.getElementsByTagName("title")[0].textContent;
    console.log(title);
  }
};

xhr.send();

这里,books.xml 应该是一个 XML 文件,放置在你的服务器上。注意处理 readyStatestatus,确保请求成功完成。textContent 属性是获取元素文本内容的更简洁的方式,替代了 childNodes[0].nodeValue

使用第三方库简化 XML 解析

像 jQuery 这样的库提供了更简洁的 API 来处理 XML 数据。虽然 jQuery 主要用于 HTML 操作,但它也能很好地处理 XML。

const xmlString = `
  
    Everyday Italian
    Giada De Laurentiis
    2005
    30.00
  
`;

const xmlDoc = $.parseXML(xmlString);
const $xml = $(xmlDoc);

const title = $xml.find("title").text();
console.log(title); // 输出 "Everyday Italian"

$.parseXML() 将 XML 字符串转换为 XML Document 对象,然后你可以使用 jQuery 的选择器和遍历方法来查找和提取数据。这种方式通常更简洁,代码可读性也更高。

PHP5学习对象教程
PHP5学习对象教程

PHP5学习对象教程由美国人古曼兹、贝肯、瑞桑斯编著,简张桂翻译,电子工业出版社于2007年12月1日出版的关于PHP5应用程序的技术类图书。该书全面介绍了PHP 5中的新功能、编程方法及设计模式,还分析阐述了PHP 5中新的数据库连接处理、错误处理和XML处理等机制,帮助读者系统了解、熟练掌握和高效应用PHP。

下载

如何处理 XML 中的命名空间?

XML 命名空间用于避免元素名称冲突,特别是在处理来自不同来源的 XML 数据时。在 JavaScript 中处理命名空间需要使用特定的方法,例如 getElementsByTagNameNS()getAttributeNS()

const xmlString = `
  
text
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

const element = xmlDoc.getElementsByTagNameNS("http://example.com", "element")[0];
const attributeValue = element.getAttributeNS(null, "attribute"); // null 表示没有命名空间的属性
const textContent = element.textContent;

console.log(attributeValue); // 输出 "value"
console.log(textContent); // 输出 "text"

getElementsByTagNameNS() 方法接受命名空间 URI 和本地名称作为参数。getAttributeNS() 方法也类似,但第一个参数也可以是 null,表示获取没有命名空间的属性。

如何处理复杂的 XML 结构?

处理复杂的 XML 结构可能需要递归遍历 XML 树。你可以编写一个递归函数,该函数接受一个 XML 元素作为参数,并处理该元素的属性和子元素。

function processElement(element) {
  console.log("Element Name:", element.nodeName);
  for (let i = 0; i < element.attributes.length; i++) {
    const attribute = element.attributes[i];
    console.log("Attribute:", attribute.name, "=", attribute.value);
  }

  for (let i = 0; i < element.childNodes.length; i++) {
    const child = element.childNodes[i];
    if (child.nodeType === Node.ELEMENT_NODE) {
      processElement(child); // 递归调用
    } else if (child.nodeType === Node.TEXT_NODE) {
      console.log("Text Content:", child.textContent.trim());
    }
  }
}

const xmlString = `
  
    Some text
    More text
  
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

processElement(xmlDoc.documentElement); // 从根元素开始

这个例子展示了如何递归遍历 XML 树,并处理元素、属性和文本内容。根据你的具体需求,你可以修改 processElement() 函数来执行不同的操作。注意 trim() 方法用于去除文本内容中的空白字符。

如何处理 XML 解析中的错误?

XML 解析过程中可能会遇到各种错误,例如格式不正确、缺少必需的元素或属性等。为了确保你的代码能够正确处理这些错误,你需要进行适当的错误处理。

const xmlString = `
  
    Everyday Italian
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
</bookstore>`; // 缺少闭合标签

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");

const errorNode = xmlDoc.getElementsByTagName("parsererror")[0];

if (errorNode) {
  console.error("XML 解析错误:", errorNode.textContent);
} else {
  const title = xmlDoc.getElementsByTagName("title")[0].textContent;
  console.log(title);
}</pre><p>在这个例子中,XML 字符串缺少一个闭合标签,导致解析错误。通过检查 <code>xmlDoc.getElementsByTagName("parsererror")</code> 是否存在,我们可以判断是否发生了错误。如果存在错误,我们可以输出错误信息,而不是尝试访问不存在的元素。</p>					</div>
					<div class="artmoreart ">
													<div class="artdp artptit"><span></span>
								<p>相关文章</p>
							</div>
							<div class="artmores flexColumn">
																	<a class="artmrlis flexRow" href="/faq/2048043.html" title="为什么说javascript是单线程语言【教程】"><b></b>
										<p class="overflowclass">为什么说javascript是单线程语言【教程】</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2047473.html" title="如何使用 JavaScript 动态切换图像的显示与隐藏状态"><b></b>
										<p class="overflowclass">如何使用 JavaScript 动态切换图像的显示与隐藏状态</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2047260.html" title="javascript如何编写兼容不同浏览器的代码【教程】"><b></b>
										<p class="overflowclass">javascript如何编写兼容不同浏览器的代码【教程】</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2047191.html" title="javascript是什么_为什么它是前端开发的核心语言【教程】"><b></b>
										<p class="overflowclass">javascript是什么_为什么它是前端开发的核心语言【教程】</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2045681.html" title="如何在 Bootstrap 模态框中正确加载点击图片的 src"><b></b>
										<p class="overflowclass">如何在 Bootstrap 模态框中正确加载点击图片的 src</p>
									</a>
															</div>
													<div class="artmoretabs flexRow">
								<p>相关标签:</p>
								<div class="mtbs flexRow">
									<a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15802.html" target="_blank">js</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/16180.html" target="_blank">浏览器</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/17033.html" target="_blank">iis</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/55554.html" target="_blank">代码可读性</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=jquery" target="_blank">jquery</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=NULL" target="_blank">NULL</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=命名空间" target="_blank">命名空间</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=xml" target="_blank">xml</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=字符串" target="_blank">字符串</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=递归" target="_blank">递归</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=JS" target="_blank">JS</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=对象" target="_blank">对象</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=dom" target="_blank">dom</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=选择器" target="_blank">选择器</a>								</div>
							</div>
						
						<p class="statement">本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn</p>
						<div class="lastanext flexRow">
													<a class="lastart flexRow" href="/faq/1379897.html" title="js怎样检测CPU使用率 js检测CPU负载的3种实用方法"><span>上一篇:</span>js怎样检测CPU使用率 js检测CPU负载的3种实用方法</a>
													<a class="nextart flexRow" href="/faq/1379926.html" title="JS怎样检测用户空闲状态 5分钟无操作自动触发空闲检测逻辑"><span>下一篇:</span>JS怎样检测用户空闲状态 5分钟无操作自动触发空闲检测逻辑</a>
												</div>
					</div>

					<div class="artlef-down ">
													<div class="authormore ">
								<div class="rightdTitle flexRow">
									<div class="title-left flexRow"> <b></b>
										<p>作者最新文章</p>
									</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043722.html" title="QQ音乐网页版官方入口_QQ音乐官网在线听歌"><b></b>
												<p class="overflowclass">QQ音乐网页版官方入口_QQ音乐官网在线听歌</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 13:37</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043776.html" title="C++ string流怎么清空 C++ stringstream clear与str("")区别【流】"><b></b>
												<p class="overflowclass">C++ string流怎么清空 C++ stringstream clear与str("")区别【流】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 13:46</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043789.html" title="C++ char和char[]区别 C++字符串常量与数组内存分布【基础】"><b></b>
												<p class="overflowclass">C++ char和char[]区别 C++字符串常量与数组内存分布【基础】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 13:49</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043847.html" title="Sublime怎么配置C语言编译系统 Sublime运行C程序详细教程【指南】"><b></b>
												<p class="overflowclass">Sublime怎么配置C语言编译系统 Sublime运行C程序详细教程【指南】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 13:58</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043852.html" title="百度智慧农场智慧平台入口 百度智慧农场官网首页登录"><b></b>
												<p class="overflowclass">百度智慧农场智慧平台入口 百度智慧农场官网首页登录</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 13:59</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043874.html" title="C++ 怎么实现栈 C++ stack容器适配器使用教程【容器】"><b></b>
												<p class="overflowclass">C++ 怎么实现栈 C++ stack容器适配器使用教程【容器】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 14:03</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043927.html" title="Composer怎么安装Dotenv库 环境变量加载配置指南【教程】"><b></b>
												<p class="overflowclass">Composer怎么安装Dotenv库 环境变量加载配置指南【教程】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 14:13</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043928.html" title="C++ shared_ptr线程安全吗 C++ 引用计数与对象访问安全性【多线程】"><b></b>
												<p class="overflowclass">C++ shared_ptr线程安全吗 C++ 引用计数与对象访问安全性【多线程】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 14:13</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043951.html" title="C++中如何高效地拼接字符串?(使用std::stringstream或reserve预留空间)"><b></b>
												<p class="overflowclass">C++中如何高效地拼接字符串?(使用std::stringstream或reserve预留空间)</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 14:20</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2043969.html" title="c++的错误码(error code)和异常(exception)该如何抉择? (Herb Sutter的观点)"><b></b>
												<p class="overflowclass">c++的错误码(error code)和异常(exception)该如何抉择? (Herb Sutter的观点)</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-29 14:23</p>
											</div>
										</div>
								</div>
															</div>
						
						<div class="moreAi ">
							<div class="rightdTitle flexRow">
								<div class="title-left flexRow"> <b></b>
									<p>热门AI工具</p>
								</div>
								<a target="_blank" class="rititle-more flexRow" href="/ai" title="热门AI工具"><span>更多</span><b></b></a>
							</div>

							<div class="moreailist flexRow">
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/723" title="DeepSeek" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="DeepSeek" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/723" title="DeepSeek" class="overflowclass abripone">DeepSeek</a>
												<p class="overflowclass abriptwo">幻方量化公司旗下的开源大模型平台</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/chat" target="_blank" >AI 聊天问答</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/726" title="豆包大模型" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680204067325.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="豆包大模型" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/726" title="豆包大模型" class="overflowclass abripone">豆包大模型</a>
												<p class="overflowclass abriptwo">字节跳动自主研发的一系列大型语言模型</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code/large-model" target="_blank" >AI大模型</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/725" title="通义千问" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974228210.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="通义千问" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/725" title="通义千问" class="overflowclass abripone">通义千问</a>
												<p class="overflowclass abriptwo">阿里巴巴推出的全能AI助手</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/854" title="腾讯元宝" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="腾讯元宝" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/854" title="腾讯元宝" class="overflowclass abripone">腾讯元宝</a>
												<p class="overflowclass abriptwo">腾讯混元平台推出的AI助手</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/office/docs" target="_blank" >文档处理</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/chat" target="_blank" >AI 聊天问答</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/724" title="文心一言" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974557049.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="文心一言" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/724" title="文心一言" class="overflowclass abripone">文心一言</a>
												<p class="overflowclass abriptwo">文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/text" target="_blank" >AI 文本写作</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/1507" title="讯飞写作" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a4153cd86671.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="讯飞写作" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/1507" title="讯飞写作" class="overflowclass abripone">讯飞写作</a>
												<p class="overflowclass abriptwo">基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/text" target="_blank" >AI 文本写作</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/text/chinese-writing" target="_blank" >中文写作</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/1115" title="即梦AI" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d8f7c530c315.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="即梦AI" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/1115" title="即梦AI" class="overflowclass abripone">即梦AI</a>
												<p class="overflowclass abriptwo">一站式AI创作平台,免费AI图片和视频生成。</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="" target="_blank" ></a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/image/image-titching" target="_blank" >图片拼接</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/808" title="ChatGPT" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679970194596.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="ChatGPT" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/808" title="ChatGPT" class="overflowclass abripone">ChatGPT</a>
												<p class="overflowclass abriptwo">最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/text" target="_blank" >AI 文本写作</a>													</div>
																							</div>
										</div>
									</div>
																	<div class="aidcons flexRow   ">
										<div   class="aibtns flexRow">
											<a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="aibtnsa flexRow" >
												<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679976181507.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="智谱清言 - 免费全能的AI助手" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'">
											</a>
											<div class="aibtn-right flexColumn">
												<a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="overflowclass abripone">智谱清言 - 免费全能的AI助手</a>
												<p class="overflowclass abriptwo">智谱清言 - 免费全能的AI助手</p>
																									<div class="aidconstab flexRow">
														<a class="aidcontbp flexRow flexcenter"  href="/ai/tag/code" target="_blank" >AI 编程开发</a><a class="aidcontbp flexRow flexcenter"  href="/ai/tag/ai-agent" target="_blank" >Agent智能体</a>													</div>
																							</div>
										</div>
									</div>
															</div>
						</div>

					</div>


				</div>


			</div>
			<div class="conRight artdtilRight ">
				<div class="artrig-adv ">
                    <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
                </div>
				<div class="hotzt artdtzt">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>相关专题</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/faq/zt" title="相关专题"><span>更多</span><b></b></a>
					</div>
					<div class="hotztuls flexColumn">
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jquerycj" class="aClass flexRow hotzta" title="jquery插件有哪些"><img
										src="https://img.php.cn/upload/subject/202309/12/2023091209470250839.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jquery插件有哪些" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jquerycj" class="aClass flexRow hotztra overflowclass" title="jquery插件有哪些">jquery插件有哪些</a>
									<p class="aClass flexRow hotztrp overflowclass">jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">151</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.09.12</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jqueryczjson" class="aClass flexRow hotzta" title="jquery怎么操作json"><img
										src="https://img.php.cn/upload/subject/202310/13/2023101309503576727.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jquery怎么操作json" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jqueryczjson" class="aClass flexRow hotztra overflowclass" title="jquery怎么操作json">jquery怎么操作json</a>
									<p class="aClass flexRow hotztrp overflowclass">操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">312</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.10.13</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jqueryscysdff" class="aClass flexRow hotzta" title="jquery删除元素的方法"><img
										src="https://img.php.cn/upload/subject/202311/10/2023111015194457772.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jquery删除元素的方法" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jqueryscysdff" class="aClass flexRow hotztra overflowclass" title="jquery删除元素的方法">jquery删除元素的方法</a>
									<p class="aClass flexRow hotztrp overflowclass">jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">396</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.11.10</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jqueryhover" class="aClass flexRow hotzta" title="jQuery hover()方法的使用"><img
										src="https://img.php.cn/upload/subject/202312/04/2023120410043862918.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jQuery hover()方法的使用" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jqueryhover" class="aClass flexRow hotztra overflowclass" title="jQuery hover()方法的使用">jQuery hover()方法的使用</a>
									<p class="aClass flexRow hotztrp overflowclass">hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">504</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.12.04</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jquerysxfyff" class="aClass flexRow hotzta" title="jquery实现分页方法"><img
										src="https://img.php.cn/upload/subject/202312/06/2023120611493027876.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jquery实现分页方法" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jquerysxfyff" class="aClass flexRow hotztra overflowclass" title="jquery实现分页方法">jquery实现分页方法</a>
									<p class="aClass flexRow hotztrp overflowclass">在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">187</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.12.06</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jqueryycysssm" class="aClass flexRow hotzta" title="jquery中隐藏元素是什么"><img
										src="https://img.php.cn/upload/subject/202402/23/2024022315214930111.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jquery中隐藏元素是什么" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jqueryycysssm" class="aClass flexRow hotztra overflowclass" title="jquery中隐藏元素是什么">jquery中隐藏元素是什么</a>
									<p class="aClass flexRow hotztrp overflowclass">jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">120</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2024.02.23</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jqueryzsmsglx" class="aClass flexRow hotzta" title="jquery中什么是高亮显示"><img
										src="https://img.php.cn/upload/subject/202402/23/2024022315235281539.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jquery中什么是高亮显示" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jqueryzsmsglx" class="aClass flexRow hotztra overflowclass" title="jquery中什么是高亮显示">jquery中什么是高亮显示</a>
									<p class="aClass flexRow hotztrp overflowclass">jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">176</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2024.02.23</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/jqueryzzbds" class="aClass flexRow hotzta" title="jQuery 正则表达式相关教程"><img
										src="https://img.php.cn/upload/subject/202601/13/2026011313560749298.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="jQuery 正则表达式相关教程" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/jqueryzzbds" class="aClass flexRow hotztra overflowclass" title="jQuery 正则表达式相关教程">jQuery 正则表达式相关教程</a>
									<p class="aClass flexRow hotztrp overflowclass">本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">40</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2026.01.13</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/csjmsyrjjg" class="aClass flexRow hotzta" title="C++ 设计模式与软件架构"><img
										src="https://img.php.cn/upload/subject/202601/30/2026013010035824284.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="C++ 设计模式与软件架构" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/csjmsyrjjg" class="aClass flexRow hotztra overflowclass" title="C++ 设计模式与软件架构">C++ 设计模式与软件架构</a>
									<p class="aClass flexRow hotztrp overflowclass">本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">14</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2026.01.30</p>
										</div>
									</div>
								</div>
							</div>
											</div>
				</div>

				<div class="hotdownload ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>热门下载</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a>
					</div>
					<div class="hotdownTab">
						<div class="hdTabs flexRow">
							<div class="check" data-id="onef">网站特效 <b></b> </div> /
							<div class="" data-id="twof">网站源码 <b></b></div> /
							<div class="" data-id="threef">网站素材 <b></b></div> /
							<div class="" data-id="fourf">前端模板 <b></b></div>
						</div>
						<ul class="onef">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery鼠标滚轮控制幻灯片切换" href="/xiazai/js/8740"><span>[图片特效]</span><span>jQuery鼠标滚轮控制幻灯片切换</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery微信手机端答题表单特效" href="/xiazai/js/8739"><span>[表单按钮]</span><span>jQuery微信手机端答题表单特效</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="js正则表达式表单验证代码" href="/xiazai/js/8738"><span>[表单按钮]</span><span>js正则表达式表单验证代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="CSS3图片形状遮罩动画效果" href="/xiazai/js/8737"><span>[图片特效]</span><span>CSS3图片形状遮罩动画效果</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="div css手机网站login表单特效" href="/xiazai/js/8736"><span>[表单按钮]</span><span>div css手机网站login表单特效</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="qq空间遮罩层jQuery相册切换" href="/xiazai/js/8735"><span>[图片特效]</span><span>qq空间遮罩层jQuery相册切换</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jquery衣服尺寸勾选表单" href="/xiazai/js/8734"><span>[表单按钮]</span><span>jquery衣服尺寸勾选表单</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="22款不同效果产品图片展示切换" href="/xiazai/js/8733"><span>[图片特效]</span><span>22款不同效果产品图片展示切换</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jquery带登录注册幻灯片代码" href="/xiazai/js/8732"><span>[表单按钮]</span><span>jquery带登录注册幻灯片代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery图片放大变小切换代码" href="/xiazai/js/8731"><span>[图片特效]</span><span>jQuery图片放大变小切换代码</span></a>
									</div>
								</li>
													</ul>
						<ul class="twof" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11355" title="openaishop"><span>[电商源码]</span><span>openaishop</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11354" title="思翔企(事)业单位文件柜 build 20080313"><span>[其它模板]</span><span>思翔企(事)业单位文件柜 build 20080313</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0"><span>[企业站源码]</span><span>雅龙智能装备工业设备类WordPress主题1.0</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11352" title="威发卡自动发卡系统"><span>[电商源码]</span><span>威发卡自动发卡系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11351" title="卡密分发系统"><span>[电商源码]</span><span>卡密分发系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11350" title="中华陶瓷网"><span>[电商源码]</span><span>中华陶瓷网</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11349" title="简洁粉色食品公司网站"><span>[电商源码]</span><span>简洁粉色食品公司网站</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11348" title="极速网店系统"><span>[电商源码]</span><span>极速网店系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统"><span>[电商源码]</span><span>淘宝妈妈_淘客推广系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11346" title="积客B2SCMS商城系统"><span>[电商源码]</span><span>积客B2SCMS商城系统</span> </a>
									</div>
								</li>
													</ul>
						<ul class="threef" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4307" title="手绘烘焙面包食材合集矢量素材"><span>[网站素材]</span><span>手绘烘焙面包食材合集矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4306" title="复古红日山峰风景矢量素材"><span>[网站素材]</span><span>复古红日山峰风景矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4305" title="极简复古意大利面海报矢量模板"><span>[网站素材]</span><span>极简复古意大利面海报矢量模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4304" title="国风红色灯笼装饰合集矢量素材"><span>[网站素材]</span><span>国风红色灯笼装饰合集矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4303" title="快餐美食宣传海报模板INS下载"><span>[网站素材]</span><span>快餐美食宣传海报模板INS下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4302" title="卡通灯塔房屋建筑合集矢量素材"><span>[网站素材]</span><span>卡通灯塔房屋建筑合集矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4301" title="黑色耳机宣传海报PSD模板设计下载"><span>[网站素材]</span><span>黑色耳机宣传海报PSD模板设计下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4300" title="冬季蓝色雪花松枝合集矢量素材"><span>[网站素材]</span><span>冬季蓝色雪花松枝合集矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4299" title="情人节爱心主题海报PSD源文件设计下载"><span>[网站素材]</span><span>情人节爱心主题海报PSD源文件设计下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4298" title="2026粉色梦幻马年矢量模板"><span>[网站素材]</span><span>2026粉色梦幻马年矢量模板</span> </a>
									</div>
								</li>
													</ul>
						<ul class="fourf" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8590"  title="驾照考试驾校HTML5网站模板"><span>[前端模板]</span><span>驾照考试驾校HTML5网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8589"  title="驾照培训服务机构宣传网站模板"><span>[前端模板]</span><span>驾照培训服务机构宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8588"  title="HTML5房地产公司宣传网站模板"><span>[前端模板]</span><span>HTML5房地产公司宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8587"  title="新鲜有机肉类宣传网站模板"><span>[前端模板]</span><span>新鲜有机肉类宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8586"  title="响应式天气预报宣传网站模板"><span>[前端模板]</span><span>响应式天气预报宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8585"  title="房屋建筑维修公司网站CSS模板"><span>[前端模板]</span><span>房屋建筑维修公司网站CSS模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8584"  title="响应式志愿者服务网站模板"><span>[前端模板]</span><span>响应式志愿者服务网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8583"  title="创意T恤打印店网站HTML5模板"><span>[前端模板]</span><span>创意T恤打印店网站HTML5模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8582"  title="网页开发岗位简历作品展示网页模板"><span>[前端模板]</span><span>网页开发岗位简历作品展示网页模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8581"  title="响应式人力资源机构宣传网站模板"><span>[前端模板]</span><span>响应式人力资源机构宣传网站模板</span> </a>
									</div>
								</li>
													</ul>
					</div>
					<script>
						$('.hdTabs>div').click(function (e) {
							$('.hdTabs>div').removeClass('check')
							$(this).addClass('check')
							$('.hotdownTab>ul').css('display', 'none')
							$('.' + e.currentTarget.dataset.id).show()
						})
					</script>

				</div>

				<div class="artrig-adv ">
					<script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
                </div>



				<div class="xgarts ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>相关下载</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a>
					</div>
					<div class="xgwzlist ">
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP5学习对象教程" href="/xiazai/learn/2588">PHP5学习对象教程</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP5 和 MySQL 圣经" href="/xiazai/learn/2587">PHP5 和 MySQL 圣经</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP与MySQL程序设计3" href="/xiazai/learn/2529">PHP与MySQL程序设计3</a></div>
										</div>

				</div>

				<div class="jpkc">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>精品课程</p>
						</div>
						<a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a>
					</div>
					<div class=" jpkcTab">
						<div class=" jpkcTabs flexRow">
							<div class="check" data-id="onefd">相关推荐 <b></b> </div> /
							<div class="" data-id="twofd">热门推荐 <b></b></div> /
							<div class="" data-id="threefd">最新课程 <b></b></div>
						</div>
						<div class="onefd jpktabd">
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1509.html" title="前端项目-尚优选【HTML/CSS/JS技术综合实战】">
									<img src="https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="前端项目-尚优选【HTML/CSS/JS技术综合实战】" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1509.html" title="前端项目-尚优选【HTML/CSS/JS技术综合实战】"
										class="rirightp overflowclass">前端项目-尚优选【HTML/CSS/JS技术综合实战】</a>

									<div class="risrdown flexRow">
										<p>共39课时 | 4万人学习</p>
									</div>
								</div>
							</div>
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1506.html" title="WEB前端教程【HTML5+CSS3+JS】">
									<img src="https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="WEB前端教程【HTML5+CSS3+JS】" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1506.html" title="WEB前端教程【HTML5+CSS3+JS】"
										class="rirightp overflowclass">WEB前端教程【HTML5+CSS3+JS】</a>

									<div class="risrdown flexRow">
										<p>共101课时 | 8.6万人学习</p>
									</div>
								</div>
							</div>
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1488.html" title="JS进阶与BootStrap学习">
									<img src="https://img.php.cn/upload/course/000/000/068/638702e2c8dda719.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="JS进阶与BootStrap学习" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1488.html" title="JS进阶与BootStrap学习"
										class="rirightp overflowclass">JS进阶与BootStrap学习</a>

									<div class="risrdown flexRow">
										<p>共39课时 | 3.2万人学习</p>
									</div>
								</div>
							</div>
												</div>

						<div class="twofd jpktabd" style="display:none;">
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
										<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
											class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>

										<div class="risrdown flexRow">
											<p>共6课时 | 11.2万人学习</p>
										</div>
									</div>
								</div>
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)">
										<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"
											class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>

										<div class="risrdown flexRow">
											<p>共79课时 | 151.8万人学习</p>
										</div>
									</div>
								</div>
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程">
										<img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"
											class="rirightp overflowclass">phpStudy极速入门视频教程</a>

										<div class="risrdown flexRow">
											<p>共6课时 | 53.4万人学习</p>
										</div>
									</div>
								</div>
													</div>

						<div class="threefd jpktabd" style="display:none;">
															<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通">
											<img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新Python教程 从入门到精通" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通"
												class="rirightp overflowclass">最新Python教程 从入门到精通</a>

											<div class="risrdown flexRow">
												<p>共4课时 | 22.4万人学习</p>
											</div>
										</div>
									</div>
																<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
											<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
												class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>

											<div class="risrdown flexRow">
												<p>共6课时 | 11.2万人学习</p>
											</div>
										</div>
									</div>
																<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学">
											<img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="PHP新手语法线上课程教学" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学"
												class="rirightp overflowclass">PHP新手语法线上课程教学</a>

											<div class="risrdown flexRow">
												<p>共13课时 | 0.9万人学习</p>
											</div>
										</div>
									</div>
														</div>
						<script>
							$('.jpkcTabs>div').click(function (e) {
								$('.jpkcTabs>div').removeClass('check')
								$(this).addClass('check')
								$('.jpkcTab .jpktabd').css('display', 'none')
								$('.' + e.currentTarget.dataset.id).show()
							})
						</script>

					</div>
				</div>

				<div class="zxarts ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>最新文章</p>
						</div>
						<a class="rititle-more flexRow" href="" title="最新文章" target="_blank"><span>更多</span><b></b></a>
					</div>
					<div class="xgwzlist ">
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="实现两级联动下拉菜单并确保表单能同时提交分类ID与子分类ID" href="/faq/2049506.html">实现两级联动下拉菜单并确保表单能同时提交分类ID与子分类ID</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何从URL哈希值中提取参数并动态显示在HTML标签内" href="/faq/2049500.html">如何从URL哈希值中提取参数并动态显示在HTML标签内</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何准确计算用户年龄:JavaScript 日期差值的正确处理方法" href="/faq/2049499.html">如何准确计算用户年龄:JavaScript 日期差值的正确处理方法</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何实现基于主下拉框动态筛选并提交子下拉框的完整表单" href="/faq/2049496.html">如何实现基于主下拉框动态筛选并提交子下拉框的完整表单</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="HTML 下拉联动:基于主选项动态筛选子选项并保留 value 值用于表单提交" href="/faq/2049491.html">HTML 下拉联动:基于主选项动态筛选子选项并保留 value 值用于表单提交</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="HTML 下拉联动:基于主分类动态更新子分类并保留 value 值用于表单提交" href="/faq/2049488.html">HTML 下拉联动:基于主分类动态更新子分类并保留 value 值用于表单提交</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="实现 HTML 下拉联动并保留表单提交所需的 value 值" href="/faq/2049483.html">实现 HTML 下拉联动并保留表单提交所需的 value 值</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何自定义复选框选中状态的背景颜色" href="/faq/2049475.html">如何自定义复选框选中状态的背景颜色</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何在 Angular 中通过 CSS 自定义复选框选中后的背景色" href="/faq/2049471.html">如何在 Angular 中通过 CSS 自定义复选框选中后的背景色</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="如何在 Angular 中为选中状态的复选框自定义背景色" href="/faq/2049365.html">如何在 Angular 中为选中状态的复选框自定义背景色</a></div>
											</div>

				</div>






			</div>



		</div>

	</div>
	<!--底部-->
	<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a target="_blank"  href="/about/us.html" rel="nofollow"  title="关于我们" class="cBlack">关于我们</a>
                        <a target="_blank"  href="/about/disclaimer.html" rel="nofollow"  title="免责申明" class="cBlack">免责申明</a>
                        <a target="_blank"  href="/about/jbzx.html" rel="nofollow"  title="举报中心" class="cBlack">举报中心</a>
                        <a   href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                        <a target="_blank"  href="https://www.php.cn/teacher.html" rel="nofollow"   title="讲师合作" class="cBlack">讲师合作</a>
                        <a  target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow"  title="广告合作" class="cBlack">广告合作</a>
                        <a  target="_blank" href="/new/"    title="最新文章列表" class="cBlack">最新更新</a>
                                                <div class="clear"></div>
                    </dt>
                    <dd class="cont1">php中文网:公益在线php培训,帮助PHP学习者快速成长!</dd>
                    <dd class="cont2">
                      <span class="ylwTopBox">
                        <a   href="javascript:;"  class="cBlack"><b class="icon1"></b>关注服务号</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>微信扫码<br/>关注PHP中文网服务号</p>
                          <img src="/static/images/examples/text16.png"/>
                        </em>
                      </span>
                        <span class="ylwTopBox">
                        <a   href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes"  class="cBlack"><b class="icon2"></b>技术交流群</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>QQ扫码<br/>加入技术交流群</p>
                          <img src="/static/images/examples/text18.png"/>
                        </em>
                      </span>
                        <div class="clear"></div>
                    </dd>
                </dl>
                
            </div>
            <div class="phpFootRight">
                <div class="phpFootMsg">
                    <span><img src="/static/images/examples/text17.png"/></span>
                    <dl>
                        <dt>PHP中文网订阅号</dt>
                        <dd>每天精选资源文章推送</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="phpFootCode">
        <div class="phpFootCodeIn"><p>Copyright 2014-2026 <a   href="https://www.php.cn/" >https://www.php.cn/</a> All Rights Reserved | php.cn | <a   href="https://beian.miit.gov.cn/" rel="nofollow" >湘ICP备2023035733号</a></p><a   href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" ><b></b></a></div>
    </div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>

<script src="/static/js/cdn.js?v=1.0.1"></script>



	<!--底部 end-->
	<!-- content -->
	<!--
    <div class="phpFudong">
        <div class="phpFudongIn">
            <div class="phpFudongImg"></div>
            <div class="phpFudongXue">登录PHP中文网,和优秀的人一起学习!</div>
            <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div>
            <div class="phpFudongCode"><a   href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div>
            <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div>
            <div class="clear"></div>
        </div>
    </div>
-->	<!--底部浮动层 end-->
	<!--侧导航-->
	<style>
    .layui-fixbar{display: none;}
</style>
<div class="phpSdhBox" style="height:240px !important;">
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="/k24.html"  class="hover" title="PHP学习">
                    <b class="icon1"></b>
                    <p>PHP学习</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="https://www.php.cn/blog/detail/1047189.html" >
                    <b class="icon2"></b>
                    <p>技术支持</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="#">
                    <b class="icon6"></b>
                    <p>返回顶部</p>
                </a>
            </div>
        </div>
    </li>
</div>
	</body>

</html>

<script type="text/javascript" src="/hitsUp?type=article&id=1379916&time=1769799579">
</script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1769799579"></script>
<script>
	article_status = "1522157";
</script>
<input type="hidden" id="verifycode" value="/captcha.html">
<script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>
	

<script>
	function setCookie(name, value, iDay) { //name相当于键,value相当于值,iDay为要设置的过期时间(天)
		var oDate = new Date();
		oDate.setDate(oDate.getDate() + iDay);
		document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate;
	}

	function getCookie(name) {
		var cookieArr = document.cookie.split(";");
		for (var i = 0; i < cookieArr.length; i++) {
			var cookiePair = cookieArr[i].split("=");
			if (name == cookiePair[0].trim()) {
				return decodeURIComponent(cookiePair[1]);
			}
		}
		return null;
	}
</script>


<!-- Matomo -->
<script>
	var _paq = window._paq = window._paq || [];
	/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
	_paq.push(['trackPageView']);
	_paq.push(['enableLinkTracking']);
	(function () {
		var u = "https://tongji.php.cn/";
		_paq.push(['setTrackerUrl', u + 'matomo.php']);
		_paq.push(['setSiteId', '7']);
		var d = document,
			g = d.createElement('script'),
			s = d.getElementsByTagName('script')[0];
		g.async = true;
		g.src = u + 'matomo.js';
		s.parentNode.insertBefore(g, s);
	})();
</script>
<!-- End Matomo Code -->

<script>
	setCookie('is_article', 1, 1);
</script>

<script>
	var is_login = "0";
        var show = 0;
        var ceng = getCookie('ceng');
        //未登录复制显示登录按钮
        if(is_login == 0 && false){
            $(".code").hover(function(){
                $(this).find('.contentsignin').show();
            },function(){
                $(this).find('.contentsignin').hide();
            });
            //不给复制
            $('.code').bind("cut copy paste",function(e) {
                e.preventDefault();
            });
            $('.code .contentsignin').click(function(){
                $(document).trigger("api.loginpopbox");
            })
        }else{
            // 获取所有的 <pre> 元素
            var preElements = document.querySelectorAll('pre');
            preElements.forEach(function(preElement) {
                // 创建复制按钮
                var copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.textContent = '复制';
                // 添加点击事件处理程序
                copyButton.addEventListener('click', function() {
                    // 获取当前按钮所属的 <pre> 元素中的文本内容
                    var textContent = preElement.textContent.trim();
                    // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容
                    var tempTextarea = document.createElement('textarea');
                    tempTextarea.value = textContent;
                    // 将临时 textarea 添加到文档中
                    document.body.appendChild(tempTextarea);
                    // 选中临时 textarea 中的文本内容并执行复制操作
                    tempTextarea.select();
                    document.execCommand('copy');
                    // 移除临时 textarea 元素
                    document.body.removeChild(tempTextarea);
                    // 更新按钮文本为 "已复制"
                    this.textContent = '已复制';
                });

                // 创建AI写代码按钮
                var aiButton = document.createElement('button');
                aiButton.className = 'copy-button';
                aiButton.textContent = 'AI写代码';
                aiButton.style.marginLeft = '5px';
                aiButton.style.marginRight = '5px';
                // 添加点击事件处理程序
                aiButton.addEventListener('click', function() {
                // Generate a random number between 0 and 1
                        var randomChance = Math.random();

                    // If the random number is less than 0.5, open the first URL, else open the second
                    if (randomChance < 0.5) {
                        window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank');
                    } else {
                        window.open('https://click.aliyun.com/m/1000402709/', '_blank');
                    }
                });

                // 将按钮添加到 <pre> 元素前面
                preElement.parentNode.insertBefore(copyButton, preElement);
                preElement.parentNode.insertBefore(aiButton, preElement);
        });
        }
</script>