.prop () vs .attr ()


Al─▒nan cevaba git


Yani jQuery 1.6 yeni bir i┼čleve sahiptir prop() .

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

ya da bu durumda ayn─▒ ┼čeyi yap─▒yorlar m─▒?

Ve e─čer do kullanarak anahtara sahip prop() , t├╝m eski attr() ─▒ 1.6 ge├žerseniz k─▒racak aramalar─▒?

G├ťNCELLE┼×T─░RME

 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> 

(Ayr─▒ca bu keman bak─▒n: http://jsfiddle.net/maniator/JpUF2/ )

Konsol getAttribute bir dize ve bir dize olarak g├╝nl├╝─če kaydeder attr , ancak o prop kadar CSSStyleDeclaration ? Neden? Ve bu gelecekteki kodlamam─▒ nas─▒l etkiler?


2241





2011-05-03




Cevap say─▒s─▒n─▒ say: 17






1 Kas─▒m 2012 G├╝ncellemesi

Orijinal cevab─▒m ├Âzellikle jQuery 1.6 i├žin ge├žerlidir. Benim tavsiyem ayn─▒ kal─▒yor, ancak jQuery 1.6.1 baz─▒ ┼čeyleri biraz de─či┼čtirdi: Tahmini kesilmi┼č web siteleri y─▒─č─▒n─▒ i├žinde, jQuery ekibi Boole ├Âzellikleri i├žin eski davran─▒┼člar─▒na yak─▒n (ancak tam olarak ayn─▒ de─čil) bir ┼čeye geri d├Ând├╝ attr() . John Resig de bunun hakk─▒nda blog yazd─▒ . ─░├žlerinde bulunduklar─▒ zorluklar─▒ g├Ârebiliyorum ama yine de tercihine olan ├Ânerisine kat─▒lm─▒yorum attr() .

Orijinal cevap

Yaln─▒zca DOM'u de─čil, yaln─▒zca jQuery'yi kulland─▒ysan─▒z, kesinlikle kavramsal olarak bir geli┼čme olmas─▒na ra─čmen, kafa kar─▒┼čt─▒r─▒c─▒ bir de─či┼čiklik olabilir. Bu de─či┼čiklik sonucunda k─▒r─▒lacak olan jQuery kullanan sitelerin bazilyonlar─▒ i├žin pek iyi de─čil.

Ana sorunlar─▒ ├Âzetleyece─čim:

  • Genelde sen prop() yerine istiyorsun attr() .
  • Vakalar─▒n ├žo─čunda, prop() eskiden yapt─▒klar─▒n─▒ attr() yapar. ├ça─čr─▒lar─▒ de─či┼čtirilmesi attr() ile prop() kodunuzu genel ├žal─▒┼čacakt─▒r i├žinde.
  • ├ľzellikler genellikle ba┼ča ├ž─▒kmakla ba┼ča ├ž─▒kmak daha kolayd─▒r. Bir nitelik de─čeri sadece bir dize olabilir, ancak bir ├Âzellik herhangi bir t├╝rde olabilir. ├ľrne─čin, checked ├Âzellik bir Boolean, style ├Âzellik her stil i├žin ayr─▒ ayr─▒ ├Âzelliklere sahip bir nesnedir, size ├Âzellik bir say─▒d─▒r.
  • Hem bir ├Âzellik hem de ayn─▒ ada sahip bir ├Âzellik varsa, genellikle birini g├╝ncellemek di─čerini g├╝nceller, ancak value ve checked bunlar gibi girdilerin belirli nitelikleri i├žin ge├žerli de─čildir : ve bu nitelikler i├žin ├Âzellik her zaman ge├žerli durumu g├Âsterir. ├Âznitelik (IE'nin eski s├╝r├╝mleri hari├ž), giri┼čin varsay─▒lan de─čerine / kontrol├╝ne kar┼č─▒l─▒k gelir ( defaultValue / defaultChecked ├Âzelli─čine yans─▒t─▒l─▒r ).
  • Bu de─či┼čiklik, niteliklerin ve ├Âzelliklerin ├Ân├╝ne s─▒k─▒┼čm─▒┼č baz─▒ sihirli jQuery katmanlar─▒n─▒ kald─▒r─▒r, yani jQuery geli┼čtiricileri, ├Âzellikler ve nitelikler aras─▒ndaki fark hakk─▒nda biraz bilgi edinmek zorunda kalacak. Bu iyi bir┼čey.

E─čer bir jQuery geli┼čtiricisiyseniz ve bu i┼čin ├Âzellikleri ve ├Âzellikleriyle ilgili olarak kafan─▒z kar─▒┼č─▒yorsa, bir ad─▒m geri atman─▒z ve biraz bilgi alman─▒z gerekir, ├ž├╝nk├╝ jQuery art─▒k sizi bu ┼čeylerden korumak i├žin ├žok u─čra┼čmaz. Konuyla ilgili yetkili ancak biraz kuru kelime i├žin, ├Âzellikleri var: DOM4 , HTML DOM , DOM Seviye 2 , DOM Seviye 3 . Mozilla'n─▒n DOM belgeleri ├žo─ču modern taray─▒c─▒ i├žin ge├žerlidir ve teknik ├Âzelliklerden daha kolay okunur, bu nedenle DOM referanslar─▒n─▒ faydal─▒ bulabilirsiniz . ├ľ─če ├Âzelliklerinde bir b├Âl├╝m var .

├ľzelliklerin ├Âzelliklerden daha kolay nas─▒l ba┼ča ├ž─▒k─▒labilece─čine ├Ârnek olarak, ba┼člang─▒├žta kontrol edilen bir onay kutusunu g├Âz ├Ân├╝nde bulundurun. Bunu yapmak i├žin iki olas─▒ ge├žerli HTML par├žas─▒:

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

Peki, onay kutusunun jQuery ile i┼čaretlendi─čini nas─▒l anlars─▒n─▒z? Y─▒─č─▒n Ta┼čmas─▒'na bak─▒n; genellikle a┼ča─č─▒daki ├Ânerileri bulacaks─▒n─▒z:

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

Bu asl─▒nda, checked 1995ÔÇÖten bu yana her b├╝y├╝k komut dosyas─▒ taray─▒c─▒s─▒nda kusursuz bir ┼čekilde var olan ve ├žal─▒┼čan Boolean ├Âzelli─či ile ilgili olarak d├╝nyadaki en basit ┼čey :

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

Tesis ayr─▒ca, onay kutusunun i┼čaretini kald─▒rmay─▒ veya i┼čareti kald─▒rmay─▒ ├Ânemsiz k─▒lar:

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

JQuery 1.6'da, bu a├ž─▒k├ža ortaya ├ž─▒k─▒yor

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

checked Bir onay kutusunu kodlamak i├žin ├Âzniteli─či kullanma fikri yarars─▒zd─▒r ve gereksizdir. M├╝lkiyet ihtiyac─▒n─▒z olan ┼čey.

  • Do─čru yolu kontrol veya onay kutusunun i┼čaretini kald─▒r─▒n kulland─▒─č─▒n─▒ ne belli de─čil checked niteli─či
  • ├ľznitelik de─čeri, ge├žerli g├Âr├╝n├╝r durum yerine varsay─▒lan─▒ yans─▒t─▒r (IE'nin baz─▒ eski s├╝r├╝mleri hari├ž, bu nedenle i┼čleri daha da zorla┼čt─▒r─▒r). ├ľzellik, sayfadaki onay kutusunun i┼čaretli olup olmad─▒─č─▒ hakk─▒nda hi├žbir ┼čey s├Âylemez. Bkz. Http://jsfiddle.net/VktA6/49/ .

1851







Bence Tim ├žok iyi dedi , ama geri ad─▒m atal─▒m:

DOM ├Â─česi bir nesnedir, bellekteki bir ┼čeydir. OOP'daki ├žo─ču nesne gibi, ├Âzellikleri de vard─▒r . Ayr─▒ca, ayr─▒ olarak, ├Â─če ├╝zerinde tan─▒mlanm─▒┼č olan ├Âzelliklerin bir haritas─▒ vard─▒r (genellikle taray─▒c─▒n─▒n ├Â─čeyi olu┼čturmak i├žin okudu─ču bi├žimlendirmeden gelir). Elementin baz─▒ ├Âzellikleri onlar─▒n olsun ba┼člang─▒├žtaki de─čerleri nitelikler ayn─▒ veya benzer isimlerle (ile value ; "de─čer" ├Âzelli─čindeki ba┼člang─▒├ž de─čerini al─▒r href "href" ├Âzelli─čindeki ba┼člang─▒├ž de─čerini al─▒r, ama tam olarak ayn─▒ de─čeri de─čil; className dan "s─▒n─▒f" ├Âzniteli─či). Di─čer ├Âzellikler, ba┼člang─▒├ž ÔÇőÔÇőde─čerlerini ba┼čka ┼čekillerde al─▒r: ├ľrne─čin, parentNode ├Âzellik, ├╝st ├Â─česinin ne oldu─čuna ba─čl─▒ olarak de─čerini al─▒r; Bir eleman her zaman style bir "stil" niteli─či olsun ya da olmas─▒n bir ├Âzelli─če sahiptir.

Bir sayfada bu ├žapay─▒ d├╝┼č├╝nelim http://example.com/testing.html :

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

Baz─▒ ├╝cretsiz ASCII sanat─▒ (ve bir├žok ┼čey b─▒rakarak):

+ ------------------------------------------- +
| HTMLAnchorElement |
+ ------------------------------------------- +
| href: "http://example.com/foo.html" |
| ad─▒: "fooAnchor" |
| kimli─či: "fooAnchor" |
| className: "bir test" |
| ├Âznitelikler: |
| href: "foo.html" |
| ad─▒: "fooAnchor" |
| kimli─či: "fooAnchor" |
| s─▒n─▒f: "test bir" |
+ ------------------------------------------- +

├ľzelliklerin ve ├Âzelliklerin farkl─▒ oldu─čunu unutmay─▒n.

┼×imdi, her ne kadar farkl─▒ olsalar da, t├╝m bunlar s─▒f─▒rdan tasarlanmaktan ziyade evrimle┼čmi┼č olduklar─▒ndan, birtak─▒m ├Âzellikler, onlar─▒ kurarsan─▒z elde ettikleri ├Âzniteli─če geri d├Ân├╝yor. Ancak herkes yapmaz ve href yukar─▒dan g├Ârd├╝─č├╝n├╝z gibi, haritalama her zaman d├╝z bir "de─čeri ge├žme" de─čildir, bazen yorumlama da vard─▒r.

Bir nesnenin ├Âzellikleri olan ├Âzelliklerden bahsetti─čimde, soyutta konu┼čmuyorum. ─░┼čte baz─▒ jQuery olmayan kod:

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

(Bu de─čerler ├žo─ču taray─▒c─▒ya g├Âre; baz─▒ varyasyonlar var.)

link Nesne ger├žek bir ┼čey oldu─čunu ve bir eri┼čmek aras─▒ndaki ger├žek ayr─▒m oldu─ču g├Âr├╝l├╝yor ├Âzelli─či ├╝zerinde ve bir eri┼čen niteli─čini .

Tim'in dedi─či gibi, zaman─▒n b├╝y├╝k ├žo─čunlu─ču , m├╝lklerle ├žal─▒┼čmak istiyoruz. K─▒smen bunun nedeni, de─čerlerinin (hatta isimlerinin) taray─▒c─▒lar aras─▒nda daha tutarl─▒ olma e─čiliminde olmas─▒d─▒r. ├ço─čunlukla, yaln─▒zca onunla ilgili bir ├Âzellik olmad─▒─č─▒nda (├Âzel nitelikler) ├Âzelliklerle ├žal─▒┼čmak istiyoruz ya da bu ├Âzel ├Âzellik i├žin ├Âzellik ve ├Âzelli─čin 1: 1 olmad─▒─č─▒n─▒ biliyoruz ( href yukar─▒daki ve "href" de oldu─ču gibi) .

Standart ├Âzellikler ├že┼čitli DOM ├Âzelliklerinde belirtilmi┼čtir:

Bu ├Âzelliklerin m├╝kemmel indeksleri var ve bunlara ba─člant─▒lar─▒ kullan─▒┼čl─▒ tutman─▒z─▒ ├Âneriyorum; Onlar─▒ her zaman kullan─▒r─▒m.

├ľzel ├Âzellikler, ├Ârne─čin, data-xyz kodunuza meta veri sa─člamak i├žin ├Â─čelere ekleyebilece─činiz herhangi bir ├Âzelli─či i├žerir (┼čimdi, data- ├Ân eke ba─čl─▒ kald─▒─č─▒n─▒z s├╝rece HTML5'ten itibaren ge├žerli ). (JQuery'nin en son s├╝r├╝mleri data-xyz , data i┼člevler arac─▒l─▒─č─▒yla ├Â─čelere eri┼čmenizi sa─člar , ancak bu i┼člev yaln─▒zca [bundan daha fazla ve daha az ┼čey yapar] ├Âznitelikleri i├žin bir eri┼čimci de─čildir data-xyz ; ger├žekte ├Âzelliklerine ihtiyac─▒n─▒z olmad─▒k├ža, attr etkile┼čimi sa─člamak i├žin i┼člevi kullan─▒rd─▒m ile data-xyz ├Âznitelik.)

attr Fonksiyon onlar tam anlam─▒yla ├Âzelli─či al─▒n─▒rken yerine, istedi─čini ne d├╝┼č├╝nd├╝─č├╝n├╝ alma ├ževresindeki baz─▒ dolamba├žl─▒ mant─▒─č─▒ i├žin kullan─▒l─▒r. Kavramlar─▒ bir araya getirdi. Ta┼č─▒nmak prop ve attr onlar─▒ ├ž├Âzmek i├žin yap─▒ld─▒. GO v1.6.0 jQuery K─▒saca ├žok ileri bu konuda gitti, ama i┼člevselli─či h─▒zla geri eklendi i├žin attr insanlar kullanmaya ortak durumlar─▒ i┼člemek i├žin attr teknik olarak kulland─▒klar─▒ gerekirken prop .


658







Bu de─či┼čiklik uzun zamand─▒r jQuery i├žin geliyor. Y─▒llard─▒r, attr() addan bekledi─činiz sonucu de─čil, ├žo─čunlukla DOM ├Âzelliklerini alan bir fonksiyona sahipler . Ayr─▒lmas─▒ attr() ve prop() HTML ├Âzellikleri ile DOM ├Âzellikleri aras─▒ndaki kar─▒┼č─▒kl─▒─č─▒n bir k─▒sm─▒n─▒n hafifletilmesine yard─▒mc─▒ olmas─▒ gerekir. $.fn.prop() belirtilen DOM ├Âzelli─čini, $.fn.attr() belirtilen HTML ├Âzelli─čini kapar.

Nas─▒l ├žal─▒┼čt─▒klar─▒n─▒ tam olarak anlamak i├žin, i┼čte HTML ├Âznitelikleri ve DOM ├Âzellikleri aras─▒ndaki fark─▒n geni┼č bir a├ž─▒klamas─▒:

HTML Nitelikleri

S├Âzdizimi:

<body onload="foo()">

Ama├ž: ─░┼čaretlemenin, olaylar, g├Âr├╝nt├╝ olu┼čturma ve di─čer ama├žlar i├žin kendisiyle ili┼čkilendirilmi┼č verilere sahip olmas─▒n─▒ sa─člar.

G├Ârselle┼čtirme:
HTML Nitelikleri

S─▒n─▒f ├Âzelli─či burada v├╝cutta g├Âsterilmi┼čtir. A┼ča─č─▒daki kod ├╝zerinden eri┼čilebilir:

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

├ľznitelikler dize bi├žiminde d├Ând├╝r├╝l├╝r ve taray─▒c─▒dan taray─▒c─▒ya tutars─▒z olabilir. Ancak, baz─▒ durumlarda hayati olabilir. Yukar─▒da ├Ârneklendi─či gibi, IE 8 Quirks Mode (ve alt─▒), nitelik ad─▒ yerine get / set / removeAttribute i├žindeki bir DOM ├Âzelli─činin ad─▒n─▒ bekler. Bu, fark─▒ bilmenin neden ├Ânemli oldu─čunun bir ├žok sebebidir.

DOM ├ľzellikleri

S├Âzdizimi:

document.body.onload = foo;

Ama├ž: ├ľ─če d├╝─č├╝mlerine ait ├Âzelliklere eri┼čim sa─člar. Bu ├Âzellikler niteliklere benzer, ancak yaln─▒zca JavaScript arac─▒l─▒─č─▒yla eri┼čilebilir. Bu, DOM ├Âzelliklerinin rol├╝n├╝ netle┼čtirmeye yard─▒mc─▒ olan ├Ânemli bir farkt─▒r. L├╝tfen bu olay i┼čleyici atamas─▒ i┼če yaramaz oldu─čundan ve olay─▒ almad─▒─č─▒ndan, ├Âzelliklerin ├Âzelliklerden tamamen farkl─▒ oldu─čunu unutmay─▒n (g├Âvdenin bir onload olay─▒ yoktur, yaln─▒zca bir onload niteli─či vard─▒r).

G├Ârselle┼čtirme:
DOM ├ľzellikleri

Burada, Firebug'daki "DOM" sekmesi alt─▒ndaki ├Âzelliklerin bir listesini g├Âreceksiniz. Bunlar DOM ├Âzellikleri. Hemen bir ka├ž tanesini fark edeceksiniz, ├ž├╝nk├╝ daha ├Ânce bilmeden kullanm─▒┼čs─▒n─▒zd─▒r. Onlar─▒n de─čerleri, JavaScript arac─▒l─▒─č─▒yla alaca─č─▒n─▒z de─čerdir.

belgeleme

├ľrnek

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

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

JQuery'nin ├Ânceki s├╝r├╝mlerinde, bu bo┼č bir dize d├Ând├╝r├╝r. 1.6'da uygun de─čeri d├Ând├╝r├╝r foo .

Her iki fonksiyon i├žin de yeni koda bakmadan, kar─▒┼č─▒kl─▒─č─▒n HTML'nin ├Âzellikleri ile DOM ├Âzellikleri aras─▒ndaki fark─▒n kodun kendisinden ziyade kendisiyle olan ilgisi oldu─čunu s├Âyleyebilirim. Umar─▒m, bu sizin i├žin baz─▒ ┼čeyleri temizledi.

-Mat


248


2011-05-03





DOMÔÇÖda bir ├Âzellik var; bir ├Âznitelik, DOM'a ayr─▒┼čt─▒r─▒lan HTMLÔÇÖdedir.

Daha fazla detay

Bir niteli─či de─či┼čtirirseniz, de─či┼čiklik DOM'ye yans─▒t─▒l─▒r (bazen farkl─▒ bir adla).

├ľrnek: class Bir etiketin niteli─čini de─či┼čtirmek className DOM'daki o etiketin ├Âzelli─čini de─či┼čtirir . Bir etikette bir ├Âznitelik yoksa, bo┼č veya varsay─▒lan bir de─čere sahip olan DOM ├Âzelli─čine hala sahip olursunuz.

├ľrnek: Etiketinizin bir class niteli─či yokken , DOM ├Âzelli─či className bo┼č bir dize de─čerine sahip.

D├╝zenle

Birini de─či┼čtirirseniz, di─čeri bir denetleyici taraf─▒ndan de─či┼čtirilir ve bunun tersi de ge├žerlidir. Bu denetleyici jQuery'de de─čil, taray─▒c─▒n─▒n yerel kodunda.


240







HTML ├Âznitelikleriyle kar─▒┼č─▒kl─▒─ča neden olan DOM nesneleri aras─▒ndaki fark budur. Bir t├╝r DOM elemanlar─▒ yerli ├Âzelliklerine rahat oyunculuk olanlar i├žin this.src this.value this.checked vb .prop ailesine ├žok s─▒cak a├ž─▒─č─▒z. Di─čerleri i├žin bu sadece ek bir kar─▒┼č─▒kl─▒k katman─▒. Bunu a├ž─▒klayal─▒m.

Ve aras─▒ndaki fark─▒ g├Ârmenin en kolay yolu .attr ve .prop a┼ča─č─▒daki ├Ârnektir:

 <input blah="hello">
 
  1. $('input').attr('blah') : 'hello' beklendi─či gibi d├Âner . Burada s├╝rpriz yok.
  2. $('input').prop('blah') : d├Âner undefined - ├ž├╝nk├╝ yapmaya ├žal─▒┼čt─▒─č─▒ [HTMLInputElement].blah - ve bu DOM nesnesinde b├Âyle bir ├Âzellik yok. Kapsamda yaln─▒zca bu ├Â─čenin niteli─či olarak var olur, yani [HTMLInputElement].getAttribute('blah')

┼×imdi bunun gibi birka├ž ┼čeyi de─či┼čtiriyoruz:

 $('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
 
  1. $('input').attr('blah') : 'apple' eh d├Ând├╝r├╝r ? Neden bu ├Â─če ├╝zerinde en son ayarland─▒─č─▒ gibi "armut" de─čil. ├ľzellik giri┼č niteli─činde de─či┼čtirildi─činden, DOM giri┼č ├Â─česinin kendisinde de─čil - temelde neredeyse birbirlerinden ba─č─▒ms─▒z olarak ├žal─▒┼č─▒rlar.
  2. $('input').prop('blah') : d├Âner 'pear'

Ger├žekten dikkat etmeniz gereken ┼čey , yukar─▒daki nedenlerden ├Ât├╝r├╝ ba┼čvurunuz boyunca bunlar─▒n ayn─▒ m├╝lk i├žin kullan─▒m─▒n─▒ kar─▒┼čt─▒rmamakt─▒r .

Fark─▒ g├Âsteren bir keman g├Âr├╝n: http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop :

1. Tur: stil

 <input style="font:arial;"/>
 
  • .attr('style') - e┼čle┼čen eleman i├žin sat─▒r i├ži stilleri d├Ând├╝r├╝r "font:arial;"
  • .prop('style') - bir stil bildirimi nesnesi d├Ând├╝r├╝r CSSStyleDeclaration

2. Tur: de─čer

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

$('input').prop('value', 'i changed the value');
 
  • .attr('value') - d├Âner 'hello' *
  • .prop('value') - d├Âner 'i changed the value'

* Not: Bu sebepten dolay─▒ jQuery .val() dahili olarak e┼čde─čer bir metoda sahiptir . .prop('value')


139







TL; DR

Kullan─▒m prop() ├╝zerinde attr() vakalar─▒n ├žo─čunda.

Bir ├Âzellik , giri┼č ├Â─česinin ge├žerli durumudur. Bir nitelik varsay─▒lan de─čerdir.

Bir ├Âzellik farkl─▒ t├╝rde ┼čeyler i├žerebilir. Bir ├Âzellik yaln─▒zca dizeler i├žerebilir


52







Kirli kontrol

Bu kavram, fark─▒n g├Âzlenebilir oldu─ču bir ├Ârnek sunar: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Denemek:

  • d├╝─čmeye bas. Her iki onay kutusu da i┼čaretlendi.
  • Her iki onay kutusundaki i┼čareti kald─▒r─▒n.
  • d├╝─čmeye tekrar t─▒klay─▒n. Sadece prop onay kutusu i┼čaretlendi. BANG!

 $('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> 

Http://www.w3.org/TR/html5/forms.html#attr-fe-disabled , ├ž├╝nk├╝ : disabled ├╝zerinde oldu─ču gibi baz─▒ ├Âzellikler i├žin button , i├žerik ├Âzniteli─čini eklemek veya kald─▒rmak disabled="disabled" her zaman ├Âzelli─či de─či┼čtirir (HTML5'te IDL ├Âzniteli─či) :http://www.w3.org/TR/html5/forms.html%23attr-fe-disabled#attr-fe-disabled

Devre d─▒┼č─▒ b─▒rak─▒lm─▒┼č IDL ├Âzelli─či, devre d─▒┼č─▒ b─▒rak─▒lm─▒┼č i├žerik ├Âzelli─čini yans─▒tmal─▒d─▒r.

bu nedenle, HTML'yi ihtiya├ž duymadan de─či┼čtirdi─či i├žin ├žirkin olsa da, ondan kurtulabilirsiniz.

checked="checked" ├ťzerinde oldu─ču gibi di─čer ├Âzellikler i├žin input type="checkbox" , i┼čler bozulur, ├ž├╝nk├╝ bir kez t─▒klatt─▒─č─▒n─▒zda kirlenir ve ard─▒ndan checked="checked" i├žerik niteli─čini eklemek veya kald─▒rmak art─▒k kontrol ├Âzelli─čini de─či┼čtirmez .

Bu nedenle .prop , HTML'yi de─či┼čtirmenin karma┼č─▒k yan etkilerine g├╝venmek yerine, do─črudan etkin ├Âzelli─či do─črudan etkiledi─či i├žin kullanmal─▒s─▒n─▒z .


36







Hepsi dok├╝manda :

Nitelikler ve ├Âzellikler aras─▒ndaki fark, belirli durumlarda ├Ânemli olabilir. JQuery 1.6'dan ├Ânce, .attr () y├Ântemi, tutars─▒z davran─▒┼člara neden olabilecek baz─▒ ├Âznitelikler al─▒n─▒rken bazen ├Âzellik de─čerlerini g├Âz ├Ân├╝nde bulundurur. JQuery 1.6'dan itibaren, .prop () y├Ântemi, ├Âzellik de─čerlerini a├ž─▒k├ža alman─▒n bir yolunu sa─člarken, .attr () ├Âznitelikleri al─▒r.

├ľyleyse pervane kullan!


32







├Âznitelikler HTML metin belgenizde / dosyan─▒zda (== bunun ayr─▒┼čt─▒r─▒lm─▒┼č html i┼čaretlemenizin bir sonucu oldu─čunu d├╝┼č├╝n├╝n), ancak
├Âzellikler HTML DOM a─čac─▒nda (== temelde JS anlam─▒nda baz─▒ nesnelerin ger├žek bir ├Âzelli─či).

Daha da ├Ânemlisi, ├žo─ču senkronize edilir ( class ├Âzelli─či g├╝ncellerseniz , class html'deki ├Âzellik de g├╝ncellenir ve aksi takdirde). Ama ├Ârne─čin, - baz─▒ ├Âzellikler beklenmedik ├Âzelliklerine senkronize edilebilir nitelik checked i├žin kar┼č─▒l─▒k gelir m├╝lkiyet defaultChecked b├Âylece,

  • Bir onay kutusunu manuel olarak kontrol etmek .prop('checked') de─čeri de─či┼čtirecek ancak de─či┼čmeyecek .attr('checked') ve .prop('defaultChecked') de─čerler de─či┼čecektir
  • ayar $('#input').prop('defaultChecked', true) da de─či┼čecek .attr('checked') , ancak bu bir eleman ├╝zerinde g├Âr├╝nmeyecek.

Temel kural ┼čudur : .prop() Boolean nitelikleri / ├Âzellikleri ve html'de bulunmayan ├Âzellikler i├žin (window.location gibi) y├Ântem kullan─▒lmal─▒d─▒r. Di─čer t├╝m nitelikler (html'de g├Ârebilece─činizler) y├Ântemle manip├╝le edilmeye devam edebilir ve devam etmelidir .attr() . ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-edeased/ )

Ve burada, .prop() tercih edilen yeri g├Âsteren bir tablo var ( .attr() yine de kullan─▒labilse bile ).


tercih edilen kullan─▒ml─▒ masa


Neden bazen resmi olarak tavsiye edilen yerlerde .attr () yerine .prop () kullanmak istiyorsunuz?

  1. .prop() herhangi bir t├╝r d├Ând├╝r├╝r - string, integer, boolean; ise .attr() her zaman bir dize d├Ând├╝r├╝r.
  2. .prop() g├Âre yakla┼č─▒k 2.5 kat daha h─▒zl─▒ oldu─ču s├Âyleniyor .attr() .

27







.attr() :

  • E┼čle┼čen ├Â─čeler k├╝mesindeki ilk ├Â─če i├žin bir ├Âzniteli─čin de─čerini al─▒n .
  • Sayfa y├╝k├╝ndeki html'de tan─▒mland─▒─č─▒ gibi ├Â─čenin de─čerini verir

.prop() :

  • E┼čle┼čen ├Â─čeler k├╝mesindeki ilk ├Â─če i├žin bir ├Âzelli─čin de─čerini al─▒n .
  • Javascript / jquery ile de─či┼čtirilen ├Â─čelerin g├╝ncellenmi┼č de─čerlerini verir

18







Genellikle ├Âzellikleri kullanmak istersiniz. Yaln─▒zca a┼ča─č─▒dakiler i├žin nitelik kullan:

  1. ├ľzel bir HTML ├Âzelli─či alma (├ž├╝nk├╝ bir DOM ├Âzelli─či ile senkronize edilmedi).
  2. DOM ├Âzelli─či ile senkronize edilmeyen bir HTML niteli─či alma, ├Ârne─čin, standart bir HTML niteli─činin "orijinal de─čerini" alma, ├Ârne─čin: <input value="abc">.

13


2014-02-02





attributes -> HTML

properties -> DOM


7


2014-12-26





JQuery 1.6'dan ├Ânce, attr() y├Ântem bazen nitelikler al─▒n─▒rken ├Âzellik de─čerlerini g├Âz ├Ân├╝nde bulundurur, bu durum tutars─▒z davran─▒┼člara neden olur.

prop() Y├Ântemin tan─▒t─▒lmas─▒, .attr() ├Âzellikleri al─▒rken ├Âzellik de─čerlerini a├ž─▒k├ža alman─▒n bir yolunu sa─člar .

Dok├╝manlar:

jQuery.attr() E┼čle┼čen ├Â─čeler k├╝mesindeki ilk ├Â─če i├žin bir ├Âzniteli─čin de─čerini al─▒n.

jQuery.prop() E┼čle┼čen ├Â─čeler k├╝mesindeki ilk ├Â─če i├žin bir ├Âzelli─čin de─čerini al─▒n.


6







Yava┼č├ža hat─▒rlatma prop() , ├Ârne─čin:

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

Yukar─▒daki i┼člev, onay kutusunun1 i┼čaretli olup olmad─▒─č─▒n─▒ kontrol etmek i├žin kullan─▒l─▒r, i┼čaretliyse: return 1; de─čilse: 0 d├Ând├╝r. ─░┼člev prop () burada bir GET i┼člevi olarak kullan─▒l─▒r.

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

Yukar─▒daki i┼člev kontrol kutusu1'in kontrol edilmesini ve HER ZAMAN 1 d├Ânmesini ayarlamak i├žin kullan─▒l─▒r. ┼×imdi SET fonksiyonu olarak kullan─▒lan prop () i┼člevini kullan─▒n.

Sak─▒n kar─▒┼čma.

P / S: Image src ├Âzelli─čini kontrol ederken . E─čer src bo┼čtur, prop sayfas─▒nda (yanl─▒┼č) mevcut URL ve d├Ân├╝┼č ├Âzn d├Ân├╝┼č bo┼č bir dize (sa─čda).


2







.attr() Yapabilecek bir ┼čey yapamaz .prop() : CSS se├žicilerini etkiler

─░┼čte di─čer cevaplarda g├Ârmedi─čim bir konu.

CSS se├žici [name=value]

  • cevap verecek .attr('name', 'value')
  • ama her zaman .prop('name', 'value')

.prop() sadece birka├ž ├Âzellik se├žiciyi etkiler

.attr() t├╝m ├Âzellik se├žicileri etkiler


1







1) DOMÔÇÖda bir ├Âzellik var; bir ├Âznitelik, DOM'a ayr─▒┼čt─▒r─▒lan HTMLÔÇÖdedir.

2) $ (elem) .attr ("kontrol edildi") (1.6.1+) "kontrol edildi" (Dize) Onay kutusu durumuyla de─či┼čecek

3) $ (elem) .attr ("kontrol edildi") (1,6 ├Âncesi) true (Boolean) Onay kutusu durumuyla de─či┼čtirildi

  • ├ço─čunlukla, benzeri ├Âzel ├Âznitelik yerine DOM nesnesi i├žin kullanmak istiyoruz data-img, data-xyz .

  • Ayr─▒ca fark─▒n baz─▒ eri┼čirken checkbox ve de─čer href ile attr() ve prop() DOM ├ž─▒k─▒┼č─▒ ile ┼čey de─či┼čikli─či gibi prop() tam gelen ba─člant─▒ olarak origin ve Boolean onay kutusunu de─čeri (pre-1.6)

  • Biz sadece eri┼čim DOM elemanlar─▒ can prop o verir daha sonra di─čer 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> 


0







Gary Hole cevab─▒, kod b├Âyle yaz─▒lm─▒┼čsa, sorunu ├ž├Âzmek i├žin ├žok ├Ânemlidir

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

Prop i┼člevi d├Ând├╝─č├╝ i├žin CSSStyleDeclaration , yukar─▒daki kod baz─▒ taray─▒c─▒larda d├╝zg├╝n ├žal─▒┼čm─▒yor ( IE8 with Chrome Frame Plugin benim durumumda test edildi ).

B├Âylece a┼ča─č─▒daki koda ├ževirme

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

sorunu ├ž├Âzd├╝.


-3



─░lgili yay─▒nlar


{This.props.children} 'a nas─▒l sahne ge├žirilir

jQuery Veriler vs Attr?

├ľzel attr'ler tan─▒mlama

appcompat-v7: 21.0.0 ': Belirtilen adla e┼čle┼čen kaynak bulunamad─▒: attr' android: actionModeShareDrawable '

Belirtilen adla e┼čle┼čen kaynak bulunamad─▒: attr 'android: keyboardNavigationCluster'. 26.0.0 Destek K├╝t├╝phanesine g├╝ncelleme yaparken

├ľzel g├Âr├╝n├╝m i├žin attrs.xml'deki ayn─▒ adl─▒ ├Âznitelikler

Android Studio'yu buildToolsVersion '26 .0.2 'i├žin 2.3'ten 3.0'a g├╝ncelledikten sonra'? Attr / actionBarSize 'sembol├╝ ├ž├Âz├╝lemiyor

Prop vs ReactJS devlet

hata: kaynak android: attr / fontVariationSettings bulunamad─▒

Vue bile┼čeni aksesuar─▒ i├žin varsay─▒lan de─čerler ve bir kullan─▒c─▒n─▒n aksesuar─▒ ayarlay─▒p ayarlamad─▒─č─▒ nas─▒l kontrol edilir?

Etiketle ilgili di─čer sorular [javascript]


Bir nesnenin t├╝m ge├žerli ├Âzelliklerini ve de─čerlerini yazd─▒rmak i├žin yerle┼čik bir i┼člev var m─▒?

Temel 64 kodlamas─▒ ne i├žin kullan─▒l─▒r?

G├Ârd├╝─č├╝n en k├Ât├╝ g├╝venlik bo┼člu─ču? [kapal─▒]

Bir const dizisi bildir

Hata Ay─▒klama vs CMake'deki Release

time.sleep - ipli─či ya da i┼člemi uyur mu?

Git push -u ne anlama geliyor?

raylar─▒ ├╝zerinde toplama yolu ile yakutta ├╝ye g├╝zergah─▒ aras─▒ndaki fark nedir?

Herhangi bir URL veya web sayfas─▒n─▒n Google ├Ânbellek ya┼č─▒n─▒ nas─▒l alabilirim? [kapal─▒]

G├╝mr├╝k ├ža─č─▒rmak sadece android 0 ile ba┼člayanlar i├žin desteklenir - min-api 26