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