jQuery select: выбор элементов

Основная идея jQuery состоит в том, чтобы “выбрать несколько элементов и сделать что-нибудь с ними”. jQuery поддерживает большинство селекторов стандарта CSS3, а также некоторые нестандартные селекторы. Полный список поддерживаемых селекторов вы можете посмотреть здесь: http://api.jquery.com/category/selectors/

Приведем несколько примеров.

Выбор элементов по ID

$('#myId'); // ID должны быть уникальными на странице

Выбор элементов по имени класса

$('div.myClass'); // производительность будет выше, если указать еще тип элемента

Выбор элементов по атрибутам

$('input[name=first_name]'); // имейте в виду, что эта выборка может быть долгой

Выбор элементов с помощью составного селектора

$('#contents ul.people li');

Псевдо-селекторы

$('a.external:first'); 
$('tr:odd');
$('#myForm :input');   // выбрать все input-ы в форме
$('div:visible');
$('div:gt(2)');        // все, кроме первых трех div-ов
$('div:animated');     // все анимированные div-ы

Выбор селекторов

С помощью выбора хороших селекторов вы можете улучшить производительность кода javascript. Например, очень важно указывать тип элемента div при выборе элементов по имени класса. Т.е. всегда следует давать подсказку jQuery о том, где искать. Но следует иметь в виду, что слишком много подсказок может также навредить. Например, селектор #myTable thead tr th.special слишком перегружен, в данном случае гораздо проще использовать селектор #myTable th.special.

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

// находит все элементы типа <a>, у которых атрибут rel оканчивается на "thinger"
$("a[rel$='thinger']");

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

Как узнать не пустая ли выборка?

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

if ($('div.foo')) { ... }

Но этот способ не будет работать. Когда вы делаете выборку используя $(), то объект возвращается в любом случае, и условие всегда будет истинным. Код внутри фигурных скобок будет выполняться всегда, даже когда в выборке нет элементов.
На самом деле вам лишь надо проверить свойство length, которое показывает сколько элементов было выбрано.

// пример условия на непустую выборку
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);               // шестой

Выборки элементов формы

jQuery предоставляет несколько псевдо-селекторов, которые позволяют найти элементы в форме. Эти селекторы особенно полезны, поскольку бывает трудно определить элементы формы по их состоянию или свойству используя стандартные CSS селекторы.

:button
выбирает элементы <button> и элементы с типом type=”button”

:checkbox
выбирает input-ы с типом type=”checkbox”

:checked
выбирает checked input-ы

:disabled
выбирает выключенные элементы формы

:enabled
выбирает включенные элементы формы

:file
выбирает input-ы с типом type=”file”

:image
выбирает input-ы с типом type=”image”

:input
выбирает элементы <input>, <textarea> и <select>

:password
выбирает input-ы с типом type=”password”

:radio
выбирает input-ы с типом type=”radio”

:reset
выбирает input-ы с типом type=”reset”

:selected
выбирает выбранные опции

:submit
выбирает input-ы с типом type=”submit”

:text
выбирает input-ы с типом type=”text”

// пример использования псевдо-селекторов для формы
$("#myForm :input'); // получить все элементы input

источник

Читайте также: