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