Изменение HTML атрибутов через jQuery (attr, prop, removeAttr)

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

Чтение и изменение атрибутов (attr, prop)

Приведём пример считывания значения атрибута с помощью метода attr. Для считывания значения необходимо передать название атрибута параметром. К примеру, попробуем получить значение атрибута attr из поля для ввода текста:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   var a = $('#mouse').attr('value'); // получает значение атрибута 'value'
   console.log( a ); // выведет 'Тише, мыши, кот на крыше'
</script>

Чтобы задать значение атрибута, используем тот же самый метод attr, но передадим ему второй параметр, в котором будет содержаться новое значение:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   $('#mouse').attr('value', 'Сыр!');
</script>

После выполнения этого кода у текстового поля с id равным "mouse" будет изменён атрибут value с "Тише, мыши, кот на крыше" на "Сыр!".

Для работы с атрибутом "value" можно использовать специальный метод val. Если не передать ему никакой параметр, то он вернёт значение атрибута value у элемента. А если передать параметр, то он будет установлен как новое значение. Продемонстрируем это, изменив ранее приведённые примеры. Сначала прочитаем значение:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   var a = $('#mouse').val(); // получает значение атрибута 'value'
   console.log( a ); // выведет 'Тише, мыши, кот на крыше'
</script>

Теперь установим значение:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   $('#mouse').val('Сыр!');
</script>

К сожалению, метод attr не является всемогущим. К примеру, он не может определить отмечена ли галочка "checked" в чекбоксе или является ли поле формы неактивным "disabled". Для этого необходимо использовать метод "prop". Работает он точно так же, как и attr, но при задании второго параметра надо использовать значения "true" или "false" (он их и возвращает, если не задан второй параметр). Продемонстрируем это на примере чекбокса:

<input type="checkbox" id="mouse">
<script>
   var a = $('#mouse').prop('checked'); // вернёт "false", потому что не "checked"
   $('#mouse').prop('checked', true); // меняем состояние чекбокса на "checked"
   var a = $('#mouse').prop('checked'); // вернёт "true", потому что "checked"
</script>

Теперь посмотрим деактивированные "disabled" поля формы (в них нельзя ничего набрать):

<input type="text" id="mouse">
<script>
   var a = $('#mouse').prop('disabled'); // вернёт "false"
   $('#mouse').prop('disabled', true); // меняем состояние на "disabled"
   var a = $('#mouse').prop('disabled'); // вернёт "true"
</script>

Удаление атрибутов (метод removeAttr)

Иногда появляется необходимость в полном удалении атрибута тега. Попробуем взять пример из предыдущего параграфа и полностью удалить атрибут "value". Для этого используем метод removeAttr, который удаляет атрибуты (значение и название) элементов. Этому методу необходимо передать только название атрибута. Код будет выглядеть так:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   $('#mouse').removeAttr('value');
</script>

После выполнения этого JS кода, HTML код текстовое поле будет выглядеть так:

<input type="text" id="mouse">