jQuery attr, prop mu?


103

Sadece başka değil Şimdi bu olduğunu ne fark soruyu var , ben var bazı testler yapılır (http://jsfiddle.net/ZC3Lf/) değiştirerek propve attrbir <form action="/test/"></form>​ çıkış olmak:

1) prop Modifikasyon testi
Prop: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Attr Modifikasyon testi
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr sonra Prop Modifikasyon testi
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop sonra Attr Modifikasyon testi
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Şimdi birkaç şey hakkında kafam karıştı, bildiğim kadarıyla:
Önerme: JavaScript ile yapılan herhangi bir değişiklikten sonra mevcut durumundaki değer
Attr: Sayfa yüklemesinde html'de tanımlandığı şekliyle değer.

Şimdi eğer bu doğruysa,

  • Neden değiştirerek mu propyapmak gibi actiontam ve tersine neden niteliği değil modifiye geliyor?
  • Neden değiştirerek yok propiçinde 1)bir bana hiçbir mantıklı, özniteliği değiştirmek?
  • Neden değiştirerek gelmez attryılında 2)özelliğini değiştirmek, onlar yol olduğunu bağlantılı olduğu anlamına mı?


Test Kodu

HTML

JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

Yanıtlar:


71

Maalesef bağlantılarınızdan hiçbiri çalışmıyor :(

Yine de bazı bilgiler attrtüm nitelikler içindir. propmülkler içindir.

Eski jQuery sürümlerinde (<1.6), biz vardı attr. Gibi DOM özelliklerine gitmek için nodeName, selectedIndexya defaultValuesen böyle bir şey yapmak zorunda:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

Bu berbattı, bu yüzden propeklendi:

index = $("#foo").prop("selectedIndex");

Bu harikaydı, ancak can sıkıcı bir şekilde bu geriye dönük olarak uyumlu değildi, çünkü:

<input type="checkbox" checked>

özniteliği yoktur checked, ancak adında bir özelliği vardır checked.

Yani, 1.6'nın son sürümünde, işlerin bozulmaması için attrde öyle yapıyor prop. Bazı insanlar bunun temiz bir mola olmasını istediler, ancak bence işler her yerde bozulmadığı için doğru karar verildi!

İle ilgili olarak:

Özellik: JavaScript aracılığıyla yapılan herhangi bir değişiklikten sonra mevcut durumundaki değer

Attr: Sayfa yüklemesinde html'de tanımlandığı şekliyle değer.

Öznitelik aslında birçok kez değiştirildiği için bu her zaman doğru değildir, ancak işaretli gibi özellikler için değiştirilecek bir öznitelik yoktur, bu nedenle prop kullanmanız gerekir.

Referanslar:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr


Test bağlantısı yukarıda "bazı testler yapıldı" üzerindeydi, daha görünür hale getireceğim, ama yine de burada: jsfiddle.net/ZC3Lf
Hailwood

Özellik özelleştirilmişse, DOM özellikleri değilse, prop () döndürürse undefinedve attr () iyi çalışıyorsa bir soru buluyorum .
hiway

3

.Prop ve .attr arasındaki farkları görmek için açık bir durum var

aşağıdaki HTML'yi göz önünde bulundurun:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

ve jQuery kullanarak aşağıdaki JS:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

aşağıdaki çıktıyı oluşturur:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

1

Bunu denedim

console.log(element.prop(property));
console.log(element.attr(property));

ve aşağıdaki gibi çıktı verir

http://fiddle.jshell.net/test/
/test/ 

bu, actionyalnızca birlikte okunduğunda normalize edildiğini gösterebilir prop.


Sanmıyorum, aksi takdirde çıkış 2)normalize edilirdi!
Hailwood

Elindeki çünkü @Hailwood Olmayacak, /test/erişim zaman attrve sonra set /test/1için attrelemanın attr olan. Normalleşmeyi tetikleyen herhangi bir prosedür yoktur.
Haocheng

Ne demek istediğin konusunda kafam karıştı, 2)yukarıdaki test: element.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />'); Okunduğunda normalleştirilmiş olsaydı, oradaki son satır normalleştirilmiş sürümü çıkarmaz mıydı?
Hailwood

Değişkenler:property = 'action'; body = $('body'); element = $('form');
Hailwood

Normalleştirme yalnızca pervaneye erişildiğinde tetiklenecek ve attr'a erişim tetiklenmeyecektir .
Haocheng

1

jquery 1.6.1+ attr () özelliği 1.6'dan önceki gibi döndürür / değiştirir. bu nedenle testleriniz pek mantıklı değil.

dönüş değerlerindeki küçük değişikliklerin farkında olun.

Örneğin

attr ('işaretlendi'): 1.6 doğru / yanlış döndürülmeden önce, 1.6.1'den beri. "Kontrol edildi" / tanımsız döndürülür.

attr ('seçildi'): 1.6.1 "seçildi" / tanımsız döndürüldüğünden 1.6 doğru / yanlış döndürülmeden önce

Bu konuya Almanca olarak ayrıntılı bir genel bakış burada bulunabilir:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.