Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Атрибуты и свойства

179

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Библиотека jQuery позволяет получать и устанавливать значения атрибутов элементов, содержащихся в объекте jQuery. Методы jQuery, предназначенные для работы с атрибутами, описаны в таблице ниже:

Методы для работы с атрибутами
Метод Описание
attr(имя) Возвращает значение атрибута с указанным именем для первого из элементов, содержащихся в объекте jQuery
attr(имя, значение) Устанавливает значение атрибута с указанным именем для всех элементов, содержащихся в объекте jQuery
attr(объект отображения) Устанавливает атрибуты, указанные в объекте отображения, для всех элементов, содержащихся в объекте jQuery
attr(имя, функция) Устанавливает указанный атрибут для всех элементов, содержащихся в объекте jQuery, с помощью функции
removeAttr(имя), removeAttr(имя[]) Удаляет атрибут (атрибуты) из всех элементов, содержащихся в объекте jQuery
prop(имя) Возвращает значение указанного свойства для первого из элементов, содержащихся в объекте jQuery
prop(имя, значение), prop(объект отображения) Устанавливает значение одного или нескольких свойств для всех элементов, содержащихся в объекте jQuery
prop(имя, функция) Устанавливает значение указанного свойства для всех элементов, содержащихся в объекте jQuery, с использованием функции
removeProp(имя) Удаляет указанное свойство из всех элементов, содержащихся в объекте jQuery

Если метод attr() вызывается с одним аргументом, jQuery возвращает значение указанного атрибута для первого из элементов выбранного набора. Соответствующий пример приведен ниже:

$(function() {
                
    var srcValue = $('img').attr('src');
    console.log("Значение атрибута: " + srcValue);
	
});

В этом сценарии мы выбираем все элементы img в документе, а затем используем метод attr() для получения значения атрибута src, при считывании которого получаем строку. На консоль выводится следующий результат:

Применение метода attr() с одним аргументом

Получение значения атрибута для всех элементов, содержащихся в объекте jQuery, обеспечивается совместным применением методов each() и attr():

$(function() {
                
    var srcValue = $('img').each(function(index, element) {
        console.log('Значение атрибута src: ' + $(this).attr('src'));
    });
	
});

В этом сценарии из объекта HTMLElement, передаваемого функции в качестве аргумента, с помощью функции $() создается объект jQuery. Этот объект содержит единственный элемент, который идеально подходит для метода attr().

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

Если метод attr() используется для установки значения атрибута, то изменение применяется ко всем элементам, содержащимся в объекте jQuery. Таким образом, в данном случае метод ведет себя иначе, чем при считывании атрибутов, когда возвращается лишь значение атрибута одного элемента. При установке атрибута метод attr() возвращает объект jQuery, что означает возможность использования цепочки вызовов.

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

$(function() {
                
    $('img').attr("src", "http://professorweb.ru/downloads/jquery/lily.png");
	
});

В этом сценарии выбираются все элементы img в документе, и для атрибута src устанавливается ссылка на картинку lily.png. Установленное значение применяется ко всем выбранным элементам, как показано на рисунке:

Установка одного и того же значения атрибута для нескольких элементов

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

Можно установить значения нескольких атрибутов одним вызовом метода attr(), передав ему в качестве аргумента объект. Свойства такого объекта интерпретируются как имена атрибутов, а значения свойств — как значения атрибута. Этот объект принято называть объектом отображения (map object). Соответствующий пример приведен ниже:

$(function() {
                
    var attrValues = {
        src: 'http://professorweb.ru/downloads/jquery/lily.png',
        style: 'border: thick solid red'
    };
    
    $('img').attr(attrValues);
	
});

В этом сценарии создается объект, определяющий свойства с именами src и style. Далее в документе выбираются элементы img, и методу attr() передается объект отображения. Вид страницы в окне браузера приведен на рисунке:

Установка значений нескольких атрибутов с помощью метода attr()

Динамическая установка значений атрибутов

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

$(function() {
                
    $('img').attr("src", function(index, oldVal) {
        if (oldVal.indexOf("rose") > -1) {
            return "http://professorweb.ru/downloads/jquery/lily.png";
        } else if ($(this).closest('#row2').length > 0) {
            return "http://professorweb.ru/downloads/jquery/carnation.png";
        }
    });
	
});

Аргументы, передаваемые указанной функции, — это индекс обрабатываемого элемента в наборе и прежнее значение атрибута. Переменная this ссылается на текущий обрабатываемый объект HTMLElement. Если вы хотите изменить атрибут, то функция должна вернуть строку, содержащую новое значение. Если же результат не возвращается, то используется прежнее значение атрибута. В данном примере функция используется для избирательного изменения изображений, отображаемых элементами img.

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

Атрибуты можно удалять (отменять установку) с помощью метода removeAttr(), как показано в примере ниже:

$(function() {
                
    $('img').attr("style", "border: thick solid red");
    $('img:odd').removeAttr("style");
	
});

В этом примере атрибут style сначала устанавливается с помощью метода attr(), а затем удаляется из нечетных элементов img с помощью метода removeAttr(). Вид страницы в окне браузера приведен на рисунке:

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

Работа со свойствами

Каждому варианту метода attr() соответствует аналогичный вариант вызова метода prop(). Различие между обоими методами состоит в том, что методы prop() имеют дело со свойствами, определяемыми объектами HTMLElement, а не со значениями атрибутов. Часто атрибуты и соответствующие свойства имеют одинаковые имена, но это не всегда так. В качестве простого примера можно привести атрибут class, представленный в объекте HTMLElement свойством className.

Пример использования метода prop() для получения значения этого свойства приведен ниже:

$(function() {
                
    $('*[class]').each(function(index, elem) {
        console.log("Элемент:" + elem.tagName + " " + $(elem).prop("className"));        
    });
	
});

В этом примере сначала выбираются в виде набора, а затем последовательно перебираются с помощью метода each() все элементы, у которых имеется атрибут class. Для каждого элемента на консоль выводится его тип и значение свойства className.

Пройди тесты