.prop () vs .attr ()

Тож jQuery 1.6 має нову функцію prop().

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

чи в цьому випадку вони роблять те саме?

І якщо я дійсно повинен перейти до використання prop(), всі старі attr()виклики зламається , якщо я перейти на 1.6?

ОНОВЛЕННЯ

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(див. також цю загадку: http://jsfiddle.net/maniator/JpUF2/ )

Консоль записує getAttributeяк рядок, так і attrяк рядок, але propяк a CSSStyleDeclaration, чому? І як це впливає на моє кодування в майбутньому?

Оновлення 1 листопада 2012 року

Моя оригінальна відповідь стосується спеціально jQuery 1.6. Моя порада залишається такою ж, але jQuery 1.6.1 дещо змінив речі: перед обличчям передбачуваної кулі зламаних веб-сайтів команда jQuery повернулася attr()до чогось близького (але не зовсім такому, як) його старої поведінки щодо булевих атрибутів . Джон Ресіг також блогував про це . Я бачу труднощі, з якими вони стикалися, але все ще не згоден з його рекомендацією віддати перевагу attr().

Оригінальна відповідь

Якщо ви коли-небудь використовували jQuery безпосередньо, а не DOM безпосередньо, це може бути заплутаною зміною, хоча це, безумовно, поліпшення концептуально. Не дуже добре для базових сайтів, що використовують jQuery, які, як наслідок, будуть зламані.

Я підсумую основні питання:

• Ви зазвичай хочете, prop()а не attr().
• У більшості випадків prop()робить те, що attr()раніше робив. Заміна викликів attr()з prop()в ваш код буде працювати взагалі.
• Властивості, як правило, більш прості, ніж атрибути. Значенням атрибута може бути лише рядок, тоді як властивість може бути будь-якого типу. Наприклад, checkedвластивість булева, styleвластивість - це об'єкт з індивідуальними властивостями для кожного стилю, sizeвластивість - це число.
• Там, де існує і властивість, і атрибут з тим самим іменем, зазвичай оновлення одного оновить інше, але це не стосується певних атрибутів входів, таких як : valueта checkedдля цих атрибутів властивість завжди представляє поточний стан, тоді як атрибут (крім старих версій IE) відповідає значенню / перевіреності вводу за замовчуванням (відображається в defaultValue/ defaultCheckedвластивості).
• Ця зміна видаляє частину шару магії jQuery, що застряг перед атрибутами та властивостями, тобто розробникам jQuery доведеться трохи дізнатися про різницю між властивостями та атрибутами. Це гарна річ.

Якщо ви розробник jQuery і вас заплутав весь цей бізнес щодо властивостей та атрибутів, вам потрібно зробити крок назад і трохи дізнатися про це, оскільки jQuery вже не дуже намагається захистити вас від цього матеріалу. Для авторитетного, але дещо сухого слова з цього приводу є специфікації: DOM4 , HTML DOM , DOM Level 2 , DOM Level 3 . Документація DOM на Mozilla є дійсною для більшості сучасних браузерів і її легше читати, ніж специфікації, тому їхній довідник DOM може бути корисним. Є розділ про властивості елементів .

Як приклад того, як з властивостями простіше працювати, ніж з атрибутами, розглянемо прапорець, який спочатку перевіряється. Ось два можливі фрагменти дійсного HTML для цього:

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

Отже, як дізнатися, чи встановлено прапорець у jQuery? Подивіться на переповнення стека, і ви зазвичай знайдете такі пропозиції:

• if ( $("#cb").attr("checked") === true ) {...}
• if ( $("#cb").attr("checked") == "checked" ) {...}
• if ( $("#cb").is(":checked") ) {...}

Це насправді найпростіша річ у світі, що стосується checkedбулевої власності, яка існує бездоганно у кожному великому браузері сценаріїв з 1995 року:

if (document.getElementById("cb").checked) {...}

Властивість також робить перевірку чи зняти прапорець прапором тривіальним:

document.getElementById("cb").checked = false

У jQuery 1.6 це однозначно стає

$("#cb").prop("checked", false)

Ідея використання checkedатрибута для створення сценаріїв прапорець не є корисною та непотрібною. Властивість - це те, що вам потрібно.

• Не очевидно, який правильний спосіб перевірити або зняти прапорець з використанням checkedатрибута
• Значення атрибута відображає за замовчуванням, а не поточний видимий стан (за винятком деяких старих версій IE, тим самим ускладнюючи все). Атрибут нічого не говорить про те, чи встановлено прапорець на сторінці. Дивіться http://jsfiddle.net/VktA6/49/ .

Я думаю, що Тім сказав це досить добре , але давайте відступимо:

Елемент DOM - це об'єкт, річ у пам'яті. Як і більшість об'єктів в OOP, він має властивості . Окремо він також має карту атрибутів, визначених на елементі (як правило, виходячи з розмітки, яку читав браузер для створення елемента). Деякі властивості елемента отримують свої початкові значення з атрибутів з однаковими або подібними іменами ( valueотримує початкове значення з атрибута "value"; hrefотримує своє початкове значення з атрибута "href", але це не зовсім те саме значення; classNameвід атрибут "class"). Інші властивості отримують свої початкові значення іншими способами: Наприклад, parentNodeвластивість отримує своє значення на основі того, що є його батьківським елементом;style властивість, незалежно від того, має атрибут "style" чи ні.

Розглянемо цей якор на сторінці за адресою http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Деякі безкоштовні мистецтва ASCII (і залишають безліч речей):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− + +
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− + +
| href: "http://example.com/foo.html" |
| ім'я: "fooAnchor" |
| id: "fooAnchor" |
| className: "перевірити один" |
| атрибути: |
| href: "foo.html" |
| ім'я: "fooAnchor" |
| id: "fooAnchor" |
| клас: "тест один" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− + +

Зауважте, що властивості та атрибути відрізняються.

Тепер, хоча вони є різними, оскільки все це розвивалося, а не проектувалося з нуля, ряд властивостей списується до атрибуту, який вони отримали, якщо ви їх встановили. Але це не все, і як видно hrefзверху, картографування не завжди є прямим «передати значення далі», іноді тут береться інтерпретація.

Коли я говорю про властивості, що є властивостями об'єкта, я не кажу абстрактно. Ось код, який не jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(Ці значення приведені у більшості браузерів; є деякі варіанти.)

linkОб'єкт є реальною річчю, і ви можете бачити , що є реальне відмінність між доступом до власності на нього, і доступі до атрибуту .

Як сказав Тім, переважну більшість часу ми хочемо працювати з властивостями. Частково це відбувається тому, що їх значення (навіть їхні назви) мають тенденцію бути більш послідовними у веб-переглядачах. Ми здебільшого хочемо працювати лише з атрибутами, коли немає властивості, пов’язаної з цим (спеціальні атрибути), або коли ми знаємо, що для цього конкретного атрибута атрибут та властивість не є 1: 1 (як це стосується hrefта "href" вище) .

Стандартні властивості викладені в різних специфікаціях DOM:

• DOM2 HTML (значно застарілий; замість нього див. Специфікацію HTML )
• DOM2 Core (застарілий)
• DOM3 Core (застарілий)
• DOM4

Ці характеристики мають відмінні індекси, і я рекомендую тримати посилання на них зручними; Я їх постійно використовую.

Спеціальні атрибути включатимуть, наприклад, будь-які data-xyzатрибути, які ви можете нанести на елементи для надання метаданих у ваш код (тепер, коли це дійсно як у HTML5, якщо ви дотримуєтесь data-префікса). (Останні версії jQuery дають вам доступ до data-xyzелементів за допомогою dataфункції, але ця функція не є просто аксесуаром для data-xyzатрибутів [вона робить і більше, і менше, ніж це]; якщо вам справді не потрібні її функції, я б використовував цю attrфункцію для взаємодії з data-xyzатрибутом.)

attrФункція використовується , щоб мати якусь - то заплутану логіку навколо отримувати те , що вони думали , що ви хотіли, а не в буквальному сенсі стають атрибут. Це сплутало поняття. Перехід до propі attrмав на меті знищити їх. Коротко в v1.6.0 JQuery зайшов занадто далеко в цьому відношенні, але функціональність швидко додає назад в attrобробляти загальні ситуації , коли люди використовують , attrколи технічно вони повинні використовувати prop.

Ця зміна вже давно приходить до jQuery. Протягом багатьох років вони задовольнялися функцією, названою в attr()основному, отриманими властивостями DOM, а не результатом, якого б ви очікували від цього імені. Сегрегація attr()та prop()повинна допомогти полегшити деяку плутанину між атрибутами HTML та властивостями DOM. $.fn.prop()захоплює вказане властивість DOM, а $.fn.attr()захоплює вказаний атрибут HTML.

Щоб повністю зрозуміти, як вони працюють, ось розширене пояснення різниці між атрибутами HTML та властивостями DOM.

Атрибути HTML

Синтаксис:

<body onload="foo()">

Мета: Дозволяє розмітці мати пов'язані з нею дані для подій, візуалізації та інших цілей.

Візуалізація: атрибут класу показаний тут на тілі. Доступ до нього здійснюється за допомогою наступного коду:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Атрибути повертаються в рядковій формі і можуть бути невідповідними від браузера до браузера. Однак вони можуть бути життєво важливими в деяких ситуаціях. Як показано вище, режим IE 8 Quirks (і нижче) очікує назви DOM властивості в get / set / removeAttribute замість імені атрибута. Це одна з багатьох причин, чому важливо знати різницю.

Властивості DOM

Синтаксис:

document.body.onload = foo;

Призначення: надає доступ до властивостей, що належать до вузлів елементів. Ці властивості схожі на атрибути, але доступні лише через JavaScript. Це важлива відмінність, яка допомагає уточнити роль властивостей DOM. Зверніть увагу, що атрибути абсолютно відрізняються від властивостей , оскільки це призначення обробника подій марно і не отримає подію (тіло не має події завантаження, а лише атрибут onload).

Візуалізація:

Тут ви помітите список властивостей на вкладці "DOM" у Firebug. Це властивості DOM. Ви відразу помітите досить багато з них, так як ви раніше ними користувалися, не знаючи про це. Їх значення - це те, що ви отримуватимете через JavaScript.

Документація

• JavaScript: остаточний посібник Девіда Фланагана
• Атрибути HTML, Mozilla Dev Center
• Властивості елемента DOM, Mozilla Dev Center

Приклад

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

У попередніх версіях jQuery це повертає порожню рядок. В 1.6, вона повертає правильне значення, foo.

Не дивлячись на новий код для будь-якої функції, я можу впевнено сказати, що плутанина більше пов'язана з різницею між атрибутами HTML та властивостями DOM, ніж із самим кодом. Сподіваємось, це очистило деякі речі для вас.

-Матт

Власність знаходиться в DOM; атрибут знаходиться в HTML, який розбирається в DOM.

Подальша деталізація

Якщо ви зміните атрибут, зміна відобразиться в DOM (іноді з іншим іменем).

Приклад: Зміна classатрибута тегу змінить classNameвластивість цього тегу в DOM. Якщо у вас немає атрибута тегу, у вас все ще є відповідне властивість DOM з порожнім або значенням за замовчуванням.

Приклад: Хоча ваш тег не має classатрибута, властивість DOM classNameіснує зі значенням порожнього рядка.

редагувати

Якщо ви зміните одну, іншу змінить контролер, і навпаки. Цей контролер знаходиться не в jQuery, а в рідному коді браузера.

Саме розмежування між атрибутами HTML і об'єктами DOM викликає плутанину. Для тих, хто комфортно діє на елементи DOM, рідні властивості, такі this.src this.value this.checkedтощо, .prop- це дуже теплий прийом для родини. Для інших це лише додатковий шар плутанини. Розберемо це.

Найпростіший спосіб побачити різницю між собою .attrта .propнаступний приклад:

<input blah="hello">

1. $('input').attr('blah'): повертається 'hello'як очікувалося. Тут немає сюрпризів.
2. $('input').prop('blah'): return undefined- тому що це намагається зробити [HTMLInputElement].blah- і такої властивості на цьому об'єкті DOM не існує. Він існує лише в області застосування як атрибут цього елемента, тобто[HTMLInputElement].getAttribute('blah')

Тепер ми змінюємо кілька речей на кшталт цього:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

1. $('input').attr('blah'): повертає, 'apple'а? Чому б не "груша", як це було встановлено останнім на цьому елементі. Оскільки властивість було змінено на вхідному атрибуті, а не на самому вхідному елементі DOM - вони в основному майже працюють незалежно один від одного.
2. $('input').prop('blah'): повертає 'pear'

Те, що вам дійсно потрібно бути обережним, - це лише не змішувати використання цих даних для однієї і тієї ж власності у вашій заявці з вищезазначеної причини.

Дивіться скрипку, яка демонструє різницю: http://jsfiddle.net/garreh/uLQXc/

.attrvs .prop:

1 раунд: стиль

<input style="font:arial;"/>

• .attr('style') - повертає вбудовані стилі для відповідного елемента, тобто "font:arial;"
• .prop('style') - повертає об'єкт оголошення стилю, тобто CSSStyleDeclaration

2 раунд: значення

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');

• .attr('value')- повернення 'hello'*
• .prop('value') - повертає 'i changed the value'

* Примітка: jQuery з цієї причини має .val()метод, який внутрішньо еквівалентний.prop('value')

TL; DR

Використання prop()більш attr()в більшості випадків.

Властивість представляє поточний стан вхідного елемента. Атрибут є значенням за замовчуванням.

Властивість може містити речі різного типу. Атрибут може містити лише рядки

Брудна перевіреність

Ця концепція дає приклад, коли різницю можна помітити: http://www.w3.org/TR/html5/forms.html#concept-input-cont-dirty

Спробуй:

• натисніть кнопку. Обидва прапорці встановлені.
• зніміть прапорці обох прапорців.
• натисніть кнопку ще раз. propПеревірено лише прапорець. БАНГ!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Для деяких атрибутів, таких як disabledувімкнення button, додавання або видалення контенту вмісту disabled="disabled"завжди перемикає властивість (в HTML5 називається атрибут IDL), оскільки http://www.w3.org/TR/html5/forms.html#attr-fe-disabled говорить:

Відключений атрибут IDL повинен відображати відключений атрибут вмісту.

тож ви можете піти з ним, хоча це некрасиво, оскільки він без необхідності змінює HTML.

Для інших атрибутів , як checked="checked"на input type="checkbox", речі ламаються, тому що як тільки ви натиснете на неї, вона стає брудною, а потім додаючи або видаляючи checked="checked"атрибут вмісту НЕ тумблер checkedness більше .

Ось чому ви повинні використовувати в основному .prop, оскільки це впливає на ефективну властивість безпосередньо, а не покладатися на складні побічні ефекти зміни HTML.

Все в документі :

Різниця між атрибутами та властивостями може бути важливою у конкретних ситуаціях. Перед jQuery 1.6 метод .attr () іноді враховував значення властивостей під час пошуку деяких атрибутів, що може спричинити непослідовність поведінки. Як і в jQuery 1.6, метод .prop () забезпечує спосіб явного отримання значень властивостей, а .attr () отримує атрибути.

Тому використовуйте опору!

атрибути знаходяться у вашому текстовому документі / файлі HTML (== уявіть, це результат вашої розбирки розмітки html), тоді як
властивості - у дереві HTML DOM (== в основному є фактичним властивістю якогось об'єкта в сенсі JS).

Важливо, що багато з них синхронізуються (якщо ви оновлюєте classвластивість, classатрибут у html також буде оновлений; інакше). Але деякі атрибути можуть бути синхронізовані з несподіваними властивостями - наприклад, атрибут checked відповідає властивості defaultChecked , так що

• вручну встановити прапорець буде змінено .prop('checked')значення, але не зміниться .attr('checked')і .prop('defaultChecked')значення
• налаштування $('#input').prop('defaultChecked', true)також зміниться .attr('checked'), але це не буде видно на елементі.

Правило великого пальця : .prop()метод слід використовувати для булевих атрибутів / властивостей та для властивостей, які не існують у html (наприклад, window.location). Усі інші атрибути (ті, які ви можете побачити в html) можуть і повинні продовжувати маніпулювати .attr() методом. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

А ось таблиця, яка показує, куди .prop()віддається перевага (навіть .attr()не можна використовувати).

Чому іноді ви хочете використовувати .prop () замість .attr (), де останні офіційно подаються?

1. .prop()може повернути будь-який тип - рядок, цілий, булевий; при цьому .attr()завжди повертає рядок.
2. .prop()як кажуть, приблизно в 2,5 рази швидше, ніж .attr().

.attr():

• Отримайте значення атрибута для першого елемента в наборі відповідних елементів.
• Надає вам значення елемента, як було визначено в html при завантаженні сторінки

.prop():

• Отримайте значення властивості першого елемента в наборі відповідних елементів.
• Надає оновлені значення елементів, які змінюються через javascript / jquery

Зазвичай ви хочете використовувати властивості. Використовуйте атрибути лише для:

1. Отримання спеціального атрибута HTML (оскільки він не синхронізований із властивістю DOM).
2. Отримання атрибута HTML, який не синхронізується із властивістю DOM, наприклад, отримати "вихідне значення" стандартного атрибута HTML, наприклад <input value="abc">.

attributes -> HTML

properties -> DOM

До jQuery 1.6 attr()метод іноді враховував значення властивостей під час отримання атрибутів, це спричиняло досить непослідовну поведінку.

Впровадження prop()методу забезпечує спосіб явного отримання значень властивостей, при цьому .attr()отримує атрибути.

Документи:

jQuery.attr() Отримайте значення атрибута для першого елемента в наборі відповідних елементів.

jQuery.prop() Отримайте значення властивості першого елемента в наборі відповідних елементів.

Акуратно нагадуйте про використання prop(), наприклад:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

Функція, наведена вище, використовується для перевірки, чи встановлено прапорець1, чи ні, якщо встановлено: повернути 1; якщо ні: повернути 0. Функція prop (), що використовується тут як функція GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

Функція, наведена вище, використовується для встановлення прапорця1, який потрібно перевіряти, і ЗАВЖДИ повертається 1. Тепер функція prop () використовується як функція SET.

Не плутайте.

P / S: Коли я перевіряю властивість Image src . Якщо src порожній, пропонуйте повернути поточну URL-адресу сторінки (неправильно), а attr повернути порожній рядок (праворуч).

Одна річ , яку .attr()можна зробити .prop()не може: вплинути на CSS селектори

Ось питання, якого я не бачив в інших відповідях.

CSS-селектор [name=value]

• відповість на .attr('name', 'value')
• але не завжди до .prop('name', 'value')

.prop() впливає лише на кілька селекторів атрибутів

• input[name] (спасибі @TimDown )

.attr() впливає на всі селектори атрибутів

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute](це не .data('custom-attribute')вплине на цей селектор)

1) Власність знаходиться у DOM; атрибут знаходиться в HTML, який розбирається в DOM.

2) $ (елем.)

3) $ (elem) .attr ("встановлено") (до 1,6) вірно (булева) Змінено зі станом прапорця

• В основному ми хочемо використовувати для об'єкта DOM, а не спеціальний атрибут на зразок data-img, data-xyz.

• Крім того, деяка різниця при доступі до checkboxзначення, а href також attr()і prop()при зміні речі при виведенні DOM з prop()максимальним посиланням originта Booleanзначенням для прапорця (pre-1.6)

• Ми можемо отримати доступ до елементів DOM лише з propіншими, ніж це даєundefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

Є ще кілька міркувань щодо prop () vs attr ():

• selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked та defaultSelected..etc слід отримати та встановити методом .prop (). Вони не мають відповідних атрибутів і є лише властивостями.

• Для введення типу вставки

     .attr('checked') //returns  checked
     .prop('checked') //returns  true
     .is(':checked') //returns true

• метод підтримки повертає булеве значення для перевіреного, вибраного, відключеного, readOnly..etc, а attr повертає заданий рядок. Таким чином, ви можете безпосередньо використовувати .prop ("зареєстрований"), якщо це стан.

• .attr () викликає .prop () внутрішньо, тому метод .attr () буде дещо повільнішим, ніж доступ до них безпосередньо через .prop ().

Відповідь Гері Хоула дуже актуальна для вирішення проблеми, якщо код написаний таким чином

obj.prop("style","border:1px red solid;")

Оскільки CSSStyleDeclarationоб'єкт повернення функції повернення , в наведеному браузері вище код не працює належним чином (тестується зIE8 with Chrome Frame Plugin в моєму випадку).

Таким чином змінюючи його на наступний код

obj.prop("style").cssText = "border:1px red solid;"

вирішив проблему.