JQuery를 보다 효율적으로 사용하세요. 8가지 Tips_jquery가 있습니다.

1. DOM 순회는 비용이 많이 들기 때문에 캐시 변수입니다.

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

//권장하지 않음
var h = $('#ele').height();
$('#ele').css('높이', h-20);

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

//추천
var $ele = $('#ele');
var h = $ele.height();
$ele.css('높이',h-20);

2. 선택기를 최적화합니다.

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

//권장하지 않음
$('div#myid')

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

//추천
$('#myid')

3. 암시적인 범용 선택자를 피하세요.

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

//권장하지 않음
$('.someclass :radio')

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

//추천
$('.someclass 입력:라디오')

4. 범용 선택자를 피하세요.

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

//권장하지 않음
$('.container > *')

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

//추천
$('.container').children()

5. 코드를 최대한 단순하게 유지하세요.

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

//권장하지 않음
if(arr.length > 0){}

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

//추천
if(arr.length){}

6. 기능을 최대한 병합하세요.

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

//권장하지 않음
$f.on("클릭", function(){
$(this).css('border','1px 단색 빨간색');
$(this).css('color','blue');
});

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

//추천
$f.on("클릭", function(){
$(this).css({
         '테두리':'1px 단색 빨간색',
'색상': '파란색'
});
});

7. 체인작업을 최대한 활용하세요.

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

//권장하지 않음
$ele.html();
$ele.on("click",function(){});
$ele.fadeIn('느린');

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

//추천
$ele.on("클릭",function(){

}).fadeIn('slow').animate({height:'12px'},500);

8. DOM 요소에 대해 많은 작업을 수행하고 먼저 분리한 다음 추가합니다

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

//권장하지 않음
var $container = $('#somecontainer');
var $ele = $container.first();
.....복잡한 작업의 연속

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

//추천
var $container = $('#somecontainer');
var $ele = $container.first().detach();
.....복잡한 작업의 연속
$container.append($ele);