jQuery метод .prop()

Определение и применение

jQuery метод .prop() задает, или возвращает значения свойств выбранных элементов.

Обращаю Ваше внимание, что метод .prop() возвращает значение свойства только для первого элемента в наборе. Метод возвращает undefined, если значение свойства не было установлено, или если набор не содержит каких-либо элементов.

Разница между атрибутами и свойствами может иметь важное значение в конкретных ситуациях. Начиная с версии jQuery 1.6 метод .attr() предназначен только для работы с атрибутами элементов, а метод .prop() обеспечивает возможность работы со значениями свойств. Если значение элемента может быть изменено пользователем, например радио-кнопки, флажки, прочие изменяемые поля ввода, то необходимо использовать метод .prop(), чтобы получить актуальное значение (свойства checked, selected, disabled и так далее). Пример сравнения работы метода .attr() и .prop() представлен ниже.

jQuery синтаксис:

Синтаксис 1.6:
// получение значения
$( selector ).prop( propertyName ) 

// установка значения/значений
$( selector ).prop( propertyName, value )
$( selector ).prop( {properties} )
$( selector ).prop( propertyName, function ) 

propertyName - String
properties - PlainObject
value - Anything
function - Function( Integer index, Anything oldPropertyValue ) => Anything

Добавлен в версии jQuery

1.6

Значения параметров

Параметр	Описание
propertyName	Имя свойства, которое необходимо получить (строковое значение).
properties	Объект, содержащий пары `свойство: значение`, которые будут установлены.
value	Значение, заданное для свойства.
function(index, oldPropertyValue)	Функция, возвращающая значение, которое будет установлено для свойства. В качестве первого аргумента принимает индекс элемента в наборе, а в качестве второго старое значение свойства. Внутри функции ключевое слово this ссылается на текущий элемент в наборе.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Сравнение методов .attr() и prop() при получении значения</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "input" ).change(function(){ // вызываем событие при изменении элемента
	    $( "div" ).html( // добавляем в элемент <div> содержимое
	      '<p>.attr( "checked" ) - <b>' + $( this ).attr( "checked" ) + "</b></p>" + // вызываем метод attr() на элементе <input>
	      '<p>.prop( "checked" ) - <b>' + $( this ).prop( "checked" ) + "</b></p>" // вызываем метод prop() на элементе <input>
	    );
	  }).change(); // вызываем событие change после загрузки документа
	});
		</script>
	</head>
	<body>
		<label><input type = "checkbox" checked = "checked"> Почувствуй разницу</label>
		<div></div>
	</body>
</html>

В этом примере при загрузке документа и при нажатии на чекбокс (элемент <input> с типом checkbox) мы с использованием jQuery методов .prop() и .attr() получаем значение свойства и атрибута элемента, после этого с помощью метода .html() вставляем результат в элемент <div>. Как вы можете заметить использование в данном случае метода .prop() будет предпочтительнее, так как метод .attr() не дает возможности отследить выделен элемент, или нет.

Результат нашего примера:

Пример сравнения методов .attr() и prop() при получении значения

Рассмотрим следующий пример в котором с использованием метода .prop() мы установим значение свойств элемента с помощью функции и с помощью передачи объект, содержащий пары свойство: значение, которые будут установлены:

<!DOCTYPE html>
<html>
	<head>
		<title>Установка значения методом prop()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".checkbox" ).click(function(){ // при клике на элемент с классом .checkbox вызываем функцию
	    $( "input[type='checkbox']" ).prop( "checked", function( i, val ) { // устанавливаем значениу свойств элементам <input> с типом checkbox
	      return !val; // инвертируем значение свойства
	    });
	  });	 
	  $( ".radio" ).click(function(){ // при клике на элемент с классом .radio вызываем функцию
	    $( "input[type='radio']" ).prop({ // устанавливаем значение свойств элементам <input> с типом radio
	      checked: false, // снимаем галочки
	      disabled: true  // блокируем элементы
	    }); 
	  });
	});
		</script>
	</head>
	<body>
		<button class = "checkbox">Checkbox</button>
		<button class = "radio"> Radio</button><br><br>	
		<input type = "checkbox" checked = "checked">
		<input type = "checkbox">
		<input type = "checkbox" checked = "checked">
		<input type = "checkbox">
		<input type = "radio" checked = "checked">
		<input type = "radio">
		<input type = "radio" checked = "checked">
		<input type = "radio">
	</body>
</html>

В этом примере с использованием jQuery метода .prop() мы при нажатии на кнопку (HTML элемент <button>) с классом .checkbox вызываем функцию, переданную в качестве параметра метода, которая в зависимоти от значения элемента возвращает значение, обратное тому, которое установлено сейчас (если true, то будет false, если false, то true).

При нажатии на кнопку с классом .radio мы передаем в качестве параметра метода .prop() объект, содержащий пары свойство: значение, которые будут установлены элементам (снимаем галочки и блокируем элементы).

Результат нашего примера:

Пример установки значения методом prop()

jQuery DOM методы