Видя, что в этом коде использование attr
и prop
делают одно и то же, я хотел бы знать , в чем разница между ними? и в каких сценариях рекомендуется использовать тот или иной, не впадая в мнения, но на основе рекомендаций, сделанных по очевидным или документально подтвержденным причинам.
$(function()
{
$('#attrId').click(function(e)
{
console.log($(this).attr('id'));
});
$('#propId').click(function(e)
{
console.log($(this).prop('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="attrId">attr</a>
<hr />
<a href="#" id="propId">prop</a>
Чтобы понять основную разницу между
.attr()
и.prop()
, вы должны объяснить разницу между атрибутом и свойством в HTML, потому что, как следует из названия,.attr()
он будет использоваться для работы с атрибутами при.prop()
работе со свойствами.Когда вы создаете элемент HTML, вы можете присвоить ему атрибуты, например, этот имеет
input
атрибутыid
,name
и :type
value
Но затем браузер при рендеринге HTML создает узел в DOM, который соответствует этому элементу HTML, и, поскольку этот узел является объектом, он будет иметь свойства. И этот объект будет не только содержать атрибуты элемента HTML, но также будет иметь свои собственные свойства, такие как
nodeName
,selectedIndex
,defaultValue
...В предыдущих версиях jQuery
.attr()
атрибуты и свойства возвращались взаимозаменяемо. И именно с версии 1.6 (когда.prop()
было добавлено ) это различие между.attr()
атрибутами for и.prop()
для свойств было разделено и сделано (не без некоторых разногласий, которые заставили отменить некоторые изменения, как объяснил Джон Резиг, создатель jQuery , в его блоге ).Как правило, в большинстве случаев это used
.attr()
, его можно изменить на a,.prop()
и оно все равно будет работать (поскольку атрибуты в конечном итоге преобразуются в свойства), но не наоборот (поскольку есть свойства, у которых нет соответствующего атрибута).На самом деле, чтобы избежать проблем, в некоторых случаях
.attr()
он делает вызов для.prop()
получения значений, которые не найдены как атрибуты, но могут существовать/мутировать как свойства; делая.attr()
его немного медленнее. В этом случае, даже если.attr()
это сработает, концептуально правильно будет использовать.prop()
.Вот пример того, как
.attr()
и.prop()
различаются по значению: две радиокнопки, в которых один отмечен, если вы нажмете кнопку, вы увидите, что пока атрибут «отмечен» (согласно спецификации HTML), свойство преобразовало это значение в логическое значение со значениемtrue
. Теперь проверьте другой переключатель и снова нажмите кнопку: свойство изменилось на,false
но атрибут все еще говорит «отмечено»!Источники и библиография (на английском языке):
.attr()
и.prop()
.attr()
.prop()
Для текущих версий jQuery:
attr
ссылается на значение атрибута из кода HTML, в то время какprop
оно ссылается на текущее значение свойства (которое изначально было установлено на значение атрибута)Практический пример:
Как видно, использование prop активирует и деактивирует флажок, свойство
checked
меняет состояние на,false
а затем на,true
а атрибутchecked
сохраняет свое значение,checked
которое было в DOM в начале.Однако при использовании
attr
set атрибутnull
удаляет и проверяет атрибут и, следовательно, также изменяет состояние (свойствоchecked
) на false (деактивировано). Возвращая исходное значениеchecked
элементу, он восстанавливает свой атрибут, однако это действие не изменяет состояние флажка, поэтому его свойство остается ложным.В общем, используйте всегда
prop
, если вы пытаетесь манипулировать текущим состоянием элемента иattr
только для получения начального состояния элемента (я не рекомендую вам использовать его для манипулирования атрибутом после того, как этот элемент был присоединен к DOM, если элемент является динамическим или никогда, если он статический)