Селекторы по атрибутам

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

Синтаксис: [attr] Выбирает все элементы, у которых присутствует указанный атрибут, независимо от значения.

$('input[required]').addClass('marked');

Селектор атрибута с точным значением

Синтаксис: [attr="value"] Соответствует элементам, у которых значение атрибута совпадает полностью.

$('a[target="_blank"]').each(function() {
    // обработка ссылок, открывающихся в новом окне
});

Селектор с совпадением по слову

Синтаксис: [attr~="value"] Ищет значение среди слов, разделённых пробелами.

$('div[class~="item"]').hide();

Селектор с префиксом

Синтаксис: [attr|="value"] Используется для совпадения по языковым тегам или значениям, содержащим дефис. Совпадает с value и value-*.

$('meta[http-equiv|="content"]').remove();

Селектор, проверяющий начало значения

Синтаксис: [attr^="value"] Совпадение, если значение атрибута начинается с указанной строки.

$('img[src^="/assets/"]').addClass('local-image');

Селектор, проверяющий конец значения

Синтаксис: [attr$="value"] Соответствует элементам, у которых значение атрибута заканчивается на указанную строку.

$('script[src$=".min.js"]').prop('async', true);

Селектор, проверяющий вхождение подстроки

Синтаксис: [attr*="value"] Ищет значение value в любой части атрибута.

$('a[href*="docs"]').addClass('docs-link');

Комбинирование селекторов атрибутов

Селекторы могут объединяться между собой и с обычными CSS-селекторами, что позволяет формировать точные выборки.

$('input[type="text"][data-role="search"]').val('');
$('div.item[data-state="active"] span[name="title"]').toggle();

Группировка и фильтрация

jQuery предоставляет функцию .filter(), позволяющую применять селекторы атрибутов к уже найденному набору элементов.

$('input')
    .filter('[required]')
    .filter('[type="email"]')
    .addClass('email-required');

Особенности производительности

Ключевые моменты:

  • Селекторы по атрибутам выполняются быстрее при ограничении области поиска контекстом: form.find('input[required]') работает заметно эффективнее, чем $('input[required]') при большом DOM.
  • Усложнённые цепочки селекторов полезно применять только тогда, когда они действительно нужны; если элемент уже известен по классу или ID, атрибутные фильтры могут оказаться избыточными.
  • Изменение DOM после выбора требует повторного вызова селектора, поскольку jQuery не отслеживает дальнейшие изменения автоматически.

Применение в динамических интерфейсах

Селекторы по атрибутам подходят для:

Работы с HTML5-атрибутами данных (data-*)

$('[data-id="42"]').addClass('highlight');

Адаптивных форм

$('input[required]').on('blur', validate);

Модульных компонентов

$('[data-component="tabs"][data-active="true"]').addClass('open');

Такая модель выбора элементов позволяет использовать атрибуты как собственный протокол метаданных

Разработка интерфейсов нередко возлагает на атрибуты роль конфигурационных ключей, которые управляют поведением скриптов, состоянием компонентов и способами стилизации. Селекторы по атрибутам в jQuery обеспечивают ровно тот уровень гибкости, при котором декларативная разметка становится самодостаточным описанием взаимодействия.

Оглавление