Категории: Атрибуты jQuery > Манипуляция
.prop( имяСвойства )
Возвращает: Строка
Описание: Получает значение свойства для первого элемента в наборе соответствующих элементов.
Метод .prop() получает значение свойства только для первого элемента в соответствующем наборе. Он возвращает undefined для значения свойства, которое не было указано, или соответствующий набор не имеет элементов. Для получения значения для каждого элемента индивидуально, используйте конструктор циклов jQuery, такой как метод .each() или .map().
Разница между атрибутами и свойствами может иметь важное значение в конкретных ситуациях. До jQuery 1.6, метод .attr() иногда принимал во внимание значения свойств при получении некоторых атрибутов, что может привести к противоречивому поведению. Начиная с jQuery 1.6, метод .prop() предоставляет возможность явно получить значения свойств, в то время как .attr() извлекает атрибуты.
Для примера, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, и defaultSelected должны быть полученны и установленны с помощью метода .prop(). До jQuery 1.6, эти свойства можно было получить с помощью метода .attr(), но это было не в рамках attr. Они не имеют соответствующих атрибутов, а имеют только свойства.
Что касается атрибутов логического значения, рассмотрим элемент DOM определяемый разметкой HTML <input type="checkbox" checked="checked" />, и предположим, он находится в переменной JavaScript с именем elem:
elem.checked | true (Логическое значение) Будет меняться с состоянием флажка |
|---|---|
$(elem).prop("checked") | true (Логическое значение) Будет меняться с состоянием флажка |
elem.getAttribute("checked") | "checked" (Строка) Начальное состояние флажка, не меняется |
$(elem).attr("checked")(1.6) | "checked" (Строка) Начальное состояние флажка, не меняется |
$(elem).attr("checked")(1.6.1+) | "checked" (Строка) Будет меняться с состоянием флажка |
$(elem).attr("checked")(pre-1.6) | true (Логическое значение) Будет меняться с состоянием флажка |
В соответствии со спецификацией формы W3C, атрибут checked является атрибутом логического значения, что означает соответствующее свойство является true если атрибут вообще присутствует, даже если, например, атрибут не имеет значения или имеет пустое значение. Предпочтительный кросс-браузерный-совместимый способ, для определения, установлен ли флажок, чтобы проверить на "правдивое" значение свойства элемента, используйте один из следующих:
if ( elem.checked )if ( $(elem).prop("checked") )if ( $(elem).is(":checked") )
Если используется jQuery 1.6, код if ( $(elem).attr("checked") ) получит фактическое содержание атрибута, которое не меняется при установлении или снятии флажка. Он предназначен только для хранения значения по умолчанию или начального значения свойства checked. Для поддержания обратной совместимости, метод .attr() в jQuery 1.6.1+ получит и изменит свойства для Вас так, что никакого кода для логического атрибута не должно быть изменено на .prop(). Тем не менее, предпочтительным способом получения значения checked является один из вариантов, перечисленных выше. Для того, чтобы увидеть, как это работает в последнем jQuery, отметьте/удалите флажок в примере ниже.
Internet Explorer does not yet support the text-shadow property.
Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
Пример
Показывает свойство checked и атрибут флажка во время его изменения.<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 20px 0 0 }
b { color: blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
$("input").change(function() {
var $input = $(this);
$("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>"
+ ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>"
+ ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>";
}).change();
</script>
</body>
</html>.prop( имяСвойства,значение )
Возвращает: jQuery
Описание: Устанавливает одно или несколько свойств для набора совпавших элементов.
.prop( имяСвойства,значение )
Добавлена в версию: 1.6
имяСвойства
Имя свойства для установки.
значение
Значение для установки свойства.
.prop( карта )
Добавлена в версию: 1.6
карта
Карта пар свойство-значение для установки.
.prop( имяСвойства, function(индекс, значениеСтарогоСвойства) )
Добавлена в версию: 1.6
имяСвойства
Имя свойства для установки.
function(индекс, значениеСтарогоСвойства)
Функция, возвращающая значение для установки. Получает позицию индекса элемента в наборе, и старое значение свойства в качестве аргументов. В функции, ключевое слово this относится к текущему элементу.
Метод .prop() является удобным способ установки значения свойства, особенно при установке нескольких свойств, используя значения, возвращенные функцией, или значения параметров на несколько элементов сразу. Он должен использоваться при установке selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, или defaultSelected. Начиная с jQuery 1.6, эти свойства не могут быть установлены с помощью метода .attr(). Они не имеют соответствующих атрибутов, а только свойства.
Свойства обычно влияют на динамическое состояние элементов DOM без изменения сериализованного атрибута HTML. Примеры включают значение свойства элементов ввода, свойство disabled элементов ввода и кнопок, или свойство checked флажка. Метод .prop() должен быть использован для установки disabled и checked вместо метода .attr(). Метод .val() следует использовать для получения и установки значения.
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
Важно: метод .removeProp() не должен быть использован для установки этих свойств в ложные. Как только родное свойство удаляется, оно не может быть добавлено еще раз. Смотрите .removeProp() для более подробной информации.
Вычисление значений свойства
Используя функцию, чтобы установить свойства, вы можете вычислить значение на основе других свойств элемента. Для примера, для переключения всех флажков, основанных на их индивидуальных значениях:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
Примечание: Если ничего не будет возвращено в функцию установки (т.е. function(index, prop){}), или если undefined возвращен, текущее значение не изменится. Это полезно для выборочной установки значений только при определенных критериях.
Дополнительные примечания:
- В Internet Explorer до версии 9, использование
.prop()для установки свойства элемента DOM, отличного от элементарного значения (число, строка, или логическое значение) может вызвать утечку памяти, если свойство не удаляется (используйте.removeProp()) перед тем как элемент DOM удален из документа. Для безопасного установления значения для объектов DOM без утечки памяти, используйте.data().
Пример
Отключает все флажки на странице.<!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<script>
$("input[type='checkbox']").prop({
disabled: true
});
</script>
</body>
</html>Была ли эта информация полезной?
