Статья, в которой рассмотрим, какие в jQuery имеются методы для работы с атрибутами HTML элементов.
Работа с атрибутами элементов в jQuery осуществляется с помощью метода attr . Данный метод позволяет:
Кроме метода attr в jQuery доступен также метод removeAttr . Данный метод в отличие от attr используется только для удаления указанного атрибута у элемента или набора элементов.
Разберём, как работать с данными методами более подробно.
jQuery - Получить значение атрибутаПолучить содержимое необходимого атрибута элемента в jQuery осуществляется следующим образом:
Attr("имя_атрибута")
Например, получим значение атрибута href ссылки, имеющей идентификатор search1:
Яндекс ... // найдём элемент, имеющий id=search1 var element = $("#search1"); // получим значение атрибута href найденного элемента var href = element.attr("href"); // выведем значение переменной href в консоль console.log(href); // Результат: // https://yandex.ru
Если вы указали метод attr для набора элементов, то в этом случае он вернёт значение указанного атрибута только для первого элемента этого набора.
Например, получим значение атрибута id у элементов div:
Секция 1 Секция 2 Секция 3 ... var attr = $("div").attr("id"); console.log(attr); // Результат: // s-1
Для того чтобы получить значение у каждого элемента набора, необходимо использовать метод jQuery each или map .
$("div").each(function(){ console.log($(this).attr("id")); }); // Результат: // s-1 // s-2 // s-3
Метод attr возвращает undefined , когда вы попытаетесь получить значение атрибута, который не был установлен элементу.
Название страницы ... var id = $("h1").attr("id"); console.log(id); // Результат: // undefined
Данный приём можно использовать для проверки наличия определённого атрибута у элемента.
Например, проверить существует ли атрибут title у элемента с id="image-logo" :
... if (typeof $("#image-logo").attr("title") === "undefined") { // элемент не имеет атрибут title console.log("Элемент не имеет атрибут title"); } else { // выведем в консоль сообщение о том, что у элемента есть атрибут title console.log("Элемент имеет атрибут title"); } // Результат: // Элемент не имеет атрибут title
jQuery - Изменить атрибутИзменение значения атрибута осуществляется с помощью следующего синтаксиса:
Attr("имя_атрибута", новое_значение);
Например, поменяем атрибут src элемента img на новое значение:
... $("#logo").attr("src", "new_logo.png"); // Результат: // у элемента img c id="logo" атрибут src="new_logo.png"
jQuery - Добавить атрибутУстановить один или несколько атрибутов элементу позволяет представленный ниже код:
// установка 1 атрибута.attr("имя_атрибута", значение); // установка нескольких (2) атрибутов $("имя_атрибута").attr({ "атрибут1": "значение1", "атрибут2": "значение2" });
$("a").attr("target","_blank");
Кроме этого, при установке элементам атрибутов можно использовать в качестве параметра функцию.
Attr("имя_атрибута", function(index,attr){ // index - число, содержащее порядковый номер (индекс) элемента в наборе // attr - строка, содержащая текущее значение атрибута // this - текущий элемент });
В этом случае атрибут будет иметь значение, которое функция вернула в качестве своего результата.
Например, динамически добавим tabindex для всех элементов формы:
$(function() { $(":input").attr("tabindex", function(index, attr) { return index + 1; }); });
Примечание. Если функция ничего не вернула или возвратила undefined , то текущее значение атрибута не будет изменено (останется прежним). Данную особенность полезно использовать, когда значение атрибута необходимо установить только в зависимости от некоторых условий.
jQuery - Удалить атрибутВ jQuery удаление атрибута можно осуществить 2 способами:
Например, уберём атрибут rel у всех ссылок на странице:
// 1 Способ $("a").attr("rel", null); // 2 Способ $("a").removeAttr("rel");
Работа с checked , selected , disabled и другими подобными атрибутами (свойствами) более корректно осуществлять с помощью методов jQuery prop или removeProp . Эти методы разобраны в статье "jQuery - Атрибуты disabled, checked и selected" .
Выполнение действий над атрибутом class (классом элемента) в jQuery более удобно выполнять с помощью методов addClass , hasClass , removeClass и toggleClass . Детальное описание этих методов представлено в статье "Специальные методы jQuery для работы с атрибутом class" .
В jQuery работа с HTML5 data-атрибутами осуществляется в основном посредством методов attr и removeAttr . Кроме этого чтение и последующее работу с ними, как с элементами data-хранилища jQuery, можно также осуществить с помощью метода data . Более подробно познакомиться с этим методом можно в статье "jQuery – data" .
Работа с атрибутом style в jQuery осуществляется с помощью метода css .
Поиск элементов по атрибуту производится с помощью функции jQuery. Как это сделать расммотрено в статье
При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.
Например, если тег выглядит как , то у объекта будет свойство body.id = "page" .
Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.
Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.
Свои DOM-свойстваРанее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.
Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.
Например, создадим в document.body новое свойство и запишем в него объект:
Document.body.myData = { name: "Петр", familyName: "Петрович" }; alert(document.body.myData.name); // Петр
Можно добавить и новую функцию:
Document.body.sayHi = function() { alert(this.nodeName); } document.body.sayHi(); // BODY, выполнилась с правильным this
Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.
Обратим внимание, пользовательские DOM-свойства:
Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.
Конечно, здесь речь именно об узлах-элементах, не о текстовых узлах или комментариях.
Доступ к атрибутам осуществляется при помощи стандартных методов:
Эти методы работают со значением, которое находится в HTML.
Также все атрибуты элемента можно получить с помощью свойства elem.attributes , которое содержит псевдо-массив объектов типа Attr .
В отличие от свойств, атрибуты:
Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:
Пример ниже устанавливает атрибуты и демонстрирует их особенности.
alert(elem.getAttribute("About")); // (1) "Elephant", атрибут получен elem.setAttribute("Test", 123); // (2) атрибут Test установлен alert(document.body.innerHTML); // (3) в HTML видны все атрибуты! var attrs = elem.attributes; // (4) можно получить коллекцию атрибутов for (var i = 0; i < attrs.length; i++) { alert(attrs[i].name + " = " + attrs[i].value); }
При запуске кода выше обратите внимание:
Когда браузер читает HTML и создаёт DOM-модель, то он создаёт свойства для всех стандартных атрибутов.
Например, свойства тега "A" описаны в спецификации DOM: HTMLAnchorElement .
Например, у него есть свойство "href" . Кроме того, он имеет "id" и другие свойства, общие для всех элементов, которые описаны в спецификации в HTMLElement .
Все стандартные свойства DOM синхронизируются с атрибутами, однако не всегда такая синхронизация происходит 1-в-1, поэтому иногда нам нужно значение именно из HTML, то есть атрибут.
Для примера, посмотрим, что произойдет с атрибутом "href" при изменении свойства:
a.href = "/"; alert("атрибут:" + a.getAttribute("href")); // "/" alert("свойство:" + a.href); // полный URL
Это происходит потому, что атрибут может быть любым, а свойство href , в соответствии со спецификацией W3C , должно быть полной ссылкой.
Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.
Есть и другие подобные атрибуты
Кстати, есть и другие атрибуты, которые не копируются в точности. Например, DOM-свойство input.checked имеет логическое значение true/false , а HTML-атрибут checked – любое строковое, важно лишь его наличие.
Работа с checked через атрибут и свойство:
// работа с checked через атрибут
alert(input.getAttribute("checked")); // пустая строка
input.removeAttribute("checked"); // снять галочку
// работа с checked через свойство
alert(input.checked); // false