Выбор элементов через JQuery

Выбрать тот или иной элемент через JQuery очень просто. Рассмотрим несколько самых востребованных случаев:

Это довольно просто — используется знак $.
Т.е. $(‘выбранные элементы’). Для того, чтобы выбрать все div’ы на этой странице, придется прописать $(‘div’).

Примеры:

$(“#header”) – получение элемента с id=”header”
$(“h3“) – получить все <h3> элементы
$(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
$(“ul li”) – получить все <li> элементы из списка <ul>
$(“ul li:first”) – получить только первый элемент <li> из списка <ul>
$('div p#something a') //выбирает все ссылки из параграфа с id 'something' и с родителем div.

Выбор элементов по 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-ы

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

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

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

Как узнать не пустая ли выборка?
Надо проверить свойство length, которое показывает сколько элементов было выбрано.
if ($('div.foo').length) { ... } // пример условия на непустую выборку

Сохранение выборки
Выборку можно сохранить в переменную.
var $divs = $('div');

Иногда выборка содержит больше элементов, чем вам реально нужно. В таком 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"

$(«form select[name=town] option:selected»).val(); // получение выбранного(-ых) элементов в селекте town
$(«form :radio[name=son]:checked»).val(); // получение выбранного значения радиобатона с именем son
$(«form :checkbox:checked»); // выбор всех выбранных чекбоксов

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

Материал частично взят с сайта: http://coders.ask-ru.net