разница между prop() и attr() в jQuery и когда использовать attr() и prop()

Я видел, что в некоторых местах .attr() используется в jQuery. В некоторых местах используется .prop(). Но я искал в SO и Google, я очень запутался. Пожалуйста, скажите мне точную разницу между этими двумя и когда их использовать .

Я видел следующие ссылки jQuery attr vs. prop, есть список реквизитов? jQuery attr vs prop?

Но я не получил ответа. Пожалуйста, помогите мне. Спасибо заранее.

Прежде чем ставить отрицательный голос, объясните причину, и я исправлю в своем следующем посте.


person PSR    schedule 17.04.2013    source источник


Ответы (3)


из документов

Разница между атрибутами и свойствами может быть важна в определенных ситуациях. До jQuery 1.6 метод .attr() иногда принимал во внимание значения свойств при извлечении некоторых атрибутов, что могло привести к непоследовательному поведению. Начиная с jQuery 1.6, метод .prop() предоставляет способ явного получения значений свойств, а .attr() извлекает атрибуты.

пример

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

обновлено после комментария

Вы можете установить атрибут для элемента HTML. Вы определяете его при написании исходного кода, как только браузер проанализирует ваш код, будет создан соответствующий узел DOM, который является объектом, таким образом, имеющим свойства.

Простой пример может быть..

<input type="test" value="test" id="test" />

Здесь type, value, id — это атрибуты. После того, как браузер отобразит их, вы получите другие свойства, такие как align, alt, autofocus, baseURI, checked и так далее.

ссылка, если вы хотите узнать больше об этом

person bipen    schedule 17.04.2013
comment
Во-первых, нет такого типа, как тест. Я думаю, вы имели в виду текст. Текст второго типа ввода не имеет свойства checked. - person Debasis Panda; 06.11.2019
comment
@DebasisPanda: Пожалуйста, не запутайтесь. Это пример. type = test Я хочу просто привести пример HTML-элементов (не только текста) :) - person bipen; 15.01.2020

.attr() изменяет атрибуты этого тега HTML.

.prop() изменяет свойства этого тега HTML в соответствии с деревом DOM.

Как показывает пример в этой ссылке. Поле ввода может иметь атрибут «значение». Это будет равно введенному вами значению по умолчанию. Если пользователь изменяет значение в поле ввода, свойство «значение» изменяется в дереве DOM, но исходный атрибут остается.

Таким образом, если вы хотите установить значение по умолчанию для атрибута тега HTML, используйте функцию .attr(). Если это значение может быть изменено пользователем (например, входы, флажки, радио и т. д.), используйте функцию .prop(), чтобы получить новейшее значение.

Ссылка: HTML : разница между атрибутом и свойством

Пример фрагмента кода

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");

  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>

person CP510    schedule 17.04.2013

JQuery — это изменяющаяся библиотека, и иногда в нее вносятся регулярные улучшения. .attr() используется для получения атрибутов из тегов HTML, и, хотя он отлично работает, .prop() был добавлен позже, чтобы быть более семантичным, и он лучше работает с атрибутами без значения, такими как «checked» и «selected».

Рекомендуется, если вы используете более позднюю версию JQuery, вы должны использовать .prop(), когда это возможно.

person Cyril Gupta    schedule 17.04.2013