jQuery: prop vs attr ... clarification

Question

Примечание: это не дубликат .prop() vs .attr(); этот вопрос относится к базовой функциональности prop vs attr, в то время как этот вопрос специфичен для их различий как сеттеров.

При попытке сузить то, что должно быть установлено с помощью .prop(), то, что должно быть установлено через .attr() при создании нового элемента, в тестах с jQuery 1.7.2, я нахожу, что prop приблизительно В 2,5 раза быстрее, поэтому кажется предпочтительным.

только список вещей, которые можно установить с помощью Attr, что я мог бы найти дает их для ATTR:

Accesskey, выравнивать, фон, BGCOLOR, класс, contenteditable, ContextMenu, данных XXXX, перетаскивание, высота , скрытый, идентификатор, элемент, itemprop, проверка орфографии, стиль, тема, TabIndex, название, VALIGN, ширина

1. это полный (то есть, все, что не в этом списке - например, мин, макс, шаг, и т. д. - следует использовать опору)?

2. в тестировании, некоторые из них, кажется, работают нормально, когда установлены с помощью опоры. Тестирование вышеприведенного списка, у меня не было ни одного задания следующих с опорой вопросы:

   идентификатор, класс, выравнивать, contenteditable, перетаскивать, скрытый, проверка орфографии, TabIndex, название

3. есть какой-то разум, для этого списка «материал, который нужно установить с attr, который все еще работает, когда установлен с помощью prop», почему он все равно должен быть установлен с attr? Если нет, то 250% более высокую производительность при создании основной <div id="foo" class="bar" draggable="true" title="zipzap"> кажется хорошим для меня ... :)

Answer 1

Я не могу найти полный список в Интернете. Каждый, кто дает какой-либо список, просто копирует часть, указанную в блоге jQuery 1.6. Что касается № 3, Starx sortof обратился к этому в своем комментарии к ответу здесь. http://timmywillison.com/ лучше подходит для обсуждения. В спецификациях MDN и W3C также упоминается, что существуют различные интерфейсы от атрибутов, где они могут быть установлены так, как если бы они были свойствами (https://developer.mozilla.org/en/DOM/element), хотя MDN фактически не перечисляет, какие из них являются.MDN упоминает, что использование интерфейсов свойств в качестве сеттеров более хрупкое, чем использование getAttribute:

«Хотя эти интерфейсы обычно используются большинством элементов HTML и XML, для конкретных объектов, перечисленных в спецификации HTML DOM, существует более специализированный интерфейс для определенных объектов. Обратите внимание, однако, что эти HTML-интерфейсы являются «только для документов [HTML 4.01] и [XHTML 1.0] и не гарантированы для работы с любой будущей версией XHTML». Проект HTML 5 заявляет, что он нацелен на обратную совместимость с этими HTML интерфейсы, но говорит о том, что «некоторые функции, которые ранее были устаревшими, плохо поддерживались, редко использовались или считались ненужными, были удалены». Можно избежать потенциального конфликта, полностью перейдя к методам атрибутов DOM XML, таким как getAttribute() ».

Однако, кажется, теперь можно предположить, что любая страница документа HTML5, отображаемая в Firefox и Chrome, уже находится в среде, где уже были удалены интерфейсы «устаревшие, плохо поддерживаемые» и т. Д.

Таким образом, я протестировал каждый атрибут, а также неатрибутные свойства, упомянутые в блогах jQuery, против каждого типа каждого элемента HTML, используя значения boolean, string и int.

Использование 1.7.2 и 1.8pre, будь вы называете .prop() или Attr(), JQuery будет внутренне всегда на самом деле использовать .prop для:

async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop, 
multiple, open, readonly, required, scoped, selected 

для HTML элементов (не считая окна документа и т.д. здесь), JQuery не будет установлен какой-либо из следующих атрибутов, если вы используете .attr():

accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime, 
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind, 
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate, 
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName 

И, наконец, JQuery будет установлен следующий список атрибутов с обеих .prop() или .attr (). В первом списке выше jQuery всегда использует .prop(), независимо от того, используете ли вы .attr() или .prop(). Для атрибутов в этом списке jQuery использует все, что вы используете. Если вы используете .prop(), jQuery использует .prop() и vica versa. В любом случае результат будет таким же. Таким образом, игнорируя любые потенциальные смысловые соображения, только в том случае, если prop() был ~ 2,5 раза быстрее, чем .attr(), в блоге jQuery 1.6.1 предлагается использовать .attr(), но вместо этого можно использовать .prop() , со значительным увеличением производительности:

accept, action, align, alt, autocomplete, border, challenge, charset, cite, 
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue, 
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang, 
id, keytype, label, lang, low, max, maxlength, media, method, min, name, 
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required, 
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src, 
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value, 
width, wrap 

Answer 2

Пытаться понять это на простых условиях.

.attr() дает атрибут элемента. Этот атрибут, когда он был загружен на страницу.

.prop(), дает свойство элемента,

• это может быть состояние элемента, как и в случае флажков, можно либо проверить или бесконтрольно.
• Или это может быть изменен атрибут элемента, поскольку состояние по умолчанию.

У этого question есть все проблемы, которые вам нужно знать. Как правило, при работе с частью манипуляции с DOM вам требуется свойство, а не атрибуты. answer от T.J. действительно очищает концепцию.