Добавление и удаление DOM-свойств на jQuery
В этой статье разберём методы jQuery для чтения, добавления, изменения и удаления DOM-свойств. На практике подробно остановимся на рассмотрении таких свойств как disabled, checked и selected.
Что такое DOM-свойства элементов
Когда браузер получает HTML-код запрашиваемой страницы, он разбирает его и строит в соответствии с ним DOM-дерево. При этом HTML-теги становятся объектами (узлами этого дерева), а атрибуты - их свойствами. При этом значения DOM-свойств может отличаться от соответствующих им атрибутов. Почему так происходит, а также более подробно узнать про DOM-свойства и атрибуты, и чем они отличаются друг от друга, можно в этой статье.
В качестве заключения можно отметить, что в большинстве случаев нужно работать с этими сущностями как с DOM-свойствами, а операции с атрибутами оставлять только для реализации тех моментов в которых это действительно нужно.
Атрибуты disabled, checked, selected и т.п
Значения атрибутов (disabled
, checked
, selected
, hidden
, readonly
и т.п.) отличиаются от соответствующим им DOM-свойств. При этом значение атрибута - это всегда строка, а DOM-свойства - нет. Разные DOM-свойства могут иметь разные типы данных. Например, DOM-свойства disabled
, checked
, selected
и другие, подобные этим, имеют логический тип.
Как в этом случае определяется значение этих DOM-свойств? Этот процесс описан в стандарте. В ооответсвии с ним, значение этих DOM-свойств (disabled
, checked
и т.п.) равно true
, когда такой атрибут присутсвует у тега и при этом не важно какое он имеет значение. В противном случае значения таких DOM-свойств равны false
.
Методы jQuery для управления DOM-свойствами
В jQuery имеется два метода для управления DOM-свойствами элементов.
Первый метод - это prop
.
Метод prop
Метод prop
предназначен для выполнения различных операций над DOM-свойствами элементов.
Первая операция - это чтение значения DOM-свойства.
Синтаксис метода prop
для получения значения DOM-свойства:
.prop( propertyName )
// propertyName - имя DOM-свойства, значение которого нужно получить
Пример, в котором рассмотрим принцип получения значения DOM-свойств с помощью метода prop
:
<p id="introtext" class="intro">...</p>
<script>
// получим элемент
var intro = $('#introtext');
// выведем в консоль значение DOM-свойства id
console.log(intro.prop('id')); // "introtext"
// выведем в консоль значение DOM-свойства className
// при этом jQuery позволяет обращаться к этому DOM-свойству как по имени "class", так и по имени "className"
console.log(intro.prop('class')); // "intro"
console.log(intro.prop('className')); // "intro"
</script>
Но DOM-свойства для элементов создаются не только в соответствии с теми атрибутами, которые есть у каждого из них в HTML. Для каждого элемента в соответствии с его встроенным классом создаётся целый набор стандартных для него DOM-свойств. Например, для элемента input
(его класс HTMLInputElement
) создаётся один набор DOM-свойств, а для элемента a
(его класс HTMLAnchorElement
) создаётся немного другой, но стандартный уже для него набор DOM-свойств.
Пример, в котором изменим значения DOM-свойств элемента:
<input type="email" class="form-email" id="email" aria-describedby="emailHelp" placeholder="Введите email">
<a class="btn btn-warning" id="link" href="#" role="button">Сслыка</a>
<script>
// получим элементы
var email = $('#email');
var link = $('#link');
// выведем в консоль значение DOM-свойства type для элемента #email
console.log(email.prop('type')); // "email"
// выведем в консоль значение DOM-свойства href для элемента #link
console.log(link.prop('href')); // полный URL
// получим значение DOM-свойства checked для элемента #email (атрибут checked у данного элемента отсутствует)
console.log(email.prop('checked')); // false
// получим значение DOM-свойства autocomplete для элемента #email (атрибут autocomplete у данного элемента отсутствует)
console.log(email.prop('autocomplete')); // ""
// получим значение DOM-свойства tagName (имя тега), данное свойство есть у каждого элемента в DOM (в HTML атрибута соответствующего этому свойству нет)
console.log(email.prop('tagName')); // "INPUT"
console.log(link.prop('tagName')); // "A"
// при попытке получить значение DOM-свойства, которого нет у элемента в DOM, будет возвращено undefined (это можно использовать для проверки наличия определённого DOM-свойства у элемента)
console.log(link.prop('checked')); // undefined
</script>
Воторая операция - это изменение значения DOM-свойства.
Синтаксис метода prop
для установления DOM-свойству нового знчаения:
.prop( propertyName, value )
// propertyName - имя DOM-свойства, значение которому нужно установить
// value - значение, которое нужно установить DOM-свойству
Кроме этого варианта jQuery предлагает ещё два:
// Вариант № 2 (предназначен для установки сразу нескольских DOM-свойств элементу)
.prop( properties )
// properties - это объект, состоящий из набора пар свойство-значение:
// {
// 'имя_DOM-свойства': 'значение',
// 'имя_DOM-свойства': 'значение',
// ...
// }
// Вариант № 3 (предназначен для установки DOM-свойства такого значения которое вернёт функция)
.prop( propertyName, function )
// propertyName - имя DOM-свойства, значение которому нужно установить
// function - функция, которая будет определять значение DOM-свойства (это значение будет тем, которая она вернёт в результате своего выполнения).
// синтаксис функции:
// Function( Integer index, Anything oldPropertyValue ) => Anything
// на вход она получает:
// index - индекс элемента в наборе
// oldPropertyValue - текущее (старое) значение DOM-свойства
// внутри функции ключевое слово this указывает на текущий элемент набора
Пример, в котором изменим значения DOM-свойств элементов:
<input type="text" class="form-input" id="input-1" disabled>
<input type="text" class="form-input" id="input-2" disabled>
<script>
// получим элемент #input-1
var input1 = $('#input-1');
// Вариант №1
// изменим значение DOM-свойства type на file
input1.prop('type', 'file');
// изменим значение DOM-свойства disabled на false
input1.prop('disabled', false);
// Вариант №2
input1.prop({
'type': 'file',
'disabled': false
})
</script>
Пример, в котором установим заголовкам h2
и h3
, находящихся в элементе .article
, идентификаторы, если их у данных элементов нет:
<div class="article">
<h2>...</h2>
...
<h2>...</h2>
...
<h3>...</h3>
...
</div>
<script>
var headers = $('.article').find('h2, h3');
headers.prop('id', function (index, oldPropertyValue){
if (!oldPropertyValue) {
return 'header-' + index;
}
});
</script>
Удалить стандартное DOM-свойство у элемента нельзя. Но вы можете установить ему значение по умолчанию.
Пример, в котором установим для некоторого элемента, например button
, значение DOM-свойства равным false
.
<button id="btn" disabled>Кнопка</button>
Сейчас данный элемент в качестве значения DOM-свойства disabled
имеет значение true
, т.к. атрибут disabled
присутствует у тега.
// значение DOM-свойства disabled
console.log($('#btn').prop('disabled')); // true
// значение атрибута disabled
console.log($('#btn').attr('disabled')); // ""
Теперь установим данному DOM-свойству значение false
. Это изменение также повлияет на соответствующий ему атрибут. Он будет убран у элемента.
// установим DOM-свойству disabled значение false
console.log($('#btn').prop('disabled', false));
// получим значение атрибута disabled
console.log($('#btn').attr('disabled')); // undefined
Пример, в котором переведём кнопку submit
в активное состояние (т.е. установим ей свойство disabled
равное false
) когда содержимое элемента input[name="search"]
не будет равно пустой строке:
<form action="search.php">
<input type="text" name="search">
<input type="submit" value="Отправить">
</form>
<script>
// после загрузки страницы
$(function() {
// установим кнопки submit DOM-свойство disabled со значением true (т.е. сделаем её не активной)
$('input[type="submit"]').prop('disabled', true);
// при отпускании клавиши, проверим значение данного поля
$('input[name="search"]').keyup(function() {
// если значение не равно пустой строке
if($(this).val() !== '') {
// то сделаем кнопку активной (т.е. установим свойству disabled значение false)
$('input[type="submit"]').prop('disabled', false);
}
});
});
</script>
Принцип работы с checked
ничем не отличается от disabled
.
Примеры работы с checked
1. Пример, в котором установим флажок checkbox, а затем снимем его у него через 5 секунд:
<!-- Чекбокс -->
<input type="checkbox" name="agree" id="agree">
<script>
// переведем checked во включенное состояние (установим флажок)
$('#agree').prop('checked', true);
setTimeout(function () {
// переведём checked в выключенное состояние (уберём флажок)
$('#agree').prop('checked', false);
}, 5000);
</script>
2. Пример, в котором будем перед отправкой формы проверять состояния checkbox #agree
, и если он не установлен в true
, то выводить некоторое сообщение и отменять отправку формы на сервер.
<form id="register" action="register.php" method="post" autocomplete="off">
...
<input name="eula_accepted" id="eula_accepted" type="checkbox">
<label for="eula_accepted">
Нажимая на кнопку "Зарегистрироваться", я принимаю условия Пользовательского соглашения
</label>
<div id="error-eula" style="display:none">
Для продолжения вы должны принять условия Пользовательского соглашения
</div>
<button type="submit">Зарегистрироваться</button>
</form>
<script>
// при отправке формы на сервер
$('#register').submit(function (e) {
// если ли значение DOM-свойства checked равно false...
if ($(this).find('#eula_accepted').prop('checked') === false) {
// то отобразим сообщение о том, что вы должны принять условия пользовательского соглашения
$('#error-eula').css('display', 'block');
// отменим отправку форму на сервер
e.preventDefault();
} else {
$('#error-eula').css('display', 'none');
}
});
</script>
3. Пример, в котором выполним две операции, связанные с checked
. Первое - это установим после загрузки страницы второму элементу radio
состояние checked
, равное true
. Второе - это создадим обработчик для события change
, который будет выводить в #log
значение выбранного переключателя:
<!-- radio-элементы -->
<label>
<input type="radio" checked="checked" name="web" value="HTML">
HTML
</label>
<label>
<input type="radio" name="web" value="CSS">
CSS
</label>
<label>
<input type="radio" name="web" value="JavaScript">
JavaScript
</label>
<!-- #log -->
<div id="log"></div>
<script>
var web = $('input[name="web"]');
// установим второму элементу в наборе (с индексом 1) значение true для DOM-свойства checked
web.eq(1).prop('checked', true);
// обработчик события при изменении выбранного checkbox
web.change(function () {
// получим значение элемента с состоянием checked
var value = $('[name="web"]:checked').val();
// вывести это значение в #log
$('#log').text(value + ' is checked');
});
</script>
Пример работы с selected
Пример, в котором выполним несколько действий. Первое - это установим состояние selected
второму option
. Второе - это создадим обработчик для события change
, который будет выводить в #log
выбранный пункт.
<select id="list">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>
<div id="log"></div>
<script>
// установим второму option значение DOM-свойству selected равное true
$('#list option:nth-child(2)').prop('selected', true);
// обработчик события change, который будет выводить в #log выбранный пункт
$('#list').change(function () {
$('#log').text($('#list').prop('value') + ' - selected');
})
</script>
Пользовательские DOM-свойства
Элементы в DOM не ограничиваются перечнем только стандартных (встроенных) для каждого из них свойств. К любому элементу в DOM пользователь может добавить свои собственные свойства.
По сути, DOM элементы (узлы) – это обычные объекты JavaScript. Следовательно, к ним, как и к любым другим объектам можно добавлять свои свойства.
Осуществляется это также с помощью метода prop. Данный метод используется, когда нужно добавить, изменить или прочитать пользовательское DOM-свойство.
Рассмотрим добавление собственного DOM-свойства к элементам на следующем примере.
В этом примере добавим к элементам .counter
пользовательское DOM-свойство count
, которое будем использовать для хранения количество нажатий (click-ов):
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>
<script>
var
counters = $('.counter'), // получим все кнопки
defaultButtonText = 'Нажми на меня'; // текст кнопки по умолчанию
// добавим ко всем кнопкам DOM-свойство count со значением 0.
counters.prop('count', 0);
// добавим обработчик события click для каждой кнопки (при нажатии на кнопку будем увеличивать значение его DOM-свойства count на 1)
counters.click(function(){
// сохраним текущее значение DOM свойства count в переменную count
var count = $(this).prop('count');
// увеличим значение переменной count на 1
count++;
// сохранить значение переменной count в пользовательское DOM-свойство count этого элемента
$(this).prop('count',count);
// изменим текст текущей кнопки
$(this).text(defaultButtonText + ': ' + count);
});
</script>
Пользовательские DOM-свойства не отображаются в HTML коде и ни каким образом не сказываются отрисовку этого элемента на странице.
Удаление пользовательского DOM-свойства у элемента осуществляется с помощью метода removeProp
.
Синтаксис метода removeProp:
.removeProp( propertyName )
// propertyName (тип: Строка) - свойство, которое нужно удалить
Данный метод предназначен исключительно для удаления собственных DOM-свойств. Удалить стандартные (встроенные) DOM-свойства у элементов нельзя, вы можете им просто установить значение по умолчанию.
Пример, в котором будем добавлять и удалять у элемента #paragraph
пользовательское DOM-свойство при нажатии соответственно на ту или иную кнопку:
<p id="paragraph"></p>
<button id="add-custom-property">Добавить DOM-свойство myProp к элементу #paragraph</button>
<button id="remove-custom-property">Удалить DOM-свойство myProp у элемента #paragraph</button>
<script>
// при нажатию на кнопку с #add-custom-property
$('#add-сustom-property').click(function(){
// добавим к элементу #paragraph свойство myProp
$('#paragraph').prop('myProp', 'Этот текст является значением DOM-свойства myProp');
// выведим в качестве контента элементв #paragraph значение свойства myProp
$('#myParagraph').text($('#myParagraph').prop('myProp'));
});
// при нажатию на кнопку с #remove-custom-property
$('#remove-custom-property').click(function(){
// удалим у элемента #paragraph свойство myProp
$('#paragraph').removeProp('myProp');
// вывести сообщение о том, что свойство myProp не существует
if ($('body').prop('myProp') === undefined ) {
$('#paragraph').text('У элемента нет DOM-свойства myProp!');
}
});
</script>
Управление состоянием checked, disabled, selected через атрибуты
Изменять состояние checked, disabled, selected более предпочтительно через соответствующее DOM-свойство.
Но, тем не менее можно выполнять это и через атрибуты.
Например, чтобы перевести кнопку в неактивное состояние (disabled), ей нужно просто добавить атрибут disabled
.
<button id="btn">Кнопка</button>
<script>
// добавим атрибут disabled
$('#btn').attr('disabled', '');
</script>
Для выполнения обратного действия, перевода элемента в активное состояние у него нужно удалить этот атрибут:
// удалим атрибут disabled
$('#btn').removeAttr('disabled');
Для управления состоянием checked
, readonly
необходимо выполнять аналогичные действия.
В приведённом выше примере мы добавляли и удаляли атрибут disabled
у элемента. При этом браузер при изменении атрибута изменял и значение соответствующему ему DOM-свойству. Т.е. при добавлении атрибута disabled
устанавливал соответствующему DOM-свойству в данном случае disabled
значение true
, а при удалении этого атрибута – устанавливал false
.
Браузер также при изменении значения DOM-свойства элемента, изменяет и его атрибут. Для DOM-свойств с логическим типом это работает так, с другими по-другому. Например, с id
, class
и style
изменения происходяи один к одному, а например, с value
изменения один к одному не работают.
Статья, которая может быть вам также интересной:
Работа с атрибутами HTML-элементов в jQuery с помощью методов attr
и removeAttr
.
Добрый вечер! изучаю JS, помогите решить задачу
Создать html-страницу с формой для ввода стилизованноготекста. После заполнения формы, вывести текст на экран в соответствии с указанными стилями.
Как сделать, если выбираешь в чек боксе жирный шрифт или выровнить текст то он отображался в сообщении. Я прикрепила скриншоты своего кода.Добрый день! Если правильно понял задание, то так: https://codepen.io/itchief/pen/abaeXRq
Сделайте интерфейс из трех кнопок, на черном фоне страницы. Клик по первой
кнопке пусть делает фон немного краснее, клик по второй – немного зеленее, клик
по третьей – немного синее. Насколько именно синее, краснее и зеленее делать
фон – остается на ваше усмотрение, но можете ориентироваться примерно так:
если изначально фон черный (#000), то после клика по “красной” кнопке он должен
стать (#100) и так далее.
Заранее спасибо
Для решения этой задачи вам нужно как-то передать на сервер индекс выбранного пункта в select.
Например, если вы его передаёте в адресе, то можно его взять оттуда:
Если нет, то передать индекс выбранного пункта в select можно с помощью GET-параметра:
код в php выводит на страницу: сам js скрипт: код в файле обрабатывающий ajax запрос:
Обработку изменения состояний чекбоксов можно организовать с помощью события change. Как это выполнить подробно приведено ниже (в виде примера).
Пример HTML кода (для клиента):
Пример php-кода (для сервера):