[javascript] 피해야 할 jQuery 함정

성능 저하를 인식하지 못하고 선택기를 로컬 변수에 할당하는 대신 셀렉터를 과도하게 사용합니다. 예를 들면 다음과 같습니다.

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

오히려 :-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

또는 더 나은 체인으로 :-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red");
});

내가 찾은 이 내가 어떻게 호출 스택 작업을 깨달았을 때 계몽 순간을.

편집 : 의견에 제안을 통합했습니다.

답변

// This will search whole doc for elements with class myClass
$('.myClass');

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

$('.button').click(function() { /* do something */ });

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});