Выбор Селекторов 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 ); // шестой

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

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)