Чтение и установка атрибутов

Zepto.js предоставляет лаконичные методы для работы с атрибутами HTML-элементов, позволяя легко получать и изменять значения атрибутов, не прибегая к громоздкому стандартному DOM API. Основным инструментом для этого является метод attr(), который объединяет функции чтения и записи атрибутов в одном интерфейсе.

Получение значения атрибута

Для чтения атрибута используется синтаксис:

var value = $('selector').attr('attributeName');
  • Если выбран один элемент, метод возвращает строку с текущим значением атрибута.
  • Если выбран несколько элементов, возвращается значение атрибута первого элемента в коллекции.

Примеры:

var src = $('img').attr('src'); // получает src первой картинки
var title = $('#header').attr('title'); // получает title элемента с id="header"

Важно: если атрибут отсутствует, метод возвращает undefined.

Установка значения атрибута

Для задания значения атрибута используется тот же метод attr(), но с двумя аргументами:

$('selector').attr('attributeName', 'value');
  • Метод автоматически применяет значение ко всем элементам в коллекции.
  • Поддерживаются как стандартные атрибуты (src, href, id), так и пользовательские data-*.

Примеры:

$('img').attr('alt', 'Описание изображения'); // изменяет alt для всех изображений
$('a').attr('target', '_blank'); // добавляет target="_blank" ко всем ссылкам

Установка нескольких атрибутов одновременно

Для удобства Zepto позволяет передавать объект с набором атрибутов:

$('selector').attr({
  'attribute1': 'value1',
  'attribute2': 'value2',
  'attribute3': 'value3'
});

Пример:

$('#logo').attr({
  'title': 'Главный логотип',
  'alt': 'Логотип сайта'
});

Это упрощает изменение множества атрибутов без повторного вызова метода.

Работа с атрибутами data-*

Для чтения и записи пользовательских атрибутов data-* в Zepto существует метод data(). Он автоматически преобразует имя атрибута в camelCase при работе с JavaScript.

Пример чтения и записи:

// HTML: <div id="item" data-id="123" data-name="example"></div>

var id = $('#item').data('id'); // 123
$('#item').data('name', 'новое имя'); // изменяет data-name

Метод data() хранит данные в кэше Zepto, что делает доступ к ним более быстрым и удобным, чем через attr('data-*').

Удаление атрибутов

Для удаления атрибутов используется метод removeAttr():

$('selector').removeAttr('attributeName');
  • Можно удалять как один атрибут, так и несколько, передавая имена через пробел:
$('img').removeAttr('alt title'); // удаляет сразу два атрибута

Удаление атрибутов применяется ко всем элементам выбранной коллекции.

Особенности и нюансы

  • Чтение свойства vs атрибута: attr() работает с атрибутами, а не с DOM-свойствами. Для получения текущего состояния свойства, например checked у чекбокса, нужно использовать метод prop().
  • Возврат undefined: попытка прочитать несуществующий атрибут возвращает undefined. Это важно учитывать при условных проверках.
  • Методы цепочки: методы attr(), removeAttr() и data() возвращают объект Zepto, что позволяет использовать цепочку вызовов:
$('input').attr('disabled', true).data('edited', false);

Отличие от jQuery

Zepto стремится к совместимости с jQuery, но реализует методы более легковесно. Основные отличия при работе с атрибутами:

  1. Поддержка большинства стандартных HTML-атрибутов, но некоторые специфичные методы jQuery могут отсутствовать.
  2. Метод data() кэширует значения в Zepto, а не всегда синхронизирует с DOM-атрибутами напрямую.
  3. Производительность выше за счёт минималистичной реализации и отсутствия избыточных проверок.

Резюме функционала

Метод Назначение Аргументы Возвращаемое значение
attr(name) Получение значения атрибута name — имя атрибута строка или undefined
attr(name, value) Установка значения атрибута name, value объект Zepto (для цепочек)
attr(object) Установка нескольких атрибутов объект {name: value} объект Zepto
removeAttr(name) Удаление атрибута имя или несколько имён объект Zepto
data(name) Получение значения data-* имя свойства значение атрибута или кэш Zepto
data(name, value) Установка значения data-* имя свойства, значение объект Zepto

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

Оглавление