Ошибки и советы по использованию jQuery

Элементы DOM надо выбирать только один раз, и сохранять в переменную

// неправильно
$("#obj").addClass("selected");
$("#obj").removeClass("selected");

// правильно
var obj = $("#obj");
obj.addClass("selected");
obj.removeClass("selected");

В первом случае, JavaScript несколько раз обходит DOM для повторной выборки объекта #obj, когда во втором случае объект #obj выбирается только один раз. Производительность данного примера может быть заметна в данном коде:

// неправильно
for (var i = 0; i < 1000; i++) {
    $("#obj").addClass("#obj");
}

// правильно
var obj = $("#obj");
for (var i = 0; i < 1000; i++) {
    obj.addClass("#obj");
}

В первом примере объект #obj каждый раз заново выбирается 1000 раз, когда во втором примере объект #obj выбирается только один раз.

Делать выборку по id

Самый быстрый способ выбрать элемент, это выбрать его по атрибуту id.

$("#obj");

Если надо выбрать объект по классу, то перед классом рекомендуется указывать id.

$(".list"); // не рекомендуется 

$("#obj .list"); // рекомендуется

В первом случае jQuery будет искать все элементы с классом list. Во втором случае jQuery будет искать элементы с классом list только внутри элемента с ид obj.

Стоит обратить внимание, что выборка #obj .list работает быстрее, чем #obj li.list.

Также можно сразу сохранить элемент в переменной, и уже искать объекты внутри переменной.

// неправильно
$("#obj .list");
$("#obj .images");

// правильно
var obj = $("#obj");
$(".list", obj);
$(".images", obj);

Выборка ".list", obj работает быстрее, чем #obj .list.

Быстродействие кода

Для быстродействия можно использовать следующий код:

1. Вместо addClass() использовать  attr("class", "class-name"), когда есть возможность;
2. Вместо show() или hide() использовать css("display", "block") или css("display", "none").