Селекторы jQuery для выделения элементов страницы

Обычно селекторы jQuery используются для выбора элементов на странице, чтобы затем вызвать методы jQuery для манипулирования ими.

Селекторы jQuery основаны на селекторах CSS, и если вы знаете CSS, то уже имеет базовое представление об идее выбора элементов на странице.

В данном уроке мы рассмотрим селекторы, которые поддерживаются jQuery. Многие из них такие же как и селекторы CSS, но есть и специфические для jQuery. Для каждого селектора приведен пример использования для выбора элемента страницы.

В урок включены следующие  разделы:

• Основные селекторы
• Выбор элементов по атрибуту
• Выбор элементов по содержанию
• Выбор элементов по иерархии
• Выбор полей формы
• Выбор элементов по их положению
• Другие полезные селекторы

Здесь приводится полный список всех селекторов, которые поддерживаются в jQuery.

jQuery поддерживает только те селекторы CSS, которые выбирают элементы DOM. Например, :visited, :hover и :first-line не поддерживаются.

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

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

// Выбирает все div с классом .myClass, а также все параграфы
var selectedElements = $("div.myClass, p");

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

Основные селекторы отлично подходят в случаях, если нужно выбрать все параграфы на странице или элемент, который нужно выбрать имеет класс CSS или ID.

Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.

В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:

• Изображение по атрибуту src
• Ссылку по атрибуту href
• Все поля input формы, которые имеют атрибут type="checkbox"

…и так далее.

jQuery имеет много селекторов, которые можно использовать для выбора элементов по атрибуту:

Вы можете комбинировать селекторы атрибутов для сужения области выбора. Например:

// Выбираем только те изображения, которые имеют ширину 300 px и высоту 200 px
var selectedImages = $("img[width=300][height=200]");

Селектор “Атрибут содержит префикс” выглядит неэффективно, но он сделан для обработки атрибутов языка, таких как lang="en" и lang="en-US".

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

Если нет возможности сузить область выбора по основным селекторам и по атрибутам, то можно “покопаться” в содержании элемента для определения, подходит он для выбора или нет. jQuery имеет 4 селектора для данного назначения:

Следующий пример показывает, как использовать :contains(), наряду с селектором класса для выбора параграфов, которые имеют определенный класс, дополнительным условием служит условие содержания определенной строки (или строк):

// Выбираем все параграфы,которые имеют класс "intro"
// и также содержат текст "MegaWidget"
var selectedElements = $("p.intro:contains('MegaWidget')");

// Выбираем все параграфы, которые имеют класс "intro"
// и содержат и "MegaWidget" и "WonderWidget"
var selectedElements = $("p.intro:contains('MegaWidget'):contains('WonderWidget')");

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

Другой способ выбрать элементы в jQuery – это рассмотреть, как они соотносятся друг к другу на странице. Вероятно, вы знаете много таких селекторов по работе с  CSS:

Кроме задания определенного номера ребенка с помощью :nth-child(), можно указывать even (для выбора всех детей с четными номерами), odd (для выбора всех детей с нечетными номерами), или выражение (например, "li:nth-child(3n+2)" выбирает каждый третий элемент в списке, а отсчет начинается со второго элемента).

В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет id "myTable":

var selectedElements = $("table#myTable tr:nth-child(odd) > td:first-child");

Выбор полей формы

Элементы формы имеют некоторые специфические свойства, которые вынуждают использовать некоторые трюки для их выбора. Например, чекбоксы, наряду со многими  другими типами полей, являются элементами input. Таким образом,, чтобы выбрать чекбоксы в форме нужно использовать $("input[type='checkbox']").

Аналогично, идентификация выбранных элементов в списке select или отмеченных чекбоксов в форме может быть утомительным занятием./

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

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

Следующий пример ищет форму, которая имеет атрибут action со значением "mailform.php", затем выбирает все отмеченные радио кнопки в форме:

var selectedElements = $("form[action='mailform.php'] input:radio:checked");

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс "myClass". Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс "myClass", а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Отметим, что данные селекторы не работают также как :first-child, :last-child, и так далее. Например, li.myClass:first-child выбирает только пункт списка с классом "myClass" , который является первым пунктом в соответствующем списке. А li.myClass:first находит все пункты списка на странице, которые имеют класс  "myClass", а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки  в первых двух строках таблицы, которая имеет ID "myTable":

var selectedElements = $("table#myTable tr:lt(2) > td");

Другие полезные селекторы jQuery

Если ни один из перечисленных селекторов не помог вам выделить нужные элементы, попробуйте использовать следующие селекторы:

В следующем примере выбираются все элементы на странице, кроме заголовков h1:

var selectedElements = $(":header:not(h1)");

Заключение

В данной статье мы рассмотрели, как выбирать элементы с помощью селекторов jQuery. Были разобраны следующие типы селекторов:

• Основные селекторы, которые будут использоваться большую часть времени работы над проектом
• Селекторы атрибутов для выбора элементов на основе имен атрибутов и их значений
• Селекторы содержания, которые позволяют выбирать элементы на основе их содержания
• Иерархические селекторы, которые можно использовать для выбора элементов на основе их взаимоотношений с другими элементами на странице
• Селекторы полей формы, которые обеспечивают простой способ выбора различных элементов полей формы
• Селекторы положения для выбора элементов в соответствии с их положением в наборе элементов
• Дополнительные селекторы, такие как :not() для выбора элементов, не соответствующих селектору, и :animated для выбора анимированных элементов
  ПС – статья полный копипаст из оригинала. Оригинал статьи – http://ruseller.com/lessons.php?id=682