jQuery 소스 코드 분석 jQuery.fn.each 및 jQuery.each Usage_jquery

이 기사의 예에서는 jQuery 소스 코드 분석에서 jQuery.fn.each 및 jQuery.each의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

예제부터 시작해 보겠습니다. 다음 코드의 기능은 선택한 각 div 요소에 빨간색 클래스를 추가하는 것입니다.

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

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

위에 사용된 .each는 jQuery.fn.each이며, jQuery.each를 통해 내부적으로 구현되어 있습니다

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

jQuery.fn.each

먼저 공식 API 설명을 올려보겠습니다. 주의할 점은 두 가지뿐입니다.
위의 예에서 $(this).addClass('red')는 현재 작동 중인 dom 요소를 나타냅니다.
각각에 전달된 메서드는 어떤 값이든 반환할 수 있습니다. 반환된 값이 false인 경우 현재 루프 작업에서 빠져나옵니다

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

/**

* @description jQuery 객체에서 일치하는 각 dom 요소에 대해 메서드를 실행합니다.

* @param {Number} index 컬렉션에서 현재 처리된 요소의 위치

* @param {DOMElement} 요소 현재 처리 중인 dom 요소

*/
.
.each( 함수(인덱스, 요소) )

다음은 두 가지 간단한 예입니다

예 1:

페이지의 모든 div 요소에 빨간색 클래스 추가

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

$('div').each(function(index, elem) {

$(this).addClass('red');
}
});

예시 2

페이지의 처음 5개 div 요소에 빨간색 클래스 추가

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

$('div').each(function(index, elem) {

If(index>=5) return false; // 루프를 중단합니다
$(this).addClass('red');
}
});

위와 같이 사용법은 매우 간단하므로 자세한 설명은 생략하겠습니다. http://api.jquery.com/each/

내부 소스 코드는 jQuery.each를 통해 구현됩니다. jQuery.each의 소스 코드에 대해 이야기해 보면, jQuery.fn.each의 소스 코드는 매우 간단합니다. >
jQuery.each:

먼저 간단한 예를 들어보겠습니다

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

$.each([52, 97], function(index, value ) {

Alert(index ': ' 값 ':' this);
}
});

출력 내용은 다음과 같습니다.
0: 52-52

1
1:97-97

클래스 공식 API 설명

또한 주의할 점이 두 가지 있습니다

위 예에서 이는 컬렉션의 요소, 즉 다음 valueOfElement입니다.

루프를 중단하려면 콜백에서 false를 반환하세요.

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

/**

* @description 컬렉션의 각 요소(배열 또는 개체)에 대해 작업을 수행합니다

* @param {Number|String} indexInArray 컬렉션 내 해당 요소의 위치(컬렉션이 배열인 경우 숫자, 컬렉션이 객체인 경우 키 값)

* @param {AnyValue} valueOfElement 컬렉션
의 요소
*/
ㅋㅋㅋ
jQuery.each( collection, callback(indexInArray, valueOfElement) )

예시 1

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

$.each( ['one,'two',' three' , '4'], function(index, value){

If(index >= 2)는 false를 반환합니다.

​​ 경고( "색인:" index ", 값: " 값 );
}
});

예시 2

예제는 공식 웹사이트에서 직접 복사한 것이므로 그대로 사용하세요

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

$.each( { name: "John", lang: "JS " }, 함수(k, v){

​​ Alert( "키: " k ", 값: " v );
}
});

소스 코드:

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

// args는 내부용입니다
이자
각각: 함수( obj, 콜백, args ) {

var 값,

나는 = 0,

길이 = obj.length,

isArray = isArraylike( obj ); // obj는 실제로 jQuery 객체를 제공하는 {'0':'hello', '1':'world', 'length':2}와 같은 배열형 객체인가요?

If ( args ) { // args, 실제로는 이 매개변수의 실제 효과를 찾지 못했습니다~~ 그냥 건너뛰고 else 의 내용을 살펴보세요. 콜백에 전달된 매개변수가 다르다는 점 외에는 차이점이 없습니다
           if ( isArray ) {
for ( ; i                         값 = callback.apply( obj[ i ], args );
If ( 값 === false ) {
휴식;
                }
            }
         } else {
for ( i in obj ) {
                    값 = callback.apply( obj[ i ], args );
If ( 값 === false ) {
휴식;
                }
            }
}
// 가장 일반적으로 사용되는 특별하고 빠른 사례
} 그 밖의 {
           if ( isArray ) {                                                                                                                                                                                   for ( ; i                    값 = callback.call( obj[ i ], i, obj[ i ] );
If ( 값 === false ) {
휴식;
                }
            }
} Else {// 처리 개체
for ( i in obj ) {
                   value = callback.call( obj[ i ], i, obj[ i ] ) // value는 콜백의 반환 값입니다.
If (value === false) {// 여기서 value === false인 경우 사이클에서 직접 뛰어내립니다.
휴식;
                }
            }
}
}
객체 반환;
}
},



최신 jQuery.fn.each 소스 코드:

정말 간단합니다. jQuery.each만 이해하면 별 문제 없습니다~

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

각: function( callback, args ) {

jQuery.each( this, callback, args )를 반환합니다.
}
},

결론

jQuery.extend 및 jQuery.fn.extend와 동일하지만 jQuery.each 및 jQuery.fn.each의 코드는 매우 간단하지만 이 두 가지 방법은 jQuery에서 널리 사용됩니다. 예:

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

jQuery.each("부울 숫자 문자열 함수 배열 날짜 RegExp 개체 오류" .split( " "), function(i, 이름) {

Class2type[ "[object " name "]" ] = name.toLowerCase();
}
});

그러니 각각 마스터하세요!

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.