Recently, I found that all major libraries can use div.innerHTML=HTML fragments to generate node elements, and then insert them into various positions of the target element. This thing is actually insertAdjacentHTML, but IE's abominable innerHTML turns this advantage into a disadvantage. First, innerHTML will remove the blank spaces in certain positions. See the results of the run box below:
<br> IE's InnerHtml By Situ Zhengmei <br> & lt;/Title & GT; <br> & LT; Script Type = "Text/Javascript" & GT; <br> Window.onload = Function () {<br> VAR DIV = D = D = D = D ocument.createelement ( "div");<br> div.innerHTML = " <td> <b>Situ</b>正美 " "<br> " alert("|" div.innerHTML "|"); <br> var c = div.childNodes; <br> alert(c[i].nodeType);<br> if(c[i].nodeType === 1){<br> alert(":: " c[i] .childNodes.length);<br> ><br> <br>
<br></html><br>
<br><br><br>
<br>Another nasty thing is that the innerHTML of the following elements is read-only in IE: col, colgroup, frameset, html, head, style, table, tbody, tfoot, thead, title and tr. In order to clean them up, Ext specially made an insertIntoTable. insertIntoTable is added using DOM's insertBefore and appendChild. The situation is basically the same as jQuery. However, jQuery completely relies on these two methods, and Ext also uses insertAdjacentHTML. In order to improve efficiency, all class libraries use document fragmentation invariably. The basic process is to extract nodes through div.innerHTML, then transfer them to document fragments, and then use insertBefore and appendChild to insert nodes. For Firefox, Ext also uses createContextualFragment to parse the text and insert it directly into its target location. Obviously, Ext is much faster than jQuery. However, jQuery inserts not only HTML fragments, but also various nodes and jQuery objects. Let’s review the jQuery workflow. <br>
<br><br><p></p>Copy code<p></p>
</div> The code is as follows:<p></p>
<div class="codebody" id="code51724">
<br>append: function() { <br> //Pass in the arguments object, true means special processing of the table, callback function <br> return this.domManip(arguments, true, function(elem){ <br> if (this.nodeType == 1) <br> this.appendChild( elem ); <br> }); <br>}, <br>domManip: function( args, table, callback ) { <br> if ( this[0] ) {//If there is an element node <br> var fragment = (this[0].ownerDocument || this[0]).createDocumentFragment(), <br> //Note that three are passed in here parameters <br> scripts = jQuery.clean( args, (this[0].ownerDocument || this[0]), fragment ), <br> first = fragment.firstChild; <br><br> if ( first ) <br> for ( var i = 0, l = this.length; i < l; i ) <BR> callback.call( root(this[i], first), this.length > 1 || i > ; 0 ? <br> fragment.cloneNode(true) : fragment ); <br><br> if ( scripts ) <br> jQuery.each( scripts, evalScript ); <br> } <br><br> return this ; <br><br> function root( elem, cur ) { <br> return table && jQuery.nodeName(elem, "table") && jQuery.nodeName(cur, "tr") ? <br> (elem.getElementsByTagName ("tbody")[0] || <br> elem.appendChild(elem.ownerDocument.createElement("tbody"))) : <br> elem; <br> } <br>} <br>//elems are arguments object, context is the document object, and fragment is the empty document fragment <br>clean: function( elems, context, fragment ) { <br> context = context || document; <br><br> // !context.createElement fails in IE with an error but returns typeof 'object' <br> if ( typeof context.createElement === "undefined" ) <br> //Make sure context is a document object<br> context = context.ownerDocument || context[ 0] && context[0].ownerDocument || document; <br><br> // If a single string is passed in and it's a single tag <br> // just do a createElement and skip the rest <br> / /If there is only one tag in the document object, such as <div> <br> //We may call it like this from outside $(this).append("<div>") <br> //At this time Directly take out the element name inside it, create it with document.createElement("div") and put it into the array to return <br> if ( !fragment && elems.length === 1 && typeof elems[0] === "string " ) { <br> var match = /^<(w )s*/?>$/.exec(elems[0]); <br> if ( match ) <br> return [ context.createElement( match [1] ) ]; <br> } <br> //Use the innerHTML of a div to create nodes <br> var ret = [], scripts = [], div = context.createElement("div"); <br> //If we add $(this).append("<td>Table 1</td>", "<td>Table 1</td>", "<td>Table 1< ;/td>") <br> //jQuery.each traverses the agents object according to its fourth branching method (no parameters, length), callback.call( value, i, value ) <br> jQuery.each (elems, function(i, elem){//i is the index, elem is the element in the arguments object <br> if ( typeof elem === "number" ) <br> elem = ''; <br><br> if ( !elem ) <br> return; <br><br> // Convert html string into DOM nodes <br> if ( typeof elem === "string" ) { <br> // Fix "XHTML"- style tags in all browsers <br> elem = elem.replace(/(<(w )[^>]*?)/>/g, function(all, front, tag){ <br> return tag. match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ? >"; <br> }); <br><br> // Trim whitespace, otherwise indexOf won't work as expected <br> var tags = elem.replace(/^\s+/, "").substring(0, 10).toLowerCase(); <br><br> var wrap = <br> // option or optgroup <br> !tags.indexOf("<opt") && <BR> [ 1, "<select multiple='multiple'>", "</select>" ] || <br><br> !tags.indexOf("<leg") && <BR> [ 1, "<fieldset>", "</fieldset>" ] || <br><br> tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && <BR> [ 1, "<table>", "</table>" ] || <br><br> !tags.indexOf("<tr") && <BR> [ 2, "<table><tbody>", "</tbody></table>" ] || <br><br> // <thead> matched above <br> (!tags.indexOf("<td") || !tags.indexOf("<th")) && <BR> [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || <br><br> !tags.indexOf("<col") && <BR> [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || <br><br> // IE can't serialize <link> and <script> tags normally <br> !jQuery.support.htmlSerialize &&//用于创建link元素 <br> [ 1, "div<div>", "</div>" ] || <br><br> ] elem wrap[2];//For example "<table><tbody><tr>" <td>Table 1</td> "</tr></tbody></table> " <br><br> // Move to the right depth <br> while ( wrap[0]-- ) <br> div = div.lastChild; <br><br> // Process IE to automatically insert tbody, such as We use $('<thead></thead>') to create an HTML fragment, which should return <br> //'<thead></thead>', while IE will return '<thead>< ;/thead><tbody></tbody>' <br> if ( !jQuery.support.tbody ) { <br><br> // String was a <table>, *may* have spurious < tbody> <br> var hasBody = /<tbody/i.test(elem), <br> tbody = !tags.indexOf("<table") && !hasBody ? <br> div.firstChild && div.firstChild .childNodes : <br><br> // String was a bare <thead> or <tfoot> <br> wrap[1] == "<table>" && !hasBody ? <br> div.childNodes : <br> []; <br> for (var j = tBody.length -1; j & gt; = 0; --j) <br> // If it is automatically inserted, there must be no content <br> if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) <br> tbody[ j ].parentNode.removeChild( tbody[ j ] ); <br><br> } <br><br> // IE completely kills leading whitespace when innerHTML is used <br> if ( !jQuery.support.leadingWhitespace && /^s/.test( elem ) ) <br> div.insertBefore( context.createTextNode ( elem.match(/^s*/)[0] ), div.firstChild ); <br> //Make all nodes into pure arrays<br> elem = jQuery.makeArray( div.childNodes ); <br> } <br><br> if ( elem.nodeType ) <br> ret.push( elem ); <br> else<br> // Merge the two arrays, the merge method will handle the disappearance of the object element under IE param element <br> ret = jQuery.merge( ret, elem ); <br><br> }); <br><br> if ( fragment ) { <br> for ( var i = 0; ret[i] ; i ) { <br> //If the childNodes of the first layer have script element nodes, use scripts to collect them for later dynamic execution using globalEval <br> if ( jQuery.nodeName( ret[i], " script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) { <br> scripts.push( ret[i].parentNode ? ret [i].parentNode.removeChild( ret[i] ) : ret[i] ); <br> . nodeType === 1 ) <br> ret.splice.apply( ret, [i 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) ); <br> fragment. appendChild( ret[i] ); <br> } <br> } <br><br> return scripts;//Since dynamic insertion passes in three parameters, <br> is returned here } <br><br> return ret; <br>}, <br>
<br><br>
<p><img src="http://files.jb51.net/file_images/article/201311/20131112145628668.jpg" alt="In-depth understanding of javascript dynamic insertion technology_javascript skills" ></p>
<p>It’s so complicated that it makes me cry! However, jQuery's implementation is not very clever. It uses clean to convert all inserted things into node collections, then puts them into a document fragment, and then uses appendChild and insertBefore to insert them. Today, except for Firefox, other browsers support the insertAdjactentXXX family, so you should make good use of these native APIs. The following is the DomHelper method implemented by Ext using insertAdjactentHTML and other methods. The data given by the official website: </p>
<p><img src="http://files.jb51.net/file_images/article/201311/20131112145751246.jpg" alt="In-depth understanding of javascript dynamic insertion technology_javascript skills" ></p>
<p>This data is a bit old, and the latest 3.03 has long solved the criticism of inserting content into IE tables (the innerHTML of table, tbody, tr, etc. are all read-only, and methods such as insertAdjactentHTML and pasteHTML cannot modify their content. You need to use The slow, standard DOM approach will do, and this is where early versions of Ext failed). It can be seen that after combining insertAdjactentHTML and document fragmentation, the speed of inserting nodes in IE6 has also been incredibly improved, almost approaching that of Firefox. Based on it, Ext developed four branch methods insertBefore, insertAfter, insertFirst, and append, which correspond to jQuery's before, after, prepend, and append respectively. However, jQuery also cleverly swapped these methods with the caller and the incoming parameters, deriving the insertBefore, insertAfter, prependTo, and appendTo methods. But in any case, jQuery’s one-size-fits-all approach is hard to disagree with. The following is a version of the insertAdjactentXXX family implemented in Firefox: </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="29698" class="copybut" id="copybut29698" onclick="doCopy('code29698')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code29698">
<br>(function() { <br> if ('HTMLElement ' in this) { <br> If('insertAdjacentHTML' in HTMLElement.prototype) { <br> return<br> } <br> } else { <br> return<br> } <br><br> function insert( w, n) { <br> switch(w.toUpperCase()) { <br> case 'BEFOREEND' : <br> this.appendChild(n) <br> break<br> case 'BEFOREBEGIN' : <br> this .parentNode.insertBefore(n, this) <br> break<br> case 'AFTERBEGIN' : <br> this.insertBefore(n, this.childNodes[0]) <br> break<br> case ' AFTEREND' : <br> this.parentNode.insertBefore(n, this.nextSibling) <br> break<br> } <br> } <br><br> function insertAdjacentText(w, t) { insert.call(this, w , document.createTextNode(t || '')) <br> } <br><br> function insertAdjacentHTML(w, h) { <br> var r = document.createRange() <br> r.selectNode(this) <br> insert.call(this, w, r.createContextualFragment(h)) <br> } <br><br> function insertAdjacentElement(w, n) { <br> insert.call(this, w, n) <br> return n <br> } <br><br> HTMLElement.prototype.insertAdjacentText = insertAdjacentText <br> HTMLElement.prototype.insertAdjacentHTML = insertAdjacentHTML <br> HTMLElement.prototype.insertAdjacentElement = insertAdjacent Element <br>})() <br>
<p></p>
</div>
We can use it to design a faster and more reasonable dynamic insertion method. Here are some of my implementations: <p>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="69219" class="copybut" id="copybut69219" onclick="doCopy('code69219')">Copy code<u></u></a> The code is as follows:</span><div class="codebody" id="code69219">
<br>//Four insertion methods, corresponding to the four insertion positions of insertAdjactentHTML, the names are based on jQuery's <br>//stuff can be strings, various nodes or dom objects (an array-like object, convenient Chain operation! ) <br>//The code is simpler and more beautiful than jQuery’s implementation! <br> append:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"beforeEnd"); <br> }); <br> }, <br> prepend:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"afterBegin"); <br> }); <br> }, <br> before:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"beforeBegin"); <br> }) ; <br> }, <br> after:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"afterEnd"); <br> }); <br> }
<p></p>
</div>
<p>They all call two static methods, batch and insert. Since the DOM object is an array-like object, I followed the example of jQuery and implemented several important iterators for it, such as forEach, map and filter. A dom object contains multiple DOM elements, and we can use forEach to traverse them and execute the callback methods in them. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="50656" class="copybut" id="copybut50656" onclick="doCopy('code50656')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code50656">
<br>batch:function(els,callback){ <br> els.forEach(callback); <br> return els;//chain operation<br>},<br>
</div>
<p>The insert method performs the corresponding functions of jQuery's domManip method (dojo uses the place method), but the insert method processes one element node at a time, unlike jQuery which processes a group of element nodes. Cluster processing has been separated from the batch method above. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="32903" class="copybut" id="copybut32903" onclick="doCopy('code32903')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code32903">
<br>insert : function(el,stuff,where){ <br> //Define two global things and provide internal method calls<br> var doc = el.ownerDocument || dom.doc, <br> fragment = doc.createDocumentFragment(); <br> if(stuff.version){//If it is a dom object, move the element nodes inside it to the document fragment <br> stuff.forEach(function(el){ <br> fragment.appendChild(el); ,where){ <br> switch (where){ <br> case 'beforeBegin': <br> el.parentNode.insertBefore(node,el) <br> break; <br> case 'afterBegin': <br> el .srtBeFore (node, el.firstChild); <br> Break; <br> Case 'BeForend': <br> El.appendingChild (node); <br> Break; (el.nextSibling) el.parentNode.insertBefore(node,el.nextSibling); <br> else el.parentNode.appendChild(node); <br> break; <br> } <br> }; <br> // For Firefox to call <br> dom._insertAdjacentHTML = function(el,htmlStr,where){ <br> var range = doc.createRange(); <br> switch (where) { <br> case "beforeBegin"://before <br> range.setStartBefore(el); > range.collapse(true); <br> break ; <br> case "beforeEnd"://append <br> range.selectNodeContents(el); <br> range.collapse(false); <br> break; case "afterEnd"://prepend <br> range.setStartAfter(el); ertAdjacentElement(el,parsedHTML,where); <br> }; <br> // The innerHTML of the following elements is read-only in IE. Calling insertAdjacentElement to insert will cause an error <br> // col, colgroup, frameset, html, head, style, title, table, tbody, tfoot, thead, and tr; <br> dom._insertAdjacentIEFix = function(el,htmlStr,where){ <br> var parsedHTML = dom.parseHTML(htmlStr,fragment); 🎜> }; <br> //If it is a node, make a copy<br> stuff = stuff.nodeType ? stuff.cloneNode(true) : stuff; <br> if (el.insertAdjacentHTML) {//ie, chrome, Both opera and safari have implemented insertAdjacentXXX family <br> try{//Suitable for opera, safari, chrome and IE <br> el['insertAdjacent' (stuff.nodeType ? 'Element':'HTML')](where, stuff); <br> }catch(e){ <br> using dom._insertAdjacentIEFix(el,stuff,where); <br> }else{ <br> } else{ //Firefox only<br> dom['_insertAdjacent' (stuff.nodeType ? 'Element':'HTML')](el,stuff,where); <br> } <br> } <br>
<br><br><br>
The insert method uses some rare methods of the W3C DOM Range object in implementing the Firefox insertion operation. For details, please check the Firefox official website. The following implementation converts strings into nodes, using the great method of innerHTML. Prototype.js calls it _getContentFromAnonymousElement, but there are many problems, dojo calls it _toDom, mootools' Element.Properties.html, jQuery's clean. Ext does not have this thing, it only supports the insertAdjacentHTML method of passing in HTML fragments, and does not support insertAdjacentElement of passing in element nodes. But sometimes, we need to insert text nodes (not wrapped in element nodes), then we need to use document fragments as containers, and the insert method appears. <p>
</p>
</div>
<p></p>
<p>Copy code</p>
<div class="codetitle"><span><a style="CURSOR: pointer" data="59606" class="copybut" id="copybut59606" onclick="doCopy('code59606')"> The code is as follows:<u><div class="codebody" id="code59606">
<br>parseHTML: function(htmlStr, fragment){ <br> var div = dom.doc.createElement("div"), <br> reSingleTag = /^<(w )s*/?> $/;//Match a single tag, such as <li> <br> htmlStr = ''; <br> if(reSingleTag.test(htmlStr)){//If str is a single tag <br> return [dom.doc .createElement(RegExp.$1)] <br> } <br> var tagWrap = { <br> option: ["select"], <br> optgroup: ["select"], <br> tbody: ["table" ], <br> thead: ["table"], <br> tfoot: ["table"], <br> tr: ["table", "tbody"], <br> td: ["table", " tbody", "tr"], <br> th: ["table", "thead", "tr"], <br> legend: ["fieldset"], <br> caption: ["table"], <br> colgroup: ["table"], <br> col: ["table", "colgroup"], <br> li: ["ul"], <br> link:["div"] <br> } ; <br> for(var param in tagWrap){ <br> var tw = tagWrap[param]; <br> switch (param) { <br> case "option":tw.pre = '<select multiple=" multiple">'; break; <br> "<" case "link": tw.pre = 'fixbug<div>'; break; <br> "<" tw.join(">< ;") ">"; <br> } <br> tw.post = "</" tw.reverse().join("></") ">"; <br> 🎜> var reMultiTag = /<s*([w:] )/,//Match a pair of tags or multiple tags, such as <li></li>,li <br> match = htmlStr.match( reMultiTag), <br> tag = match ? match[1].toLowerCase() : "";//Resolved as <li,li <BR> if(match && tagWrap[tag]){ <BR> var wrap = tagWrap[tag]; <BR> div.innerHTML = wrap.pre htmlStr wrap.post; <BR> n = wrap.length; <BR> while(--n >= 0)//Return the content we have added <br> div = div.lastChild; <br> }else{ <br> div.innerHTML = htmlStr; <br> } <br> // Process IE to automatically insert tbody, for example, we use dom.parseHTML('<thead> ;</thead>') converts the HTML fragment, it should return <br> //'<thead></thead>', while IE will return '<thead></thead><tbody> </tbody>' <br> //That is, return div.children.length will return 1 in a standard browser, and IE will return 2 <br> if(dom.feature.autoInsertTbody && !!tagWrap[tag] ){ <br> var ownInsert = tagWrap[tag].join('').indexOf("tbody") !== -1,//We inserted <br> tbody = div.getElementsByTagName("tbody"), <br> autoInsert = tbody.length > 0;//<br> inserted by IE if(!ownInsert && autoInsert){ <br> for(var i=0,n=tbody.length;i<n;i ) { <BR> if(!tbody[i]. 🎜> } <BR> }<BR> if (dom.feature.autoRemoveBlank && /^s/.test(htmlStr) ) <BR> div.insertBefore( dom.doc.createTextNode(htmlStr.match(/^s*/)[0] ), div .firstChild ); <BR> if (fragment) { <BR> var firstChild; <BR> while((firstChild = div.firstChild)){ // Transfer the nodes on the div to the document fragment! <BR> fragment.appendChild(firstChild);
<BR><BR><BR>
<BR> Well, that’s basically it. It runs much faster than jQuery, and the code implementation is pretty elegant. At least it’s not as messy as jQuery. jQuery also has four reverse methods. The following is the implementation of jQuery: <BR>
</P><P></div></P><P>Copy code</P><P><div class="codetitle"> The code is as follows:<span><a style="CURSOR: pointer" data="79496" class="copybut" id="copybut79496" onclick="doCopy('code79496')"><U>jQuery.each({ </U> appendTo: "append ", </a> prependTo: "prepend", </span> insertBefore: "before", </div> insertAfter: "after", <div class="codebody" id="code79496"> replaceAll: "replaceWith"<BR>}, function(name, original){ <BR> jQuery.fn[ name ] = function( selector ) {//Insert (html, element node, jQuery object) <BR> var ret = [], insert = jQuery( selector );//Convert insert into jQuery Object <BR> for ( var i = 0, l = insert.length; i < l; i ) { <BR> var elems = (i > 0 ? this.clone(true) : this).get() ; <br> jQuery.fn[ original].apply( jQuery(insert[i]), elems);//Call four implemented insertion methods <br> <br> return this.pushStack( ret, name, selector);//Since the chain operation code is not separated, you need to implement it yourself
<br><br><br>
<br>My implementation: <br>
<br><br><br><br>Copy code<p></p>
</div> The code is as follows:</u><p></p>
<p>dom.each({ </p>
<div class="codetitle"> appendTo: 'append ', <span> prependTo: 'prepend', <a style="CURSOR: pointer" data="46384" class="copybut" id="copybut46384" onclick="doCopy('code46384')"> insertBefore: 'before', <u> insertAfter: 'after'</u>},function(method,name){ </a> dom.prototype[name] = function(stuff){ </span> return dom(stuff)[method](this);
</div>
<div class="codebody" id="code46384">
<br>
<br>The general code is given, so everyone can choose what they need. <br>
</div></a></span></div>
</div>
</div> </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=javascript" target="_blank">javascript</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/15528.html" title="JS code to add emphasis to text_javascript skills">
<span>Previous article：JS code to add emphasis to text_javascript skills</span>
</a>
<a href="//m.sbmmt.com/faq/15530.html" title="In-depth analysis of this keyword in Javascript_javascript skills">
<span>Next article：In-depth analysis of this keyword in Javascript_javascript skills</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/1796612210.html">BlackRock Labels BTC a Unique Diversifier</a>
</div>
<div>2024-09-20 15:51:33</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612202.html">Internet Computer (ICP) Price Prediction: Will ICP Price Hit $24?</a>
</div>
<div>2024-09-20 15:47:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612197.html">Worldcoin (WLD) Price Prediction 2022-23</a>
</div>
<div>2024-09-20 15:45:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612185.html">Top Meme Coins to Invest In Today</a>
</div>
<div>2024-09-20 15:39:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612183.html">Floki (FLOKI) Price Prediction: Will the Revamped Marketing Help Floki Catch Up on October Gains?</a>
</div>
<div>2024-09-20 15:38:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612161.html">Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist</a>
</div>
<div>2024-09-20 15:27:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612159.html">Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization</a>
</div>
<div>2024-09-20 15:26:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612129.html">ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem</a>
</div>
<div>2024-09-20 15:12:32</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612099.html">How to download the Apple version of Little Fox Payment Platform</a>
</div>
<div>2024-09-20 14:53:01</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/faq/1796612097.html">How beginners trade on MetaMask and its advantages and disadvantages</a>
</div>
<div>2024-09-20 14:51:01</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/176376.html" target="_blank" title="CSS only method to dynamically modify image src on click without using JavaScript" class="wdcdcTitle">CSS only method to dynamically modify image src on click without using JavaScript</a>
<a href="//m.sbmmt.com/wenda/176376.html" class="wdcdcCons">I need to change the src of an image on mouse click using only css like img:active{}</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 19:25:49</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>505</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/176368.html" target="_blank" title="Scatterplot points do not maintain values when zooming in d3.js" class="wdcdcTitle">Scatterplot points do not maintain values when zooming in d3.js</a>
<a href="//m.sbmmt.com/wenda/176368.html" class="wdcdcCons">This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 18:16:26</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>403</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/176347.html" target="_blank" title="JavaScript hover events on vendor-specific pseudo-elements" class="wdcdcTitle">JavaScript hover events on vendor-specific pseudo-elements</a>
<a href="//m.sbmmt.com/wenda/176347.html" class="wdcdcCons">I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 15:35:24</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>274</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/176343.html" target="_blank" title="Submit form without button using Javascript/Jquery" class="wdcdcTitle">Submit form without button using Javascript/Jquery</a>
<a href="//m.sbmmt.com/wenda/176343.html" class="wdcdcCons">I'm trying to submit a form without a button by calling a JavaScript function and executin...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 14:54:03</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>421</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/176324.html" target="_blank" title="Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class" class="wdcdcTitle">Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class</a>
<a href="//m.sbmmt.com/wenda/176324.html" class="wdcdcCons">I want to style the card title of a panel with class collapseshow. In this example, it's t...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> From 2024-04-06 12:53:11</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>376</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/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js method to get array length" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/jsszcd" class="title-a-spanl" title="js method to get array length"><span>js method to get array length</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js refresh current page" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/jssxym" class="title-a-spanl" title="js refresh current page"><span>js refresh current page</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js rounding" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/jssswr" class="title-a-spanl" title="js rounding"><span>js rounding</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js method to delete node" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/jsscjddff" class="title-a-spanl" title="js method to delete node"><span>js method to delete node</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/javascriptzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214114396768.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JavaScript escape characters" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/javascriptzy" class="title-a-spanl" title="JavaScript escape characters"><span>JavaScript escape characters</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/jsscsjsdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214113439427.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to generate random numbers in js" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/jsscsjsdff" class="title-a-spanl" title="How to generate random numbers in js"><span>How to generate random numbers in js</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/rhqyjavascrip"><img src="https://img.php.cn/upload/subject/202407/22/2024072214085281458.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to enable JavaScript" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/rhqyjavascrip" class="title-a-spanl" title="How to enable JavaScript"><span>How to enable JavaScript</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/faq/jssymbol"><img src="https://img.php.cn/upload/subject/202407/22/2024072214060282401.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Detailed explanation of Symbol class in JS" /> </a>
<a target="_blank" href="//m.sbmmt.com/faq/jssymbol" class="title-a-spanl" title="Detailed explanation of Symbol class in JS"><span>Detailed explanation of Symbol class in JS</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 does js mean" href="//m.sbmmt.com/faq/482163.html">what does js mean</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to convert string to array in js?" href="//m.sbmmt.com/faq/461802.html">How to convert string to array in js?</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to refresh the page using javascript" href="//m.sbmmt.com/faq/473330.html">How to refresh the page using javascript</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to delete an item in js array" href="//m.sbmmt.com/faq/475790.html">How to delete an item in js array</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="How to use sqrt function" href="//m.sbmmt.com/faq/415276.html">How to use sqrt function</a>
</div>
</li>
</ul>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<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/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" 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>1407678 <b class="kclbcollectb"></b></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/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="//m.sbmmt.com/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a>
<div class="wzrthreerb">
<div>4239687 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="74">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/course/286.html" title="JAVA Beginner's Video Tutorial" 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>2436770 <b class="kclbcollectb"></b></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="Little Turtle's zero-based introduction to learning Python video tutorial" 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>500258 <b class="kclbcollectb"></b></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/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="PHP zero-based introductory tutorial" href="//m.sbmmt.com/course/2.html">PHP zero-based introductory tutorial</a>
<div class="wzrthreerb">
<div>838558 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="2">
<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="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" 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 >1407678 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="JAVA Beginner's Video Tutorial" 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 >2436770 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="Little Turtle's zero-based introduction to learning Python video tutorial" 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 >500258 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="Quick introduction to web front-end development" 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 >214570 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="Master PS video tutorials from scratch" 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 >865495 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="[Web front-end] Node.js quick start" 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 >5213 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="Complete collection of foreign web development full-stack courses" 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 >4025 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="Go language practical GraphQL" 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 >3438 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="550W fan master learns JavaScript from scratch step by step" 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 >575 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="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" 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 >17618 times of learning</div>
<div class="courseICollection" data-id="1644">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper2', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.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>Latest Downloads</div>
<a href="//m.sbmmt.com/xiazai">More>
</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
})
})
</script>
<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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper3', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.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>
<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">
<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>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1728229599"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/>
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
</body>
</html>
