Выбор Селекторов jQuery

Выбор хороших селекторов jQuery - один из способов улучшить производительность JavaScript. Небольшая специфичность – например, включение типа элемента при выборе элементов по имени класса - может пройти длинный путь. С другой стороны слишком много специфичности может оказаться плохой идеей. Селектор, такой как #myTable thead tr th.special, является излишним, если такой селектор, как #myTable th.special, выполнит задачу.

jQuery предлагает много основанных на атрибутах селекторов, позволяя выборки, основанные на контенте произвольных атрибутов, используя упрощенные регулярные выражения.

// Найти все элементы <a>, чьи атрибуты
//   заканчиваются на "thinger".
$( "a[rel$='thinger']" );

В то время как они могут быть полезными в крайнем случае, они могут также быть чрезвычайно медленными в более старых браузерах. Везде, где возможно, делайте выборки, используя ID, имена классов и названия тегов.

Тогда как эти селекторы могут оказатьсяWhile these can be useful in a pinch, they can also be extremely slow in older browsers. Wherever possible, make selections using IDs, class names, and tag names.

Содержит ли Моя Выборка Какие-либо Элементы?

Как только Вы сделали выборку, Вы, вероятно, хотите знать, есть ли у Вас что-нибудь в этой выборке, с чем можно работать. Частая ошибка состоит в том, чтобы использовать:

// Не работает!
if ( $( "div.foo" ) ) {
    ...
}

Это не будет работать. Когда выборка делается, используя $(), объект всегда возвращается, а объекты всегда оцениваются как true. Даже если выборка не содержит элементов, оператор if будет все еще срабатыть.

Лучший способ определить, есть ли какие-либо элементы, состоит в том, чтобы протестировать свойство выборки .length, которое говорит Вам, сколько элементов было выбрано. Если ответ 0, свойство .length будет оцениваться как false при использовании в качестве булева значения:

// Тестирование, содержит ли выборка элементы.
if ( $( "div.foo" ).length ) {
    ...
}

Сохранение Выборки

jQuery не кэширует элементы для Вас. Если Вы сделали выборку, которую Вы, возможно, должны будете сделать снова, следует сохранить выборку в переменной вместо того, чтобы неоднократно делать выборку.

var $divs = $( "div" );

В примере выше, имя переменной начинается со знака доллара. В отличие от других языков, знак доллара ничего не означает в JavaScript – это - только другой символ. Здесь, он используется, чтобы указать, что переменная содержит объект jQuery. Эта практика - просто соглашение, и она не обязательна.

Как только выборка сохранена в переменной, можно вызывать методы jQuery для переменной точно так же, как Вы вызвали бы их на исходной выборке.

Выборка выбирает только элементы, которые находятся на странице в то время, когда делается выборка. Если элементы добавляются к странице позже, необходимо повторить выборку или другим образом добавить их в выборку, сохраненную в переменной. Сохраненные выборки не обновляются волшебным образом, когда DOM изменяется.

Конкретизация & Фильтрация Выборок

Иногда выборка содержит больше чем, Вы хотели. jQuery предлагает несколько методов для конкретизации и фильтрации выборок.

// Кокретизация выборок.
$( "div.foo" ).has( "p" );         
  // элементы div.foo, которые содержат теги <p>
$( "h1" ).not( ".bar" );           
  // элементы h1, у которых нет класса bar
$( "ul li" ).filter( ".current" ); 
  // элементы неупорядоченного списка с классом current
$( "ul li" ).first();              
  // просто первый элемент неупорядоченного списка
$( "ul li" ).eq( 5 );              
  // шестой

Далее: Как я определяю состояние переключаемого элемента?