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()