jQuery.clean 사용 방법 및 ideas_jquery 분석

1. jQuery.clean 사용법
jQuery.clean(elems, context,fragment,scripts);
2. 아이디어 분석
1 . 매개변수 컨텍스트를 처리하고 문서 루트 노드 문서인지 확인합니다
2. 매개변수 elems 배열 처리(배열 순환)
2.1 elem은 숫자이므로 문자열로 변환합니다
2.2 . elem은 잘못된 값입니다. 두 번째 루프
2.3. elem은 문자열입니다.
2.4. 문자열에 엔터티 번호나 html 태그가 없으면 텍스트 노드를 만듭니다.
2.5. 문자열은 엔터티 번호 또는 html 태그입니다.

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

div 요소를 생성하여 문서 조각에 삽입
xhtml 스타일 태그 처리
elem을 래핑하고 래핑된 문자열을 div의 innerHTML로 사용
래핑 깊이가 1보다 큰 경우 첫 번째 요소만 래핑 요소 레이어는 남습니다.
ie6 및 7의 빈 테이블 태그에 자동으로 추가된 tbody를 지웁니다.
IE9 이하 브라우저에서 제거되는 시작 부분의 빈 문자열을 div의 첫 번째 텍스트 하위 노드로 사용합니다. 요소
elem을 div(nodeList 객체)의 하위 노드 컬렉션에 재할당합니다.
이번에 제거 루프의 문서 조각에 있는 div는 다음 루프에서 깨끗한 div 요소를 유지합니다.

2.3. elem이 텍스트 노드인 경우 ret 배열에 직접 추가하여 반환하고, 그렇지 않으면 elem(nodeList Object)을 배열에 병합합니다
　2.4. IE6 및 7에서 선택 상태(체크됨)가 나타나는 버그를 수정합니다. ) 라디오 유형 및 체크박스 유형의 노드가 유효하지 않습니다
3. 매개변수 조각 처리
　3.1.ret의 각 노드는 문서 조각 조각에 추가됩니다
3.2. ret 배열에 추가합니다. 추가된 스크립트 위치는 원래 상위 요소 위치 뒤에 있습니다.
4. ret 배열로 돌아갑니다
3. 소스 코드 주석 분석
1. 및 함수에 사용되는 함수

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

var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|Figure|footer|"
         "header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
     WrapMap = {
         옵션: [ 1, "", "" ],
         범례: [ 1, "

", "

" ],
         thead: [ 1, "", "" ],
         tr: [ 2, "", "" ],
         td: [ 3, "", "" ],
         col: [ 2, "", "" ],
         지역: [ 1, "" ],
         _default: [ 0, "", "" ]
     },
     rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta| param)(([w:] )[^>]*)/>/gi,
     rtagName = /<([w:] )/,
     rtbody = /     rhtml = /<|&#?w ;/,
     rleadingWhitespace = /^s /,
     rcheckableType = /^(?:checkbox|radio)$/,
     rscriptType = // (java|ecma)script/i;
 // 设置复选框checkbox或单选框radio表单态
 function fixDefaultChecked( elem ) {
     if ( rcheckableType.test( elem. type ) ) {
         elem.defaultChecked = elem.checked;
     }
 }
 // 创建一个안전한 文档碎文
 function createSafeFragment( document ) {
     var list = nodeNames .split( "|" ),
     safeFrag = document.createDocumentFragment(); // ie6,7,8浏览器把safeFrage작성HTMLDocument类型
     // 针对ie9以下浏览器
     if ( safeFrag.createElement ) {
         while ( list.length )          safeFrag.createElement (
                list.pop()
             );
         }
     }
     return safeFrag;
 }
 //功能
 // 该函数API：http://www.css88.com/jqapi-1.8/#p=jQuery.grep
 jQuery.extend({
     grep: function( elems, callback, inv ) {
         var retVal ,
             ret = [],
             i = 0,
             length = elems.length;
         inv = !!inv;
         // 배열을 탐색하고 항목만 저장
         // 유효성 검사기 함수를 전달합니다
         for ( ; i < length; i ) {
             retVal = !!callback( elems[ i ], i );
             if ( inv !== retVal ) {
                ret.push( elems[ i ] );
             }
        }
         return ret;
     }             > });


2、源码分析

复代码 代码如下:

jQuery.extend({
clean: function( elems, context,fragment, scripts ) {
// 변수 선언
var i, j, elem, tag, Wrap, Depth, ; ( !context || typeof context.createDocumentFragment === "정의되지 않음" ) {
                                                                               0; (elem = elems[i]) != null; i ) {
                // elem이 숫자인 경우 변환 문자열로 변환 🎜>              elem = "";                                                          계속;
}
// HTML 문자열을 DOM 노드로 변환
// 배열 항목(문자열)을 DOM 노드로 변환
if ( typeof elem = == "string" ) {
텍스트 노드
if ( !rhtml.test( elem ) ) {
elem = context.createTextNode( elem );

                                                                                                                          . ie9 아래의 #document-fragment 유형입니다. 브라우저에서 safe는 HTMLDocument 유형 노드이고 nodeNames 배열은 비어 있습니다.      div = context.createElement("div");
                                                               열,삽입 ,hr, img, input, link, Meta, param의 레이블 외에
// 레이블의 시작과 끝을 나타내는 레이블의 레이블
elem = ELEPLACE (rxhtmltag, "& lt; $ 1 & gt; ");
                                                               | ) | ["", ""] )[1].toLowerCase();
                                                                                                                                                        _기본값;
깊이 = Wrap[0];
div.innerHTML = Wrap[1] elem Wrap[2];
// 오른쪽 깊이로 이동
                                                        1. 가장 가까운 소포 요소의 값을 재할당하는 DIV( 즉, 소포 요소의 첫 번째 레이어 포함)
While (깊이--) {
DIV = DIV.LastChild
}}
                                                                                                    if ( ! jQuery.support.tbody ) {
                       // 문자열은 이므로 *아마도 가짜(伪造的)
                       // 判断符串中是否拥유 공tbody标签
hasBody = rtbody.test(elem);
// 가장 바깥쪽 레이블이 테이블이고 tbody가 테이블에 수동으로 추가되지 않은 경우
🎜> tbody = tag === "table" && !hasBody ?
div.firstChild && div.firstChild.childNodes:
// 문자열은 또는
입니다.                               / 빈 THEAD 또는 TFOOT 태그가 하나만 있는 경우 문자열
// 변수 tBody는 div.childNodes " && !hasBody ?
                                               for ( j = tbody.length - 1; j >= 0 ; --j ) {
tfoot 태그
if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) {
빈 테이블 태그 자동 지우기 Joined tbody
tbody [ j ].parentNode.removeChild( tbody [ j ];
                                                             
                                                                       // IE는 innerHTML이 사용될 때 선행 공백을 완전히 제거합니다. ~                       >           } // 처리된 DIV 하위 노드 컬렉션 가져오기(Nodelist)
Elem = DIV.CHILDNODES
// 가져오기; 조각 컨테이너(매번 새로운 DIV가 필요함)
// 다음에 문자열 배열 항목을 반복하기 전에 생성된 div 요소를 지웁니다
div.parentNode.removeChild(div);
// elem이 다음과 같은 경우 DOM 노드(텍스트 노드)
if ( elem.nodeType ) {
ret.push( elem );
}
// nodeList 객체의 노드를 반환된 배열에 병합
else {
                                                                                                         > > ~                                           // 재설정 defaultChecked 모든 라디오 및 체크박스에 대해 단일 버튼을 다른 태그에 삽입한 후 선택한 상태가 실패합니다(다음 코드 이 버그 수정)
if (!Jquery.support.appendchecked) {
for (i = 0; (elem = 0; (elem = 0; (elem = 0; ret[i])) != null; i ) {
                                                                                                      elem.getElementsByTagName != = "정의되지 않음" ) {
                                                           ~          }
// 제공된 문서 조각에 요소 추가
// ret 배열의 각 DOM 노드를 제공된 문서 조각에 삽입
// dom 노드에서 스크립트 노드를 추출하여 ret 배열에 추가 , 위치는 원래 상위 요소의 인덱스 위치 뒤에 있습니다.
if (fragment ) {
// 각 스크립트 요소의 특수 처리
handlerScript = function( elem ) {
// 우리가 실행 가능한 것으로 간주하세요
// ELEM 요소가 존재하지 않거나 Type 값이 JavaScript 또는 ECMAScript인 경우
if (! Elem.type || RScripttype.test (elem.type)) {
// IPT를 분리하고 스크립트 배열(제공된 경우) 또는 조각에 저장합니다
// 처리되었음을 나타내기 위해 진실을 반환합니다
스크립트 반환 ?
scripts.parent Node?elem.parentNode .removeChild ( elem ) : elem ) :
                                     fragment.appendChild(                             = ret[i]) != null; {
                                                                                                                                                     포함된 스크립트 처리
// 문서 조각에 요소 요소를 추가하고 포함된 스크립트를 처리합니다. (스크립트 태그 요소)
fragment.appendChild( elem );
if ( typeof elem.getElement sByTagName !== "undefine ") {> // Handlescript Dom을 변경하므로 jquery.merge를 사용하여 enterSure를 사용하세요. 스냅샷 반복
jstags = jquery.grep (jQuery.merge ([], Elem.GetelementsBytagnam e ("script")), Handlescript) ;
                                                         // 스크립트를 상위 항목 다음에 ret로 연결하고 색인을 그 이상으로 발전시킵니다. ret.splice.apply ( ret, [i 1, 0].concat( jsTags ) );
             }
         }
         return ret;
     }
 });

관련 라벨：

clean 아이디어

원천：php.cn

이전 기사：jQuery.buildFragment 사용 방법 및 ideas_jquery 분석 다음 기사：js 뉴스 스크롤 js 뉴스 스크롤 효과를 얻는 방법 effect_javascript 기술

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2275

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2409

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

2026

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1914

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1981

관련 주제

더>

• Linux에서 일반적으로 사용되는 쉘 명령
• 전화기가 계속 다시 시작되는 이유는 무엇입니까?
• 파스칼 튜토리얼
• 자바 튜토리얼
• 파생기호 입력방법
• BTC는 어떤 통화인가요?
• 도스 명령어는 무엇인가요?
• 정적 웹페이지와 동적 웹페이지의 차이점

인기 추천

• js는 무슨 뜻인가요?
• js에서 문자열을 배열로 변환하는 방법은 무엇입니까?
• 자바스크립트를 사용하여 페이지를 새로 고치는 방법
• sqrt 함수를 사용하는 방법
• js 배열에서 항목을 삭제하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1424251
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4270498
• 
  JAVA 초보자용 비디오 튜토리얼

  2547752
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  507801
• 
  PHP 제로 기반 입문 튜토리얼

  863541

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1424251 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2547752 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  507801 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215934 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  892066 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  7635 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  6114 학습 시간
• 
  Go 언어 실습 GraphQL

  5061 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  706 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  25616 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved