jQuery функция .attr()

Раздел: Атрибуты

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

Важно отметить, что метод .attr() получает значение атрибута только для первого элемента в соответствующем наборе.

html:
<div title="Div_1">Здесь располагается содержимое тега Div</div>
<div title="Div_2">Здесь располагается содержимое тега Div</div>
<div title="Div_3">Здесь располагается содержимое тега Div</div>
javascript:
var title = $("div").attr("title");
 // Получим значение первого div
 // title = Div_1

Для получения значения для каждого элемента индивидуально, мы должны опираться на цикл, .each() или .map(). Или обращяться к элементу по его ID

Если мы пытаемся получить значение атрибута, которое не определенно, метод .attr() возвращает undefined.

Атрибуты могу быть произвольными даже свои, что очень удобно при составлении кода.

В HTML5 появился атрибут data-xxx для хранения информации, где ххх-ваша переменная

Пример использования атрибутов:

html:
<li id="user" data-email="calvin@example.com" data-time="21.08.2018" class="main">User</li>

Получить значение атрибута .attr()

javascript:
// Получаем значение 
var email = $("#user").attr("data-email");
var time = $("#user").attr("data-time");
var status = $("#user").attr("class"); 

Установить значение атрибута .attr()

javascript:
// Устанавливаем значение
$("#user").attr("data-email", 'email@example.com');
$("#user").attr("data-time", 'newtime'); 
$("#user").attr("class", 'newclass'); 

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

javascript:
$( "#user" ).attr({
 "data-email" : "email@example.com",
 "data-time": "newtime",
 class : "newclass",
});

Не забываем, что код находится в теле ready()