.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

 <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 , чаму? І як гэта паўплывае на маю кадоўку ў будучыні?

2141
03 мая '11 в 22:33 2011-05-03 22:33 зададзены Neal 03 мая '11 у 22:33 2011-05-03 22:33
@ 18 адказаў

Абнаўленне 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 , 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 Boolean уласцівасцю, якое існавала і працавала бездакорна ў кожным галоўным браўзэры з магчымасцю прагляду з 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/ .
1790
04 мая '11 в 2:06 2011-05-04 02:06 адказ дадзены Tim Down 04 мая '11 у 2:06 2011-05-04 02:06

Я думаю, Цім сказаў гэта даволі добра , але хай адступіць:

Элемент DOM - гэта аб'ект, прадмет у памяці. Як і большасць аб'ектаў у ООП, у яго ёсць ўласцівасці. Ён таксама, асобна, мае карту атрыбутаў, вызначаных на элеменце (звычайна гэта адбываецца з разметкі, якую браўзэр чытае для стварэння элемента). Некаторыя з уласцівасцяў элемента атрымліваюць свае пачатковыя значэння з атрыбутаў з аднолькавымі або падобнымі імёнамі ( 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" | |  name: "fooAnchor" | |  id: "fooAnchor" | |  className: "test one" | |  attributes: | |  href: "foo.html" | |  name: "fooAnchor" | |  id: "fooAnchor" | |  class: "test one" | + ------------------------------------------- +

Звярніце ўвагу, што ўласцівасці і атрыбуты розныя.

Цяпер, хоць яны розныя, паколькі ўсё гэта развіваецца, а не распрацоўваецца з нуля, шэраг уласцівасцяў запісваецца назад у атрыбут, з якога яны атрыманы, калі вы іх ўсталявалі. Але не ўсе гэта робяць, і, як вы можаце бачыць з href вышэй, адлюстраванне не заўсёды з'яўляецца прамым "перадаць значэнне", часам выкарыстоўваецца інтэрпрэтацыя.

Калі я кажу пра ўласцівасці, якія з'яўляюцца ўласцівасцямі аб'екта, я не кажу абстрактна. Тут некаторы код ані-jQuery:

border=0
 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:

Гэтыя спецыфікацыі маюць выдатныя індэксы, і я рэкамендую падтрымліваць спасылкі на іх зручнымі; Я выкарыстоўваю іх ўвесь час.

Прыстасаваныя атрыбуты ўключаюць у сябе, напрыклад, любыя атрыбуты data-xyz , якія вы маглі б змяшчаць у элементы для прадастаўлення метададзеных вашаму коду (зараз гэта сапраўдны з HTML5, калі вы прытрымліваецеся прэфікса data- ), (Апошнія версіі jQuery прадастаўляюць вам доступ да элементаў data-xyz з дапамогай функцыі data , але гэтая функцыя не толькі для аксесуараў для атрыбутаў data-xyz [яна робіць гэта і больш і менш гэтага], калі вам сапраўды не патрэбныя яго функцыі, я б выкарыстаў функцыю attr для ўзаемадзеяння з атрыбутам data-xyz .)

Функцыя attr выкарыстала некаторую заблытаную логіку вакол атрымання таго, што, на іх думку, вы хацелі, а не літаральна атрымлівала атрыбут. Ён аб'яднаў канцэпцыі. Перасоўванне ў prop і attr прызначалася для іх деконфигурации. Сцісла ў v1.6.0 jQuery зайшоў занадта далёка ў гэтых адносінах, але функцыянальнасць была хутка дададзеная назад у attr для апрацоўкі распаўсюджаных сітуацый, у якіх людзі выкарыстоўваюць attr , калі тэхнічна яны павінны выкарыстоўваць prop .

639
04 мая '11 в 17:27 2011-05-04 17:27 адказ дадзены TJ Crowder 04 мая '11 у 17:27 2011-05-04 17:27

Гэта змяненне ўжо даўно настаў для jQuery. На працягу многіх гадоў яны былі задаволеныя функцыяй з імем attr() якая ў асноўным здабываць ўласцівасці DOM, а не вынік, які вы чакаеце ад імя. Сегрэгацыя attr() і prop() павінна дапамагчы змякчыць некаторую блытаніну паміж атрыбутамі HTML і ўласцівасцямі DOM. $.fn.prop() захоплівае азначанае ўласцівасць DOM, а $.fn.attr() захоплівае ўказаны атрыбут HTML.

Каб цалкам зразумець, як яны працуюць, вось пашыранае тлумачэнне адрозненняў паміж атрыбутамі HTML і ўласцівасцямі DOM.

атрыбуты HTML

сінтаксіс:

<body onload="foo()">

Прызначэнне: дазваляе разметцы мець зьвязаныя зь ім зьвесткі для падзей, рэндэрынгу і іншых мэтаў.

візуалізацыя: 2019

242
03 мая '11 в 23:05 2011-05-03 23:05 адказ дадзены user1385191 03 мая '11 а 23:05 2011-05-03 23:05

Ўласцівасць знаходзіцца ў DOM; атрыбут знаходзіцца ў HTML, які аналізуецца ў DOM.

дадатковая інфармацыя

Калі вы зменіце атрыбут, гэта змяненне будзе адлюстравана ў DOM (часам з іншым імем).

Прыклад: змяненне атрыбуту class тэга зменіць ўласцівасць className гэтага тэга ў DOM. Калі ў вас няма атрыбуту ў тэгу, у вас усё яшчэ ёсць адпаведнае ўласцівасць DOM з пустым ці значэннем па змаўчанні.

Прыклад. Хоць ваш тэг не мае атрыбуту class , ўласцівасць DOM className існуе з пустым радковыя значэнні.

змяніць

Калі вы зменіце адно, другое будзе зменена кантролерам і наадварот. Гэты кантролер ці не знаходзіцца ў jQuery, але ва ўласным кодзе браўзэра.

237
27 сент. адказ дадзены yunzen 27 сент. 2011-09-27 19:55 '11 у 19:55 2011-09-27 19:55

Гэта проста адрозненне паміж атрыбутамі HTML і аб'ектамі DOM, якія выклікаюць блытаніну. Для тых, хто зручны ў дачыненні уласцівасцяў уласцівасцяў DOM, такіх як this.src this.value this.checked і г.д., .prop - гэта вельмі цёплы прыём у сям'і. Для іншых гэта проста дадатковы блытаніна. Хай гэта ясна.

Самы просты спосаб убачыць розніцу паміж .attr і .prop - гэта наступны прыклад:

 <input blah="hello"> 
  • $('input').attr('blah') : вяртае 'hello' , як чакалася. Тут няма сюрпрызаў.
  • $('input').prop('blah') : вяртае undefined - таму што ён спрабуе зрабіць [HTMLInputElement].blah - і ніякага такога ўласцівасці на гэтым аб'екце DOM не існуе. Ён існуе толькі ў вобласці як атрыбут гэтага элемента, г.зн. [HTMLInputElement].getAttribute('blah')

Цяпер мы зменім некалькі такіх рэчаў:

 $('input').attr('blah', 'apple'); $('input').prop('blah', 'pear'); 
  • $('input').attr('blah') : вяртае 'apple' eh? Чаму б не "груша", паколькі гэта было апошнім для гэтага элемента. Паколькі ўласцівасць было зменена на ўваходным атрыбуце, а не на элемент ўводу DOM - яны ў асноўным амаль незалежна адзін ад аднаго працуюць.
  • $('input').prop('blah') : вяртае 'pear'

Тое, што вам сапраўды трэба быць асцярожным, - гэта проста не змешваць выкарыстанне гэтага для аднаго і таго ж ўласцівасці ва ўсім дадатку па вышэйпаказанай прычыне.

См. Скрыпку, якая дэманструе розніцу: http://jsfiddle.net/garreh/uLQXc/


.attr VS .prop :

Раунд 1: стыль

 <input style="font:arial;"/> 
  • .attr('style') - вяртае убудаваныя стылі для ўзгодненага элемента ie "font:arial;"
  • .prop('style') - вяртае аб'ект аб'явы стылю IE 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')

134
19 мая '11 в 13:18 2011-05-19 13:18 адказ дадзены Gary Green 19 мая '11 у 13:18 2011-05-19 13:18

TL; DR

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

Ўласцівасць - гэта бягучы стан элемента ўводу. Атрыбут - гэта значэнне па змаўчанні.

Ўласцівасць можа ўтрымліваць рэчы розных тыпаў. Атрыбут можа ўтрымліваць толькі радкі

49
16 июля '14 в 12:45 2014-07-16 12:45 адказ дадзены agjmills 16 ліпеня '14 года ў 12:45 2014/07/16 00:45

брудная праверка

Гэтая канцэпцыя служыць прыкладам, дзе розніца назіраемасці: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

паспрабуйце:

  • націсніце кнопку. Абодва сцяжка былі правераны.
  • зніміце абодва сцяжка.
  • націсніце кнопку яшчэ раз. Правяраецца толькі сцяжок prop . BANG!

 <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 , даданне або выдаленне атрыбуту Content disabled="disabled" заўсёды перамыкае ўласцівасць (званае атрыбутам IDL ў HTML5), таму што http://www.w3.org/TR/html5/forms.html #attr -fe-disabled кажа:

Адключаны атрыбут IDL павінен адлюстроўваць атрыбут адключанага кантэнту.

так што вы можаце сысці ад яго, хоць ён выродлівы, так як ён змяняе HTML без неабходнасці.

Для іншых атрыбутаў, такіх як checked="checked" на input type="checkbox" , усё ламаецца, таму што як толькі вы націскаеце на яго, ён становіцца брудным, а затым даданне або выдаленне атрыбуту checked="checked" не адмяняе праверку.

Вось чаму вы павінны выкарыстоўваць у асноўным .prop , паколькі ён напрамую ўплывае на эфектыўнае ўласцівасць, замест таго, каб спадзявацца на складаныя пабочныя эфекты змены HTML.

35
06 июля '14 в 14:43 2014-07-06 14:43 адказ дадзены Ciro Santilli新疆改造中心六四事件法轮功 06 ліпеня '14 ў 14:43 2014/07/06 14:43

Усё ў док :

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

Так што выкарыстоўвайце апору!

32
03 мая '11 в 22:35 2011-05-03 22:35 адказ дадзены Arnaud F. 03 мая '11 у 22:35 2011-05-03 22:35

атрыбуты знаходзяцца ў вашым тэкставым дакуменце / файле 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() ўсё яшчэ можна выкарыстоўваць).

2019

26
12 июня '15 в 8:56 2015-06-12 08:56 адказ дадзены lakesare 12 чэрвеня '15 года ў 8:56 2015/06/12 08:56

.attr() :

  • Атрымаць значэнне атрыбуту для першага элемента ў наборы ўзгодненых элементаў.
  • Дае вам значэнне элемента, аб якой гаварылася ў html на загрузцы старонкі

.prop() :

  • Атрымаць значэнне ўласцівасці для першага элемента ў наборы ўзгодненых элементаў.
  • Дае абноўленыя значэння элементаў, якія змяняюцца з дапамогай javascript / jquery
18
08 дек. адказ дадзены Kgn-web 08 снеж. 2015-12-08 12:14 '15 у 12:14 2015/12/08 00:14

Звычайна вы хочаце выкарыстоўваць ўласцівасці. Выкарыстоўваць атрыбуты толькі для:

  • Атрыманне карыстацкага атрыбуту HTML (паколькі ён не сінхранізаваны з уласцівасцю DOM).
  • Атрыманне атрыбуту HTML, які не сінхранізуецца з уласцівасцю DOM, напрыклад. атрымаць "зыходнае значэнне" стандартнага атрыбуту HTML, напрыклад <input value="abc">.
13
02 февр. адказ дадзены naor 02 февр. 2014-02-02 23:36 '14 у 23:36 2014/02/02 23:36

attributes → HTML

properties → DOM

7
26 дек. адказ дадзены NkS 26 снеж. 2014-12-26 16:28 '14 у 16:28 2014/12/26 16:28

Перш чым jQuery 1.6, метад attr() часам ўлічваў значэння уласцівасцяў пры выманні атрыбутаў, гэта выклікала даволі супярэчлівае паводзіны.

Ўвядзенне метаду prop() забяспечвае спосаб яўнага здабывання значэнняў уласцівасцяў, тады як .attr() здабывае атрыбуты.

дакументы:

jQuery.attr() Атрымаеце значэнне атрыбуту для першага элемента ў наборы ўзгодненых элементаў.

jQuery.prop() Атрымаць значэнне ўласцівасці для першага элемента ў наборы ўзгодненых элементаў.

6
25 окт. адказ дадзены Gothburz 25 каст. 2015-10-25 03:05 '15 у 3:05 2015/10/25 03:05

Асцярожна нагадвайце аб выкарыстанні prop() , напрыклад:

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