Работа со свойствами

Материал из JQuery

Перейти к: навигация, поиск
.prop()

Возвращает или изменяет значение свойств выбранных элементов страницы (разница и связь между атрибутами и свойствами). Функция имеет четыре варианта использования:

.prop(propName):string1.6
возвращает значение атрибута propName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого. Метод возвращает значение undefined в случае, если на первый из выбранных элементов не установлено указанное свойство или набор выбранных элементов пуст.
.prop(propName, value):jQuery1.6
во всех выбранных элементах, свойство propName примет значение value.
.prop({propName1:value1, propName2:value2, ...}):jQuery1.6
во всех выбранных элементах изменит значения группы свойств propName1, propName2, ... сделав их равными value1, value2, ... соответственно.
.prop(propName, function(index, value)):jQuery1.6
свойству propName будет присвоено значение, возвращенное пользовательской функцией (если она ничего не вернет, то свойство просто не изменит своего значения). Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее значение свойства propName у элемента.

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

$("input:first").prop("disabled") если первый input-элемент на странице не активен, вернет true. Иначе false.
$("input").prop("disabled", false) вернет активность всем input-элементам.
$("radio:last").prop({"disabled":false, "checked":true) сделает активным последний переключатель на странице и сделает его выбранным.

Замечание 1: важно отметить, что используя метод .prop(name), вы получите значения свойства только для первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

Замечание 2: в IE до 9 версии, использование prop для установки значений отличных от простых типов (число, строка, boolean) приводит к утечке памяти, если это свойство не будет удалено (с помощью .removeProp()) до удаления этого элемента из DOM. Поэтому, для установки собственных данных объектам DOM, лучше использовать .data().

Замечание 3: не используйте .removeProp() как аналог присвоения свойству значения false. Удалив нативное (родное, созданное программой, а не пользователем) свойство у DOM-объекта вы не сможете его потом вернуть.

.prop() удобен для работы с атрибутами, не требующими указания значений (checked и disabled в input-элементах), в большинстве других случаев, для работы с атрибутами лучше использовать .attr().

В действии

Сделаем все флажки неактивными:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
  img{padding:10px;}
  div{color:red; font-size:24px;}
~lt~/style~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  
  ~lt~input type="checkbox" checked /~gt~
  ~lt~input type="checkbox" /~gt~
  ~lt~input type="checkbox" /~gt~
  ~lt~input type="checkbox"  checked /~gt~

~lt~script~gt~
$("input[type='checkbox']").prop({
  disabled: true
});
~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • свойства элементов на странице
  • значение свойства
  • получить значение свойства
  • изменить значение свойства
  • установить значение свойства
  • присвоить значение свойству
  • .prop()
  • prop()