《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 08:51:41
原创
1656人浏览过

1、文档:DOM中的“D”

"D"代表document(文档)

2、对象:DOM中的“O”

“O”代表object(对象) 对象的分类

  • 用户定义对象(user-defined object)
  • 内建对象(native object)
  • 宿主对象(host object)

window对象window对象对应着浏览器窗口本身,这个对象的属性和方法通常统称为BOM(浏览器对象模型)BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单

3、模型:DOM中的“M”

“M”代表“Model”(模型)DOM把一份文档表示为一棵树(数学意义上的概念)示例代码

立即学习Java免费学习笔记(深入)”;

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>    <body>  </html>代码中<html>相当于树根,即根元素。<head>和<body>属于下一个分支,位于同一层次且互不包含,属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素,有三个子元素,他们都是<li>元素。
登录后复制

如果你能把一个文档的各种元素想象成一棵家谱树,我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点

节点(node)属于网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况,文档是由节点构成的集合。

  • 元素节点
  • 文本节点
  • 属性节点

4、1元素节点

DOM的原子是元素节点(element node)诸如

之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素,它是我们的节点树的根元素。

4、2文本节点

在上述例子中,

元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点(text node)。

4、3属性节点

属性节点是对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性,我们可以利用这个属性对包含在元素里的东西做出准确的描述:

<p title="a gentle reminder">Don't forget to buy this stuff.<p>
登录后复制

在DOM中title="a gentle reminder"是一个属性节点(attribute node),在前面的例子中无序清单元素

    有个id属性。有些清单元素
  • 有class属性。

    三者之间的关系.png

    4、4 CSS

    类似javascript脚本,我们也可以将CSS样式嵌在文档

    部分(style>标签之间)。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式:
    <link type="text/css" href="file.css" rel="stylesheet">
    登录后复制

    继承(inheritance)是CSS技术中的一项强大功能。1)、 class属性

    <p class="special">This pargraph has the special class<p><h2 class="special">So dose this headline</h2>
    登录后复制

    在样式表里可以为上面的代码进行定义

    special{font-style: italic;}
    登录后复制

    还可以这样定义

    h2.special{text-transform: uppercase;}
    登录后复制

    2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符:

    <ul id="purchases">
    登录后复制

    样式表定义

    #purchases{border:1px solid white;background-color:#333;color:#ccc;padding:1em;}
    登录后复制
    #purchases li{font-weight:bold;}
    登录后复制

    4、5获取元素

    有3种DOM方法可获取元素节点,分别是通过元素ID、通过标签名和通过类名字来获取
    • getElementById
    • getElementsByTagName
    • getElementsByClassName

    1)getElementById

    此方法将返回一个与那个有着给定id属性值的元素节点对应的对象,在javascript里注意大小写。它是document对象特有的函数,在脚本代码里,函数名的后面必须跟有一对圆括号,这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数:你想获得的那个元素的id属性的值,这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象,这个对象对应着document对象里的一个独一无二的元素,那个元素的HTLM id属性值是purchases

              Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         alert(typeof docment.getElementById("purchases"));     </script>    <body>  </html>//利用`typeof`操作符进行验证(typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre><div class="contentsignin">登录后复制</div></div>   <p>验证可得是一个对象</p>   <h3>2)getElementsByTagName</h3>   <p>getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字:decument.getElementByTagName(tag)</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为:3</pre><div class="contentsignin">登录后复制</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         var items=document.getElementByTagName("li");         for (var i=0; i<items.length;i++){         alert(typeof items[i]);         }     </script>    <body>  </html>//代码运行结果显示三个alert对话框,显示的消息都是“object”。</pre><div class="contentsignin">登录后复制</div></div>   <p>getElementsByTagName允许把一个通配符作为它的参数,通配符(*)必须放在引号里</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre><div class="contentsignin">登录后复制</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果,items数组将只包含id属性值是purshase的元素清单的元素</pre><div class="contentsignin">登录后复制</div></div>   <h3>3)getElementByClassName</h3>   <p>这个方法让我们能够通过class属性中的类名来访问元素,getElementByClassName也只接受一个参数,就是类名:</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">getElementByClassName(class)</pre><div class="contentsignin">登录后复制</div></div>   <p>这个方法的返回值也与getElementsByTagName类似,都是一个具有相同类名的元素的数组。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">document.getElementsByClassName("sale")</pre><div class="contentsignin">登录后复制</div></div>   <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByClassName("important sale").length);//对话框显示1,表示只有一个元素匹配。类名的顺序不重要,就算元素还带有更多类名也没有关系。</pre><div class="contentsignin">登录后复制</div></div>   <p>也可以和getElementById组合使用</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">     var shopping=document.getElementById("purchase");     var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</pre><div class="contentsignin">登录后复制</div></div>   <p>getElementByClassName方法非常有用,但只有较新的浏览器才支持它。所以,需要使用已有的DOM方法来实现自己的getElementsByClassName。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){  if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i];          }      }return results;    }}</pre><div class="contentsignin">登录后复制</div></div>   <h4>5 获取和设置属性</h4>   <ul>
    <li>
    <strong>getAttribute方法</strong>(获取元素的属性)</li>    <li>
    <strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数,它只有一个参数(你所要查询的属性的名称)</li>   </ul>
    </li>
    </ul>          
                    </div>
                                </div>
                    
                <!-- <div class="ask_line-container" >
                    <div class="ask_line"></div>
                    <button type="button" class="ask_text test-iframe-handle">
                    没有解决问题?点击使用智能助手
                    </button>
                    <div class="ask_line"></div>
                </div> -->
                            <div class="community flexRow newcommunity">
                        <div class="comleft flexRow newcomlimg">
                            <a class="newcomlimga" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/d15282cdb2c0" title="最佳 Windows 性能的顶级免费优化软件" >
                                <img src="https://img.php.cn/teacher/course/20240902/cc89be6a0150bc48ad7781bd49eed9bf.png" class="comlimg newcomlimg" alt="最佳 Windows 性能的顶级免费优化软件">
                            </a>
                            <div class="comldiv flexColumn newcomldiv">
                                <a class="comldup newcomldup" target="_blank" rel="nofollow" title="最佳 Windows 性能的顶级免费优化软件" href="https://pan.quark.cn/s/d15282cdb2c0">最佳 Windows 性能的顶级免费优化软件</a>
                                <p class="comlddown newcomlddown">每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。</p>
                            </div>
                        </div>
                        <a class="comright flexRow newcomright" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/d15282cdb2c0" title="最佳 Windows 性能的顶级免费优化软件">
                            下载
                        </a>
                    </div>
                
              
    			
                <div  class="wzconlabels">
                    
                                    <div style="display: inline-flex;float: right; color:#333333;">来源:php中文网</div>
                                </div>
    
    
                <div class="wzconFx">
                    <a class="wzcf-sc articleICollection " data-id="235369">
                                                <img src="/static/lhimages/shoucang_2x.png">
                            <span>收藏</span>
                                        </a>
    
                    <a  class="wzcf-dz articlegoodICollection " data-id="235369">
                                                <img src="/static/images/images/icon37.png">
                            <span>点赞</span>
                                        </a>
                </div>
    
    
    
                <div class="wzconOtherwz">
                                        <a href="/faq/235368.html">
                            <span>上一篇:Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose</span>
                        </a>
                                        <a href="/faq/235376.html">
                            <span>下一篇:Bootstrap使用心得之文本_html/css_WEB-ITnose</span>
                        </a>
                                </div>
                <div class="wzconShengming">
                    <img src="/static/images/images/benzhanshengming.png" />
                    <div>本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn</div>
                </div>
    
                           <!-- PC-文章底部 -->
                            <div class="wzconZzwz">
                    <div class="wzconZzwztitle">最新问题</div>
                    <div class="wdsyContent">
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759968.html"  target="_blank" title="HTML图片布局怎么语义化_HTML图片在语义化布局中的使用与优化" class="wdcdcTitle">HTML图片布局怎么语义化_HTML图片在语义化布局中的使用与优化</a>
                                <a href="/faq/1759968.html" class="wdcdcCons">正确使用HTML标签和属性实现图片语义化布局,可提升可访问性、SEO与代码维护性。1.内容型图片用配alt描述,如产品图;2.装饰性图片通过CSSbackground-image实现;3.复杂图表结合aria-describedby或figure与figcaption提供详细说明;4.响应式中利用srcset、sizes优化加载,配合loading="lazy"提升性能;5.优先使用WebP等现代格式并通过回退;6.alt文本需具体简洁,链接图片应描述目标行为;7.避免以图代文标题,确保结构清晰</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:59:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">267</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759967.html"  target="_blank" title="HTML语义化标签怎么选择_HTML不同场景下语义化标签的选用技巧" class="wdcdcTitle">HTML语义化标签怎么选择_HTML不同场景下语义化标签的选用技巧</a>
                                <a href="/faq/1759967.html" class="wdcdcCons">语义化标签通过明确内容角色提升可读性、可访问性与SEO,应根据内容独立性与功能选用article、nav、aside等标签,避免滥用div,合理嵌套并配合ARIA属性,确保结构清晰且符合实际需求。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:59:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">711</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759966.html"  target="_blank" title="HTML文本换行符怎么处理_HTML文本换行符如何在代码与显示间正确转换" class="wdcdcTitle">HTML文本换行符怎么处理_HTML文本换行符如何在代码与显示间正确转换</a>
                                <a href="/faq/1759966.html" class="wdcdcCons">答案是使用标签或CSSwhite-space属性处理HTML换行。通过替换\n为实现换行显示,或用pre、pre-line、pre-wrap等CSS属性保留格式,用户输入需先转义再转换,确保安全与效果兼顾。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:58:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">477</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759965.html"  target="_blank" title="HTML表单数据怎么同步更新_HTML多个表单元素数据同步更新的实现方法" class="wdcdcTitle">HTML表单数据怎么同步更新_HTML多个表单元素数据同步更新的实现方法</a>
                                <a href="/faq/1759965.html" class="wdcdcCons">使用JavaScript监听输入事件可实现表单数据同步,如通过input事件实时更新多个输入框或文本元素;还可借助公共变量管理状态,简化多元素同步逻辑;对于复杂场景,推荐使用Vue等框架的双向绑定,自动保持数据一致。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:58:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">909</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759964.html"  target="_blank" title="HTMLtime标签怎么用_HTMLtime标签的语义与时间表示方法" class="wdcdcTitle">HTMLtime标签怎么用_HTMLtime标签的语义与时间表示方法</a>
                                <a href="/faq/1759964.html" class="wdcdcCons">time标签用于语义化表示日期时间,提升可读性与机器解析能力,支持日期、时间、时区及持续时间等多种格式,常用于发布时间、活动信息等场景,增强SEO与无障碍访问。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:57:05</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">974</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759961.html"  target="_blank" title="HTML表单fieldset标签怎么用_HTMLfieldset与legend标签的分组使用方法" class="wdcdcTitle">HTML表单fieldset标签怎么用_HTMLfieldset与legend标签的分组使用方法</a>
                                <a href="/faq/1759961.html" class="wdcdcCons">fieldset与legend标签用于对表单元素进行逻辑分组并提供语义化标题,提升可读性和可访问性;fieldset包围相关控件形成边框区域,legend作为其首个子元素定义组名,常用于性别、联系信息等分组,结合多个fieldset可将复杂表单按“基本信息”“联系方式”等分类,使结构清晰,便于屏幕阅读器识别,显著优化用户体验。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:56:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">850</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759959.html"  target="_blank" title="HTML表单数据怎么适配移动端_HTML移动设备表单数据输入的优化方法" class="wdcdcTitle">HTML表单数据怎么适配移动端_HTML移动设备表单数据输入的优化方法</a>
                                <a href="/faq/1759959.html" class="wdcdcCons">合理使用HTML5输入类型可提升移动端表单体验,如type="tel"调出数字键盘,type="email"显示@符号,结合单列布局、标签置顶、增大点击区域、启用自动填充与实时校验,能有效减少输入错误、提高操作效率。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:55:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">943</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759958.html"  target="_blank" title="HTML复选框怎么设置_HTMLcheckbox复选框的创建与使用技巧" class="wdcdcTitle">HTML复选框怎么设置_HTMLcheckbox复选框的创建与使用技巧</a>
                                <a href="/faq/1759958.html" class="wdcdcCons">复选框通过input标签创建,支持多选、默认选中及JavaScript控制,需注意name属性分组和未选中值不提交的问题。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:55:02</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">962</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759957.html"  target="_blank" title="HTML无序列表怎么创建_HTML无序列表如何用符号区分各项目" class="wdcdcTitle">HTML无序列表怎么创建_HTML无序列表如何用符号区分各项目</a>
                                <a href="/faq/1759957.html" class="wdcdcCons">使用和标签创建HTML无序列表,默认以实心圆点标记项目;通过CSS的list-style-type属性可改为方块、空心圆或隐藏符号,如list-style-type:square;还可用list-style-image属性设置自定义图片作为项目符号,实现个性化样式;嵌套列表时符号会自动区分层级,结合HTML与CSS能灵活控制列表外观。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:54:06</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">614</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                            <div class="wdsyConDiv flexRow wdsyConDiv1">
                            <div class="wdcdContent flexColumn">
                                <a href="/faq/1759952.html"  target="_blank" title="HTMLnav语义化怎么设计_HTML导航栏的语义化标签选择与布局方法" class="wdcdcTitle">HTMLnav语义化怎么设计_HTML导航栏的语义化标签选择与布局方法</a>
                                <a href="/faq/1759952.html" class="wdcdcCons">使用nav标签定义导航区域,结合ul和li构建结构,通过aria-label和aria-current提升可访问性,保持语义化与响应式设计统一,增强SEO与用户体验。</a>
                                <div class="wdcdcInfo flexRow">
                                    <div class="wdcdcileft">
                                        <span class="wdcdciSpan">2025-11-21 23:51:05</span>
                                    </div>
                                    <div class="wdcdciright flexRow">
                                        <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">350</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="wdsyConLine wdsyConLine2"></div>
                                        </div>
                </div>
                <div class="wzconZt" >
                    <div class="wzczt-title">
                        <div>相关专题</div>
                        <a href="/faq/zt" target="_blank">更多>
                        </a>
                    </div>
                    <div class="wzcttlist">
                        <ul>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/pythonzryyclj"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/21/2025112110574850663.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/pythonzryyclj" class="title-a-spanl"><span>Python 自然语言处理基础</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/golangkptyykf"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/20/2025112010390589735.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/golangkptyykf" class="title-a-spanl"><span>Golang 跨平台应用开发</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/javawlbcysock"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/19/2025111910391711671.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/javawlbcysock" class="title-a-spanl"><span>Java 网络编程与Socket实战</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/cqrsxtkfrmysj"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/18/2025111810563173024.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/cqrsxtkfrmysj" class="title-a-spanl"><span>C++ 嵌入式系统开发入门与实践</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/linuxyxgocx"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/17/2025111713095482426.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/linuxyxgocx" class="title-a-spanl"><span>linux 运行go程序</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/golangszsj"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/17/2025111712591113205.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/golangszsj" class="title-a-spanl"><span>golang 设置时间</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/golanggopath"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/17/2025111712510282241.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/golanggopath" class="title-a-spanl"><span>golang gopath</span> </a>
                            </li>
                                                    <li class="ul-li">
                                <a target="_blank" href="/faq/golangpamdzif"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202511/17/2025111712452557865.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                                <a target="_blank" href="/faq/golangpamdzif" class="title-a-spanl"><span>golang判断字符是否</span> </a>
                            </li>
                                                </ul>
                    </div>
                </div>
    <div class="wzcongg"><script type="text/javascript" src="https://teacher.php.cn/php/NzIzNmE5NjBlOTgwNWZlNTMzN2E0MGEzNmU3NjM3NmI6Og==" ></script></div>
            </div>
        </div>
        <div class="phpwzright">
                <div class="wzrOne" style="margin-bottom:31px; padding:0px; width: 366px;">
            <script type="text/javascript" src="https://teacher.php.cn/php/N2Q0ODk3NTAwZTFmODQ1NGM4Y2VjYzQzZTVkOTI5NDk6Og==" ></script>
            <!-- <script type="text/javascript" smua="d=p&s=b&u=u2839468&w=366&h=270" src="https://www.nkscdn.com/smu/o.js"></script> -->
            </div>
    		        <div class="wzrOne">
                <div class="wzroTitle">热门推荐</div>
                <div class="wzroList">
                    <ul>
                        
                    </ul>
                </div>
                
            </div>
            <div class="wzrTwo">
                        </div>
    		<div class="wzrTwo">
                    <div style="position: relative;"><a class="" href="https://teacher.php.cn/jump/67" title="开源免费商场系统" rel="nofollow" target="_blank"><img style="width: 100%; " src="https://img.php.cn/teacher/course/20220930/8ef7a4a308a22ece023e77e5428c0e25.png" alt="开源免费商场系统"></a><span style="position: absolute;right: 5px;border: 1px solid #333;padding: 2px;color: #333;line-height: 14px;font-size: 12px;bottom: 5px;">广告</span></div>
            		
    		</div>
            <div class="wzrThree">
                <div class="wzrthree-title">
                    <div>热门教程</div>
                    <a target="_blank" href="https://www.php.cn/k.html">更多>
                    </a>
                </div>
                <div class="wzrthreelist">
                    <div class="wzrthreeTab">
                        <div class="check tabdiv" data-id="one">相关推荐 <div></div></div>
                        <div class="tabdiv" data-id="two">热门推荐<div></div></div>
                        <div class="tabdiv" data-id="three">最新课程<div></div></div>
                    </div>
                    <ul class="one">
                    <script type="text/javascript" src="https://teacher.php.cn/php/MTJjOWU0YjVmMmE1MzI1OTgyNzRlYmJmYjE0MmZkNWY6Og==" ></script>
                                        </ul>
                    <ul class="two" style="display: none;">
                                                <li>
                                <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                    <div class="wzrthreerb">
                                        <div >64937次学习</div>
                                                                                <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
                                    <div class="wzrthreerb">
                                        <div >1484960次学习</div>
                                                                                <a class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/639.html">phpStudy极速入门视频教程</a>
                                    <div class="wzrthreerb">
                                        <div >529754次学习</div>
                                                                                <a class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a>
                                    <div class="wzrthreerb">
                                        <div >1249519次学习</div>
                                                                                <a class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a>
                                    <div class="wzrthreerb">
                                        <div >769630次学习</div>
                                                                                <a class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                        </ul>
                    <ul class="three" style="display: none;">
                                                <li>
                                <a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png" alt="最新Python教程 从入门到精通"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/1696.html">最新Python教程 从入门到精通</a>
                                    <div class="wzrthreerb">
                                        <div >2726次学习</div>
                                                                                <a class="courseICollection" data-id="1696"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                    <div class="wzrthreerb">
                                        <div >64937次学习</div>
                                                                                <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png" alt="PHP新手语法线上课程教学"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/1655.html">PHP新手语法线上课程教学</a>
                                    <div class="wzrthreerb">
                                        <div >6428次学习</div>
                                                                                <a class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/1654.html" title="支付宝沙箱支付(个人也能用的支付)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付(个人也能用的支付)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/1654.html">支付宝沙箱支付(个人也能用的支付)</a>
                                    <div class="wzrthreerb">
                                        <div >4508次学习</div>
                                                                                <a class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="/course/1650.html" title="麻省理工大佬Python课程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" href="/course/1650.html">麻省理工大佬Python课程</a>
                                    <div class="wzrthreerb">
                                        <div >41271次学习</div>
                                                                                <a class="courseICollection" data-id="1650"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                        </div>
                                </div>
                            </li>
                                        </ul>
                </div>
                <script>
                    $('.wzrthreeTab>div').click(function(e){
                        $('.wzrthreeTab>div').removeClass('check')
                        $(this).addClass('check')
                        $('.wzrthreelist>ul').css('display','none')
                        $('.'+e.currentTarget.dataset.id).show()
                    })
                </script>
            </div>
            <div class="wzrFour">
                <div class="wzrfour-title">
                    <div>最新下载</div>
                    <a href="/xiazai">更多>
                    </a>
                </div>
                            <script>
                    $(document).ready(function(){
                        var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                            speed:1000,
                            autoplay:{
                                delay:3500,
                                disableOnInteraction: false,
                            },
                            pagination:{
                                el:'.sjyx_banSwiperwz .swiper-pagination',
                                clickable :false,
                            },
                            loop:true
                        });
                        loading();
                        
                    })
    
    
                    function loading(reloading=false){
                        if(reloading){
                            $("#ai_doubao2_3_wait_right").show();
                            $("#ai_doubao2_3_wait_left").show();
                            $("#doubao_error_right").hide();
                            $("#doubao_error_left").hide();
                        }
                        $.ajax({
                            url:'/index.php/api/process?sign=&id=235369&time='+Date.now(),
                            dataType:'json',
                            async:true,
                            headers: {
                                "X-Requested-With": "XMLHttpRequest" // 标记为异步请求
                            },
                            type:'post',
                            success:function(result){
                                if(result.code!=1){
                                    $("#doubao_error_right").show();
                                    $("#ai_doubao2_3_wait_right").hide();
                                    $("#doubao_error_left").show();
                                    $("#ai_doubao2_3_wait_left").hide();
                                }else{
                                    $("#ai_doubao2_3_wait_right").hide();
                                    $("#ai_doubao2_3_wait_left").hide();
                                    let doubao_answer = `<p>`+result.data.content+`</p>`;
                                    $("#doubao_answer_right").html(doubao_answer);
                                    $("#doubao_answer_left").html(doubao_answer);
                                    let doubao_titles = '';
                                    if(result.data.title){
                                        $.each(result.data.title,function(k,v){
                                            doubao_titles+=`<div class="ai_doubao2_2s"><a rel="nofollow" target="_blank" href="https://doubao.com/chat/new-thread?flow_tracking_source=360_php&channel=360_php_abstract&source=360_db_php_abstract&keywordid=`+"235369"+`&query=参考https://www.php.cn`+"/faq/235369.html的内容,"+encodeURIComponent(v)+`" title="`+v+`"><p><img src="/static/images/doubao_yellowstar.png" alt=""> `+v+`</p></a></div>`;
                                        })
                                        
                                    }
    
                                    yigeyigezichulai(ai_doubao_titles_show,doubao_titles);
                                }
                            }
                        })
                    }
    
        function ai_doubao_titles_show(str){
            $("#ai_doubao_titles_right").html(str);
            $("#ai_doubao_titles_left").html(str);
        }
        function yigeyigezichulai(callback,str){
            const textElements = document.querySelectorAll('.yigeyigezichulai p');
            textElements.forEach(textElement => {
                const originalHTML = textElement.innerHTML; 
                const tempDiv = document.createElement('div'); 
                tempDiv.innerHTML = originalHTML;
    
                const fragments = [];
                Array.from(tempDiv.childNodes).forEach(node => {
                    if (node.nodeType === Node.TEXT_NODE) {
                        fragments.push(...node.textContent.split(''));
                    } else {
                        fragments.push(node.outerHTML);
                    }
                });
    
                textElement.innerHTML = ''; 
                let index = 0;
    
                const interval = setInterval(() => {
                    if (index < fragments.length) {
                        const fragment = fragments[index];
                        
                        
                        if (fragment.startsWith('<')) {
                            textElement.innerHTML += fragment;
                        } else {
                            textElement.innerHTML += fragment;
                        }
                    } else {
                        clearInterval(interval);
                        callback(str);
                    }
                    index++;
                }, 25); // 每 100 毫秒显示一个片段
            });
        }
                    
    
           // 豆包等待动画
           const containers = document.querySelectorAll('.ai_doubao2_3_wait') || [];
              if (containers.length > 0) {
                containers.forEach(container => {
                  if (container && container.firstElementChild) {
                    const intervalId = setInterval(() => {
                      if (!container || !container.firstElementChild) {
                        clearInterval(intervalId);
                        return;
                      }
                      const firstChild = container.firstElementChild;
                      container.appendChild(firstChild);
                    }, 300);
                  }
                });
              }
              // AI总结相关功能
              const aiZongjie = document.querySelector('.ai_zongjie');
              const aiDoubao = document.querySelector('.ai_doubao');
              const closeButton = document.querySelector('.ai_doubao1_R_img');
              if (aiZongjie && aiDoubao && closeButton) {
                aiZongjie.addEventListener('click', () => {
                  aiDoubao.style.display = 'block';
                });
                closeButton.addEventListener('click', () => {
                  aiDoubao.style.display = 'none';
                });
              }
              // 文字动画效果
              const textElements = document.querySelectorAll('.ai_doubao2_3s.ai_doubao2_3s_L p') || [];
              if (textElements.length > 0) {
                textElements.forEach(textElement => {
                  if (!textElement) return;
                  const originalHTML = textElement.innerHTML;
                  const tempDiv = document.createElement('div');
                  tempDiv.innerHTML = originalHTML;
                  const fragments = [];
                  Array.from(tempDiv.childNodes).forEach(node => {
                    if (!node) return;
                    if (node.nodeType === Node.TEXT_NODE) {
                      fragments.push(...(node.textContent || '').split(''));
                    } else {
                      fragments.push(node.outerHTML);
                    }
                  });
                  if (fragments.length === 0) return;
                  textElement.innerHTML = '';
                  let index = 0;
                  const interval = setInterval(() => {
                    if (!textElement || index >= fragments.length) {
                      clearInterval(interval);
                      return;
                    }
                    const fragment = fragments[index];
                    if (fragment) {
                      textElement.innerHTML += fragment;
                    }
                    index++;
                  }, 100);
                });
              }
              // 页面滚动监听相关
              const divai_zongjie1 = document.getElementById('ai_zongjie1');
              const divai_zongjie2 = document.getElementById('ai_zongjie2');
              const divai_zongjie3 = document.getElementById('ai_zongjie3');
              if (divai_zongjie2) {
                const observer = new IntersectionObserver((entries) => {
                  entries.forEach(entry => {
                    if (!entry.isIntersecting && divai_zongjie1) {
                      try {
                        divai_zongjie1.style.display = 'flex';
                        requestAnimationFrame(() => {
                          if (divai_zongjie1) {
                            divai_zongjie1.classList.add('visible');
                          }
                        });
                      } catch (e) {
                        console.log('元素操作失败');
                      }
                    } else if (divai_zongjie1) {
                      try {
                        divai_zongjie1.classList.remove('visible');
                        divai_zongjie1.addEventListener('transitionend', () => {
                          if (divai_zongjie1 && !divai_zongjie1.classList.contains('visible')) {
                            divai_zongjie1.style.display = 'none';
                          }
                        }, { once: true });
                        if (divai_zongjie3 && divai_zongjie3.style) {
                          divai_zongjie3.style.display = 'none';
                        }
                      } catch (e) {
                        console.log('元素操作失败');
                      }
                    }
                  });
                }, {
                  threshold: 0,
                  rootMargin: '-90px 0px 0px 0px'
                });
                try {
                  observer.observe(divai_zongjie2);
                } catch (e) {
                  console.log('观察器初始化失败');
                }
                // 滚动事件处理
                window.addEventListener('scroll', () => {
                  const scrollY = window.scrollY || window.pageYOffset;
                  if (divai_zongjie2) {
                    try {
                      divai_zongjie2.style.display = scrollY > 1000 ? 'none' : 'block';
                    } catch (e) {
                      console.log('滚动处理失败');
                    }
                  }
                });
              }
    
                </script>
                <div class="wzrfourList">
                    <div class="wzrfourlTab">
                        <div class="check" data-id="onef">网站特效 <div></div></div>
                        <div class="" data-id="twof">网站源码<div></div></div>
                        <div class="" data-id="threef">网站素材<div></div></div>
                        <div class="" data-id="fourf">前端模板<div></div></div>
                    </div>
                    <ul class="onef">
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="jQuery企业留言表单联系代码" href="/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="HTML5 MP3音乐盒播放特效" href="/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="HTML5炫酷粒子动画导航菜单特效" href="/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="jQuery可视化表单拖拽编辑代码" href="/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="VUE.JS仿酷狗音乐播放器代码" href="/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="经典html5推箱子小游戏" href="/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="jQuery滚动添加或减少图片特效" href="/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a target="_blank"  title="CSS3个人相册封面悬停放大特效" href="/xiazai/js/8064">[相册特效] CSS3个人相册封面悬停放大特效</a>
                                </div>
                            </li>
                                        </ul>
                    <ul class="twof" style="display:none">
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10787" title="日进企业管理系统" target="_blank">[企业站源码] 日进企业管理系统</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10786" title="新快购物系统" target="_blank">[电商源码] 新快购物系统</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10785" title="蓝色商务公司网站(XDcms内核)1.0" target="_blank">[企业站源码] 蓝色商务公司网站(XDcms内核)1.0</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10784" title="DSO2O外卖订餐开源系统源码" target="_blank">[电商源码] DSO2O外卖订餐开源系统源码</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10783" title="我要服装批发网" target="_blank">[电商源码] 我要服装批发网</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10782" title="QQ号码交易网" target="_blank">[电商源码] QQ号码交易网</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10781" title="远航CMS(yhcms)(分站版)2.6.5" target="_blank">[企业站源码] 远航CMS(yhcms)(分站版)2.6.5</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/10780" title="最土团购系统" target="_blank">[电商源码] 最土团购系统</a>
                                </div>
                            </li>
                                        </ul>
                    <ul class="threef" style="display:none">
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3770"  target="_blank"  title="浪漫地中海小镇旅行矢量图片">[网站素材] 浪漫地中海小镇旅行矢量图片</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3769"  target="_blank"  title="手绘返校季开学季矢量素材">[网站素材] 手绘返校季开学季矢量素材</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3768"  target="_blank"  title="万圣节南瓜堆合集矢量素材">[网站素材] 万圣节南瓜堆合集矢量素材</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3767"  target="_blank"  title="柔和多彩手绘农场动物矢量合集">[网站素材] 柔和多彩手绘农场动物矢量合集</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3766"  target="_blank"  title="万圣节鬼屋开放日矢量海报模板">[网站素材] 万圣节鬼屋开放日矢量海报模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3765"  target="_blank"  title="天文学与太空背景矢量素材">[网站素材] 天文学与太空背景矢量素材</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3764"  target="_blank"  title="国庆节76周年数字设计矢量模板">[网站素材] 国庆节76周年数字设计矢量模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/sucai/3763"  target="_blank"  title="万圣节月夜横幅合集矢量模板">[网站素材] 万圣节月夜横幅合集矢量模板</a>
                                </div>
                            </li>
                                        </ul>
                    <ul class="fourf" style="display:none">
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8590"  target="_blank" title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8589"  target="_blank" title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8588"  target="_blank" title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8587"  target="_blank" title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8586"  target="_blank" title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8585"  target="_blank" title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8584"  target="_blank" title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzrfourli">
                                    <span class="layui-badge-dots wzrflr"></span>
                                    <a href="/xiazai/code/8583"  target="_blank" title="创意T恤打印店网站HTML5模板">[前端模板] 创意T恤打印店网站HTML5模板</a>
                                </div>
                            </li>
                                        </ul>
                </div>
                <script>
                    $('.wzrfourlTab>div').click(function(e){
                        $('.wzrfourlTab>div').removeClass('check')
                        $(this).addClass('check')
                        $('.wzrfourList>ul').css('display','none')
                        $('.'+e.currentTarget.dataset.id).show()
                    })
                </script>
            </div>
        </div>
    </div>
    <!--主体 end-->
    <!--底部-->
    <div class="phpFoot">
        <div class="phpFootIn">
            <div class="phpFootCont">
                <div class="phpFootLeft">
                    <dl>
                        <dt>
                            <a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a>
                            <a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a>
                            <a href="/about/jbzx.html" rel="nofollow" target="_blank" title="举报中心" class="cBlack">举报中心</a>
                            <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                            <a href="https://www.php.cn/teacher.html" rel="nofollow"  target="_blank" title="讲师合作" class="cBlack">讲师合作</a>
                            <a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>
                            <!--<a href="javascript:;" target="_blank" title="其他合作" class="cBlack">其他合作</a>-->
                            <a href="/new/"   target="_blank" title="最新文章列表" class="cBlack">最新更新</a>
                            <a href="https://global.php.cn/"   target="_blank" title="English" class="cBlack">English</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" target="_blank" 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 class="phpFootMsg">
                        <span><img src="/static/images/examples/text14.png"/></span>
                        <dl>
                            <dt>PHP中文网APP</dt>
                            <dd>随时随地碎片化学习</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="phpFootCode">
            <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><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>
    
    
    
    
    <!--底部 end-->
    <script>
        $(function() {
            //直播倒计时
            $(".liveitem").each(function(){
                timer(this);
            })
            function timer(obj){
                var intDiff = $(obj).data("countdown");
                window.setInterval(function(){
                    var day=0,
                        hour=0,
                        minute=0,
                        second=0;//时间默认值
                    if(intDiff > 0){
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }else{
                        $(obj).find(".phpZbktBg").remove();
                        return;
                    }
                    if (hour <= 9) hour = '0' + hour;
                    if (minute <= 9) minute = '0' + minute;
                    if (second <= 9) second = '0' + second;
                    $(obj).find('.day_show').html(day+"");
                    $(obj).find('.hour_show').html('<s id="h"></s>'+hour+'');
                    $(obj).find('.minute_show').html('<s></s>'+minute+'');
                    $(obj).find('.second_show').html('<s></s>'+second+'');
                    intDiff--;
                }, 1000);
            }
        });
    </script>
    <script type="text/javascript" src="/hitsUp?type=article&id=235369&time=1763747070"></script>
    <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1763747070"></script>
    <script>article_status = "0";</script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <!-- <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> -->
    <input type="hidden" id="verifycode" value="/captcha.html">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/common_new.js?2.1" ></script>
    <script type="text/javascript" src="/static/js/global.min.js?5.5.33"></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 type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script>var topadshow = $.cookie('phpcndatatopadshows');if(!topadshow&&1==2){$('.topimages').show();var topobj = $('.topimages').find('.time');var topobj_day = $('.topimages .time').find('.day');var topobj_hours = $('.topimages .time').find('.hours');var topobj_minutes = $('.topimages .time').find('.minutes');var topobj_second = $('.topimages .time').find('.second');var topday = parseInt(topobj_day.html());var tophours = parseInt(topobj_hours.html());var topminutes = parseInt(topobj_minutes.html());var topsecond = parseInt(topobj_second.html());setInterval(function(){if(topsecond > 0){topsecond = topsecond-1;}else{if(topminutes > 0){topminutes = topminutes-1;topsecond = 59;}else{if(tophours > 0){tophours = tophours-1;topminutes = 59;topsecond = 59;}else{if(topday > 0){topday = topday -1;tophours = 23;topminutes = 59;topsecond = 59;}else{topobj.html("<p><span>活动已结束</span></p>");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});</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>
    <style>
            .content img{max-width:100%;}
            .copy-button {
                padding: 5px 10px;
                background-color: #666;
                border: none;
                color: #FFF;
                font-size: 12px;
                cursor: pointer;
                border-radius: 5px;
                position: relative;
                top: 33px;
        right: 5px;
        z-index: 99;
        float: right;
            }
            .copy-button:hover {
                background-color: #fc3930;
            }
        </style>
    <script>
        $(document).ready(function(){
            $('#gongzhonghao').hover(function(){
                $('#gzh').show();
            },function(){
                $('#gzh').hide();
            })
        })
    </script>
    <script>
        layui.use(['jquery','layer'], function(){
            $('.test-iframe-handle').click(function(){
                    layer.open({
                    type: 2,
                    area: ['1300px', '750px'],
                    content: 'https://www.php.cn/help/ask?q=%E3%80%8AJava+Script+DOM%E7%BC%96%E7%A8%8B%E8%89%BA%E6%9C%AF%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0--DOM_html%2Fcss_WEB-ITnose',
                    fixed: true, // 不固定
                    //maxmin: true,
                    shadeClose: true,
                    title:"智能小助手",
                    btnAlign: 'c',
                    yes: function(index, layero){
                        // 获取 iframe 的窗口对象
                        var iframeWin =  window[layero.find('iframe')[0]['name']];
                        var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
                        var value = elemMark.val();
                        if($.trim(value) === '') return elemMark.focus();
                        // 显示获得的值
                        layer.msg('获得 iframe 中的输入框标记值:'+ value);
                    }
                    });
                })
            var is_login = "0";
            var show = 0;
            var ceng = getCookie('ceng');
            //文章下拉弹出登录
            // if(is_login == 0 && !ceng)
            // {
            //     window.onscroll = function(){
            //         var t = document.documentElement.scrollTop || document.body.scrollTop;
            //         var top_div = document.getElementById( "top_div" );
            //         if( t >= 2500 && show == 0) {
            //             show = 1
            //             setCookie('ceng',1,1);
            //             $(document).trigger("api.loginpopbox");
            //         }
            //     }
            // }
            //未登录复制显示登录按钮
            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);
            });
            }
        })
        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;
        }
    
        function aiask(ask){
            layer.open({
                type: 2,
                area: ['1300px', '750px'],
                content: 'https://www.php.cn/help/ask?q='+encodeURIComponent(ask),
                fixed: true, // 不固定
                //maxmin: true,
                shadeClose: true,
                title:"智能小助手",
                btnAlign: 'c',
                yes: function(index, layero){
                    // 获取 iframe 的窗口对象
                    var iframeWin =  window[layero.find('iframe')[0]['name']];
                    var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
                    var value = elemMark.val();
                    if($.trim(value) === '') return elemMark.focus();
                    // 显示获得的值
                    layer.msg('获得 iframe 中的输入框标记值:'+ value);
                }
            });
        }
    
    </script>
    <!--底部浮动层-->
    <!--
        <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" target="_blank" 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" target="_blank">
                        <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>
    <!--侧导航 end-->
    <!-- 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', '11']);
        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>
    </body>
    </html>