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

Веб-программирование --- jQuery --- Атрибуты и свойства

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

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

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

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

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

Получение значения атрибута для всех элементов, содержащихся в объекте 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() функцию в качестве аргумента. Соответствующий пример приведен ниже:

$(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.