jQuery - Атрибуты HTML элементов

Статья, в которой рассмотрим, какие в jQuery имеются методы для работы с атрибутами HTML элементов.


Работа с атрибутами элементов в jQuery осуществляется с помощью метода attr. Данный метод позволяет:

  • узнать значение указанного атрибута;
  • добавить новый атрибут к элементу или удалить существующий;
  • изменить значение определённого атрибута у элемента.

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

Работа с атрибутами в jQuery

Разберём, как работать с данными методами более подробно.

jQuery - Получить значение атрибута

Получить содержимое необходимого атрибута элемента в jQuery осуществляется следующим образом:

.attr('имя_атрибута')

Например, получим значение атрибута href ссылки, имеющей идентификатор search1:

<a id="search1" href="https://yandex.ru">Яндекс</a>
...
<script>
// найдём элемент, имеющий id=search1
var element = $('#search1');
// получим значение атрибута href найденного элемента
var href = element.attr('href');
// выведем значение переменной href в консоль
console.log(href);

// Результат:
//  https://yandex.ru
</script>

Если вы указали метод attr для набора элементов, то в этом случае он вернёт значение указанного атрибута только для первого элемента этого набора.

Например, получим значение атрибута id у элементов div:

<div id="s-1">Секция 1</div>
<div id="s-2"> Секция 2</div>
<div id="s-3">Секция 3</div>
...
<script>
var attr = $('div').attr('id');
console.log(attr);

// Результат:
//  s-1
</script>

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

$('div').each(function(){
  console.log($(this).attr('id'));
});

// Результат:
//  s-1
//  s-2
//  s-3

Метод attr возвращает undefined, когда вы попытаетесь получить значение атрибута, который не был установлен элементу.

<h1>Название страницы</h1>
...
<script>
var id = $('h1').attr('id');
console.log(id);

// Результат:
//  undefined
</script>

Данный приём можно использовать для проверки наличия определённого атрибута у элемента.

Например, проверить существует ли атрибут title у элемента с id="image-logo":

<img src="image.png" id="image-logo" alt="...">
...
<script>
if (typeof $('#image-logo').attr('title') === 'undefined') {
 // элемент не имеет атрибут title
  console.log('Элемент не имеет атрибут title');
} else {
  // выведем в консоль сообщение о том, что у элемента есть атрибут title
  console.log('Элемент имеет атрибут title');
}

// Результат:
//  Элемент не имеет атрибут title
</script>

jQuery - Изменить атрибут

Изменение значения атрибута осуществляется с помощью следующего синтаксиса:

.attr('имя_атрибута', новое_значение);

Например, поменяем атрибут src элемента img на новое значение:

<img id="logo" src="logo.png">
...
<script>
$('#logo').attr('src', 'new_logo.png');

// Результат:
//  у элемента img c id="logo" атрибут src="new_logo.png"
</script>

jQuery - Добавить атрибут

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

// установка 1 атрибута
.attr('имя_атрибута', значение);

// установка нескольких (2) атрибутов
$('имя_атрибута').attr({
  'атрибут1': 'значение1',
  'атрибут2': 'значение2'
});

Например, зададим всем ссылкам на странице атрибут target со значением "_blank":

$('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 способами:

  1. Использование метода attr (в качестве значения атрибута задаётся null);
    .attr('имя_атрибута', null)
  2. Посредством метода removeAttr.
    .removeAttr('имя_атрибута')

Например, уберём атрибут rel у всех ссылок на странице:

// 1 Способ
$('a[rel]').attr('rel', null);

// 2 Способ
$('a[rel]').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. Как это сделать расммотрено в статье "Выбор элементов по атрибуту".



   JavaScript и jQuery 0    650 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.