[오리지널] jQuery 소스 분석-11 DOM 스트리밍-Traversing-3 핵심 함수

작성자:nuysoft/클라우드 QQ:47214707 Email:[email protected]성명: 본고는 오리지널 문장으로 전재할 필요가 있으면 출처를 밝히고 원문 링크를 보존하십시오.
jQuery 소스 분석 시리즈(지속적인 업데이트)
 
1. DOM은 3개의 핵심 함수를 반복합니다.
jQuery.dir( elem, dir, until )
한 요소에서 출발하여 어떤 방향의 모든 요소를 반복해서 검색하고 문서의 대상을 만나거나 until과 일치하는 요소를 만날 때까지 기록합니다
jQuery.nth( cur, result, dir, elem )
한 원소에서 출발하여 어떤 방향의 N번째 원소를 반복적으로 검색하다
jQuery.sibling( n, elem )
원소 n의 모든 후속 형제 원소, n 포함, elem 포함하지 않음
 
jQuery 객체의DOM 스트리밍 방법(대부분) 이 3개의 핵심 함수에 대한 호출이 변환되고 이 3개의 핵심 함수는 마지막에 모두 원생 API에 대한 조작으로 변환되어 그들 간의 관계를 확인한다.
핵심 함수
jQuery 객체 메서드
속뜻
기본 API 사용
jQuery.dir
parents
선조 원소
parentNode
 
parentsUntil
조상 원소, until 포함하지 않음
parentNode
 
nextAll
모든 형제 요소
nextSibling
 
prevAll
모든 오라버니 요소
previousSibling
 
nextUntil
모든 형제 요소는 until을 포함하지 않습니다
nextSibling
 
prevUntil
모든 형님 요소는 until을 포함하지 않습니다
previousSibling
jQuery.nth
next
다음 형제 요소
nextSibling
 
prev
이전 형 요소
previousSibling
jQuery.sibling
siblings
모든 형, 형제 원소, 현재 원소 포함하지 않음
elem.parentNode.firstChild
 
children
모든 하위 노드
elem.firstChild
 
2. jQuery.dir( elem, dir, until )

/**
 *        ，                 ，     document     until     
 *     （  ）：cur.nodeType !== 9 && !jQuery( cur ).is( until )
 * elem	    
 * dir	    ，   ：parentNode nextSibling previousSibling
 * until	      ，    until     ，    
 */
dir: function( elem, dir, until ) { //        ，      ，      、    、    ！
	var matched = [], //     
		cur = elem[ dir ]; //      ，     dir    ，          （  cur  ，  elem    ）
		//      
	/**
	 *     ，    document     until     
	 * cur.nodeType !== 9	  DOM  cur  document  
	 * !jQuery( cur ).is( until )	  DOM  cur      until
	 * 
	 * until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until ) 
	 *             ，     jQuery.is      ：until !== undefined && cur.nodeType === 1
	 *               ，       、      ，      ，       。
	 *        jQuery       
	 */
	while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
		if ( cur.nodeType === 1 ) { //    Element，         
			matched.push( cur );
		}
		cur = cur[dir]; //    dir       ，       ，    
	}
	return matched;
}

 
3. jQuery.nth( cur, result, dir, elem )

/**
 *        ，           N   
 * cur	    
 * result	   ，1      ，2     ，    （        1  ？）
 * dir	    
 * elem	  
 */
nth: function( cur, result, dir, elem ) {
	result = result || 1; //    ？   1  ？ ，   1    ，1      ，2     ，    
	var num = 0; //       ，   1    
	//    for      ！
	// dir    dir       ，nth         
	// dir     ，nth    
	for ( ; cur; cur = cur[dir] ) { //     
		if ( cur.nodeType === 1 && ++num === result ) { //      ，num  1         
			break;
		}
	}
	//   result 0 1，      
	//   result  0，   undefined
	return cur;
}

 
4. jQuery.nth( cur, result, dir, elem )

/**
 *   n         ，  n，   elem
 * n	    （        ）
 * elem	    
 */
sibling: function( n, elem ) {
	var r = [];
	for ( ; n; n = n.nextSibling ) { //      ，     n
		// nodeType === 1，   Element，      Text、Attr、Comment   
		if ( n.nodeType === 1 && n !== elem ) {
			r.push( n );
		}
	}
	return r;
}