Изменение 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">
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: