.prop () ve .attr () karşılaştırması

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ÜNCELLEME

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 bkz. şu keman: http://jsfiddle.net/maniator/JpUF2/ )

Konsol getAttribute, bir dize ve bir dize olarak günlüğe kaydedilir attr, ancak propa CSSStyleDeclaration, Neden? Ve bu gelecekte kodlamamı nasıl etkiler?

Güncelleme 1 Kasım 2012

Orijinal cevabım özellikle jQuery 1.6 için geçerlidir. Tavsiyem aynı kalıyor, ancak jQuery 1.6.1 işleri biraz değiştirdi: tahmin edilen kırık web sitesi yığını karşısında, jQuery ekibi Boole özellikleri için eski davranışına yakın (ancak tam olarak aynı değil) bir şeye geri döndüattr() . John Resig de bu konuda blog yazdı . İçinde bulundukları zorlukları görebiliyorum ama yine de tercih ettiği tavsiyeye katılmıyorum attr().

Orijinal cevap

Doğrudan DOM'u değil, yalnızca jQuery'yi kullandıysanız, bu kesinlikle kavramsal 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 jQuery kullanan sitelerin bazilyonları için çok iyi değil.

Ana konuları özetleyeceğim:

• Genellikle prop()yerine istiyorsun attr().
• Çoğu durumda, prop()eskiden ne attr()yapar. Çağrıları değiştirilmesi attr()ile prop()kodunuzu genel çalışacaktır içinde.
• Özelliklerle uğraşmak genellikle niteliklerden daha kolaydır. Bir özellik değeri yalnızca bir dize olabilirken bir özellik herhangi bir türde olabilir. Örneğin, checkedözellik bir Boolean, styleözellik her stil için ayrı özelliklere sahip bir nesnedir, sizeözellik bir sayıdır.
• Hem bir özellik hem de aynı ada sahip bir öznitelik varsa, genellikle birini güncellemek diğerini günceller, ancak valueve gibi bazı girdilerin öznitelikleri için geçerli değildir checked: bu öznitelikler için, özellik her zaman geçerli durumu temsil eder. özniteliği (IE'nin eski sürümleri hariç) girişin varsayılan değerine / kontrolüne ( defaultValue/ defaultCheckedözelliğinde yansıtılır) karşılık gelir .
• Bu değişiklik, özniteliklerin ve özelliklerin önünde sıkışmış sihirli jQuery katmanının bazılarını kaldırır, yani jQuery geliştiricilerinin özellikler ve öznitelikler arasındaki fark hakkında biraz bilgi sahibi olması gerekir. Bu iyi birşey.

Bir jQuery geliştiricisiyseniz ve mülkler ve öznitelikler hakkında tüm bu işin kafası karıştıysa, jQuery artık sizi bu şeylerden korumak için çok uğraşmadığından, bir adım geri çekilmeli ve biraz öğrenmelisiniz. Konuyla ilgili yetkili ama biraz kuru bir kelime için özellikler 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 okunması teknik özelliklerden daha kolaydır, bu nedenle DOM referanslarını yararlı bulabilirsiniz . Eleman özelliklerinde bir bölüm var .

Özelliklerin özniteliklerden daha kolay ele alınmasına bir örnek olarak, başlangıçta işaretlenmiş bir onay kutusunu düşünün. Bunu yapmak için geçerli HTML'nin iki parçası şunlardır:

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

Peki, onay kutusunun jQuery ile işaretli olup olmadığını nasıl anlarsınız? Stack Overflow'a bakın ve 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 checked1995'ten beri her büyük komut dosyası tarayıcısında kusursuz bir şekilde çalışan ve çalışan Boolean özelliği ile ilgili en basit şeydir :

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

Tesis ayrıca onay kutusunu işaretlemeyi veya işaretini kaldırmayı önemsiz kılar:

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

JQuery 1.6'da, bu açıkça

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

checkedBir onay kutusunu komut dosyası oluşturmak için özniteliği kullanma fikri yararsızdır ve gereksizdir. Özellik ne gerek.

• Doğru yolu kontrol veya onay kutusunun işaretini kaldırın kullandığını ne belli değil checkedniteliği
• Öznitelik değeri, geçerli görünür durumu değil, varsayılan durumu yansıtır (IE'nin bazı eski sürümleri hariç, 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/ .

Tim'in çok iyi söylediğini düşünüyorum , ama geri dönelim:

DOM öğesi bir nesnedir, bellekteki bir şeydir. OOP'taki çoğu nesne gibi, özellikleri de vardır . Ayrıca, öğe üzerinde tanımlanan özniteliklerin bir haritasına sahiptir (genellikle tarayıcının öğeyi oluşturmak için okuduğu işaretlemeden 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; classNamedan "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;style "stil" özniteliğine sahip olsun ya da olmasın.

Bu çapayı şu adreste bir sayfada ele alalım http://example.com/testing.html:

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

Bazı gereksiz ASCII sanatı (ve birçok şeyi dışarıda bırakarak):

+ ------------------------------------------- +
| HTMLAnchorElement |
+ ------------------------------------------- +
| href: "http://example.com/foo.html" |
| adı: "fooAnchor" |
| id: "fooAnchor" |
| className: "bir test" |
| nitelikler: |
| href: "foo.html" |
| adı: "fooAnchor" |
| id: "fooAnchor" |
| sınıfı: "bir test" |
+ ------------------------------------------- +

Özelliklerin ve niteliklerin farklı olduğunu unutmayın.

Şimdi, her ne kadar farklı olsalar da, tüm bunlar sıfırdan tasarlanmış olmaktan ziyade geliştiğinden, bir dizi özellik, onları ayarlarsanız, türetdikleri özelliğe geri yazar. Ancak hepsi yapmaz ve hrefyukarıdan da görebileceğiniz gibi, haritalama her zaman düz bir "değeri aktar" değildir, bazen yorumlama söz konusudur.

Bir nesnenin özellikleri olan özelliklerden bahsettiğimde, soyutta konuşmuyorum. Bazı jQuery kodu yok:

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ı için geçerlidir; bazı varyasyonlar vardır.)

linkNesne 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 (adlarının bile) tarayıcılarda daha tutarlı olma eğiliminde olmasıdır. Çoğunlukla yalnızca kendisiyle ilgili bir özellik olmadığında (özel özellikler) veya bu özel özellik için özelliğin ve özelliğin 1: 1 ( hrefyukarıdaki ve "href" ile olduğu) olmadığını bildiğimizde özniteliklerle çalışmak isteriz. .

Standart özellikler çeşitli DOM özelliklerinde belirtilmiştir:

• DOM2 HTML (büyük ölçüde eski, bunun yerine HTML spesifikasyonuna bakın )
• DOM2 Core (eski)
• DOM3 Core (eski)
• DOM4

Bu özellikleri mükemmel dizinler var ve ben onlara linkler kullanışlı tutmak öneririz; Onları her zaman kullanıyorum.

Özel öznitelikler, örneğin, data-xyzkodunuza meta veri sağlamak için öğelere koyabileceğiniz tüm öznitelikleri içerir (artık data-ön eke bağlı kaldığınız sürece HTML5'ten itibaren geçerlidir ). (JQuery'nin son sürümleri data-xyz, dataişlev aracılığıyla öğelere erişmenizi sağlar , ancak bu işlev yalnızca nitelikler için bir erişimci değildirdata-xyz [hem daha fazla hem de daha az yapar]; aslında özelliklerine ihtiyacınız olmadıkça, attretkileşim için işlevi kullanırdım ile data-xyzöznitelik.)

attrFonksiyon 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ı birleştirdi. Onlara taşınmak propve attronları sınırlandırmak anlamına geliyordu. GO v1.6.0 jQuery Kısaca çok ileri bu konuda gitti, ama işlevselliği hızla geri eklendi için attrinsanlar kullanmaya ortak durumları işlemek için attrteknik olarak kullandıkları gerekirken prop.

Bu değişiklik jQuery için uzun zamandır geliyor. Yıllardır, attr()adından beklediğiniz sonucu değil, çoğunlukla DOM mülklerini alan bir işleve sahip içeriklerdi . Ayrılığı attr()ve prop()HTML özelliği ve DOM özelliklerini arasındaki karışıklığı hafifletmek yardımcı olmalıdır. $.fn.prop()belirtilen DOM özelliğini, $.fn.attr()belirtilen HTML özelliğini alır.

Nasıl çalıştıklarını tam olarak anlamak için, HTML özellikleri ve DOM özellikleri arasındaki fark hakkında genişletilmiş bir açıklama:

HTML Özellikleri

Sözdizimi:

<body onload="foo()">

Amaç: İşaretlemenin etkinlikler, oluşturma ve diğer amaçlar için kendisiyle ilişkili verilere sahip olmasını sağlar.

Görselleştirme: Sınıf özelliği, burada gövde üzerinde gösterilir. Aşağıdaki kodla 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. Bununla birlikte, bazı durumlarda hayati olabilirler. Yukarıda örneklendiği gibi IE 8 Quirks Mode (ve aşağısı), özellik adı yerine get / set / removeAttribute öğesinde bir DOM özelliğinin adını bekler. Bu farkı bilmenin önemli olmasının birçok nedeninden biridir.

DOM Özellikleri

Sözdizimi:

document.body.onload = foo;

Amaç: Eleman düğümlerine ait özelliklere erişim sağlar. Bu özelliklere özniteliklere benzer, ancak yalnızca JavaScript aracılığıyla erişilebilir. Bu, DOM mülklerinin rolünü netleştirmeye yardımcı olan önemli bir farktır. Bu olay işleyici ataması işe yaramaz olduğundan ve olayı almayacağından, özniteliklerin özelliklerden tamamen farklı olduğunu unutmayın (gövdenin bir onload olayı yoktur, yalnızca bir onload özniteliği vardır).

Görselleştirme:

Burada, Firebug'daki "DOM" sekmesi altındaki özelliklerin bir listesini göreceksiniz. Bunlar DOM mülkleridir. Daha önce bilmeden kullanacağınız için, bunlardan birkaçını hemen fark edeceksiniz. Onların değerleri JavaScript üzerinden alacağınız değerlerdir.

belgeleme

• JavaScript: David Flanagan'ın Kesin Rehberi
• HTML Özellikleri, Mozilla Geliştirici Merkezi
• DOM Element Özellikleri, Mozilla Geliştirme Merkezi

Misal

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 işlev için yeni koda bakmadan, karışıklığın kodun kendisinden çok HTML öznitelikleri ve DOM özellikleri arasındaki farkla daha fazla ilgisi olduğunu güvenle söyleyebilirim. Umarım, bu sizin için bazı şeyleri temizledi.

-Mat

DOM'da bir özellik var; HTML'de, DOM'a ayrıştırılan bir özellik bulunur.

Daha fazla ayrıntı

Bir özelliği değiştirirseniz, değişiklik DOM'a (bazen farklı bir adla) yansıtılır.

Örnek: classBir etiketin niteliğini değiştirmek, DOM'daki etiketin classNameözelliğini değiştirir . Bir etikette hiçbir özelliğiniz yoksa, yine de boş veya varsayılan bir değere sahip karşılık gelen DOM özelliğiniz vardır.

Örnek: Etiketinizde hiçbir classözellik classNamebulunmamakla birlikte , DOM özelliği boş bir dize değerine sahip.

Düzenle

Birini değiştirirseniz, diğeri bir denetleyici tarafından değiştirilir veya tersi de geçerlidir. Bu denetleyici jQuery'de değil, tarayıcının yerel kodundadır.

Bu sadece HTML nitelikleri ve karmaşaya neden olan DOM nesneleri arasındaki ayrımdır. DOM elemanları üzerinde rahat hareket edenler için böyle bir özellik this.src this.value this.checked, vb .prop., Aile için çok sıcak bir karşılama. Diğerleri için, sadece ek bir karışıklık katmanı. Bunu temizleyelim.

En kolay yolu arasındaki farkı görmek .attrve .propaş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öndürür undefined- çünkü yapmaya çalışıyor [HTMLInputElement].blah- ve bu DOM nesnesinde böyle bir özellik yok. Bu kapsamda yalnızca o öğenin bir özelliği olarak bulunur;[HTMLInputElement].getAttribute('blah')

Şimdi bunun gibi birkaç şeyi değiştiriyoruz:

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

1. $('input').attr('blah'): döndürür 'apple'ha? Neden "armut" olmasın, çünkü bu element üzerinde son olarak ayarlandı. Özellik, DOM giriş öğesinin kendisi değil, giriş özelliğinde değiştirildiğinden, temel olarak neredeyse birbirinden bağımsız çalışırlar.
2. $('input').prop('blah'): İadeler 'pear'

Gerçekten dikkatli olmanız gereken şey , yukarıdaki nedenlerden ötürü uygulamanız boyunca aynı mülk için bunların kullanımını karıştırmamaktır .

Farkı gösteren bir kemanı görün: http://jsfiddle.net/garreh/uLQXc/

.attrvs .prop:

1. Tur: Stil

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

• .attr('style') - eşleşen öğe için satır içi stiller döndürür yani "font:arial;"
• .prop('style') - bir stil bildirim nesnesi döndürür yani CSSStyleDeclaration

2. Tur: değer

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

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

• .attr('value')- döndürür 'hello'*
• .prop('value') -- İadeler 'i changed the value'

* Not: jQuery bu nedenle .val()dahili olarak eşdeğer bir yönteme sahiptir ..prop('value')

TL; DR

Kullanım prop()üzerinde attr()vakaların çoğunda.

Bir özelliği giriş elemanı mevcut durumudur. Bir özellik varsayılan değerdir.

Bir mülk farklı türden şeyler içerebilir. Bir özellik yalnızca dizeler içerebilir

Kirli kontrol

Bu kavram, farkın gözlemlenebilir olduğu bir örnek sağlar: 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 kutusunun işaretini kaldırın.
• düğmesine tekrar tıklayın. Yalnızca proponay 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>

Bazı özellikler gibi For disabledüzerinde buttonekleme veya content özelliğini kaldırarak, disabled="disabled"çünkü her zaman (HTML5 içinde IDL özellik olarak adlandırılır) özelliği geçiş yapılır http://www.w3.org/TR/html5/forms.html#attr-fe-disabled diyor ki:

Devre dışı bırakılan IDL özelliği, devre dışı bırakılmış içerik özelliğini yansıtmalıdır.

HTML'yi ihtiyaç duymadan değiştirdiği için çirkin olmasına rağmen ondan kaçabilirsiniz.

checked="checked"Tarihinde olduğu gibi diğer özellikler için input type="checkbox"işler bozulur, çünkü bir kez tıkladığınızda kirlenir ve daha sonra checked="checked"içerik niteliğini eklemek veya kaldırmak artık kontrolü değiştirmez .

Bu nedenle .prop, HTML'yi değiştirmenin karmaşık yan etkilerine güvenmek yerine, etkili özelliği doğrudan etkilediği için çoğunlukla kullanmalısınız .

Her şey dokümanda :

Nitelikler ve özellikler arasındaki fark, belirli durumlarda önemli olabilir. JQuery 1.6'dan önce .attr () yöntemi, bazı öznitelikleri alırken bazen özellik değerlerini dikkate alarak tutarsız davranışlara neden olabilir. JQuery 1.6 itibariyle .prop () yöntemi, özellik değerlerini açıkça almak için bir yol sağlarken, .attr () öznitelikleri alır.

Yani prop kullanın!

özellikleri HTML metin belgenizde / dosyanızda (== bunun html işaretlemenizin ayrıştırılmış bir sonucu olduğunu düşünün),
özellikler HTML DOM ağacında (== temelde JS anlamında bazı nesnelerin gerçek bir özelliği).

Önemli olarak, birçoğu senkronize edilir ( classözelliği güncellerseniz , classhtml'deki özellik de güncellenir; aksi takdirde). Ancak bazı özellikler beklenmedik özelliklerle senkronize edilebilir - örneğin, özellik checked için karşılık gelir mülkiyet defaultChecked böylece,

• bir onay kutusunu manuel olarak işaretlemek .prop('checked')değeri değiştirir , ancak değişmez .attr('checked')ve .prop('defaultChecked')değerleri değiştirmez
• ayar $('#input').prop('defaultChecked', true) da değişir .attr('checked'), ancak bu bir öğede görünmez.

Temel kural :.prop() boolean öznitelikleri / özellikleri ve html'de bulunmayan özellikler (window.location gibi) için yöntem kullanılmalıdır. Diğer tüm öznitelikler (html'de görebileceğiniz özellikler), .attr() yöntemle değiştirilmeye devam edilebilir ve değiştirilmeye devam etmelidir . ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

Ve burada nerede .prop()tercih edildiğini gösteren bir tablo ( .attr()hala kullanılabilir olsa da).

Neden ikincisinin resmi olarak önerildiği .attr () yerine neden .prop () kullanmak istersiniz?

1. .prop()herhangi bir türü döndürebilir - dize, tamsayı, boolean; süre.attr() her zaman bir dize döndürür.
2. .prop()den yaklaşık 2.5 kat daha hızlı olduğu söyleniyor .attr().

.attr():

• Bir özelliğin değerini almaEşleşen öğeler kümesindeki ilk öğe için .
• Öğenin değerini, sayfa yüklemedeki html'de tanımlandığı şekilde verir

.prop():

• Bir mülkün değerini almaEşleşen öğeler kümesindeki ilk öğe için .
• Javascript / jquery ile değiştirilen öğelerin güncellenmiş değerlerini verir

Genellikle özellikleri kullanmak istersiniz. Nitelikleri yalnızca şunlar için kullanın:

1. Özel bir HTML özelliği alma (bir DOM özelliğiyle senkronize edilmediğinden).
2. DOM özelliğiyle senkronize edilmeyen bir HTML özelliği alma, örneğin standart bir HTML özelliğinin "orijinal değerini" alma, örneğin <input value="abc">.

attributes -> HTML

properties -> DOM

JQuery 1.6'dan önce, attr()yöntem bazen öznitelikleri alırken özellik değerlerini hesaba katmıştır, bu durum oldukça tutarsız davranışlara neden olmuştur.

prop()Yöntemin tanıtılması, .attr()öznitelikleri alırken özellik değerlerini açıkça almak için bir yol 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.

Kullanımla ilgili nazik bir hatırlatma prop(), örnek:

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: dönüş 1; değilse: döndür 0. Burada bir GET işlevi olarak kullanılan işlev prop ().

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

Yukarıdaki fonksiyon, kontrol edilecek onay kutusunu1 ve HER ZAMAN 1'i ayarlamak için kullanılır. Şimdi bir fonksiyon olarak prop () fonksiyonu kullanılır.

Berbat etme.

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).

Bunu .attr()yapamayacak bir şey var .prop(): CSS seçicilerini etkilemek

İşte diğer cevaplarda görmediğim bir konu.

CSS seçici [name=value]

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

.prop() yalnızca birkaç özellik seçiciyi etkiler

• input[name] (teşekkürler @TimDown )

.attr() tüm özellik seçicileri etkiler

• input[value]
• input[naame]
• span[name]
• input[data-custom-attribute](ikisi de .data('custom-attribute')bu seçiciyi etkilemez)

1) DOM'da bir mülk; HTML'de, DOM'a ayrıştırılan bir özellik bulunur.

2) $ (elem) .attr ("işaretli") (1.6.1+) "işaretli" (Dize) Onay kutusu durumuyla değişecek

3) $ (elem) .attr ("işaretlendi") (1.6 öncesi) true (Boolean) Onay kutusu durumuyla değiştirildi

• Çoğunlukla, gibi özel özellik yerine DOM nesnesi için kullanmak istiyoruz data-img, data-xyz.

• Ayrıca farkın bazı erişirken checkboxve değer href ile attr()ve prop()DOM çıkışı ile şey değişikliği gibi prop()tam gelen bağlantı olarak originve Booleanonay kutusunu değeri (pre-1.6)

• DOM öğelerine yalnızca propdiğer öğelerle erişebiliriz.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 () 'da dikkat edilmesi gereken birkaç nokta vardır:

• selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked ve defaultSelected..etc .prop () yöntemiyle alınmalı ve ayarlanmalıdır. Bunlar karşılık gelen özelliklere sahip değildir ve sadece özelliklerdir.

• Giriş türü onay kutusu için

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

• prop yöntemi işaretli, seçili, devre dışı, readOnly..etc için Boole değerini döndürürken, attr tanımlı dize döndürür. Böylece, eğer durumunda doğrudan .prop ('işaretli') kullanabilirsiniz.

• .attr (), .prop () öğesini dahili olarak çağırır, bu nedenle .attr () yöntemi, doğrudan .prop () üzerinden erişmekten biraz daha yavaş olacaktır.

Gary Hole cevabı, kod bu şekilde yazılırsa sorunu çözmek için çok önemlidir.

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

Prop işlevi return CSSStyleDeclarationnesnesi olduğundan, yukarıdaki kod bazı tarayıcılarda düzgün çalışmaz (IE8 with Chrome Frame Plugin benim durumumda .

Böylece aşağıdaki koda dönüştürmek

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

sorunu çözdü.