最近、すべての主要なライブラリで div.innerHTML=HTML フラグメントを使用してノード要素を生成し、それをターゲット要素のさまざまな位置に挿入できることがわかりました。これは実際には insertAdjacentHTML ですが、IE の忌まわしい innerHTML はこの利点を欠点に変えます。まず、innerHTML は特定の位置の空白を削除します。以下の実行ボックスの結果を参照してください。
<br> IE の 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>gt; <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>もう 1 つの厄介な点は、次の要素の innerHTML が IE では読み取り専用であることです:col、colgroup、frameset、html、head、style、table、tbody、tfoot、thead、title、tr。それらをクリーンアップするために、Ext は特別に insertIntoTable を作成しました。 insertIntoTableはDOMのinsertBeforeとappendChildを使って追加します。基本的にはjQueryと同じです。ただし、jQuery はこれら 2 つのメソッドに完全に依存しており、Ext も insertAdjacentHTML を使用します。効率を向上させるために、すべてのクラス ライブラリは常にドキュメントの断片化を使用します。基本的なプロセスは、div.innerHTML を通じてノードを抽出し、それをドキュメント フラグメントに転送し、insertBefore と appendChild を使用してノードを挿入することです。 Firefox の場合、Ext は createContextualFragment を使用してテキストを解析し、ターゲットの場所に直接挿入します。明らかに、Ext は jQuery よりもはるかに高速です。ただし、jQuery は HTML フラグメントだけでなく、さまざまなノードや jQuery オブジェクトも挿入します。 jQuery のワークフローを確認してみましょう。 <br>
<br><br><br><p>コードをコピー</p>
<p></p>
</div> コードは次のとおりです:<div class="codebody" id="code51724">
<br>append: function() { <br> //引数オブジェクトを渡します。true はテーブルの特別な処理を意味します。コールバック関数 <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] ) {// 要素ノードがある場合 <br> var flagment = (this[0].ownerDocument || this[0]).createDocumentFragment(), <br> // 3 つあることに注意してください。ここでパラメータ <br> scripts = jQuery.clean( args, (this[0].ownerDocument || this[0]), flagment ), <br> first = flagment.firstChild; if ( first ) <br> for ( var i = 0, l = this.length; i <l i> callback.call( root(this[i], first), this.length > 1 || i > 0 ? <br> フラグメント.cloneNode(true) : フラグメント ); <br><br> if ( scripts ) <br> jQuery.each( scripts, evalScript );これを返す ; <br><br> 関数 root( elem, cur ) { <br> テーブルを返す && jQuery.nodeName(elem, "table") && jQuery.nodeName(cur, "tr") ? .getElementsByTagName ("tbody")[0] || <br> elem.appendChild(elem.ownerDocument.createElement("tbody")) : <br> elem; <br> } <br>} <br>// elems は引数オブジェクト、context はドキュメント オブジェクト、fragment は空のドキュメント フラグメントです。 !context.createElement は IE でエラーで失敗しますが、typeof 'object' を返します <br> if ( typeof context.createElement === "unknown" ) <br> //コンテキストがドキュメント オブジェクトであることを確認してください<br> context = context .ownerDocument || context[ 0] && context[0].ownerDocument <br><br> // 単一の文字列が渡され、それが単一のタグである場合 <br> // createElement を実行してスキップします。残りの部分 <br> / / <div> など、ドキュメント オブジェクト内にタグが 1 つだけある場合 <br> // 外部からこのように呼び出すことができます $(this).append("<div>" ) <br> //この時は中の要素名を直接取り出してdocument.createElement("div")で作成して配列に入れて<br>を返します if ( !fragment && elems.length == = 1 && typeof elems[0] === "string " ) { <br> var match = /^$/.exec(elems[0]); <br> if ( match ) <br> return [ context.createElement( match [1] ) ]; <br> } <br> // div の innerHTML を使用してノードを作成します <br> var ret = [], scripts = [] , div = context.createElement("div"); <br> // $(this).append("<td>Table 1</td>", "<td>Table 1</td>" を追加すると;", "<td>表 1< ;/td>") <br> //jQuery.each は 4 番目の分岐メソッド (パラメーターなし、長さ) に従ってエージェント オブジェクトを走査します。callback.call( value, i, value ) <br> jQuery.each (elems, function(i, elem){//i はインデックス、elem は引数オブジェクトの要素です <br> if ( typeof elem === "number" ) <br> elem = ''; <br><br> if ( !elem ) <br> return; <br><br> // HTML 文字列を DOM ノードに変換します <br> if ( typeof elem === "string" ) { <br> // すべてのブラウザの「XHTML」スタイル タグを修正 <br> elem = elem.replace(/(<(w )[^>]*?)/>/g, function(all,front, tag){ <br> タグを返します。 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];//例: "<table><tbody><tr>" <td>Table 1 tr></tbody></table> " <br><br> // 右の深さに移動 <br> while ( Wrap[0]-- ) <br> div = div.lastChild; <br> <br> // IE を処理して、次のような tbody を自動的に挿入します。$('<thead></thead>') を使用して HTML フラグメントを作成します。これは、<br> //'<thead><を返すはずです;/thead>' を返しますが、IE は '<br> if ( !jQuery.support.tbody ) { <br><BR> / / 文字列は <table> でした。*不正な <tbody> がある可能性があります* <br> var hasBody = /<tbody/i.test(elem), <br> tbody = !tags.indexOf("<table ") && !hasBody ? <br> div.firstChild && div.firstChild .childNodes : <br><br> // 文字列は裸の <thead> または <tfoot> <br> Wrap[1] == " <table>" && !hasBody ? <br> div.childNodes : <br> []; <br> for (var j = tBody.length -1; j & gt; = 0; --j) <br> // 自動的に挿入される場合、コンテンツがあってはなりません <br> if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) <br> tbody[ j ].parentNode.removeChild( tbody[ j ] ); <br><br> } <br><br> // innerHTML が使用されると、IE は先頭の空白を完全に削除します <br> if ( !jQuery.support.leadingWhitespace && / ^s/.test( elem ) ) <br> div.insertBefore( context.createTextNode ( elem.match(/^s*/)[0] ), div.firstChild ); //すべてのノードを純粋にしますarrays<br> elem = jQuery.makeArray( div.childNodes ); <br> } <br><br> if ( elem.nodeType ) <br> ret.push( elem ); // 2 つの配列をマージすると、merge メソッドは IE の param 要素 <br> ret = jQuery.merge( ret, elem ); <br><br> if のオブジェクト要素の消失を処理します。 ( flagment ) { <br> for ( var i = 0; ret[i] ; i ) { <br> //最初のレイヤーの childNode にスクリプト要素ノードがある場合、後で globalEval を使用して動的に実行するために、スクリプトを使用してノードを収集します。 <br> if ( jQuery.nodeName( ret[i], " script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) { <br> scripts.push（ret [i] .parentnode？parentnode.RemoveChild（ret [i]）：nodeType === 1）<br> splice.apply( ret, [i 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) ); <br> フラグメント (ret[i] ); } <br> } <br><br> return scripts;//動的挿入では 3 つのパラメータが渡されるため、<br> がここで返されます。 } <br><br> return <br>}, <br>
<br><br>
<p><img src="http://files.jb51.net/file_images/article/201311/20131112145628668.jpg" alt="JavaScript 動的挿入技術の深い理解_JavaScript スキル" ></p>
<p>複雑すぎて泣ける！ただし、jQuery の実装はあまり賢くはありません。clean を使用して、挿入されたすべてのものをノード コレクションに変換し、それをドキュメント フラグメントに配置し、appendChild と insertBefore を使用してそれらを挿入します。現在、Firefox を除く他のブラウザは insertAdjactentXXX ファミリをサポートしているため、これらのネイティブ API を有効に活用する必要があります。以下は、insertAdjactentHTML およびその他のメソッドを使用して Ext によって実装された DomHelper メソッドです。公式 Web サイトから提供されるデータは次のとおりです。</p>
<p><img src="http://files.jb51.net/file_images/article/201311/20131112145751246.jpg" alt="JavaScript 動的挿入技術の深い理解_JavaScript スキル" ></p>
<p>このデータは少し古いものですが、最新の 3.03 では、IE テーブルへのコンテンツの挿入に関する批判が長い間解決されています (テーブルの innerHTML、tbody、tr などはすべて読み取り専用で、insertAdjactentHTML や pastHTML などのメソッドは使用できません)。コンテンツを変更することはできません。遅い標準的な DOM アプローチを使用する必要がありますが、これが Ext の初期バージョンの失敗点です)。 insertAdjactentHTML とドキュメントの断片化を組み合わせた後、IE6 でのノードの挿入速度も信じられないほど向上し、Firefox の速度にほぼ近づいていることがわかります。これに基づいて、Ext は 4 つの分岐メソッド insertBefore、insertAfter、insertFirst、append を開発しました。これらは、jQuery の before、after、prepend、append にそれぞれ対応します。ただし、jQuery はこれらのメソッドを呼び出し元と受信パラメーターで巧みに交換し、insertBefore、insertAfter、prependTo、appendTo メソッドを派生させました。しかし、いずれにせよ、jQuery の画一的なアプローチには同意するのが難しいです。以下は、Firefox に実装された insertAdjactentXXX ファミリのバージョンです: </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="29698" class="copybut" id="copybut29698" onclick="doCopy('code29698')"><u>コードをコピー</u></a></span> コードは次のとおりです。</div>
<div class="codebody" id="code29698">
<br>(function() { <br> if (この中の 'HTMLElement ') { <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 要素 <br>})() <br>
<p></p>
</div>
これを使用して、より高速かつ合理的な動的挿入方法を設計できます。私の実装の一部を以下に示します: <p>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="69219" class="copybut" id="copybut69219" onclick="doCopy('code69219')">コードをコピー<u></u></a> コードは次のとおりです:</span><div class="codebody" id="code69219">
<br>//insertAdjactentHTML の 4 つの挿入位置に対応する 4 つの挿入メソッド。名前は jQuery に基づいています。<br>//文字列、さまざまなノード、または dom オブジェクト (配列のようなオブジェクト、便利なオブジェクト) を使用できます。連鎖操作! ) <br>//jQueryの実装よりコードがシンプルで美しい！ <br> append:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"beforeEnd"); <br> }); }, <br> prepend:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"afterBegin"); <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> } <br>
<br><p>
</p>
</div>これらはすべて、batch と insert という 2 つの静的メソッドを呼び出します。 DOM オブジェクトは配列のようなオブジェクトであるため、jQuery の例に従い、forEach、map、filter などのいくつかの重要なイテレータを実装しました。 dom オブジェクトには複数の DOM 要素が含まれており、forEach を使用してそれらを走査し、その中のコールバック メソッドを実行できます。
<p></p>
<p></p>
<div class="codetitle"><span>コードをコピー<a style="CURSOR: pointer" data="50656" class="copybut" id="copybut50656" onclick="doCopy('code50656')"><u></u> コードは次のとおりです。</a></span></div>batch:function(els,callback){ <div class="codebody" id="code50656"> els.forEach(callback); <br> return els;//チェーン操作<br>},<br><br><br>
</div>insert メソッドは、jQuery の domManip メソッド (dojo は place メソッドを使用します) に対応する機能を実行しますが、要素ノードのグループを処理する jQuery とは異なり、insert メソッドは一度に 1 つの要素ノードを処理します。クラスター処理は、上記のバッチ方式から分離されました。
<p></p>
<p></p>
<div class="codetitle"><span>コードをコピー<a style="CURSOR: pointer" data="32903" class="copybut" id="copybut32903" onclick="doCopy('code32903')"><u></u> コードは次のとおりです:</a><div class="codebody" id="code32903">
<br>insert : function(el,stuff,where){ <br> // 2 つのグローバルなものを定義し、内部メソッド呼び出しを提供します<br> var doc = el.ownerDocument, <br> flagment = doc.createDocumentFragment(); <br> if(stuff.version){// dom オブジェクトの場合、その中の要素ノードをドキュメント フラグメントに移動します <br> Staff.forEach(function(el){ <br> フラグメント.appendChild(el); ,where){ <br> switch (where){ <br> case 'beforeBegin': <br> el.parentNode.insertBefore(node,el) <br> case; 'afterBegin': <br> el .srtBeFore (node, el.firstChild); <br> Break; <br> Case 'BeForend': <br> El.appendingChild (node); ) el.parentNode.insertBefore(node,el.nextSibling); <br> else el.parentNode.appendChild(node); // Firefox が呼び出す場合<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> case "beforeEnd"://append <br> range.collapse(false) ; <br> case "afterEnd"://prepend <br> range.setStartAfter(el); ertAdjacentElement (el,parsedHTML,where);; <br> // 次の要素の innerHTML は IE では読み取り専用です。insertAdjacentElement を呼び出して挿入するとエラーが発生します。 <br> //col、colgroup、frameset、html、head、style、title、table、tbody、 tfoot、thead、および tr; <br> dom._insertAdjacentIEFix = function(el,htmlStr,where){ <br> var parsedHTML(htmlStr,fragment) 🎜> };ノード、コピーを作成します<br> スタッフ = スタッフ.nodeType ? スタッフ.cloneNode(true) : スタッフ; <br> if (el.insertAdjacentHTML) {//つまり、オペラとサファリの両方が insertAdjacentXXX ファミリーを実装しています <br> try{// Opera、safari、Chrome、IE に適しています <br> el['insertAdjacent' (stuff.nodeType ? 'Element':'HTML')](where,スタッフ); { <br> dom._insertAdjacentIEFix(el,stuff,where); <br> } else{ <br> } else{ //Firefox のみ<br> dom['_insertAdjacent' (stuff.nodeType ? 'Element':' HTML')](el,stuff,where); <br> } <br> } <br>
<br><br><br>
<br>insert メソッドは、Firefox の挿入操作を実装する際に、W3C DOM Range オブジェクトのいくつかの珍しいメソッドを使用します。詳細については、Firefox の公式 Web サイトを確認してください。次の実装では、innerHTML の優れたメソッドを使用して、文字列をノードに変換します。 Prototype.js では _getContentFromAnonymousElement と呼ばれていますが、問題が多く、dojo では _toDom、mootools では Element.Properties.html、jQuery ではクリーンと呼ばれています。 Ext にはこれがありません。HTML フラグメントを渡す insertAdjacentHTML メソッドのみをサポートし、要素ノードを渡す insertAdjacentElement はサポートしません。ただし、場合によっては、(要素ノードでラップされていない) テキスト ノードを挿入する必要があり、その後、ドキュメント フラグメントをコンテナとして使用する必要があり、挿入メソッドが表示されます。 <br>
<p></p>
</div>
<p>コードをコピー</p>
<p></p>
<div class="codetitle"> コードは次のとおりです:<span><div class="codebody" id="code59606">
<br>parseHTML: function(htmlStr, flagment){ <br> var div = dom.doc.createElement("div"), <br> reSingleTag = /^ $/;//<br> htmlStr = ''; <br> if(reSingleTag.test(htmlStr)) などの単一のタグに一致します。{// str が単一のタグの場合 <br> return [ dom.doc .createElement(RegExp.$1)] <br> } <br> var tagWrap = { <br> オプション: ["select"], <br> optgroup: ["select"], <br> tbody: [ "テーブル" ], <br> thead: ["テーブル"], <br> tfoot: ["テーブル"], <br> tr: ["テーブル", "tbody"], <br> td: ["テーブル", " tbody", "tr"], <br> th: ["table", "thead", "tr"], <br> 凡例: ["fieldset"], <br> キャプション: ["table" ], <br> コルグループ: ["テーブル"], <br> コル: ["テーブル", "コルグループ"], <br> リ: ["ul"], <br> リンク:["div"] <br> } ; <br> for(var param in tagWrap){ <br> var tw = tagWrap[param]; <br> case "option":tw.pre = '<select複数 = 複数">'; <br> "<" ケース ": tw.pre = 'fixbug<div>'; <br> "<" < ;") ">"; <br> } <br> tw.post = "</" tw.reverse().join("></") ">"; <br> 🎜 > var reMultiTag = /<s*([w:] )/,//<li></li>,li <br> match = htmlStr.match( など) のタグのペアまたは複数のタグと一致します。 reMultiTag), <br> tag = match ? match[1].toLowerCase() : "";//<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)//追加したコンテンツを返します。 <br> div = div.lastChild; <br> }else{ <br> div.innerHTML = htmlStr; <br> } <br> // tbody を自動的に挿入するように IE を処理します。たとえば、dom.parseHTML(' <thead> ;</thead>') は HTML フラグメントを変換します。<br> //'<thead></thead>' を返す必要がありますが、IE は '<thead></thead> を返します。 <br> if(dom.feature.autoInsertTbody && !! tagWrap[tag] ){ <br> var ownInsert = tagWrap[tag].join('').indexOf("tbody") !== -1,//<br> tbody = div.getElementsByTagName("tbody"を挿入しました) "), <br> autoInsert = tbody.length > 0;//<br> 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:<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></span>
</div></span></div>
</div>
</td>
</tr></tbody></table></l>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="text_javascript スキルを強調するための JS コード" href="http://m.php.cn/ja/faq/15528.html">text_javascript スキルを強調するための JS コード</a></span><span>次の記事：<a class="dBlack" title="text_javascript スキルを強調するための JS コード" href="http://m.php.cn/ja/faq/15530.html">text_javascript スキルを強調するための JS コード</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>