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

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

Функция имеет четыре варианта использования:

Возвращает значение атрибута propertyName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.

  • propertyName — имя атрибута.

Устанавливает свойству propertyName значение value, у всех выбранных элементов.

  • propertyName — имя свойства;
  • value — значение, присваиваемое свойству.

Присваивает свойству propertyName значение, возвращенное функцией function() для всех элементов набора jQuery

  • propertyName — имя свойства;
  • function (index, oldPropertyValue) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе, а возвращаемое ею значение становится значением атрибута
    • index — позиция элемента в наборе;
    • oldPropertyValue — текущее значение свойства propertyName у элемента.

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

.attr() или .prop()

В определенных ситуациях разница между .attr() и .prop() существенна. До jQuery 1.6 .attr() содержал множество багов и был непрост в поддержке. Начиная с jQuery 1.6 метод .prop() предназначен для работы со свойствами DOM-объектов, в то время как .attr() — для работы с атрибутами.

Например, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, и defaultSelected должны быть получены или изменятся функцией .prop()

Начиная с jQuery 1.6, метод .attr() возвращает undefined для тех атрибутов, значение которых не было задано. Для получения и выставления таких опций как checked, selected, или disabled используйте метод .prop()

Допустим у нас есть элемент <input type="checkbox" checked />, а в переменной elem хранится его DOM-объект. В этом случае разница при работе с атрибутами и свойствами существенна, т.к. идет речь об атрибутах не требующих указания значений (checked и disabled в input-элементах). Сравним результаты:

  • elem.checked — возвращает true
  • $( elem ).prop( "checked" ) — возвращает true
  • elem.getAttribute( "checked" ) — возвращает пустую строку
  • $( elem ).attr( "checked" ) — начиная с jQuery 1.6 возвращает пустую строку и true для более ранних версий

Кросс-браузерный способ определить, установлен ли флажок:

Установка или изменение значения элементам

Метод .prop() это один из способов выставления значение элементам. Его следует использовать при работе с такими настройками как: selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, или defaultSelected. Начиная с jQuery 1.6, значение данных настроек не может быть задано с помощью метода .attr().

Динамически формируемые значения

Используя функцию, мы можем динамически задать значение той или иной настройке. К примеру, поменяем все значения чекбоксов на странице:

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *