Когда предпочтительнее использовать `attr()` вместо `.prop()`?

(Примечание: может показаться заманчивым сказать, что это дубликат .prop(). против .attr(), я не верю, что это так. Этот пост отлично объясняет разницу между .prop() и .attr(), но не указывает окончательно, когда один из них предпочтительнее другого, на что и направлен этот вопрос. делать.)

Несмотря на то, что я прочитал ряд вопросов/ответов на StackOverflow относительно различий между .prop() и .attr(), я все еще вижу много путаницы в этом вопросе.

Я считаю, что было бы полезно иметь исчерпывающую ссылку на StackOverflow, определяющую, когда один метод предпочтительнее другого, чтобы мы могли избавиться от догадок и попыток выяснить, является ли что-то атрибутом или свойством.

Таким образом, я спрашиваю, для каких атрибутов/свойств предпочтительнее использовать .prop() и для каких .attr()?


jquery prop attr
person Derek Henderson    schedule 20.05.2013    source источник
comment
Найдите свой ответ здесь stackoverflow.com/questions/5874652/prop-vs-attr[enter link описание здесь][1]. [1]: stackoverflow.com/questions/5874652/prop-vs-attr   -  person AzAh    schedule 20.05.2013
comment
@AzAh Разве вы не читали заметку, с которой он начал свой вопрос?   -  person ajp15243    schedule 20.05.2013
comment
@PalashMondal, да, я включил ссылку на справку по jQuery в конце своего ответа. Дело в том, чтобы эта ссылка была легко доступна для поиска в StackOverflow.   -  person Derek Henderson    schedule 20.05.2013
comment
Да, я действительно запутался в вопросе, является ли ID атрибутом или свойством??? Наконец-то все сомнения развеялись :)   -  person palaѕн    schedule 20.05.2013
comment
но... как этот другой вопрос НЕ объясняет это? предпочтительно использовать .attr(), если вам нужен атрибут, и .prop, если вам нужно свойство. Этот другой вопрос определяет это довольно хорошо.   -  person Kevin B    schedule 20.05.2013
comment
@KevinB, но я все еще вижу много путаницы, несмотря на этот пост. Для многих из нас не всегда ясно, что является свойством или атрибутом, несмотря на то, что мы прочитали этот пост. Этот вопрос/ответ был вдохновлен продолжительным обсуждением ответа на другой вопрос.   -  person Derek Henderson    schedule 20.05.2013
comment
@ ajp15243 ajp15243 Тот факт, что OP не считает, что это дубликат, не означает, что это правда. Кроме того, api.jquery.com/prop прекрасно отвечает на вопрос.   -  person Blazemonger    schedule 20.05.2013
comment
Даже учитывая список Дерека, есть несколько свойств, для которых я бы не стал использовать .prop или .attr. например, id/src всегда доступен непосредственно в кросс-браузере элемента. $("#myel")[0].id $("#myimg")[0].src. Я бы посчитал, что атрибут вместо свойства очень редок.   -  person Kevin B    schedule 20.05.2013
comment
@Blazemonger AzAh не пытался указать на это, он / она просто связал другой вопрос без каких-либо объяснений. Содержит ли другой вопрос достаточную информацию? Возможно, но я не думаю, что AzAh указал на это достаточно.   -  person ajp15243    schedule 20.05.2013
comment
Мое эмпирическое правило простое: если я могу сделать element.property, как с element.id, я использую prop(), если это фактический атрибут, например, получить атрибут href, как он введен в HTML, я использую attr(), если я пытаюсь получить href вместо этого я использую prop() (и они не всегда одинаковы). Другими словами, prop() для свойств и attr() для атрибутов.   -  person adeneo    schedule 20.05.2013
comment
@Blazemonger, вы явно чувствуете, что этот вопрос дублируется. Однако, хотя этот вопрос объясняет различия между двумя методами, он не дает четкого списка того, когда какой использовать, что продолжает оставаться источником путаницы.   -  person Derek Henderson    schedule 20.05.2013
comment
Могут быть особые случаи, когда вы хотите использовать .attr, даже несмотря на то, что .prop является лучшим выбором в большинстве случаев. Редко, но возможно. Во многих случаях они эквивалентны, что приводит к путанице. Ваш вопрос должен звучать так: какой метод следует использовать в данном конкретном случае?   -  person Blazemonger    schedule 20.05.2013

Ответы (2)


arrow_upward
8
arrow_downward

Применимо до jQuery 1.9

Ниже приведен список некоторых атрибутов и свойств и метод, который обычно следует использовать при их получении или установке. Это предпочтительное использование, но метод .attr() будет работать во всех случаях.

+------------------------------------+------------+-----------+
| Attribute/Property                 |  .attr()   |  .prop()  |
+------------------------------------+------------+-----------+
| accesskey                          |    ✓       |           |
| align                              |    ✓       |           |
| async                              |            |    ✓      |
| autofocus                          |            |    ✓      |
| checked                            |            |    ✓      |
| class                              |    ✓       |           |
| contenteditable                    |    ✓       |           |
| disabled                           |            |    ✓      |
| draggable                          |    ✓       |           |
| href                               |    ✓       |           |
| id                                 |    ✓       |           |
| label                              |    ✓       |           |
| location (i.e., window.location)   |            |    ✓      |
| multiple                           |            |    ✓      |
| readOnly                           |            |    ✓      |
| rel                                |    ✓       |           |
| selected                           |            |    ✓      |
| src                                |    ✓       |           |
| tabindex                           |    ✓       |           |
| title                              |    ✓       |           |
| type                               |    ✓       |           |
| width (if needed over .width())    |    ✓       |           |
+------------------------------------+------------+-----------+

Ни .attr(), ни .prop() не должны использоваться для получения/установки значения. Вместо этого используйте метод .val() (хотя использование .attr(“value”, “somevalue”) будет работать.

Обзор. Метод .prop() следует использовать для логических атрибутов/свойств и для свойств, которых нет в html (таких как window.location). Все остальные атрибуты (те, которые вы можете видеть в html) могут и должны продолжать манипулироваться с помощью метода .attr().

Справочник

person Derek Henderson    schedule 20.05.2013
comment
но метод .attr() будет работать во всех случаях. Нет. - person undefined; 20.05.2013
comment
@undefined, я цитирую документацию jQuery. - person Derek Henderson; 20.05.2013
comment
Да, это верно только в jQuery 1.6. - person undefined; 20.05.2013
comment
jQuery 1.6.1 сделал .attr обратно совместимым (этого не было в 1.6), а 1.9 возвращается к настройке, аналогичной 1.6, где он снова менее обратно совместим, из-за чего .attr не работает должным образом с некоторыми логическими свойствами. - person Kevin B; 20.05.2013
comment
async? Зачем вам когда-либо хотеть изменить атрибут <script async="...">? Вы можете загрузить скрипт только один раз. И мне действительно непонятно, как вы будете использовать .prop или .attr в сочетании с window.location. - person Blazemonger; 20.05.2013
comment
никогда не пробовал, так как это кажется просто неправильным, но я полагаю, что $(window).prop('location') должно работать. Во всяком случае, в этом ответе, кажется, много странных примеров, и я бы использовал prop() для src, title, type, id и некоторых других? - person adeneo; 20.05.2013
comment
Ссылка, на которую вы ссылаетесь, не полностью применима к последней версии jQuery. .attr("checked") и .removeAttr("checked") не будут работать должным образом в последней версии. Сначала может показаться, что он работает, но использование его более одного или двух раз приведет к тому, что он больше не будет работать. - person Kevin B; 20.05.2013
comment
@adeneo $(window).prop('location') возвращает тот же объект, что и window.location, а не строку. Хотя это работает, я бы никогда не посчитал это подходящим применением метода. - person Blazemonger; 20.05.2013
comment
@KevinB, я буду искать больше ссылок, чтобы дать лучший ответ. Любая помощь приветствуется. (И я думаю, что это поддерживает мое утверждение о том, что в этом достаточно неопределенности, поэтому было бы полезно иметь четко сформулированный ответ где-нибудь, чтобы его было легко найти.) - person Derek Henderson; 20.05.2013

arrow_upward
0
arrow_downward

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

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

Что касается логических атрибутов, рассмотрим элемент DOM, определенный разметкой HTML, и предположим, что он находится в переменной JavaScript с именем elem:

elem.checked true (логическое значение) Изменяется в зависимости от состояния флажка $(elem).prop("checked") true (логическое значение) Изменяется в зависимости от состояния флажка

elem.getAttribute("checked") "checked" (String) Исходное состояние флажка; не изменяет $(elem).attr("checked") (1.6) "checked" (String) Исходное состояние флажка; не меняется

$(elem).attr("checked") (1.6.1+) "checked" (строка) Изменяется в зависимости от состояния флажка $(elem).attr("checked") (до версии 1.6) true (логическое значение) Изменяется с помощью состояние флажка

ИСТОЧНИК

person rahul maindargi    schedule 20.05.2013