Питання .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?

UPDATE

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 як CSSStyleDeclaration, Чому? І як це вплине на моє кодування в майбутньому?


2054
2018-05-03 19:33


походження


Це буде певним інтересом: books.google.ca/...
@Неал, це тому, що ця зміна перевершує jQuery. Різниця між атрибутами HTML та властивостями DOM масивна.
Мені шкода, що jQuery відновив зміни. Вони рухаються у неправильному напрямку.
@Неал Так, і це просто ускладнює проблему далі, а не розділяє два методи.
@BritishDeveloper відповідь складніше, ніж просто вказати, що завжди використовуйте x або y, оскільки це залежить від того, що ви збираєтеся отримати. Ви хочете атрибут, або ви хочете власності? вони два абсолютно різних речей. - Kevin B


Відповіді:


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

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

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

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

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

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

Якщо ви є розробником jQuery, і це все сплутається з властивостями та атрибутами, вам потрібно зробити крок назад і дізнатися про це, оскільки jQuery більше не намагається так сильно захистити вас від цього матеріалу. За авторитетне, але дещо сухе слово на цю тему, є специфікації: DOM4, HTML DOM, Рівень 2 DOM, Рівень 3 DOM. Документація 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/.

1735
2018-05-03 23:06



@Neal: Якщо ви хочете дізнатись, які властивості DOM властивості і як атрибути можуть насіти їх значення, тримайте ці посилання в руці: The Специфікація HTML DOM2, the DOM2 специфікація, і DOM3 Спец. Індекси в кожному конкретному випадку відмінні і пов'язують вас із детальним описом майна, з якого виходить його значення, і т. Д. - T.J. Crowder
@Неал: Що робить це іншим: джерело і характер інформації. Подивіться на Тіма value Наприклад, наприклад. Функція називається attr що витягує власність  value а не атрибут "значення" не має сенсу (і вони можуть бути різними). Йти вперед, attr роблять атрибути і prop роблячи властивості будуть чіткішими, хоча для деяких перехід буде важким. Не візьміть це неправильним способом, немає нічого такого, як відступити назад і читати специфікації, щоб отримати уявлення про те, які властивості. - T.J. Crowder
@Neal: елемент DOM є об'єктом. Властивості є властивостями цього об'єкта, як і будь-який інший об'єкт програмування. Деякі з цих реквізитів отримують вихідні значення з атрибутів розмітки, які також зберігаються у об'єкті DOM в a окремо карта атрибутів. У більшості випадків, написання до prop тільки змінює опору, хоча, на жаль, є деякі реквізити, які записують будь-які зміни до основного attr (value наприклад), але спробуємо в основному ігнорувати це. У 99% випадків ви хочете працювати з реквізитами. Якщо вам потрібно працювати з фактичним атрибутом, ви, ймовірно, це знаєте. - T.J. Crowder
@ Тим: "Зміна value властивість входу не змінює його value атрибут у сучасних браузерах " Я не думав, що це зробив, тому я почав використовувати його як приклад, але коли я почав кодування цього прикладу, він був забитий, якщо він не оновиться в Chrome, Firefox, Opera, IE ... - jsbin.com/ahire4 Виявляється, це тому, що я використовував input[type="button"] для мого експерименту. Це не робить оновити атрибут на a input[type="text"] - jsbin.com/ahire4/2 Розмова про звивистий !! Не тільки елемент, але і тип з цього ... - T.J. Crowder
$('#chk').checked  ніколи працював ... Це не правильний jQuery взагалі ... - Neal


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

Елемент DOM є об'єктом, речі в пам'яті. Як і більшість об'єктів в OOP, він має властивості. Також, окремо, є карта атрибутів, визначених на елементі (зазвичай вони надходять від розмітки, яку браузер читав, щоб створити елемент). Деякі з елементів властивості отримати їх початковий значення від атрибути з однаковими або подібними назвами (value отримує початкове значення за атрибутом "value"; href отримує вихідне значення з атрибута "href", але це не точно таке ж значення; className з атрибуту "class"). Інші властивості отримують свої початкові значення іншими способами: наприклад, parentNode властивість отримує свою цінність залежно від того, що є його батьківським елементом; елемент завжди має 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: "test one" |
| атрибути: |
| 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"

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

The link об'єкт - це справжня річ, і ви можете побачити, що існує реальна різниця між доступом до a власність на це, і доступ до атрибут.

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

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

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

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

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


623
2018-05-04 14:27



Ого. що нове оновлення 1.6.1 справді знівелює це питання трохи .. (але не так багато), але посилання в основному відповідає на нього зараз - Neal
Це не скасувало його для мене, я просто виправив помилку, використовуючи jquery1.7, де я встановлював .attr ('class', 'bla'), і він не працював там, де .prop ('className', 'bla' ) працював - PandaWood
@ PandaWood: .attr('class', 'bla') працює як очікується для мене в 1.7.0, 1.7.1, і 1.7.2 на Chrome 17, Firefox 11, Opera 11, IE6, IE8, IE9 та Safari 5. - T.J. Crowder
Спасибі, у моєму випадку має бути щось конкретне, дозвольте мені перевірити це і повернутися з тестовим прикладом. Але, змінюючи код, як у нас це зараз, просто "prop / className", замість "attr" виправляє масові помилки для нас, які потрапили, коли ми перейшли з jquery1.4 до 1.7 - у всіх браузерах - PandaWood
@ T.J.Crowder re: .data - це буде читати значення за замовчуванням атрибута, якщо він присутній, але якщо ви напишете йому, він буде змінювати прихований власність елемента, а не оновити атрибут. - Alnitak


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

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

Атрибути HTML

Синтаксис:

<body onload="foo()">

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

Візуалізація: HTML AttributesАтрибут класу показаний тут на тілі. Доступно через такий код:

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

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

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

Синтаксис:

document.body.onload = foo;

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

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

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

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

Приклад

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

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

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

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

Мат


235
2018-05-03 20:05



@ Матт це нічого не пояснює prop() в jQuery .... - Neal
$.prop() отримує властивості DOM, $.attr() отримує атрибути HTML Я намагаюся подолати розрив психологічно, щоб ви могли зрозуміти різницю між цими двома.
Хлопчик, я теж плутаюсь. Так $('#test').prop('value') нічого не повертає? Не робить .attr('checked') для прапорця? Але це раніше? Тепер вам доведеться змінити його prop('checked')? Я не розумію необхідності цієї різниці - чому важливо відрізняти атрибути HTML та властивості DOM? Який загальний варіант використання, який зробив цю зміну "довго йде"? Що неправильно з абстрагуванням відмінності між цими двома далеко, оскільки здається, що їх використання-випадки в основному збігаються? - BlueRaja - Danny Pflughoeft
@BlueRaja: тому що існує серйозна основна різниця між двома поняттями, які, якщо ви її очистите під килим, як це було з jQuery, призводить до несподіваних невдач. valueє одним з найбільш очевидних випадків, оскільки value властивість дасть вам поточне значення поля, але це value атрибут дасть вам початкове значення, яке було оголошено в value="..." атрибут, який насправді є defaultValue власність (Хоча ця конкретна справа знову збивається з помилками в IE <9.) - bobince
@BlueRaja: відповідь на це ще складніша. :-) Налаштування attr('value', ...) в jQuery <1.6 встановлюється властивість, тому поточне значення змінюється, а значення за промовчанням - не. В 1.6 він встановлює атрибут, тому теоретично значення за замовчуванням змінюється, а поточне значення не дає. Проте, є (більше) невідповідності браузера над тим, що саме встановлює value атрибут робить. У IE він встановлює поточне значення; в деяких браузерах це лише встановлює поточне значення, якщо поточне значення ще не було встановлено раніше. [плаче] - bobince


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

Подальша подробиця

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

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

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

редагувати

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


233
2017-09-27 16:55



Це означає, що краще оновлювати атрибут, тому що ви гарантуєте, що атрибут і властивість оновлюються і вирівнюються? - Luke
@Luke DOM - це внутрішнє технічне представлення, модель. Атрибути HTML є зовнішнім представленням, представленням. Якщо ви зміните його, інший буде змінено контролером, і навпаки. - HerrSerker
@ Люк Подивіться на це: jsfiddle.net/Pms3W - HerrSerker
@HerrSerker Таким чином, вони обидва зберігаються в синхронізації через контролер? Я припускаю, що це лише в методах attr and pro jQuery? Ось модифікація вашої скрипки, де я вивчаю це ще більше - jsfiddle.net/v8wRy - і до цих пір вони, здається, еквівалентні. - Luke
"Якщо ви зміните той, інший буде змінений контролером, і навпаки. Цей контролер не в 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'): повертає 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/


.attr проти .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')


132
2018-05-19 10:18



@Неал, тому що це дає посилання на структуру функцій jquery краще. "$ ('input'). prop ('blah'): повертає невизначене - оскільки він намагається зробити [HTMLInputElement] .blah - і таке властивість не існує в цьому об'єкті DOM. Вона існує лише у сферах як атрибут тобто елемента [HTMLInputElement] .getAttribute ('blah') " - Uğur Gümüşhan
Здається, відрізняється від документа, api.jquery.com/prop: "Метод. PROP () слід використовувати для встановлення відключення та перевірки замість методу .attr (). Метод .val () слід використовувати для отримання та встановлення значення". - swan
Я не розумію, чому змінюється атрибут зміни властивостей класу або стилю jsfiddle.net/featon/Jbw6m/3 ? - Damian


TL; DR

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

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

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


48
2017-07-16 09:45



якщо можливо, наведемо кілька простих прикладів того, що ви говорите, а також показуєте, коли використовувати prop() and when to go for attr(). чекаю відповіді :) - Mou


Брудна перевірка

Ця концепція є прикладом, коли різниця спостерігається: http://www.w3.org/TR/html5/forms.html#concept-input-checked-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" Завжди перемикає властивість (називається атрибут IDL в HTML5), оскільки http://www.w3.org/TR/html5/forms.html#attr-fe-disabled каже:

Атрибут disabled IDL повинен відображати атрибут disabled content.

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

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

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


34
2017-07-06 11:43



Для повноти також спробуйте ці варіанти: 1) Перш ніж натискати кнопку, перевірте, а потім зніміть прапорець 2) (для цього треба змінити фрагмент). Вкажіть перший ввід a checkedатрибут: checked="checked" - ᴠɪɴᴄᴇɴᴛ


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

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

Так що використовуйте підказку!


32
2018-05-03 19:35



Так що означає, коли я перемикаюсь на 1.6, багато речей розірветься? - Neal
Ні, це просто непослідовна поведінка, якщо вона працює раніше, вона завжди буде працювати з jQuery 1.6, це просто, що захист є більш безпечним;) - Arnaud F.
Я, здається, згадую.$.attr() отримуючи властивості більшу частину часу, я працював з ним, а не "іноді". Збуджена ним плутанина все ще резонансна сьогодні. На жаль, у мене дуже багато проблем з пошуком остаточний читайте на властивостях атрибутів HTML і DOM, тому я можу написати трохи відповідь тут.
@ Арно-ф Не правда Весь код, що перевищує 1.6, який використовує attr ('checked'), щоб перевірити прапорці, тепер буде порушено. - CaptSaltyJack
@ Матт Макдональд: Який "... неприємностей у пошуках" остаточний читати на атрибути HTML у порівнянні з властивостями DOM ... "Ви маєте на увазі? Властивості (відображені та інші) описані в Специфікація HTML DOM2; вам також може знадобитися звернутися до DOM2 і DOM3 специфікації - T.J. Crowder


атрибути знаходяться у вашому 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() як і раніше можна використовувати)

  table with preferred usage


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

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

26
2018-06-12 05:56



щось змінилося, як ці: $('#myImageId').prop('src', 'http://example.com/img.png'), var class = $('.myDivClass').prop('class'), або $('#myTextBox').prop('type', 'button'). І так далі...
@ МістерВольф, вибачте? - lakesare
@ Містер Вулф, вибачте, я стиль не розумію. що "змінилося"? синтаксис завжди був схожим на це. - lakesare
Я думаю, що таблиця у вашому відповіді є непотрібною. Оскільки .prop() добре працює з усіма властивостями. Ви не хочете позначити всі властивості в .prop() колонка, ти?
@ Містер Вулф, я думаю, це необхідно, тому що, як вже було сказано, він "показує де .prop() краще (хоча .attr() як і раніше можна використовувати) - lakesare