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

Элементы формы

Селектор Описание Пример
:button Выбирает все кнопки формы. $("input:button")
:checkbox Выбирает все чекбоксы. $("input:checkbox")
:file Выбирает все поля загрузки фала. $("input:file")
:image Выбирает все поля ввода изображения. $("input:image")
:password Выбирает все поля пароля. $("input:password")
:radio Выбирает все радио кнопки. $("input:radio")
:reset Выбирает все кнопки перезагрузки формы. $("input:reset")
:submit Выбирает все кнопки отправки формы. $("input:submit")
:text Выбирает все поля ввода текста. $("input:text")
:input Выбирает все поля формы, включая элементы input, textarea, и select. $(":input")
:checked Выбирает все отмеченные чекбоксы радио кнопки. $("input:checked")
:selected Выбирает все элементы option. $("option:selected")
:disabled Выбирает все недоступные поля формы. $("input:disabled")
:enabled Выбирает все Доступные поля формы. $("input:enabled")

Для ускорения кода всегда ограничивайте объем для работы селекторов: например, $("*") будет выполняться крайне медленно. Однако, $("input:checkbox") действует значительно быстрее, так как jQuery может использовать функцию JavaScript getElementsByTagName() для быстрого ограничения объемов поиска только элементами input.


По атрибутам

Атрибут Описание Пример
есть Выбирает элемент(ы), которые содержат определенный атрибут вне зависимости от значения атрибута. $("div[attributeName]")
равен Выбирает элемент(ы), которые содержат заданный атрибут с заданным значением. $("div[attributeName='value']")
не равен Выбирает элемент(ы), которые не содержат заданного атрибута или сожержат заданный атрибут, но его значение не соответствует заданному. $("div[attributeName!='value']")
начинается с Выбирает элемент(ы), которые содержат заданный атрибут, у которого значение начинается с заданной строки. $("div[attributeName^='value']")
заканчивается
Выбирает элемент(ы), которые содержат атрибут, у которого значение заканчивается заданной строкой. $("div[attributeName$='value']")
содержит Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку. $("div[attributeName*='value']")
содержит слово Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданное слово. "Слово" - это последовательность символов без пробелов. $("div[attributeName~='value']")
содержит префикс Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом. $("div[attributeName|='value']")

Можно комбинировать несколько элементов. Например, для того, чтобы выбрать изображения, которые имеют ширину 300 px и высоту 200px примените следующий код

var images = $("img[width=300][height=200]");

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

$( "form input[name='gender']:radio" );
$( "form input[name='gender'][type='radio']" );

По положению

Селектор Описание Пример
:first Выбирает первый элемент в наборе отобранных элементов. // Выбираем первый параграф, который имеет класс "myClass":
$("p.myClass:first")
:last Выбирает последний элемент в наборе отобранных элементов. // Выбираем последний параграф, который имеет класс "myClass":
$("p.myClass:last")
:eq() Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса (0 = первый элемент, 1 = второй и так далее). // Выбираем з-й параграф, который имеет класс "myClass":
$("p.myClass:eq(2)")
:lt() Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1). // /Выбираем первые 2 параграфа, которые имеют класс "myClass":
$("p.myClass:lt(2)")
:gt() Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего. // Выбираем все параграфы, которые имеют класс "myClass", за исключением первых трех:
$("p.myClass:gt(2)")
:even Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы. // Выбираем 1й, 3й, 5й, и так далее параграфы, которые имеют класс "myClass":
$("p.myClass:even")
:odd Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы // Выбираем 2й, 4й, 6й, и так далее параграфы, которые имеют класс"myClass":
$("p.myClass:odd")