.prop () vs .attr ()

Taigi jQuery 1.6 turi naują funkciją prop() .

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

arba šiuo atveju jie daro tą patį?

Ir jei man reikia pereiti prie „ prop() , ar visi seni „ attr() skambės, jei persijungsiu į 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> 

(taip pat žr. šį scenarijų: http://jsfiddle.net/maniator/JpUF2/ )

Konsolė registruoja getAttribute kaip eilutę ir attr kaip eilutę, bet kaip CSSStyleDeclaration , kodėl? Ir kaip tai paveiks mano kodavimą ateityje?

2141
03 мая '11 в 22:33 2011-05-03 22:33 „Neal “ gegužės 03 d., 11 val
@ 18 atsakymų

Atnaujinta 2012 m. Lapkričio 1 d

Mano pirmasis atsakymas konkrečiai susijęs su jQuery 1.6. Mano patarimai išlieka tokie patys, tačiau jQuery 1.6.1 šiek tiek pakeitė situaciją: jQuery komanda sugrįžo į kažką artimo (bet ne visai to paties) senojo elgesio su loginiais atributais , Johno Resig taip pat apie tai pranešė tinklaraštyje . Matau sunkumus, su kuriais jie susiduria, tačiau vis dar nesutinka su jo rekomendacija attr() .

Originalus atsakymas

Jei tik kada nors naudojote jQuery, o ne tiesiogiai DOM, tai gali būti painus pokytis, nors jis tikrai pagerėja konceptualiai. Ne taip gerai, kad „JQuery“ svetainių baziljonai pertraukų dėl šio pakeitimo.

Apibendrinsiu pagrindinius klausimus:

  • Paprastai jums reikia prop() ir ne attr() .
  • Daugeliu atvejų „ prop() daro tai, ką attr() anksčiau. Paprastai veikia kodo prop() attr() skambučių keitimas su prop() .
  • Ypatybės paprastai yra lengviau tvarkomos su atributais. Atributo reikšmė gali būti tik eilutė, o nuosavybė gali būti bet kokios rūšies. Pavyzdžiui, checked nuosavybė yra logiška nuosavybė, style ypatybė yra objektas, turintis atskirų savybių kiekvienam stiliui, size yra numeris.
  • Kai yra toks pat pavadinimas ir atributas, dažniausiai atnaujinimas atnaujins kitą, tačiau tai netaikoma kai kuriems įvesties duomenų atributams, pvz., value ir checked : šiems atributams nuosavybė visada atitinka dabartinę būseną, kai atributas (už Išskyrus senesnes IE versijas, ji atitinka numatytojo įvesties vertę / patvirtinimą (atsispindi defaultValue / defaultChecked ).
  • Šis pakeitimas pašalina tam tikrą magijos „jQuery“ sluoksnį, įstrigo prieš atributus ir savybes, o tai reiškia, kad „jQuery“ kūrėjai turės šiek tiek sužinoti apie skirtumą tarp savybių ir atributų. Tai geras dalykas.

Jei esate „jQuery“ kūrėjas ir esate supainioti dėl šio verslo savybių ir atributų, turite žengti žingsnį atgal ir šiek tiek sužinoti apie tai, nes „jQuery“ nebandys tiek daug apsaugoti nuo šios medžiagos. Dėl autoritetingų, bet keletas realių žodžių šiuo klausimu yra specifikacijos: DOM4 , HTML DOM , DOM 2 lygis , DOM 3 lygis . „Mozilla DOM“ dokumentacija galioja daugeliui šiuolaikinių naršyklių ir yra lengviau skaitoma nei specifikacijos, todėl galite rasti jų DOM nuorodos informaciją . Yra elemento elementų skyrius .

Kaip pavyzdį, kaip savybės yra lengviau apdorojamos nei atributai, apsvarstykite pradinį patikrintą žymės >

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

Taigi, kaip žinote, ar žymės >

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

Tiesą sakant, tai yra paprasčiausias dalykas pasaulyje, kuris yra susijęs su checked Būlio nuosavybe, kuri egzistavo ir veikė nepriekaištingai kiekvienoje pagrindinėje naršyklėje, ir nuo 1995 m.

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

Nuosavybė taip pat leidžia patikrinti arba išvalyti vėliavą:

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

JQuery 1.6, tai tikrai tampa

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

Idėja naudoti checked scenarijų atributą yra nenaudinga ir nereikalinga. Turtas yra būtinas.

  • Neaišku, kas yra teisingas būdas patikrinti arba išvalyti checked atributą
  • Atributo reikšmė atspindi numatytąją vertę, o ne dabartinę matomą būseną (išskyrus kai kurias senesnes IE versijas, kurios daro dar sudėtingesnes). Atributas nenurodo, ar žymės >Http://jsfiddle.net/VktA6/49/ .
1790 m
04 мая '11 в 2:06 2011-05-04 02:06 atsakymą pateikė Tim Down , gegužės 4 d., 11 d., 02:06 2011-05-04 02:06

Manau, Tim sakė, kad tai gana gerai , bet leiskite jam grįžti:

DOM elementas yra objektas, elementas atmintyje. Kaip ir dauguma OOP objektų, jis turi savybių. Be to, atskirai jis turi elemento atributų žemėlapį (paprastai jis gaunamas iš žymėjimo, kurį naršyklė skaito, kad sukurtų elementą). Kai kurios elemento savybės savo pradines vertes gauna iš tų pačių ar panašių pavadinimų atributų ( value gaunama iš pradinės vertės iš atributo „reikšmė“; href gauna pradinę vertę iš atributo „href“, tačiau tai nėra lygiai tokia pati reikšmė; klasė "). Kitos savybės gauna savo pradines vertes kitais būdais: pavyzdžiui, parentNode nuosavybė gauna savo vertę pagal jos pagrindinį elementą; elementas visada turi style savybę, ar jis turi style atributą, ar ne.

Apsvarstykite šį inkarą puslapyje http://example.com/testing.html :

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

Kai kurie nemokami ASCII menai (ir daugybė dalykų):

 + + –––––––––––––––––––––––––––––––––––––––– |  HTMLAnchorElement | + + ––––––––––––––––––––––––––––––––––––––– |  href: "http://example.com/foo.html" |  pavadinimas: "fooAnchor" | |  id: "fooAnchor" | |  className: "test one" | |  atributai: | |  href: "foo.html" | |  pavadinimas: "fooAnchor" | |  id: "fooAnchor" | |  klasė: "bandyti vieną" | + + ––––––––––––––––––––––––––––––––––––––––

Atkreipkite dėmesį, kad savybės ir atributai yra skirtingi.

Dabar, nors jie yra skirtingi, nes visa tai vystosi ir nėra sukurta nuo nulio, kai kurios savybės yra parašytos atgal į atributą, iš kurio jie buvo gauti, jei juos nustatysite. Bet ne kiekvienas tai daro, ir, kaip matote iš aukščiau pateikto href , kartografavimas ne visada yra tiesioginis „perteikti prasmę“, kartais naudojamasi vertimu.

Kai kalbu apie savybes, kurios yra objekto savybės, nekalbu abstrakčiai. Štai keletas ne jQuery kodo:

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

(Šios vertės atitinka daugumą naršyklių, yra keletas parinkčių.)

link objektas yra tikras dalykas, ir jūs galite pamatyti, kad yra tikras skirtumas tarp prieigos prie jo ir prieigos prie jo.

Kaip sakė Timas, didžiąją to laiko dalį, mes norime dirbti su savybėmis. Iš dalies taip yra dėl to, kad jų vertybės (net ir jų pavadinimai) paprastai yra labiau suderintos tarp naršyklių. Mes daugiausia norime dirbti tik su atributais, kai nėra su juo susijusios savybės (vartotojo atributai), arba kai žinome, kad šis konkretus atributas ir nuosavybė yra ne 1: 1 (kaip ir su href ir „href“ aukščiau).

Standartinės savybės pateiktos įvairiose DOM specifikacijose:

Šios specifikacijos pasižymi puikiais rodikliais ir rekomenduoju juos patogiai naudoti; Aš juos visą laiką naudoju.

Pasirinktiniai atributai apima, pavyzdžiui, visus data-xyz požymius, kuriuos galite įdėti į elementus, kad pateiktumėte savo kodo metaduomenis (dabar tai galioja su HTML5, jei data- prefikso), (Naujausios jQuery versijos suteikia jums prieigą prie data-xyz naudojant data funkciją, tačiau ši funkcija yra ne tik data-xyz atributų priedams [tai daro ir daugiau ir mažiau nei tai], jei jums tikrai nereikia jo funkcijų, norėčiau naudoti „ attr funkciją sąveikai su data-xyz atributu data-xyz .)

attr funkcija naudojo kai kurias klaidinančias logikas apie tai, ką jie manė, kad norite, o ne pažodžiui gauti atributą. Jis sujungė koncepciją. Perkėlimas į prop ir attr skirtas jų dekonfigūravimui. Trumpai tariant, v1.6.0, jQuery šiuo atžvilgiu buvo pernelyg toli, tačiau funkcionalumas buvo greitai įtrauktas į patrauklumą, kad galėtume tvarkyti įprastas situacijas, kai žmonės naudojasi, kai techniškai jie turėtų naudoti prop .

639
04 мая '11 в 17:27 2011-05-04 17:27 Atsakymą pateikia „ TJ Crowder“ gegužės 4 d., „11, 17:27 pm 2011-05-04 17:27

Šis pokytis jau seniai prasidėjo dėl jQuery. Jau daugelį metų jie yra patenkinti funkcija, vadinama „ attr() kuri iš esmės atsiėmė DOM savybes, o ne rezultatą, kurio tikitės iš pavadinimo. „ attr() ir „ prop() atskyrimas turėtų padėti sumažinti tam tikrą painiavą tarp HTML atributų ir „DOM“ savybių. $.fn.prop() fiksuoja nurodytą DOM savybę, o $.fn.attr() užfiksuoja nurodytą HTML atributą.

Norėdami suprasti, kaip jie veikia, čia yra išsamus HTML atributų ir DOM savybių skirtumų paaiškinimas.

HTML atributai

Sintaksė:

<body onload="foo()">

Tikslas: leidžia žymėti duomenis, susijusius su įvykiais, atvaizdavimu ir kitais tikslais.

Vizualizacija: 2019

242
03 мая '11 в 23:05 2011-05-03 23:05 atsakymą pateikė vartotojo1385191 03 gegužės 11 d. 23:05 2011-05-03 23:05

Turtas yra DOM; Šis atributas yra HTML, kuris analizuojamas DOM.

Papildoma informacija

Jei pakeisite atributą, šis pakeitimas atsispindės DOM (kartais su kitu pavadinimu).

Pavyzdys: žymens class atributo keitimas pakeis šios žymos „ className savybę DOM. Jei žymelėje nėra atributo, vis dar turite atitinkamą DOM savybę, turinčią tuščią arba numatytąją vertę.

Pavyzdys. Nors jūsų žymelė neturi class atributo, DOM className ypatybė yra tuščia eilutės reikšme.

pakeisti

Jei pakeisite vieną, kitą pakeis valdiklis ir atvirkščiai. Šis valdiklis nėra jQuery, bet vietiniame naršyklės kode.

237
27 сент. atsakymas duotas yunzen Rugsėjo 27 2011-09-27 19:55 '11, 19:55, 2011-09-27 19:55

Tai tik skirtumas tarp HTML atributų ir painių DOM objektų. Tiems, kurie yra patenkinti DOM savybių savybėmis, tokiomis kaip this.src this.value this.checked , ir tt, .prop yra labai šiltas pasveikinimas šeimoje. Kitiems tai yra tik papildoma painiava. Tegul jis bus aiškus.

Lengviausias būdas pamatyti skirtumą tarp .attr ir .prop yra šis pavyzdys:

 <input blah="hello"> 
  • $('input').attr('blah') : grąžina 'hello' , kaip tikėtasi. Nenuostabu.
  • $('input').prop('blah') : grąžina undefined - nes jis bando padaryti [HTMLInputElement].blah - ir nėra tokio turto šiame DOM objekte. Jis yra tik domene kaip šio elemento atributas, t.y. [HTMLInputElement].getAttribute('blah')

Dabar mes keičiame keletą tokių dalykų:

 $('input').attr('blah', 'apple'); $('input').prop('blah', 'pear'); 
  • $('input').attr('blah') : grąžina 'apple' ? Kodėl gi ne „kriaušės“, nes tai buvo šio elemento paskutinis. Kadangi nuosavybė buvo pakeista į įvesties atributą, o ne į DOM įvesties elementą, jie iš esmės veikia beveik nepriklausomai vienas nuo kito.
  • $('input').prop('blah') : grąžina 'pear'

Tai, kas jums tikrai reikia būti atsargiems, paprasčiausiai nesuderinama su to paties turto naudojimu per visą paraišką dėl pirmiau nurodytos priežasties.

Žiūrėkite smuiką, rodantį skirtumą: http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop :

1 etapas: Stilius

 <input style="font:arial;"/> 
  • .attr('style') - grąžina suderintus elementus, ty "font:arial;"
  • .prop('style') - grąžina stiliaus deklaravimo objektą, ty CSSStyleDeclaration

2 raundas: prasmė

 <input value="hello" type="text"/> $('input').prop('value', 'i changed the value'); 
  • .attr('value') - grąžina 'hello' *
  • .prop('value') - grąžina 'i changed the value'

* Pastaba: dėl šios priežasties jQuery turi .val() metodą, kuris yra lygiavertis .prop('value')

134
19 мая '11 в 13:18 2011-05-19 13:18 atsakymą pateikė Gary Green gegužės 19 d. 11 val. 13:18 2011-05-19 13:18

Tl; DR

Daugeliu atvejų naudokite prop() daugiau nei attr() .

Turtas yra dabartinė įvesties elemento būsena. Atributas yra numatytoji vertė.

Turtas gali būti įvairių tipų dalykų. Atributas gali turėti tik eilutes.

49
16 июля '14 в 12:45 2014-07-16 12:45 atsakymas pateikiamas agjmills 16 liepos 14 d. 12:45 2014-07-16 12:45

Nešvarus patikrinimas

Ši koncepcija yra pavyzdys, kai skirtumas pastebimas: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Pabandykite:

  • spustelėkite mygtuką. Abi žymės >
  • panaikinkite abiejų >
  • paspauskite mygtuką dar kartą. Patikrinama tik „ prop vėliava. 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> 

Kai kurių atributų, pvz., disabled button , turinio atributo pridėjimas arba pašalinimas yra disabled="disabled" visada perjungia nuosavybę (vadinamą IDL atributu HTML5), nes http://www.w3.org/TR/html5/forms.html #attr -fe-invalid sako:

Neįgaliojo IDL atributas turi atspindėti neįgaliojo turinio atributą.

todėl jūs galite išeiti iš jos, nors tai yra bjaurus, nes jis be reikalo keičia HTML.

Kitiems atributams, pvz., checked="checked" į input type="checkbox" , viskas suskaidoma, nes kai tik spustelėsite, jis tampa purvinas, o tada pridėsite arba ištrinsite checked="checked" atributą nebus checked="checked" atšaukti patikrinimą .

Štai kodėl turėtumėte naudoti daugiausia .prop , nes jis tiesiogiai veikia veiksmingą turtą, o ne pasikliauti sudėtingais HTML modifikavimo šalutiniais poveikiais.

35
06 июля '14 в 14:43 2014-07-06 14:43 atsakymas, kurį pateikė Ciro Santilli 新疆 改造 中心 六四 法轮功 法轮功 July 06 '14, 14:43 2014-07-06 14:43

Visi dokai :

Atributų ir savybių skirtumai gali būti svarbūs tam tikrose situacijose. Prieš jQuery 1.6 metodą .attr () metodas kartais atsižvelgė į nuosavybės vertes, kai buvo išskiriami tam tikri atributai, kurie gali sukelti nesuderinamą elgesį. Pradedant nuo jQuery 1.6, metodas .prop () suteikia būdą aiškiai gauti turto vertes, o .attr () - atributus.

Taigi naudokitės pasiūlymu!

32
03 мая '11 в 22:35 2011-05-03 22:35 atsakymą pateikė Arnaud F. 03 Gegužės 11 d. 10:35 2011-05-03 22:35

atributai yra jūsų teksto dokumente / HTML faile (== įsivaizduokite, kad tai yra html žymėjimo žymėjimo analizės rezultatas), o savybės yra HTML medyje DOM (== iš esmės faktinis kai kurių objektų turtas JS prasme).

Svarbu pažymėti, kad daugelis jų yra sinchronizuoti (jei atnaujinsite class savybę, o class atributas html taip pat bus atnaujintas, bet kitaip). Tačiau kai kurie atributai gali būti sinchronizuojami su netikėtomis savybėmis - pavyzdžiui, checked atributas atitinka numatytąjį checked defaultChecked , todėl

  • rankiniu būdu .prop('checked') žymimąjį laukelį, bus pakeista .prop('checked') reikšmė, tačiau nepakeisite .attr('checked') ir .prop('defaultChecked')
  • nustatymas $('#input').prop('defaultChecked', true) taip pat pakeis .attr('checked') , tačiau elemente nebus matomas.

Nykščio taisyklė : .prop() metodas turėtų būti naudojamas loginiams atributams / savybėms ir ypatybėms, kurios nėra html (pvz., >.attr() metodą. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

Ir čia yra lentelė, kurioje nurodoma, kur pageidaujama .attr() (nors .attr() vis dar gali būti naudojama).

2019

26
12 июня '15 в 8:56 2015-06-12 08:56 atsakymas pateikiamas ežerais birželio 12, 15, 8:56 2015-06-12 08:56

.attr() :

  • Gaukite atributo vertę pirmasis elementas suderintų elementų rinkinyje.
  • Suteikia elemento vertę, kaip nurodyta puslapio apkrovai html.

.prop() :

  • Gaukite turto vertę pirmasis elementas suderintų elementų rinkinyje.
  • Suteikia atnaujintas elementų, modifikuotų naudojant „JavaScript“ / „jquery“, vertes
18
08 дек. Atsakymas pateikiamas Kgn-web 08 dec. 2015-12-08 12:14 '15 at 12:14 2015-12-08 12:14

Paprastai norite naudoti savybes. Naudokite atributus tik:

  • Pasirinktinio HTML atributo gavimas (nes jis nėra sinchronizuojamas su DOM nuosavybe).
  • Pavyzdžiui, gauti HTML atributą, kuris nėra sinchronizuojamas su DOM nuosavybe. gauti standartinės HTML atributo „pradinę vertę“, pvz., <input value="abc">.
13
02 февр. atsakymas pateikiamas ne 02 vasario mėn. 2014-02-02 23:36 '14, 11:36 pm 2014-02-02 23:36

attributes → HTML

properties → DOM

7
26 дек. Atsakymas pateikiamas NkS 26 d. 2014-12-26 16:28 '14, 16:28 2014-12-26 16:28

Prieš „jQuery 1.6“, attr() atributus, kartais „ attr() metodas atsižvelgė į turto vertes, o tai sukėlė gana prieštaringą elgesį.

Įdiegus prop() metodą, galima aiškiai atkurti nuosavybės vertes, o .attr() atributus.

Dokumentai:

jQuery.attr() Gaukite pirmojo elemento atributo reikšmę suderintų elementų rinkinyje.

jQuery.prop() Surinkite pirmojo elemento reikšmę suderintų elementų rinkinyje.

6
25 окт. Gothburz atsakymas, pateiktas spalio 25 d. 2015-10-25 03:05 '15 - 03:05 2015-10-25 03:05

Atkreipkite dėmesį, kad naudojote prop() , pavyzdžiui:

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