jquery 의 each()상세 소개
5507 단어 jquery
javaScript 개발 과정 에서$each 를 사용 하면 우리 의 업 무량 을 크게 줄 일 수 있 습 니 다.
다음은 each 의 몇 가지 상용 용법 을 제시 합 니 다.
each 처리 1 차원 배열
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});
alert(i)는 0,1,2 를 출력 합 니 다.
alert(val)는 aaa,bbb,ccc 를 출력 합 니 다.
each 처리 2 차원 배열
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
alert(i);
alert(item);
});
arr 2 는 2 차원 배열 로 아 이 템 은 이 2 차원 배열 의 모든 배열 을 취 하 는 것 과 같다.
item[0]은 모든 1 차원 배열 의 첫 번 째 값 을 취 하 는 것 에 비해
alert(i)는 0,1,2 로 출력 합 니 다.이 2 차원 배열 은 3 개의 배열 요 소 를 포함 하고 있 기 때 문 입 니 다.
alert(item)는 출력 을 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']
이에 대해 두 배열 의 처 리 를 약간 변경 한 후
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});
alert(j)는 0,1,2,0,1,2,0,1,2 로 출력 합 니 다.
alert(val)는 a,aa,aa,b,bb,bb,c,cc,ccc 로 출력 합 니 다.
each 는 json 데 이 터 를 처리 합 니 다.이 each 는 더욱 강력 합 니 다.모든 속성 을 순환 할 수 있 습 니 다.
var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});
여기 alert(key)는 1 two three 를 출력 합 니 다.
alert(val)는 one,1,two,2,three,3 을 출력 합 니 다.
여 기 는 왜 key 가 숫자 가 아니 라 속성 입 니까?제 이 슨 형식 내 에 무질서 한 속성-값 이 있 기 때문에 무질서 한 이상 무슨 숫자 가 있 습 니까?
이 val 은 obj[key]와 같 습 니 다.
ecah 는 dom 요 소 를 처리 합 니 다.여 기 는 input 폼 요 소 를 예 로 들 수 있 습 니 다.
하면,만약,만약...
그리고 너 는 each 를 아래 와 같이 사용한다.
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});
그러면 alert(val)는 폼 요소 이기 때문에[object HTML InputElement]를 출력 합 니 다.
alert(i)는 0,1,2,3 으로 출력 합 니 다.
alert(val.name);aaa,bbb,ccc,ddd 를 출력 합 니 다.this.name 을 사용 하면 같은 결과 alert(val.value)를 출력 합 니 다. 111,222,333,444 를 출력 합 니 다.this.value 를 사용 하면 같은 결 과 를 출력 합 니 다.
위의 코드 로 다음 과 같은 형식 으로 바 뀌 면
$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value);
});
출력 결과 가 똑 같은 것 을 볼 수 있 습 니 다.두 가지 쓰기 가 어디 에 차이 가 있 는 지 저도 잘 모 르 겠 습 니 다.이 변 화 는 위의 몇 개의 배열 에 사용 되 는 작업 도 같은 결 과 를 출력 합 니 다.
이렇게 해서 몇 가지 예 의 실제 결 과 는 이미 답 을 얻 었 다.이 어 계속 연구 해 보면 그 이 유 를 알 수 없다. 이상 의 예 에서 알 수 있다
jQuery
화해시키다
jQuery
대상 은 모두 이 방법 을 실현 했다.
jQuery
대상
each
방법 은 간단하게 의뢰 를 진행 했다:
jQuery
대상 을 첫 번 째 매개 변수 로 전달 합 니 다.
jQuery
의
each
방법
jQuery 의 each 실현 보기(네트워크 발췌)
function (object, callback, args) {
// : obj, fn, args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
/*object[0] jQuery DOM , for ,
jQuery DOM , callback.call( value,i,value);
callback this value , ,i ,value DOM ;
callback function(index, elem) { ... } 。
$("...").each(function(index, elem){ ... });
*/
}
}
return object;
}
jquery 는 자동 으로 들 어 오 는 요소 에 따라 판단 한 다음 에 판단 결과 에 따라 apply 또는 call 방법 으로 처리 합 니 다.fn 의 실현 에서 this 포인터 로 배열 이나 대상 의 하위 요 소 를 직접 참조 할 수 있 습 니 다.
1.obj 대상 은 배열 입 니 다.
each 방법 은 배열 의 중성자 요소 에 대해 각각 fn 함수 호출 을 할 것 입 니 다.특정한 키 요 소 를 호출 한 결과 가 false 일 때 까지 입 니 다.즉,우 리 는 제 공 된 fn 함수 에서 처리 하여 일정한 조건 을 만족 시 킨 후에 each 방법 호출 을 종료 할 수 있 습 니 다.each 방법 이 arg 인 자 를 제공 할 때 fn 함수 가 들 어 오 는 인 자 를 arg 로 호출 합 니 다.그렇지 않 으 면 하위 요소 색인,하위 요소 자체 입 니 다.
2.obj 대상 은 배열 이 아 닙 니 다.
방법
1
가장 큰 차이 점 은:
fn
방법 은 반환 값 을 고려 하지 않 고 진행 된다.다시 말 하면,
obj
대상 의 모든 속성 은
fn
설령
fn
함수 반환
false
。전 송 된 매개 변 수 를 호출 합 니 다.
1
유사 하 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.