jQuery에서 자주 사용하는 개발 기술 (1)

jQuery를 사용한 지 이미 2년이 넘었지만 진정으로 사용한 것은 그의 가장 기본적인 방법에 불과하다. jQuery가 제창한 것이'Write less,do more'라는 것을 알아야 한다. jQuery가 제공한 모든 방법은 우리가 자세하게 배우고 연구할 가치가 있다.이곳은 절대로'반복 발명 바퀴'가 아니라 축적하여 바퀴를 만드는 방법을 배운다.
이 글은 주로 《jQuery 권위 지침서》를 읽을 때 쓴 필기인데, 제10장: jQuery가 자주 사용하는 개발 기교를 참고할 수 있다.
1、배열이 $.each
'false' 를 되돌리면 순환을 멈출 것입니다. (일반적인 순환에서'break '를 사용하는 것과 같습니다.)'true'로 돌아가서 다음 순환으로 넘어갑니다. (일반적인 순환에서'continue'를 사용하는 것과 같습니다.)
var attr = [1,2,3];
$.each(attr,function(index,value){
    console.info(index+':'+value);
});

수조를 순환 리셋 처리하는데 그 중에서 매개 변수는 수조의 인덱스와 수조 인덱스에 대응하는 값이다.
$('#id').each(function(index,target){
    alert($(this) == $(target));
})

DOM 요소를 옮겨다니며 전달된 함수를 실행할 때마다 함수 중의this 키워드는 서로 다른 DOM 요소를 가리킨다.그리고 함수를 실행할 때마다 함수에 실행 환경인 요소가 일치하는 요소 집합에 있는 위치를 나타내는 숫자 값을 매개 변수로 전달한다(0에서 시작하는 정형).
2、대상이 $를 누적합니다.each
var obj = {name:'he' , value:'weipo'};
$.each(obj,function(pro,val){
    alert(pro + ':' + val);
});

3. 데이터 필터링
var attr = [6,1,2,4,5];
attr = $.grep(attr,function(value,index){
  return value>3;
});

함수의 매개 변수는 each와 반대로 수조 자체를 조작하지 않는다.
4. 데이터 변경
var attr = [6,1,2,4,5];
attr = $.map(attr,function(value,index){
  if(index > 2) return value+1;
});

함수의 매개 변수는 each와 반대로 수조 자체를 조작하지 않는다.
5. 데이터 검색
var attr = [6,1,2,4,5];
$.inArray(0,attr);

indexOf와 유사하며, 이 요소가 그룹에 있는 번호를 되돌려줍니다. 그렇지 않으면 -1을 되돌려줍니다.
6, 문자열 공백 제거
var str = '  space world ';
$.trim(str);

앞뒤 빈칸을 제거한 문자열을 되돌려줍니다. 문자열 자체를 조작하지 않도록 주의하십시오.
7. 상용 판단 함수
$.isArray([]); 
//     
$.isFunction($);
//     
$.isEmptyObject({});
//       ,null undefined {} [] ,     ,         ,      false
$.isPlainObject(new Object());
//        
$.contains($('#father').get(0),$('#son').get(0));
// DOM       DOM  

8. 폼 매개 변수 획득 및 포맷
var obj = {name:'he',sex:'man',value:'weipo'};
$.param(obj);
// "name=he&sex=man&value=weipo" 
//               $("form").serialize() 

var obj2 = {name:'he',sex:'man',value:'weipo2'};
var attr = [obj,obj2];
$.param(attr)
// "he=weipo&he=weipo2"
//               ,   jQuery ajax     data js     ,
//               ,
//                ,    JSON.stringify(obj);          ;

9. 함수 역할 영역 제어
$.proxy(function(){},obj);
//          obj ,        

10. 개체 확장
$.extend(target.obj1,obj2.....); //   target  ,              
;(function($){
    $.extend({}); //   jQuery  
    $.fn.func = function(){}; //   jQuery  
})(jQuery);

11. 브라우저 테스트
$.browser           ;

12. 상자 모형 검측
$.support.boxModel     W3C     ,IE  

자신의 코드에서 이러한 도구 방법을 많이 사용하고 바퀴를 중복 발명하지 않기를 바란다. 결과적으로 각종 버그가 발생한다. 마치 우리 자바 백엔드에서 한 대상의 입력 합법성을 스스로 판단하는 것과 같다. 실제로 이런 것들은 우리가Apache의common 패키지를 빌려 완성할 수 있는데 왜 중복할 필요가 있겠는가?
미완성, 계속!

좋은 웹페이지 즐겨찾기