jQuery. Метод attr(). Как получить или добавить атрибут к элементу


jQuery позволяет очень легко получать доступ до атрибутов нужного элемента, извлекая его значение или, наоборот, устанавливая и изменяя. Для подобных манипуляций используется метод attr().

Чтобы получить значение нужного элемента используется синтаксис с одним параметром, где в скобках указывается имя атрибута:

1

.attr( attributeName )

Если же нужно изменить значение атрибута, то используется вариант с двумя параметрами в скобках, где первый — это имя атрибута, а второй — его значение:

1

.attr( attributeName, value )

Использование метода attr() имеет два основных преимущества:

  • 1. он может быть использован напрямую к выбранному jQuery-объекту, а также применим в цепочке вызовов для определенного селектора/объекта
  • 2. кроссбраузерная совместимость, что избавляет нас от излишней рутины в работе с разными атрибутами в различных браузерах

Параметр value — это чаще всего строка, но для атрибутов типа value могут быть и числовые значения.

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

Существует разграничение между атрибутами и свойствами объектов, соответственно, для каждой из этих групп должен быть использован свой метод для получения/изменения данных. К примеру, к свойствам selectedIndex, nodeType, tagName, nodeName, ownerDocument, defaultChecked, и defaultSelected лучше всего получать доступ с помощью специального метода prop(). С атрибутами лучше всего работать, используя метод attr().

Однако, не все так просто с булевыми атрибутами, например, «checked». Рассмотрим пример:

1

<input type="checkbox" checked="checked" />

Согласно спецификации W3C, свойство checked, когда оно присутствует, всегда возвращает true, даже если в его значении в кавычках будет пусто или содержится значение false. Метод attr() будет возвращать значение из кавычек, однако, при изменении чекбокса оно может не изменяться для некоторых браузеров. Соответственно, для булевых атрибутов лучше всего использовать метод prop(). Это замечание касается и «динамических» атрибутов — selected и value.

Варианты использования:

1
2
3

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

Примеры использования attr()

Допустим у нас есть элемент-картинка:

1

<img id="test_photo" src="some_img.jpg" alt="some_img">

Теперь мы хотим заменить данное изображение на другое, изменив атрибут src. Сделать это можно таким образом:

1

$( "#test_photo" ).attr( "src", "other_img.jpg" );

Одновременно меняем alt:

1

$( "#test_photo" ).attr( "alt", "other_img" );

Эти две операции можно сделать за одно действие, передав сразу массив атрибутов и их значений:

1
2
3
4

$( "#test_photo" ).attr({
  alt: "other_img",
  src: "other_img.jpg"
});

Если у нас несколько изображений и они имеют одно и то же содержимое атрибута alt с добавлением номера элемента, то мы можем пробежаться по ним в цикле и установить нужное содержимое:

1
2
3

$( "#test_photo" ).attr( "alt", function( i, val ) {
  return "other_img " + val;
});

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

1

var altStr = $( "#test_photo" ).attr( "alt");
Другие посты

Категория: jQuery

Оставить комментарий


Яндекс.Метрика