Библиотека jQuery предоставляет возможность установить или изменить значение атрибутов двумя способами. Для установки и изменение значение атрибутов используется метод .attr(). Мы уже об этом методе говорили — кроме установки или изменение, с помощью этого метода мы можем получить значение атрибута.
Синтаксис метода .attr() для установки/изменение значение
- attr(name, value)
- Устанавливает указанному атрибуту переданное значение для всех элементов в объекте jQuery.
- Параметры
- name — (Строка) Имя атрибута, который должен быть установлен.
- value — (Строка | Число | Логический тип | Функция) Указывает значение атрибута, который может быть любое выражение JavaScript. Любое значение, кроме функции, преобразуется в строку. Функция вызывается для каждого элемента в наборе, передает индекс элемента и текущее значение атрибута с данным именем в элементе. Возвращаемое функцией значение становится значением атрибута.
- Возвращает
- Коллекцию jQuery.
Пример использование:
$('#my_image').attr('title', "My Image");
Первый вариант использование метода на первый взгляд кажется простым, но это не так! Как уже поняли, вторым параметром (value) метод .attr() принимает значение, которое будет установлено. Значение value может быть любым выражением JavaScript, который в конечном итоге вернет строку.
Станет куда интереснее, когда параметр value будет встроенной функцией или ссылкой на функцию. В таких случаях функция вызывается для каждого извлеченного элемента с возвращаемым значением функции, используемым в качестве значения атрибута. Когда вызывается функция, ей передается два параметра. Один из них содержит отсчитываемый от нуля индекс элемента в наборе, а другой — текущее значение атрибута с именем элемента. Кроме того, элемент устанавливается в качестве контекста функции (this) для ее вызова. Это позволяет функции настроить свою обработку для каждого конкретного элемента — главное преимущество использования ее таким образом.
Пример использование в качестве значение метода .attr() функцию:
$('[title]').attr('title', function(index, previousValue) {
return previousValue + 'Я элемент ' + index + ' и меня зовут ' + (this.id || 'unset');
});
С помощью этого метода мы находимся на странице все HTML элементы, которые имеют атрибут title, и меняем атрибут каждого элемента. Изменение происходит путем добавления к имеющемуся значению строки, составленной с использованием индекса элемента в DOM и идентификатора атрибута каждого конкретного элемента, если таковой имеется, или в противном случае — строки ‘unset’ (позволяет сбросить все настройки).
Второй вариант применения метода .attr() — это установки / изменение значение нескольких атрибутов за раз.
Синтаксис метода, который может изменить значений нескольких атрибутов сразу
- attr(attributes)
- Использует свойства и значения, указанные передаваемым объектом, для установки соответствующих атрибутов на всех элементах соответствующего набора.
- Параметры
- name — (Строка) Имя атрибута, который должен быть установлен.
- attributes — Объект, свойства которого копируются как атрибуты ко всем элементам в наборе.
- Возвращает
- Коллекцию jQuery.
С помощью данного варианта использование метода attr() можно очень быстро изменить или установить значение нескольких атрибутов по всем элементам набора. Метод принимает один параметр и это должен быть объектом. Свойства объекта — это имена тех атрибутов, с которыми хотим работать.
Пример использование:
$('input').attr({
value: '',
placeholder: 'Поиск по сайту',
title: 'Пожалуйста, введите значение'
});
Давайте разберем пример выше. Мы находимся на странице все элементы input и изменяем атрибуты value, placeholder и title всех найденных элементов, если они есть, а если нет, то добавляем.
ПРЕДУПРЕЖДЕНИЕ
Изменение атрибута type элемента input или button, которые созданы через метод document.createElement(), приводит к исключению в браузере Internet Explorer 6 — 8.
Комментарии