Добавление и удаление 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
.
Сделайте интерфейс из трех кнопок, на черном фоне страницы. Клик по первой
кнопке пусть делает фон немного краснее, клик по второй – немного зеленее, клик
по третьей – немного синее. Насколько именно синее, краснее и зеленее делать
фон – остается на ваше усмотрение, но можете ориентироваться примерно так:
если изначально фон черный (#000), то после клика по “красной” кнопке он должен
стать (#100) и так далее.
Заранее спасибо
Для решения этой задачи вам нужно как-то передать на сервер индекс выбранного пункта в select.
Например, если вы его передаёте в адресе, то можно его взять оттуда:
Если нет, то передать индекс выбранного пункта в select можно с помощью GET-параметра:
код в php выводит на страницу: сам js скрипт: код в файле обрабатывающий ajax запрос:
Обработку изменения состояний чекбоксов можно организовать с помощью события change. Как это выполнить подробно приведено ниже (в виде примера).
Пример HTML кода (для клиента):
Пример php-кода (для сервера):