> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 동적 삽입 기술에 대한 심층적인 이해_javascript 기술

자바스크립트 동적 삽입 기술에 대한 심층적인 이해_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:15:59
원래의
1905명이 탐색했습니다.

최근에는 모든 주요 라이브러리가 div.innerHTML=HTML 조각을 사용하여 노드 요소를 생성한 다음 이를 대상 요소의 다양한 위치에 삽입할 수 있다는 것을 발견했습니다. 이것은 실제로 insertAdjacentHTML이지만 IE의 지독한 innerHTML은 이러한 장점을 단점으로 바꿉니다. 먼저 innerHTML은 특정 위치의 공백을 제거합니다. 아래 실행 상자의 결과를 확인하세요.

코드 복사 코드는 다음과 같습니다.






<br> IE의 InnerHtml By Situ Zhengmei <br> & lt;/Title & GT; <br> & LT; Script Type = "Text/Javascript" & GT; 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>또 다른 불쾌한 점은 IE에서 col, colgroup,frameset, html, head, style, table, tbody, tfoot, thead, title 및 tr 요소의 innerHTML이 읽기 전용이라는 것입니다. 이를 정리하기 위해 Ext는 특별히 insertIntoTable을 만들었습니다. insertIntoTable은 DOM의 insertBefore 및 AppendChild를 사용하여 추가됩니다. 상황은 기본적으로 jQuery와 동일합니다. 그러나 jQuery는 이 두 가지 방법에 전적으로 의존하고 있으며 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 조각 = (this[0].ownerDocument || this[0]).createDocumentFragment(), <br> //3개는 다음과 같습니다. 여기에 전달된 매개변수 <br> scripts = jQuery.clean( args, (this[0].ownerDocument || this[0]), 조각 ), <br> first = 조각.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> 조각.cloneNode(true) : <br><br> if ( 스크립트 ) <br> jQuery.each( 스크립트, evalScript ) <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는 인수 객체이고, context는 문서 객체이고, 조각은 빈 문서 조각입니다. <br>clean: function( elems, context,fragment ) { <br> context = context <br><br> // !context.createElement는 오류와 함께 IE에서 실패하지만 '객체' 유형을 반환합니다. <br> if ( typeof context.createElement === "undefine" ) <br> //컨텍스트가 문서 객체인지 확인하세요<br> context = context .ownerDocument || context[ 0] && context[0].ownerDocument || document; <br><br> // 단일 문자열이 전달되고 단일 태그인 경우 <br> // createElement를 수행하고 건너뜁니다. 나머지 <br> / /문서 객체에 <div> <br>와 같은 태그가 하나만 있는 경우 $(this).append("<div>" ) <br> //이때 안에 들어있는 요소명을 직접 꺼내서 document.createElement("div")로 생성하고 배열에 넣어서 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> //div의 innerHTML을 사용하여 노드 생성 <br> var ret = [], scripts = [] , div = context.createElement("div"); <br> //$(this).append("<td>테이블 1</td>", "<td>테이블 1</td> ;", "<td>표 1</td>") <BR> //jQuery.each는 네 번째 분기 방법(매개변수 없음, 길이), 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, 태그){ <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>표 1</td> tr></tbody></table> " <br><br> // 오른쪽 깊이로 이동 <br> while ( Wrap[0]-- ) <br> div = div.lastChild; <br> <br> // tbody를 자동으로 삽입하도록 IE를 처리합니다. 예를 들어 $('<thead></thead>')를 사용하여 HTML 조각을 생성합니다. 이는 <br> //'<thead><를 반환해야 합니다. ;/thead>', IE는 '<thead>< ;/thead><tbody></tbody>'를 반환합니다. <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> // IE는 innerHTML을 사용할 때 선행 공백을 완전히 제거합니다. <br> if ( !jQuery.support.leadingWhitespace && / ^s/.test( elem ) ) <br> div.insertBefore( context.createTextNode ( elem.match(/^s*/)[0] ), div.firstChild ) <br> //모든 노드를 순수 노드로 만듭니다. arrays<br> elem = jQuery.makeArray( div.childNodes ); <br> } <br><br> if ( elem.nodeType ) <br> ret.push( elem ) <br> else<br> // 두 배열을 병합하면 merge 메서드가 IE param 요소 <br> ret = jQuery.merge( ret, elem ) <br><br> }) <br><br> 아래에서 개체 요소가 사라지는 것을 처리합니다. (fragment ) { <br> for ( var i = 0; ret[i] ; i ) { <br> //첫 번째 레이어의 childNodes에 스크립트 요소 노드가 있는 경우 스크립트를 사용하여 나중에 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> 조각.appendChild( ret[i] ); } <br> } <br><br> return scripts;//동적 삽입이 세 개의 매개변수로 전달되므로 <br>이 여기에 반환됩니다. } <br><br> return <br>}, <br> <br><br> <p><img src="http://files.jb51.net/file_images/article/201311/20131112145628668.jpg" alt="자바스크립트 동적 삽입 기술에 대한 심층적인 이해_javascript 기술" ></p> <p>너무 복잡해서 눈물이 나요! 그러나 jQuery의 구현은 clean을 사용하여 삽입된 모든 항목을 노드 컬렉션으로 변환한 다음 이를 문서 조각에 넣은 다음 appendChild 및 insertBefore를 사용하여 삽입합니다. 현재 Firefox를 제외한 다른 브라우저는 insertAdjactentXXX 제품군을 지원하므로 이러한 기본 API를 잘 활용해야 합니다. 다음은 insertAdjactentHTML 및 기타 메소드를 사용하여 Ext에서 구현한 DomHelper 메소드입니다. 공식 웹사이트에서 제공한 데이터입니다. </p> <p><img src="http://files.jb51.net/file_images/article/201311/20131112145751246.jpg" alt="자바스크립트 동적 삽입 기술에 대한 심층적인 이해_javascript 기술" ></p> <p>이 데이터는 약간 오래된 데이터이며 최신 3.03에서는 IE 테이블에 콘텐츠를 삽입하는 것에 대한 비판을 오랫동안 해결했습니다(테이블의 innerHTML, tbody, tr 등은 모두 읽기 전용이며 insertAdjactentHTML 및 PasteHTML과 같은 메서드). 내용을 수정할 수 없습니다. 느린 표준 DOM 접근 방식을 사용해야 하며 이는 Ext의 초기 버전이 실패한 부분입니다. insertAdjactentHTML과 문서 조각화를 결합한 후 IE6의 노드 삽입 속도도 놀라울 정도로 향상되어 Firefox에 거의 근접한 것을 볼 수 있습니다. 이를 기반으로 Ext는 각각 jQuery의 before, after, prepend 및append에 해당하는 네 가지 분기 메소드 insertBefore, insertAfter, insertFirst 및 app를 개발했습니다. 그러나 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 Element <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>을 기반으로 합니다. //stuff는 문자열, 다양한 노드 또는 dom 객체(배열과 같은 객체, 편리함)일 수 있습니다. 체인 연산! ) <br>//jQuery 구현보다 코드가 더 간단하고 아름답습니다! <br> 추가: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>모두 일괄 처리와 삽입이라는 두 가지 정적 메서드를 호출합니다. 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(콜백); <br> return els;//체인 작업<br>},<br><br><br> </div>insert 메소드는 jQuery의 domManip 메소드(dojo는 place 메소드 사용)에 해당하는 기능을 수행하지만, insert 메소드는 요소 노드 그룹을 처리하는 jQuery와 달리 한 번에 하나의 요소 노드를 처리합니다. 클러스터 처리는 위의 배치 방식과 분리되었습니다. <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> //두 개의 전역 항목을 정의하고 내부 메서드 호출 제공<br> var doc = el.ownerDocument || dom.doc, <br> 조각 = doc.createDocumentFragment(); <br> if(stuff.version){//dom 객체인 경우 내부 요소 노드를 문서 조각으로 이동합니다. <br> stuff.forEach(function(el){ <br>         fragment.appendChild(el); ,where){ <br> 스위치(where){ <br> case 'beforeBegin': <br> el.parentNode.insertBefore(node,el) <br> break; 'afterBegin': <br> el .srtBeFore(노드, el.firstChild); <br> 중단; <br> 사례 'BeForend': <br> El.appendingChild(노드) <br> 중단; ) el.parentNode.insertBefore(node,el.nextSibling); <br> else el.parentNode.appendChild(node); <br> break; <br> } <br> <br> // <br> dom._insertAdjacentHTML = function(el,htmlStr,where){ <br> var range = doc.createRange(); <br> 스위치(where) { <br> case "beforeBegin"://before <br> range.setStartBefore(el) >              range.collapse(true); <br>              break <br> case "beforeEnd"://append <br> range.collapse(el); ; <br> break; 케이스 "afterEnd"://prepend <br>              range.setStartAfter(el);                                          el,parsedHTML,where <br> }; <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> varparsedHTML = dom.parseHTML(htmlStr,fragment) 🎜> <br> // 노드, 복사본 만들기<br> stuff.nodeType ? stuff.cloneNode(true) : stuff; <br> if (el.insertAdjacentHTML) {//ie, chrome, Opera와 Safari 모두 insertAdjacentXXX 제품군을 구현했습니다. > try{//오페라, 사파리, 크롬 및 IE에 적합 <br> el['insertAdjacent' (stuff.nodeType ? 'Element':'HTML')](where, stuff) <br> }catch(e) { <br>                                                                           dom._insertAdjacentIEFix(el,stuff,where); 사용       <br> }el se{ <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 공식 웹사이트를 확인하세요. 다음 구현은 innerHTML이라는 훌륭한 방법을 사용하여 문자열을 노드로 변환합니다. Prototype.js는 이를 _getContentFromAnonymousElement라고 부르지만 문제가 많습니다. dojo는 이를 _toDom, mootools' Element.Properties.html, jQuery는 clean이라고 부릅니다. Ext에는 이 기능이 없으며 HTML 조각을 전달하는 insertAdjacentHTML 메서드만 지원하고 요소 노드를 전달하는 insertAdjacentElement는 지원하지 않습니다. 그러나 때때로 텍스트 노드(요소 노드에 래핑되지 않음)를 삽입해야 하고 문서 조각을 컨테이너로 사용해야 하며 삽입 메소드가 나타납니다. <p></p> </div> <p></p>코드 복사<p></p> <div class="codetitle"><span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="59606" class="copybut" id="copybut59606" onclick="doCopy('code59606')"><div class="codebody" id="code59606"> <br>parseHTML: function(htmlStr, 조각){ <br> var div = dom.doc.createElement("div"), <br> reSingleTag = /^<(w )s*/?> $/;//<li> <br> htmlStr = '' <br> if(reSingleTag.test(htmlStr)){//str이 단일 태그인 경우 <br> return [ dom.doc .createElement(RegExp.$1)] <br> } <br> var tagWrap = { <br> option: ["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> 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> 스위치(param) { <br> case "option":tw.pre = '<select multiple=" multiple">'; break; "<" 케이스 "link": tw.pre = 'fixbug<div>'; "<" < ;") ">"; <br>       } <br>       tw.post = "</" tw.reverse().join("></") ">"; <br>                🎜 > var reMultiTag = /<s*([w:] )/,//<li></li>,li와 같은 태그 쌍 또는 여러 태그 일치 <br> match = htmlStr.match( reMultiTag), <br> 태그 = 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를 자동으로 삽입하는 프로세스, 예를 들어 dom.parseHTML(' <thead></thead>') HTML 조각을 변환하면 <br> //'<thead></thead>'를 반환해야 하지만 IE는 '<thead></thead>를 반환합니다. <tbody> </tbody>' <br> //즉, return div.children.length는 표준 브라우저에서 1을 반환하고 IE는 2를 반환합니다. <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)){ // div의 노드를 문서 조각으로 전송합니다! <BR>           fragment.appendChild(firstChild); <BR><BR><BR> <BR> 기본적으로는 그렇습니다. jQuery보다 훨씬 빠르게 실행되며, 코드 구현도 최소한 jQuery만큼 복잡하지는 않습니다. jQuery에는 네 가지 역방향 메서드도 있습니다. jQuery 구현은 다음과 같습니다. <BR> </P><P></div></P><P>코드 복사</P><P><div class="codetitle"> 코드는 다음과 같습니다.<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"> replacementAll: "replaceWith"<BR>}, function(이름, 원본 ){ <BR> jQuery.fn[ name ] = function( selector ) {//Insert(html, 요소 노드, jQuery 객체) <BR> var ret = [], insert = jQuery( selector );//Convert insert into jQuery 객체 <BR> for ( var i = 0, l = insert.length; i < l; i ) { <BR> var elems = (i > 0 ? this.clone(true) : this).get( ) ; <br>              jQuery.fn[ 원본].apply( jQuery(insert[i]), elems);//구현된 삽입 메서드 4개 호출 <br>                                                   > //체인 연산 코드가 분리되어 있지 않기 때문에 직접 구현해야 합니다. <br><br><br> <br>내 구현: <br> <br><br><br><br><br>코드 복사<p></p> </div> 코드는 다음과 같습니다.<p></p>dom.each({ <p>appendTo : 'append', </p> <div class="codetitle"> prependTo: 'prepend', <span> insertBefore: 'before', <a style="CURSOR: pointer" data="46384" class="copybut" id="copybut46384" onclick="doCopy('code46384')"> insertAfter: 'after'<u>},function(method,name){ </u> dom.prototype[ 이름] = 함수(물건){ </a>         return dom(물건)[메서드](this); </span> </div> <div class="codebody" id="code46384"> <br>일반 코드가 제공되므로 누구나 필요한 것을 선택할 수 있습니다. <br> </div></a></span></div></span></div> </div> </div> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>관련 라벨:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/ko/search?word=javascript" target="_blank">javascript</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">원천:php.cn</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/ko/faq/15528.html" title="text_javascript 기술에 중점을 추가하는 JS 코드"> <span>이전 기사:text_javascript 기술에 중점을 추가하는 JS 코드</span> </a> <a href="https://www.php.cn/ko/faq/15530.html" title="Javascript_javascript 스킬 중 이 키워드에 대한 심층 분석"> <span>다음 기사:Javascript_javascript 스킬 중 이 키워드에 대한 심층 분석</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzconZzwz"> <div class="wzconZzwztitle">저자별 최신 기사</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796639331.html">NullPointerException은 무엇이며 어떻게 해결합니까?</a> </div> <div>2024-10-22 09:46:29</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796629482.html">초보자에서 코더까지: C 기초로 시작되는 여정</a> </div> <div>2024-10-13 13:53:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796628545.html">PHP로 웹 개발 잠금 해제: 초보자 가이드</a> </div> <div>2024-10-12 12:15:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627928.html">C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길</a> </div> <div>2024-10-11 22:47:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627806.html">코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍</a> </div> <div>2024-10-11 19:36:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627670.html">내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C</a> </div> <div>2024-10-11 15:50:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627643.html">C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구</a> </div> <div>2024-10-11 15:07:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627620.html">PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계</a> </div> <div>2024-10-11 14:21:21</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627574.html">Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드</a> </div> <div>2024-10-11 12:59:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="https://www.php.cn/ko/faq/1796627539.html">코딩의 핵심: 초보자를 위한 Python의 힘 활용</a> </div> <div>2024-10-11 12:17:31</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">최신 이슈</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="https://www.php.cn/ko/wenda/176376.html" target="_blank" title="JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법" class="wdcdcTitle">JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법</a> <a href="https://www.php.cn/ko/wenda/176376.html" class="wdcdcCons">img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 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="https://www.php.cn/ko/wenda/176368.html" target="_blank" title="d3.js를 확대할 때 산점도 값이 유지되지 않습니다." class="wdcdcTitle">d3.js를 확대할 때 산점도 값이 유지되지 않습니다.</a> <a href="https://www.php.cn/ko/wenda/176368.html" class="wdcdcCons">d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 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="https://www.php.cn/ko/wenda/176347.html" target="_blank" title="공급업체별 의사 요소에 대한 JavaScript 호버 이벤트" class="wdcdcTitle">공급업체별 의사 요소에 대한 JavaScript 호버 이벤트</a> <a href="https://www.php.cn/ko/wenda/176347.html" class="wdcdcCons">나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 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="https://www.php.cn/ko/wenda/176343.html" target="_blank" title="Javascript/Jquery를 사용하여 버튼 없이 양식 제출" class="wdcdcTitle">Javascript/Jquery를 사용하여 버튼 없이 양식 제출</a> <a href="https://www.php.cn/ko/wenda/176343.html" class="wdcdcCons">JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 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="https://www.php.cn/ko/wenda/176324.html" target="_blank" title="CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요." class="wdcdcTitle">CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요.</a> <a href="https://www.php.cn/ko/wenda/176324.html" class="wdcdcCons">클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 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>관련 주제</div> <a href="https://www.php.cn/ko/faq/zt" target="_blank">더> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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에서 배열의 길이를 얻는 방법" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/jsszcd" class="title-a-spanl" title="js에서 배열의 길이를 얻는 방법"><span>js에서 배열의 길이를 얻는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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 현재 페이지 새로 고침" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/jssxym" class="title-a-spanl" title="js 현재 페이지 새로 고침"><span>js 현재 페이지 새로 고침</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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 반올림" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/jssswr" class="title-a-spanl" title="JS 반올림"><span>JS 반올림</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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="노드를 삭제하는 Node.js 메소드" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/jsscjddff" class="title-a-spanl" title="노드를 삭제하는 Node.js 메소드"><span>노드를 삭제하는 Node.js 메소드</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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="자바스크립트 이스케이프 문자" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/javascriptzy" class="title-a-spanl" title="자바스크립트 이스케이프 문자"><span>자바스크립트 이스케이프 문자</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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="js에서 난수를 생성하는 방법" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/jsscsjsdff" class="title-a-spanl" title="js에서 난수를 생성하는 방법"><span>js에서 난수를 생성하는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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="JavaScript를 활성화하는 방법" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/rhqyjavascrip" class="title-a-spanl" title="JavaScript를 활성화하는 방법"><span>JavaScript를 활성화하는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/ko/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="JS의 Symbol 클래스에 대한 자세한 설명" /> </a> <a target="_blank" href="https://www.php.cn/ko/faq/jssymbol" class="title-a-spanl" title="JS의 Symbol 클래스에 대한 자세한 설명"><span>JS의 Symbol 클래스에 대한 자세한 설명</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="wzrOne"> <div class="wzroTitle">인기 추천</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js는 무슨 뜻인가요?" href="https://www.php.cn/ko/faq/482163.html">js는 무슨 뜻인가요?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js에서 문자열을 배열로 변환하는 방법은 무엇입니까?" href="https://www.php.cn/ko/faq/461802.html">js에서 문자열을 배열로 변환하는 방법은 무엇입니까?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="자바스크립트를 사용하여 페이지를 새로 고치는 방법" href="https://www.php.cn/ko/faq/473330.html">자바스크립트를 사용하여 페이지를 새로 고치는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js 배열에서 항목을 삭제하는 방법" href="https://www.php.cn/ko/faq/475790.html">js 배열에서 항목을 삭제하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="sqrt 함수를 사용하는 방법" href="https://www.php.cn/ko/faq/415276.html">sqrt 함수를 사용하는 방법</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>인기 튜토리얼</div> <a target="_blank" href="https://www.php.cn/ko/course.html">더> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">관련 튜토리얼 <div></div></div> <div class="tabdiv swiper-slide" data-id="two">인기 추천<div></div></div> <div class="tabdiv swiper-slide" data-id="three">최신 강좌<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div>1427378 <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="https://www.php.cn/ko/course/74.html" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" href="https://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a> <div class="wzrthreerb"> <div>4277406 <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="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>2577052 <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="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>510066 <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="https://www.php.cn/ko/course/2.html" title="PHP 제로 기반 입문 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 제로 기반 입문 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 제로 기반 입문 튜토리얼" href="https://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a> <div class="wzrthreerb"> <div>867211 <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="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div >1427378 학습 시간</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >2577052 학습 시간</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >510066 학습 시간</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/901.html" title="웹 프론트 엔드 개발에 대한 빠른 소개" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"/> </a> <div class="wzrthree-right"> <a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="https://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a> <div class="wzrthreerb"> <div >216240 학습 시간</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/234.html" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PS 비디오 튜토리얼을 처음부터 마스터하세요"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" href="https://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a> <div class="wzrthreerb"> <div >898891 학습 시간</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="https://www.php.cn/ko/course/1648.html" title="[웹 프런트엔드] Node.js 빠른 시작" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[웹 프런트엔드] Node.js 빠른 시작"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[웹 프런트엔드] Node.js 빠른 시작" href="https://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a> <div class="wzrthreerb"> <div >8202 학습 시간</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1647.html" title="해외 웹 개발 풀스택 강좌 총집합" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"/> </a> <div class="wzrthree-right"> <a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="https://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a> <div class="wzrthreerb"> <div >6514 학습 시간</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1646.html" title="Go 언어 실습 GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go 언어 실습 GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go 언어 실습 GraphQL" href="https://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a> <div class="wzrthreerb"> <div >5398 학습 시간</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1645.html" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" href="https://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a> <div class="wzrthreerb"> <div >742 학습 시간</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="https://www.php.cn/ko/course/1644.html" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬"/> </a> <div class="wzrthree-right"> <a target="_blank" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" href="https://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a> <div class="wzrthreerb"> <div >27509 학습 시간</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>최신 다운로드</div> <a href="https://www.php.cn/ko/xiazai">더> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">웹 효과 <div></div></div> <div class="swiper-slide" data-id="twof">웹사이트 소스 코드<div></div></div> <div class="swiper-slide" data-id="threef">웹사이트 자료<div></div></div> <div class="swiper-slide" data-id="fourf">프론트엔드 템플릿<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 기업 메시지 양식 연락처 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 뮤직 박스 재생 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 모방 Kugou 음악 플레이어 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="클래식 HTML5 푸시 박스 게임" href="https://www.php.cn/ko/toolset/js-special-effects/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="https://www.php.cn/ko/toolset/js-special-effects/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 개인 앨범 커버 호버 확대/축소 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8064">[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8328" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8327" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8326" title="디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8325" title="현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8324" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8323" title="온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8322" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8321" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿" target="_blank">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3078" target="_blank" title="귀여운 여름 요소 벡터 자료(EPS+PNG)">[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3077" target="_blank" title="4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)">[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3076" target="_blank" title="노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3075" target="_blank" title="황금 졸업 모자 벡터 자료(EPS+PNG)">[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3074" target="_blank" title="흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)">[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3073" target="_blank" title="다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)">[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3072" target="_blank" title="플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-materials/3071" target="_blank" title="9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)">[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(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="https://www.php.cn/ko/toolset/website-source-code/8328" target="_blank" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8327" target="_blank" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8326" target="_blank" title="디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8325" target="_blank" title="현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8324" target="_blank" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8323" target="_blank" title="온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8322" target="_blank" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="https://www.php.cn/ko/toolset/website-source-code/8321" target="_blank" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</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> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p> </div> <div class="footermid"> <a href="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <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?1736579776"></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> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> </body> </html>