Одна из самых главных фишек jQuery - это выборка элементов на странице. Благодаря расширенным функциям выборки jQuery превосходит DOM на порядок. В этой статье будет изложено руководство, дополненное примерами из программируемой жизни.

# - Поиск по идентификатору

Итак основа основ - # решетка. Это выборка элемента с указанным ID. (полный аналог document.getElementById)&

<input type='text' name='n' id='n' value='Покажи меня'>
alert($("#n").val());

В действии:

тыц

Если вы будете пользоваться то в 99% процентов случае она будет стоять самой первой. Очень часто программисты переходящие с prototype на jQuery забывают ставить решетку а потом рвут на себе волосы долго ищя ошибку в коде. Очень часто отсутствие решетки в селекторе является причиной нерапотоспособности кода.

Поиск по HTML-классу - tag1

Выбор простого элемента:

<textarea name='n'>Покажи меня в тексте</textarea>
alert($("textarea").val());

В действии

Покажи меня в тексте тыц

Поиск вложенного элемента - tag1 tag2

Но самая основная фишка селекторов jQuery - это возможность их совмещения для поиска нужного элемента. Чтобы совмещать селекторы класса элементов надо их просто написать через пробел в порядке увеличения глубины внутри страницы.

<div id="someid"><span><p>Этот текст будет изменен</p></span></div>
<div id="someid2"><span><p>А тут не будет изменений</p></span></div>
$("#someid span p").html("Изменить значение у тэга p который внутри тэга span, который внутри элемента с ID someid");

В действии

Этот текст будет изменен
А тут не будет изменений

тыц

Обратите внимание: при таком поиске будут найдены все дочерние элементы, даже те которые находятся на более глубоком уровне вложенности, пример:

<div><span><li>123</li></span><li>234</li></div>
$("div li").html("123-123"); --- Значение изменится у обоих LI:

123
234


тыц

Поиск по аттрибутам - [attr=value]

Еще фишка: селектор элемента, с фильтрации по аттрибуту. Методов фильтрации много

[attr] - поиск объекта имеющего аттрибут attr.
[attr='value'] - поиск объекта, attr которого равен value
[attr!='value'] - поиск объекта, attr которого равен value
[attr^='value'] - поиск объекта, attr которого начинается с value
[attr$='value'] - поиск объекта, attr которого заканчивается на value
[attr*='value'] - поиск объекта, аттрибут attr которого содержит value в любом его месте
[attr='val'][attr2!='val2'] - поиск объекта где attr равен val а attr2 не равен val2

Примеры:

$("input[type='text']") - выборка всех input у которых type указан как text. Т.е. checkbox, submit, reset под это не попадут.
$("input[type!='text']") - выборка всех input у которых type указан отличный от text. Т.е. checkbox, submit, reset попадает - очень аккуратно нужно использовать такой селектор.
$("input[name^='ofis_phone']") - самый используемый тип вборки. Им Вы и будете пользоваться когда освоитесь. Показывает все элементы у которых name начинается с 'ofis_phone'
$("input[name$='ofis_phone']") - полный аналог предыдущего. Разница лишь в том что искомая строка должна быть в конце аттрибута name.
$("input[value*='Юрий']") - тоже частый механизм поиска. Ищет все элементы где в value есть слово Юрий.

$("input[type=text][name='fio'][value!='Ольга']") - вывод элемента input ааттрибут name которого равен fio а значение value любое кроме 'Ольга'.

Обратите внимание при поиске по HTML-типу надо использовать нижний регистр, а при поиске по указываемым значениям - надо точно указывать регистр.
Т.е. эти структуры содержат ошибки:
$("input[type='TEXT']")
$("input[TYPE='TEXT']")

Как и эта:
<input name='иМя'>
$("input[name='имя']") - ничего не найдет
$("input[name='ИмЯ']") - ничего не найдет
$("input[name='иМя']") - только так правильно

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

То, зачастую скорее всего Вам и нужен jQuery - это работа с формами.

:enabled - поиска разблокированного
:disabled - поиск заблокированного видимого элемента формы input,textarea
:checked - Поиск checkbox,radio которое checked
:selected - Поиск <option> которое selected
Я считаю что самым серьезным здесь фильтр :selected - очень часто кроме значение поля select котороая скорее всего цифровое надо еще и знать его текстовый вариант. Тогда будет очень полезна вот какая коротка конструкция:

<select id='select_id'>
            <option value='1'>Тут значение ОДИН</option>
            <option value='2'>Тут значение ДВА</option>
</select>
$("#select_id option:selected").text();

В действии:

Тут значение ОДИНТут значение ДВАтыц

Поиск по CSS-классу - . (точка)

Чтобы искать по классу достаточно к селектору класса дописать ".название_css_класса_без_пробела": $("span.megauser_defines_style")
Если у нужного объекта указано несколько классов то они все перечисляются через точку: $("div.class1.class2.class3");

Пример:

<p class='123'>123</p><p class='234'>234</p>
$("p.123").html("123-123-123");

В действии:

123
234
тыц

Поиск по соседей - first, last, qe, lt,gt

:first - первый дочерний элемент
$("div:first");
:last - последний дочерний элемент
$("div:last");

У каждого элемента ей свой порядковый номер внутри родителя.
Сначал был сын Вася(1) потом дочь Ольга(2). В jQuery  тоже самое.

:eq(номер) - поиск то точному номеру. ОБратите внимание, нумерация начинается с нуля.
$("table td:eq(2)") - третий <td> начала таблицы
$("table tr:eq(3) td:eq(4)") - пятый <td> в четвертом ряду

:gt(номер) - поиск всех элементов чей номер не ниже указанного (gt - сокращение от greater than(больше чем))
$("table td:gt(5)") - все <td> от 6

:lt(номер) - аналогично предыдущему, только не больше указанного (less than - менее чем)
$("table td:lt(3)");