How to delete child elements in jquery and keep the first one

WBOY
Release: 2022-05-18 16:18:17
Original
2732 people have browsed it

Method: 1. Use "$(element).children()" to get the child element object of the element; 2. Use "child element object.not(":first")" to get the first child Child element objects outside the element; 3. Use "Child element object except the first child element.remove()" to delete the child elements and keep the first one.

How to delete child elements in jquery and keep the first one

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How jquery deletes child elements and retains the first one

1. Use children to obtain child elements

The children() method returns the selected element All direct child elements.

DOM tree: This method only traverses a single level down the DOM tree. To traverse down multiple levels (returning descendant nodes or other descendants), use the find() method.

Tip: To traverse a single level up the DOM tree, or to traverse all paths up to the root element of the document (returning parent nodes or other ancestors), use the parent() or parents() method.

The syntax is:

$(selector).children(filter)
Copy after login

2. Use not to cooperate: first to exclude the first child element

not() method returns no Elements that meet certain conditions.

This method lets you specify a condition. Elements that do not meet the criteria will be returned from the selection, and elements that meet the criteria will be removed.

This method is usually used to remove one or more elements from the selected element combination.

:first selector selects the first element.

The syntax is

$(":first")
Copy after login

3. Use remove to delete elements

remove() method removes the selected elements, including all text and child nodes.

This method will also remove the data and events of the selected element.

The syntax is:

$(selector).remove()
Copy after login

The example is as follows:

    123/title> <style> .descendants *{ display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("ul").children().not(":first").remove(); }); </script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body class="descendants">body (曾祖先节点) <div style="width:500px;">div (祖先节点) <ul>ul (直接父节点) <li>li (第一个子节点) <span>span (孙节点)</span> </li> <li>li (第二个子节点) <span>span (孙节点)</span> </li> <li>li (第三个子节点) <span>span (孙节点)</span> </li> <li>li (第四个子节点) <span>span (孙节点)</span> </li> </ul> </div> </body> </html></pre>
        <div class="contentsignin">
         Copy after login
        </div>
       </div>
       <p>Output result:</p>
       <p><img src="https://img.php.cn/upload/image/529/151/815/1652861347281002.png" title="1652861347281002.png" alt="How to delete child elements in jquery and keep the first one"></p>
       <p>Related video tutorials Recommended:<a href="//m.sbmmt.com/course/list/19.html" target="_blank" textvalue="jQuery教程">jQuery video tutorial</a></p>
       <p>The above is the detailed content of How to delete child elements in jquery and keep the first one. For more information, please follow other related articles on the PHP Chinese website!</p>
      </div>
     </div>
     <div style="height: 25px;">
      <div class="wzconBq" style="display: inline-flex;">
       <span>Related labels:</span>
       <div class="wzcbqd">
        <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=jquery" target="_blank">jquery</a>
       </div>
      </div>
      <div style="display: inline-flex;float: right; color:#333333;">
       source:php.cn
      </div>
     </div>
     <div class="wzconOtherwz">
      <a href="//m.sbmmt.com/faq/492053.html" title=""><span>Previous article:How to remove br in jquery</span></a>
      <a href="//m.sbmmt.com/faq/492055.html" title=""><span>Next article:Is figure a new tag in html5?</span></a>
     </div>
     <div class="wzconShengming">
      <div class="bzsmdiv">
       Statement of this Website
      </div>
      <div>
       The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      </div>
     </div>
     <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
     <div class="wzconZzwz">
      <div class="wzconZzwztitle">
       Latest Articles by Author
      </div>
      <ul>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607927.html">SEC Adjusts Its Approach in Binance Case, But ADA and SOL Remain Bearish</a>
        </div>
        <div>
         2024-09-14 12:05:17
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607926.html">Coinbase Wrapped BTC (cbBTC) Brings New DeFi Opportunities, Tests Key Resistance</a>
        </div>
        <div>
         2024-09-14 12:00:16
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607877.html">How to clear usage history in Win8</a>
        </div>
        <div>
         2024-09-14 10:34:37
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607872.html">What to do if Windows 10 cannot copy and paste</a>
        </div>
        <div>
         2024-09-14 10:34:11
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607871.html">What to do if Windows 10 cannot copy and paste</a>
        </div>
        <div>
         2024-09-14 10:34:03
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607869.html">How to change the screen brightness in win11 How to change the screen brightness in win11</a>
        </div>
        <div>
         2024-09-14 10:33:46
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607867.html">How to enable resource sharing in Windows 11</a>
        </div>
        <div>
         2024-09-14 10:33:39
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607866.html">How to uninstall Win11 Master Lu? Win11 Master Lu uninstallation clean tutorial</a>
        </div>
        <div>
         2024-09-14 10:33:02
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607863.html">How to set Office theme in Word How to set dark gray Office theme in Word</a>
        </div>
        <div>
         2024-09-14 10:32:51
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796607862.html">How to take long screenshots of QQ in win11</a>
        </div>
        <div>
         2024-09-14 10:32:40
        </div></li>
      </ul>
     </div>
     <div class="wzconZzwz">
      <div class="wzconZzwztitle">
       Latest Issues
      </div>
      <div class="wdsyContent">
       <div class="wdsyConDiv flexRow wdsyConDiv1">
        <div class="wdcdContent flexColumn">
         <a href="//m.sbmmt.com/wenda/173434.html" target="_blank" title="Steps to install jQuery in Nuxt.js" class="wdcdcTitle">Steps to install jQuery in Nuxt.js</a>
         <a href="//m.sbmmt.com/wenda/173434.html" class="wdcdcCons">Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-11-06 16:41:50</span>
          </div>
          <div class="wdcdciright flexRow">
           <div class="wdcdcirdz flexRow ira">
            <b class="wdcdcirdzi"></b>0
           </div>
           <div class="wdcdcirpl flexRow ira">
            <b class="wdcdcirpli"></b>1
           </div>
           <div class="wdcdcirwatch flexRow ira">
            <b class="wdcdcirwatchi"></b>225
           </div>
          </div>
         </div>
        </div>
       </div>
       <div class="wdsyConLine wdsyConLine2"></div>
       <div class="wdsyConDiv flexRow wdsyConDiv1">
        <div class="wdcdContent flexColumn">
         <a href="//m.sbmmt.com/wenda/173359.html" target="_blank" title="jQuery getting wrong value when getting data attribute" class="wdcdcTitle">jQuery getting wrong value when getting data attribute</a>
         <a href="//m.sbmmt.com/wenda/173359.html" class="wdcdcCons">I have a div with data attribute <divclass='p1'data-location='1'></div> I have...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-11-01 23:01:19</span>
          </div>
          <div class="wdcdciright flexRow">
           <div class="wdcdcirdz flexRow ira">
            <b class="wdcdcirdzi"></b>0
           </div>
           <div class="wdcdcirpl flexRow ira">
            <b class="wdcdcirpli"></b>1
           </div>
           <div class="wdcdcirwatch flexRow ira">
            <b class="wdcdcirwatchi"></b>209
           </div>
          </div>
         </div>
        </div>
       </div>
       <div class="wdsyConLine wdsyConLine2"></div>
       <div class="wdsyConDiv flexRow wdsyConDiv1">
        <div class="wdcdContent flexColumn">
         <a href="//m.sbmmt.com/wenda/173278.html" target="_blank" title="Support jQuery's Transfer-Encoding:chunked" class="wdcdcTitle">Support jQuery's Transfer-Encoding:chunked</a>
         <a href="//m.sbmmt.com/wenda/173278.html" class="wdcdcCons">I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-25 23:44:37</span>
          </div>
          <div class="wdcdciright flexRow">
           <div class="wdcdcirdz flexRow ira">
            <b class="wdcdcirdzi"></b>0
           </div>
           <div class="wdcdcirpl flexRow ira">
            <b class="wdcdcirpli"></b>1
           </div>
           <div class="wdcdcirwatch flexRow ira">
            <b class="wdcdcirwatchi"></b>230
           </div>
          </div>
         </div>
        </div>
       </div>
       <div class="wdsyConLine wdsyConLine2"></div>
       <div class="wdsyConDiv flexRow wdsyConDiv1">
        <div class="wdcdContent flexColumn">
         <a href="//m.sbmmt.com/wenda/173204.html" target="_blank" title="How to get the natural dimensions of an image using JavaScript or jQuery?" class="wdcdcTitle">How to get the natural dimensions of an image using JavaScript or jQuery?</a>
         <a href="//m.sbmmt.com/wenda/173204.html" class="wdcdcCons">So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientW...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-21 13:53:08</span>
          </div>
          <div class="wdcdciright flexRow">
           <div class="wdcdcirdz flexRow ira">
            <b class="wdcdcirdzi"></b>0
           </div>
           <div class="wdcdcirpl flexRow ira">
            <b class="wdcdcirpli"></b>2
           </div>
           <div class="wdcdcirwatch flexRow ira">
            <b class="wdcdcirwatchi"></b>275
           </div>
          </div>
         </div>
        </div>
       </div>
       <div class="wdsyConLine wdsyConLine2"></div>
       <div class="wdsyConDiv flexRow wdsyConDiv1">
        <div class="wdcdContent flexColumn">
         <a href="//m.sbmmt.com/wenda/173199.html" target="_blank" title="Automatically expand text area" class="wdcdcTitle">Automatically expand text area</a>
         <a href="//m.sbmmt.com/wenda/173199.html" class="wdcdcCons">I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-21 08:49:23</span>
          </div>
          <div class="wdcdciright flexRow">
           <div class="wdcdcirdz flexRow ira">
            <b class="wdcdcirdzi"></b>0
           </div>
           <div class="wdcdcirpl flexRow ira">
            <b class="wdcdcirpli"></b>2
           </div>
           <div class="wdcdcirwatch flexRow ira">
            <b class="wdcdcirwatchi"></b>225
           </div>
          </div>
         </div>
        </div>
       </div>
       <div class="wdsyConLine wdsyConLine2"></div>
      </div>
     </div>
     <div class="wzconZt">
      <div class="wzczt-title">
       <div>
        Related Topics
       </div>
       <a href="//m.sbmmt.com/faq/zt" target="_blank">More></a>
      </div>
      <div class="wzcttlist">
       <ul>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jquerycj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214090249571.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the jquery plug-ins?"></a><a target="_blank" href="//m.sbmmt.com/faq/jquerycj" class="title-a-spanl" title=""><span>What are the jquery plug-ins?</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jqueryczjson"><img src="https://img.php.cn/upload/subject/202407/22/2024072213594977569.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to operate json with jquery"></a><a target="_blank" href="//m.sbmmt.com/faq/jqueryczjson" class="title-a-spanl" title=""><span>How to operate json with jquery</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jqueryscysdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213492197549.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to delete elements in jquery"></a><a target="_blank" href="//m.sbmmt.com/faq/jqueryscysdff" class="title-a-spanl" title=""><span>How to delete elements in jquery</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jqueryhover"><img src="https://img.php.cn/upload/subject/202407/22/2024072213412394552.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Use of jQuery hover() method"></a><a target="_blank" href="//m.sbmmt.com/faq/jqueryhover" class="title-a-spanl" title=""><span>Use of jQuery hover() method</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jquerysxfyff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213402127780.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="jquery implements paging method"></a><a target="_blank" href="//m.sbmmt.com/faq/jquerysxfyff" class="title-a-spanl" title=""><span>jquery implements paging method</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jqueryycysssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212341645428.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is a hidden element in jquery"></a><a target="_blank" href="//m.sbmmt.com/faq/jqueryycysssm" class="title-a-spanl" title=""><span>What is a hidden element in jquery</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jqueryzsmsglx"><img src="https://img.php.cn/upload/subject/202407/22/2024072212341471017.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is highlighting in jquery"></a><a target="_blank" href="//m.sbmmt.com/faq/jqueryzsmsglx" class="title-a-spanl" title=""><span>What is highlighting in jquery</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/imgwjzmdk"><img src="https://img.php.cn/upload/subject/202407/22/2024072214072468018.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to open img file"></a><a target="_blank" href="//m.sbmmt.com/faq/imgwjzmdk" class="title-a-spanl" title=""><span>How to open img file</span></a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <div class="phpwzright">
    <div class="wzrOne">
     <div class="wzroTitle">
      Popular Recommendations
     </div>
     <div class="wzroList">
      <ul>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What is a URL address" href="//m.sbmmt.com/faq/414430.html">What is a URL address</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What does web side mean?" href="//m.sbmmt.com/faq/417340.html">What does web side mean?</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What are the programming languages?" href="//m.sbmmt.com/faq/414438.html">What are the programming languages?</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What is IT industry" href="//m.sbmmt.com/faq/419217.html">What is IT industry</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What does error mean?" href="//m.sbmmt.com/faq/414287.html">What does error mean?</a>
        </div></li>
      </ul>
     </div>
    </div>
    <div class="wzrThree">
     <div class="wzrthree-title">
      <div>
       Popular Tutorials
      </div>
      <a target="_blank" href="//m.sbmmt.com/course.html">More></a>
     </div>
     <div class="wzrthreelist swiper2">
      <div class="wzrthreeTab  swiper-wrapper">
       <div class="check tabdiv swiper-slide" data-id="one">
        Related Tutorials
        <div></div>
       </div>
       <div class="tabdiv swiper-slide" data-id="two">
        Popular Recommendations
        <div></div>
       </div>
       <div class="tabdiv swiper-slide" data-id="three">
        Latest courses
        <div></div>
       </div>
      </div>
      <ul class="one">
       <li><a target="_blank" href="//m.sbmmt.com/course/815.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/625d1efb4fb2c401.jpg" alt="jQuery in-depth video tutorial"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="jQuery in-depth video tutorial" href="//m.sbmmt.com/course/815.html">jQuery in-depth video tutorial</a>
         <div class="wzrthreerb">
          <div>
           23518
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="815">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/manual/view/33125.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6260f700539c9874.jpg" alt="jquery.api.3.2.1 Chinese manual"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="jquery.api.3.2.1 Chinese manual" href="//m.sbmmt.com/manual/view/33125.html">jquery.api.3.2.1 Chinese manual</a>
         <div class="wzrthreerb">
          <div>
           4517
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="839">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/865.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6257ccf56e8ea393.png" alt="jquery fun class (quick start version)"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="jquery fun class (quick start version)" href="//m.sbmmt.com/course/865.html">jquery fun class (quick start version)</a>
         <div class="wzrthreerb">
          <div>
           52619
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="865">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/750.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/625e5c9295f27837.jpg" alt="jQuery Fun Class"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="jQuery Fun Class" href="//m.sbmmt.com/course/750.html">jQuery Fun Class</a>
         <div class="wzrthreerb">
          <div>
           39657
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="750">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
      </ul>
      <ul class="two" style="display: none;">
       <li><a target="_blank" href="//m.sbmmt.com/course/812.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="//m.sbmmt.com/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
         <div class="wzrthreerb">
          <div>
           1402406 times of learning
          </div>
          <div class="courseICollection" data-id="812">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/286.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="JAVA Beginner's Video Tutorial" href="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a>
         <div class="wzrthreerb">
          <div>
           2410054 times of learning
          </div>
          <div class="courseICollection" data-id="286">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/504.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
         <div class="wzrthreerb">
          <div>
           497390 times of learning
          </div>
          <div class="courseICollection" data-id="504">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/901.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Quick introduction to web front-end development" href="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a>
         <div class="wzrthreerb">
          <div>
           214107 times of learning
          </div>
          <div class="courseICollection" data-id="901">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/234.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Master PS video tutorials from scratch" href="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a>
         <div class="wzrthreerb">
          <div>
           856622 times of learning
          </div>
          <div class="courseICollection" data-id="234">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
      </ul>
      <ul class="three" style="display: none;">
       <li><a target="_blank" href="//m.sbmmt.com/course/1648.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="[Web front-end] Node.js quick start" href="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a>
         <div class="wzrthreerb">
          <div>
           4542 times of learning
          </div>
          <div class="courseICollection" data-id="1648">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/1647.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a>
         <div class="wzrthreerb">
          <div>
           3563 times of learning
          </div>
          <div class="courseICollection" data-id="1647">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/1646.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Go language practical GraphQL" href="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a>
         <div class="wzrthreerb">
          <div>
           3044 times of learning
          </div>
          <div class="courseICollection" data-id="1646">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/1645.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a>
         <div class="wzrthreerb">
          <div>
           552 times of learning
          </div>
          <div class="courseICollection" data-id="1645">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/1644.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a>
         <div class="wzrthreerb">
          <div>
           15755 times of learning
          </div>
          <div class="courseICollection" data-id="1644">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
      </ul>
     </div>
    </div>
    <div class="wzrFour">
     <div class="wzrfour-title">
      <div>
       Latest Downloads
      </div>
      <a href="//m.sbmmt.com/xiazai">More></a>
     </div>
     <div class="wzrfourList swiper3">
      <div class="wzrfourlTab swiper-wrapper">
       <div class="check swiper-slide" data-id="onef">
        Web Effects
        <div></div>
       </div>
       <div class="swiper-slide" data-id="twof">
        Website Source Code
        <div></div>
       </div>
       <div class="swiper-slide" data-id="threef">
        Website Materials
        <div></div>
       </div>
       <div class="swiper-slide" data-id="fourf">
        Front End Template
        <div></div>
       </div>
      </div>
      <ul class="onef">
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[form button] jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[Player special effects] HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[Menu navigation] HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[form button] jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[Player special effects] VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[html5 special effects] Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[Picture special effects] jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a target="_blank" title="[Photo album effects] CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a>
        </div></li>
      </ul>
      <ul class="twof" style="display:none">
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8328" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8327" title="[Front-end template] Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8326" title="[Front-end template] Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8325" title="[Front-end template] Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8324" title="[Front-end template] Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8323" title="[Front-end template] Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8322" title="[Front-end template] IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8321" title="[Front-end template] Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a>
        </div></li>
      </ul>
      <ul class="threef" style="display:none">
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3078" target="_blank" title="[PNG material] Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="[PNG material] Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="[PNG material] Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="[banner picture] Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a>
        </div></li>
      </ul>
      <ul class="fourf" style="display:none">
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8328" target="_blank" title="[Front-end template] Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="[Front-end template] Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="[Front-end template] Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="[Front-end template] Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="[Front-end template] Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="[Front-end template] Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="[Front-end template] IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a>
        </div></li>
       <li>
        <div class="wzrfourli">
         <span class="layui-badge-dots wzrflr"></span>
         <a href="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="[Front-end template] Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a>
        </div></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
  <div class="phpFoot">
   <div class="phpFootIn">
    <div class="phpFootCont">
     <div class="phpFootLeft">
      <dl>
       <dt>
        <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a>
        <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a>
        <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
        <div class="clear"></div>
       </dt>
       <dd class="cont1">
        php.cn:Public welfare online PHP training,Help PHP learners grow quickly!
       </dd>
      </dl>
     </div>
    </div>
   </div>
  </div>
  <input type="hidden" id="verifycode" value="/captcha.html">
  <link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all">
 </body>
</html>