jquery 의 each()상세 소개

5507 단어 jquery
each()방법 은 DOM 순환 구 조 를 간결 하 게 하여 실수 하기 쉽 지 않다.each()함 수 는 매우 강력 한 스 트 리밍 기능 을 봉 하여 사용 하기에 도 편리 합 니 다.1 차원 배열,다 차원 배열,DOM,JSON 등 을 옮 겨 다 닐 수 있 습 니 다.
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
유사 하 다.

좋은 웹페이지 즐겨찾기