jQuery метод .attr()

Определение и применение

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

Для получения и изменения таких свойств DOM, как checked, selected, или disabled, используйте метод .prop(). С версии jQuery 1.6 метод .attr() возвращает undefined для таких атрибутов, которые не были установлены (в более ранних версиях в большинстве случаев возвращалась пустая строка).

Изменение атрибута type элемента <input>, или <button>, созданных с использованием метода document.createElement() приведет к ошибке в браузерах Internet Explorer 8 и ниже. Это историческое ограничение не относится к браузерам jQuery 4.0.

jQuery синтаксис:

/* Возвращение значения: */

Синтаксис 1.0:

$(selector).attr( attributeName )

attributeName - String

/* Установка значений: */

Синтаксис 1.0:

$(selector).attr( attributeName, value ) /* установка значения одного атрибута */
$(selector).attr({ attributeName: value, /* установка значений нескольких атрибутов */
			        attributeName: value })

value - String, Number, Boolean или null.

Синтаксис 1.1:

$(selector).attr( attributeName, function( index, currentValue ) ) /* установка значения атрибута с использованием функции */

attributeName - String

currentValue - String

index - Integer.

Добавлен в версии jQuery

Значения параметров

Особенности jQuery 4.0

Для <input checked> вызов .attr("checked") возвращает пустую строку, как getAttribute(); в 3.x возвращалось "checked". Текущее состояние флажка получайте через .prop("checked").

Значение false удаляет любой атрибут, кроме aria-*: для ARIA оно записывается строкой "false". Значение null удаляет атрибут, включая ARIA. Это позволяет убрать title вызовом .attr("title", false).

Пример использования

Метод .attr() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p title="Подсказка 1">Первый абзац</p>
<p title="Подсказка 2">Второй абзац</p>
<p title="Подсказка 3">Третий абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('p').attr('title') // получаем значение атрибута для первого элемента в наборе совпавших элементов
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .attr() мы при нажатии на кнопку получаем значение глобального атрибута title для первого элемента <p> в наборе совпавших элементов.

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

Метод .attr() — пример 2

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('p').attr('title') // получаем значение атрибута для первого элемента в наборе совпавших элементов
        $('p:first').attr('title', 'Подсказка 1') // устанавливаем значение атрибута title для первого элемента
        console.log($('p:first').attr('title')) // выводим в консоль значение атрибута title
        $('p:last').attr({
            title: 'Подсказка 3', // устанавливаем значение атрибутов title и class для последнего элемента
            class: 'last',
        })
        console.log($('p:last').attr('title')) // выводим в консоль значение атрибута title
        console.log($('p:last').attr('class')) // выводим в консоль значение атрибута class
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .attr() мы при нажатии на кнопку:

• Устанавливаем значение глобального атрибута title для первого элемента <p> в документе (селектор :first) и после этого выводим в консоль его значение.
• Устанавливаем значение глобальных атрибутов title и class для последнего элемента <p> в документе (селектор :last) и после этого выводим в консоль значение этих атрибутов. Обратите внимение, что если вы устанавливаете значение глобального атрибута class с использованием метода .attr(), то наименование атрибута обязательно должно находиться в кавычках, на остальные атрибуты это требование не распостраняется.

Рассмотрим следующий пример в котором с использованием метода .attr() и функции установим атрибут для выбранных элементов:

Метод .attr() — пример 3

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p title="Подсказка">Первый абзац</p>
<p title="Подсказка">Второй абзац</p>
<p title="Подсказка">Третий абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        $('p').attr('title', function (index, currentValue) {
            // функция возвращает для элемента новое значение атрибута title
            return currentValue + ' ' + (index + 1) // старое значение атрибута + пробел + индекс элемента плюс один
        })
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .attr() и функции, переданной в качестве параметра метода, при нажатии на кнопку мы возвращаем и устанавливаем для каждого элемента <p> в наборе новое значение глобального атрибута title. При этом новое значение атрибута состоит: старое значения ("Подсказка"), пробел и индекс элемента, увеличенный на один.