cpp

Доступ к свойствам объектов

Для доступа к свойствам объектов предназначены следующие методы:

  • prop() — позволяет получить или установить значение отдельных свойств объекта или элемента. Метод имеет несколько форматов:
prop(<Название свойства>)
prop(<Название свойства>, <Значение>)
prop(<Объект со свойствами>)
prop(<Название свойства>, <Функция обратного вызова>)

Первый формат метода позволяет получить значение указанного свойства для первого элемента коллекции. Если свойство не найдено, то возвращается значение undefined. Получим значение свойства id первого тега <div>:

<div id="div1">Текст</div>
<div id="div2">Текст</div>
console.log( $('div').prop('id') ); // div1

Выведем значение свойства value текстового поля при нажатии кнопки (выводимое значение будет соответствовать текущему значению внутри текстового поля):

<input type="text" id="txt" value="Значение по умолчанию">
<input type="button" id="btn" value="Проверить">
$('#btn').click( function() {
   console.log( 'value = ' + $('#txt').prop('value') );
});

Пример получения значений свойств объекта:

var car = {
   model: 'ВАЗ-2109',
   year: 2007
};
var $car = $(car);
console.log( $car.prop('model') ); // ВАЗ-2109
console.log( $car.prop('year') );  // 2007

Второй формат метода prop() позволяет задать значение указанному свойству для всех элементов коллекции. Изменим год выпуска машины из предыдущего примера:

$car.prop('year', 2009);
console.log( $car.prop('year') );  // 2009

Пример установки флажка:

<input type="checkbox" id="check1">
$('#check1').prop('checked', true);

Переведем флажок в неопределенное состояние:

$('#check1').prop('indeterminate', true);

Сделаем кнопку недоступной:

<input type="button" id="btn" value="Кнопка">
$('#btn').prop('disabled', true);

Третий формат метода prop() позволяет задать значения сразу нескольким свойствам за один вызов метода. Для этого свойства и значения должны быть указаны следующим образом:

{
   Свойство1: 'Значение1',
   Свойство2: 'Значение2',
   ...
   СвойствоN: 'ЗначениеN'
}

Зададим URL-адрес и идентификатор для первой ссылки:

$('a').first().prop({
   href: 'link1.html',
   id: 'link1'
});

Четвертый формат метода prop() позволяет выборочно задать значение указанного свойства, в зависимости от каких-либо условий. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

На каждой итерации в функцию передается указатель this на текущий элемент. Чтобы задать значение свойству, необходимо внутри функции обратного вызова вернуть новое значение. Если в первом параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции. Через второй параметр доступно текущее значение свойства. Добавим идентификаторы для всех ссылок в зависимости от индекса ссылки в документе:

$('a').prop('id', function(i) {
   return 'link' + i;
});
  • removeProp(<Название свойства>) — удаляет указанное свойство у всех элементов коллекции. Обратите внимание: не следует удалять стандартные свойства элементов, лучше присвоить им какое-либо значение, иначе потом их будет не добавить. Можно удалять пользовательские свойства, добавленные ранее с помощью метода prop(), или свойства пользовательских объектов. Пример:
var car = {
   model: 'ВАЗ-2109',
   year: 2007
};
$(car).removeProp('year');
console.log(car);          // Object { model: "ВАЗ-2109" }
  • val() — позволяет получить или установить значение свойства value. Метод имеет несколько форматов:
val()
val(<Значение>)
val(<Массив>)
val(<Функция обратного вызова>)

Первый формат метода val() позволяет получить значение свойства value для первого элемента коллекции. Выведем значение текстового поля после нажатия кнопки:

<input type="text" id="txt">
<input type="button" id="btn" value="Получить значение">
$('#btn').click( function() {
   console.log( 'value = ' + $('#txt').val() );
});

Если элемент позволяет выбрать несколько значений, то метод возвращает массив значений. Если элементы не выбраны, метод вернет пустой массив. Для примера получим все значения выбранных пунктов списка с множественным выбором после нажатия кнопки:

<select id="select1" size="5" multiple>
   <option value="1">Элемент1</option>
   <option value="2">Элемент2</option>
   <option value="3">Элемент3</option>
   <option value="4">Элемент4</option>
   <option value="5">Элемент5</option>
   <option value="6">Элемент6</option>
</select>
<input type="button" id="btn" value="Получить значения">
$('#btn').click( function() {
   var values = $('#select1').val();
   console.log( values.join(', ') );
});

Следует заметить, что метод val() не дает представления, какой из флажков или переключателей установлен, т. к. возвращает значение первого элемента. Чтобы получить значение выбранного переключателя или установленного флажка, необходимо воспользоваться псевдоклассом :checked. Если элемент не найден, то возвращается значение undefined. Пример:

<input type="radio" name="radio1" value="male"> Мужской
<input type="radio" name="radio1" value="female"> Женский
<input type="button" id="btn" value="Получить значение">
$('#btn').click( function() {
   console.log( $('input[name="radio1"]:checked').val() );
});

Второй формат метода val() позволяет задать значение всем элементам коллекции. Выведем текст в первом текстовом поле:

$('input[type="text"]').first().val('Новое значение');

Третий формат метода val() предназначен для установки флажков, выбора переключателя и выделения пунктов списка. В качестве параметра необходимо передать массив значений, которые должны быть установлены. Пример выбора переключателя:

$('input[name="radio1"]').val(['male']);

Если найден переключатель со значением male, то он будет выбран. Пример выделения двух пунктов в списке с множественным выбором:

$('#select1').val(['1', '3']);

Четвертый формат метода val() позволяет выборочно задать значение, в зависимости от каких-либо условий. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <Значение>]]) {
   // ...
}

На каждой итерации в функцию передается указатель this на текущий DOM-элемент. Внутри функции обратного вызова нужно вернуть новое значение. Если в первом параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции. Через второй параметр доступно текущее значение. После нажатия кнопки изменим регистр символов внутри поля:

<input type="text" id="txt">
<input type="button" id="btn" value="Изменить регистр">
$('#btn').click( function() {
   $('#txt').val( function(i, v) {
      return v.toUpperCase();
   });
});

В качестве примера рассмотрим различные варианты получения значений и текста пункта списка с множественным выбором (листинг 1.8).

Листинг 1.8. Получение значений списка с множественным выбором

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Получение значений списка с множественным выбором</title>
</head>
<body>
<div class="container my-3">
   <select id="select1" size="5" class="form-control" multiple>
      <option value="1">Элемент1</option>
      <option value="2">Элемент2</option>
      <option value="3">Элемент3</option>
      <option value="4">Элемент4</option>
      <option value="5">Элемент5</option>
   </select>
   <div id="log" class="my-3"></div>
   <button type="button" class="btn btn-primary" id="btn1">
         Способ 1</button>
   <button type="button" class="btn btn-primary" id="btn2">
         Способ 2</button>
   <button type="button" class="btn btn-primary" id="btn3">
         Способ 3</button>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   // Способ 1
   $('#btn1').click( function() {
      var v = $('#select1').val() || [];
      var count = v.length;
      if (count > 0) {
         var text = '';
         var elem = $('#log').empty();
         for (var i = 0; i < count; i++) {
            text = $('#select1 option[value="' + v[i] + '"]').text();
            elem.append(v[i] + ' =&gt; ' + text + '<br>');
         }
      }
      else {
         $('#log').html('Ничего не выделено');
      }
   });
   // Способ 2
   $('#btn2').click( function() {
      var sels = $('#select1 option:selected');
      var count = sels.length;
      if (count > 0) {
         var elem = $('#log').empty();
         for (var i = 0; i < count; i++) {
            elem.append(sels.eq(i).val() + ' =&gt; ' +
                        sels.eq(i).text() + '<br>');
         }
      }
      else {
         $('#log').html('Ничего не выделено');
      }
   });
   // Способ 3
   $('#btn3').click( function() {
      var elem = $('#log').empty();
      $('#select1 option:selected').each( function() {
         elem.append(this.value + ' =&gt; ' + this.text + '<br>');
      });
      if (elem.text() === '') {
         elem.html('Ничего не выделено');
      }
   });
});
</script>
</body>
</html>

Итак, в этом примере представлено три способа получения значений. После щелчка на первой кнопке запустится соответствующий обработчик. С помощью строки:

var v = $('#select1').val() || [];

мы получаем все значения выделенных пунктов списка. Если ни один пункт не выбран, то присваиваем переменной пустой массив (до версии jQuery 3 метод val() мог вернуть значение null, если нет выбранных пунктов; в текущей версии метод возвращает пустой массив). Далее получаем количество элементов массива и перебираем его с помощью цикла for. На каждой итерации цикла находим элемент, значение которого совпадает со значением выбранного пункта списка, и получаем текст этого пункта. У этого способа есть свой недостаток. Если внутри списка существуют пункты с повторяющимися значениями, то можно получить текст другого пункта. Однако повторяющееся значение — редко встречающееся явление, практически всегда значения пунктов являются уникальными.

Второй способ демонстрирует применение псевдокласса :selected, а также возможность перебора элементов коллекции с помощью цикла for и метода eq(). На каждой итерации мы передаем в метод eq() индекс элемента в коллекции и получаем значение и текст пункта.

Наконец, последний способ позволяет полностью обойтись без циклов. Перебор всех элементов осуществляется с помощью метода each(). На каждой итерации внутри функции обратного вызова доступен указатель this на текущий DOM-элемент. По этой причине мы можем воспользоваться свойствами value и text для получения значения и текста пункта соответственно.

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp