Soru .prop () vs .attr ()


Yani jQuery 1.6 yeni işleve sahip 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 ben yap kullanmaya geçmek zorunda prop(), bütün eski attr() 1.6'ya geçersem aramalar kesilecek mi?

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 bakınız bu keman: http://jsfiddle.net/maniator/JpUF2/)

Konsol günlüğe kaydeder getAttribute bir dize olarak attr bir dize olarak, ancak prop olarak CSSStyleDeclaration, Niye ya? Ve bu benim gelecekteki kodumu nasıl etkiler?


2054
2018-05-03 19:33


Menşei


Bu kesin bir ilgi olacaktır: books.google.ca/...
@Neal, çünkü bu değişiklik jQuery'yi aşmaktadır. HTML öznitelikleri ve DOM özellikleri arasındaki fark büyüktür.
JQuery'nin değişiklikleri geri aldığını görmek beni üzüyor. Yanlış yöne gidiyorlar.
@Neal. Evet, ve iki yöntemi ayırmak yerine sorunu daha da karmaşıklaştırıyor.
@BritishDeveloper cevabı, sadece her zaman x veya y kullanacağını belirtmekten daha karmaşıktır, çünkü almayı düşündüğünüz şeye bağlıdır. Özelliği istiyor musun, yoksa mülkünü istiyor musun? Onlar iki farklı şeydir. - Kevin B


Cevaplar:


1 Kasım 2012'yi güncelleyin

Orijinal cevabım jQuery 1.6 için geçerlidir. Benim tavsiyem aynı kalıyor ama jQuery 1.6.1 bazı şeyleri biraz değiştirdi: Bozuk web sitelerinin tahmin edilen yığınının karşısında, jQuery ekibi döndürüldü attr() Boolean öznitelikleri için eski davranışına (ama tam olarak aynı değil) yakın bir şeye. John Resig de bunun hakkında blog yazdı. İçinde bulundukları zorluğu görebiliyorum ama yine de tercih etme tavsiyesine katılmıyorum. attr().

Orijinal cevap

Eğer jQuery'yi ve doğrudan DOM'ı kullanmadıysanız, bu kesinlikle bir iyileşme olmasına rağmen, bu kafa karıştırıcı bir değişiklik olabilir. JQuery kullanan sitelerin bazilyonları için o kadar iyi değil ki, bu değişimin sonucu olarak kırılacak.

Ana konuları özetleyeceğim:

  • Sen genellikle istiyorsun prop() ziyade attr().
  • Çoğu durumda prop() ne yapar attr() eskiden yapardı. Çağrıları değiştiriliyor attr() ile prop() kodunuzda genellikle çalışır.
  • Özellikler, özelliklerden ziyade genel olarak daha basittir. Bir özellik değeri yalnızca bir dize olsa da, özellik herhangi bir türde olabilir. Örneğin, checked özellik bir Boole, style özellik, her stil için bireysel özelliklere sahip bir nesnedir size özellik bir sayıdır.
  • Hem bir mülk hem de aynı ada sahip bir öznitelik var olduğunda, genellikle bir güncelleştirme, diğerini günceller, ancak bu, girişlerin belirli özniteliklerinin durumu için geçerli değildir. value ve checked: Bu öznitelikler için, özellik her zaman geçerli durumu temsil ederken öznitelik (IE'nin eski sürümleri hariç) girdinin varsayılan değerine / kontrolüne karşılık gelir (yansıyan defaultValue / defaultChecked mülkiyet).
  • Bu değişiklik, jQuery geliştiricilerinin özellikler ve öznitelikler arasındaki farkı biraz öğrenmek zorunda kalacağı, özelliklerin ve özelliklerin önüne takılan sihirli jQuery katmanının bazılarını kaldırır. Bu iyi birşey.

Bir jQuery geliştiricisiyseniz ve bu işle ilgili özellikler ve öznitelikler hakkında kafanız karıştıysa, jQuery artık bu şeylerden sizi korumak için çok uğraşmayacağından, bir adım geri atmanız ve bunun hakkında biraz bilgi edinmeniz gerekir. Konuyla ilgili yetkili ancak biraz kuru sözler 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 daha kolay okunabilir özelliktedir. DOM referansı faydalı. Orada bir eleman özellikleri bölümü.

Özelliklerin, özelliklerden daha basit bir şekilde nasıl ele alınabileceğinin bir örneği olarak, başlangıçta kontrol edilen bir onay kutusunu düşünün. Bunu yapmak için geçerli HTML'nin iki olası parçası aşağıda verilmiştir:

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

Peki, onay kutusunun jQuery ile kontrol edilip edilmediğini nasıl anlayacaksınız? Yığın Taşması'na 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 dünyadaki en basit şey. checked 1995'ten beri her büyük betik tarayıcısında kusursuz bir şekilde var olan ve çalışmış olan Boolean özelliği:

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

Özellik ayrıca onay kutusunu önemsiz olarak işaretlemeyi veya işaretlemeyi de yapar:

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

JQuery 1.6'da, bu açık bir şekilde olur

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

Kullanma fikri checked Bir onay kutusu komut dosyası için özellik, yararsızdır ve gereksizdir. Mülkiyet ihtiyacınız olan şeydir.

  • Onay kutusunu işaretlemenin veya işaretlemenin doğru yolunun, checked nitelik
  • Öznitelik değeri geçerli görünür durumdan ziyade varsayılanı yansıtır (IE'nin bazı eski sürümleri dışında, işleri daha da zorlaştırır). Özellik, sayfadaki onay kutusunun işaretli olup olmadığını size bildirmez. Görmek http://jsfiddle.net/VktA6/49/.

1735
2018-05-03 23:06



@Neal: DOM öğelerinin sahip olduğu özellikleri ve özelliklerin değerlerini nasıl ekleyebileceğini bilmek istiyorsanız, bu bağlantıları elinizde bulundurun: DOM2 HTML belirtimi, DOM2 spec ve DOM3 Spec. Her durumda indeksler mükemmeldir ve doğrudan değerinin geldiği mülkün tam bir tanımına bağlanır. - T.J. Crowder
@Neal: Re neyi farklı kılan: Bilginin kaynağı ve niteliği. Tim'e bak value örneğin, örneğin. Bir işlev çağırdı attr bu alır özellik  value "değer" özniteliğinden çok anlam ifade etmez (ve farklı olabilirler). İleriye gidiyor, attr öznitelikleri ve prop Bazıları için geçiş acı verici olsa da, mülkler daha açık olacaktır. Bunu yanlış anlama, özelliklerin ne olduğu hakkında fikir edinmek için geri adım atmak ve özellikleri okumak gibi bir şey yoktur. - T.J. Crowder
@Neal: Bir DOM öğesi bir nesnedir. Özellikler, diğer herhangi bir programlama nesnesi gibi, bu nesnenin özellikleridir. Bu bölümlerden bazıları, başlangıç ​​değerlerini, aynı zamanda DOM nesnesinde de saklanan işaretlemedeki özelliklerden alır. ayrı özniteliklerin haritası. Çoğu durumda, bir prop'a yazmak sadece prop değiştirir, ancak ne yazık ki altta yatan attr için herhangi bir değişiklik yazan bazı sahne var.value örneğin), ama bunu çoğunlukla görmezden gelmeye çalışalım. Zamanın% 99'u, sahne ile çalışmak istersiniz. Gerçek bir özellikle çalışmanız gerekiyorsa, muhtemelen bunu bileceksiniz. - T.J. Crowder
@Tim: "Değişen value bir girdinin özelliği değişmez value modern tarayıcılarda özellik " Bunu düşünmedim, bu yüzden bir örnek olarak kullanmaya başladım, ancak örneği kodlamaya başladığımda, Chrome, Firefox, Opera, IE ... jsbin.com/ahire4 Bunun nedeni, bir input[type="button"] benim denemem için. O değil özniteliği bir input[type="text"] - jsbin.com/ahire4/2 Kıvrık hakkında konuşun !! Sadece eleman değil, tip onun ... - T.J. Crowder
$('#chk').checked  asla çalıştı ... Bu doğru değil jQuery ... - Neal


bence Tim oldukça iyi dediama geri çekilelim:

Bir DOM öğesi bir nesnedir, bellekte bir şeydir. OOP'taki çoğu nesne gibi özellikleri. Ayrıca, ayrı olarak, öğede tanımlanan özniteliklerin bir haritasını içerir (genellikle, tarayıcı öğeyi oluşturmak için okuduğu işaretlemeden gelir). Elemanın bazı özellikleri onların olsun ilk değerleri Öznitellikler aynı veya benzer isimlerle (value başlangıç ​​değerini "değer" özelliğinden alır; href başlangıç ​​değerini "href" özelliğinden alır, ancak tam olarak aynı değer değildir; className "sınıf" özelliğinden). Diğer özellikler başlangıç ​​değerlerini diğer şekillerde alır: Örneğin, parentNode mülkiyet, değerini ana öğesinin ne olduğuna göre alır; bir öğenin her zaman bir style özellik, "stil" özniteliği olsun ya da olmasın.

Bu bağlantıyı bir sayfada ele alalım. http://example.com/testing.html:

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

Bazı bedava ASCII sanatı (ve bir çok şeyi bırakarak):

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

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

Şimdi, her ne kadar farklı olsalar da, tüm bunlar, zeminden tasarlanmaktan çok evrimleştiğinden, bir dizi özellik, onları kurarsanız, elde ettikleri özniteliklere geri yazarlar. Ama hepsi değil, ve görebileceğiniz gibi hrefyukarıda, haritalama her zaman düz bir “değerden geçmek” değildir, bazen bir yorum söz konusudur.

Bir nesnenin özelliklerinin özellikleri hakkında konuştuğumda, soyutta konuşmuyorum. İşte jQuery olmayan bazı kodlar:

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 değişir; bazı varyasyonlar vardır.)

link nesne gerçek bir şeydir, ve bir özellik üstünde ve bir nitelik.

Tim'in dediği gibi büyük çoğunluğu Zamanın özellikleriyle çalışmak istiyoruz. Kısmen, değerleri (hatta adları) tarayıcılar arasında daha tutarlı olma eğilimi nedeniyle. Çoğunlukla yalnızca ilgili özellik (özel nitelikler) olmadığında veya o özellik için öznitelik ve mülkün 1: 1 olmadığını bildiğimiz niteliklerle çalışmak isteriz. href ve yukarıda "href".

Standart özellikler çeşitli DOM özelliklerinde ortaya konmuştur:

Bu özelliklerin mükemmel endeksleri var ve onlara bağlantıyı el altında bulundurmanızı öneriyorum; Onları her zaman kullanırım.

Özel özellikler, örneğin, data-xyz Kodunuza meta verisi sağlamak için öğeleri koyabileceğiniz özellikler (HTML5 ile aynı olduğu sürece data- önek). (JQuery'nin son sürümleri, size erişmenizi sağlar. data-xyz öğelerini data işlev, ancak bu işlev değil sadece bir erişimci data-xyz öznitelikleri [hem daha fazlasını hem de bundan daha azını yapar]; aslında onun özelliklerine ihtiyacınız yoksa, attr ile etkileşime geçmek data-xyz bağlıyorlar.)

attr işlev, kelimenin tam anlamıyla özniteliği elde etmek yerine, istediğini düşündüklerini elde etmek için bazı kıvrımlı mantığa sahipti. Kavramları karıştırdı. E taşınmak prop ve attr onları ayırmak için kullanıldı. Kısaca v1.6.0'da jQuery bu konuda çok ileri gitti, ancak işlevsellik hızlı bir şekilde geri eklendi için attr insanların kullandığı ortak durumları ele almak attr Teknik olarak ne zaman kullanmalı prop.


623
2018-05-04 14:27



Vay. Bu yeni 1.6.1 güncellemesi gerçekten bu soruyu biraz geçersiz kılıyor .. (ama çok fazla değil) ama bu link temelde şimdi cevap veriyor - Neal
Bunu benim için geçersiz kılmadı, ben sadece jquery1.7 kullanarak bir hatayı düzeltdim. .Attr ('class', 'bla') ve nerede çalışıyordu .prop ('className', 'bla') çalıştı - PandaWood
@PandaWood: .attr('class', 'bla') benim için beklediğim gibi çalışıyor 1.7.0, 1.7.1, ve 1.7.2 Chrome 17, Firefox 11, Opera 11, IE6, IE8, IE9 ve Safari 5'de. - T.J. Crowder
Teşekkürler, benim durumumda belirli bir şey olmalı, bunu kontrol edeyim ve bir test vakasıyla geri döneyim. Ancak şu anda olduğu gibi kodu değiştirmek, "attr" yerine "prop / className" yerine, tüm tarayıcılarda jquery1.4'ten 1.7'ye geçtiğimizde vurulan büyük bir hata düzeltildi. - PandaWood
@ T.J.Crowder re: .data - olacak okumak Varsa, özniteliğin varsayılan değeri, ancak buna yazarsanız, gizlenmiş olarak değişir özellik öğenin ve özniteliği güncellemeyin. - Alnitak


Bu değişiklik jQuery için uzun bir zaman oldu. Yıllar boyunca adlı bir işlevsellik içerisindeler attr() Çoğunlukla elde edilen DOM mülkleri, sonuçtan beklediğiniz sonucu değil. Ayrımı attr() ve prop() HTML öznitelikleri ve DOM özellikleri arasındaki karışıklığın hafifletilmesine yardımcı olmalıdır. $.fn.prop() belirtilen DOM özelliğini alırken, $.fn.attr() belirtilen HTML özniteliğini yakalar.

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

HTML Öznitelikleri

Sözdizimi:

<body onload="foo()">

Amaç: İşaretlemelerin etkinlik, oluşturma ve diğer amaçlarla ilişkili verileri içermesine izin verir.

Görselleştirme: HTML AttributesSınıf niteliği burada vücutta gösterilmiştir. Aşağıdaki kod aracılığıyla 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 öneme sahip olabilirler. Yukarıda örneklendiği gibi, IE 8 Quirks Mode (ve altında), özellik adının yerine get / set / removeAttribute öğesindeki bir DOM özelliğinin adını bekler. Bu, farkı bilmek önemli olmasının birçok nedenlerinden biridir.

DOM Özellikleri

Sözdizimi:

document.body.onload = foo;

Amaç: Öğe düğümlerine ait özelliklere erişim sağlar. Bu özellikler, özelliklere benzer, ancak yalnızca JavaScript ile erişilebilir. Bu, DOM özelliklerinin rolünü netleştirmeye yardımcı olan önemli bir farktır. Lütfen özelliklerin özelliklerden tamamen farklı olduğunu unutmayın., bu olay işleyici ataması işe yaramazsa ve olayı almıyorsa (gövdenin bir yükleme olayı yoktur, yalnızca bir yükleme özniteliği yoktur).

Görselleştirme: DOM Properties

Burada, Firebug'daki "DOM" sekmesi altındaki mülklerin bir listesini göreceksiniz. Bunlar DOM özellikleridir. Bunları bilmeden daha önce kullandıkları için hemen hemen birkaçını anlayacaksınız. Onların değerleri, JavaScript aracılığıyla alacağınız değerlerdir.

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

-Mat


235
2018-05-03 20:05



@Matt bununla ilgili hiçbir şey açıklamıyor prop() jQuery içinde .... - Neal
$.prop() DOM özelliklerini alır, $.attr() HTML özelliklerini alır. Boşluğu psikolojik olarak köprülemeye çalışıyorum, böylece ikisi arasındaki farkı anlayabilirsiniz.
Oğlum, ben de şaşkınım. Yani $('#test').prop('value') bir şey döndürmez mi? Ne de .attr('checked') bir onay kutusu için? Ama eskiden mi? Şimdi onu değiştirmek zorundasın. prop('checked')? Bu ayrımın gerekliliğini anlamıyorum - HTML özellikleriyle DOM özellikleri arasında ayrım yapmak neden önemlidir? Bu değişikliği yapan genel kullanım durumu nedir? "uzun zaman geliyor"? Nedir yanlış İkisi arasındaki ayrımın soyutlanmasıyla birlikte, kullanım durumları çoğunlukla çakışıyor gibi görünüyor. - BlueRaja - Danny Pflughoeft
@BlueRaja: çünkü iki kavram arasında ciddi bir fark vardır çünkü jQuery gibi halı altında fırçalarsanız beklenmedik hatalarla sonuçlanır. valueen bariz durumlardan biridir, çünkü value özellik size bir alanın geçerli değerini verecektir, ancak value öznitelikte size bildirilen orijinal değeri verir. value="..." öznitelik, aslında defaultValue özelliği. (Bu özel durum IE <9'daki hatalar tarafından tekrar karıştırılmasına rağmen) - bobince
@BlueRaja: Bunun cevabı daha da karmaşık. :-) Ayarı attr('value', ...) jQuery'de <1.6, özelliği ayarlar, böylece geçerli değer değişir ve varsayılan değer değişmez. 1.6'da, özniteliği ayarlar, böylece teoride varsayılan değer değişir ve mevcut değer değişmez. Ancak, tam olarak ne ayarlandığına göre (daha) tarayıcı tutarsızlıkları var value öznitelik yok. IE'de mevcut değeri de ayarlar; Bazı tarayıcılarda sadece mevcut değer önceden ayarlanmamışsa mevcut değeri ayarlar. [Ağlar] - bobince


Bir mülk DOM’de; Bir özellik, DOM’a ayrıştırılan HTML’de bulunur.

Daha fazla detay

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

Örnek: Değişen class bir etiketin özelliği className DOM'daki bu etiketin mülkü. Bir etikette herhangi bir özelliğiniz yoksa, yine de boş veya varsayılan bir değere sahip ilgili DOM mülküne sahip olursunuz.

Örnek: Etiketinizde hiç yokken class özniteliği, DOM özelliği className boş bir dize değeriyle var.

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 kodundadır.


233
2017-09-27 16:55



Yani, bu özellik güncellemenin daha iyi olacağı anlamına geliyor, çünkü bu durumda özellik ve özelliklerin hem güncellenip hem de uyumlu olmasını sağlıyorsunuz? - Luke
@Luke DOM, iç teknik temsil, modeldir. HTML nitelikleri bir dış gösterimdir, bir görünümdür. Birini değiştirirseniz, diğeri bir denetleyici tarafından değiştirilir ve bunun tersi de geçerlidir. - HerrSerker
@Luke Şuna bak: jsfiddle.net/Pms3W - HerrSerker
@HerrSerker Yani ikisi de bir kontrolörle senkronize olarak tutuluyorlar mı? Bunun jQuery'nin attr ve prop yöntemleri içinde olduğunu mu sanıyorum? İşte bu keşfettiğim kemanın bir değişikliği. jsfiddle.net/v8wRy - ve şimdiye kadar eşdeğer gibi görünüyorlar. - Luke
"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ıların yerel kodundadır." Bu değil çoğu özellik / özellik için doğrudur. Çoğunluk için, yalnızca bir özniteliğin belirlediği tek yönlü çeviri ilk ilgili mülkün değeri. En iyi iki cevap bunu ayrıntılı olarak açıklıyor. - ᴠɪɴᴄᴇɴᴛ


Bu, yalnızca bir karışıklığa neden olan HTML öznitelikleri ile DOM nesneleri arasındaki ayrımdır. Böyle bir DOM öğeleri yerli özellikleri üzerinde rahat hareket edenler için this.src  this.value  this.checked vb, .prop aileye çok sıcak bir karşılama. Diğerleri için, sadece bir karmaşa katmanı. Bunu açıklığa kavuşturalım.

Arasındaki farkı görmenin en kolay yolu .attr ve .prop aşağıdaki örnektir:

<input blah="hello">
  1. $('input').attr('blah'): döndürür 'hello'beklenildiği gibi. 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 yoktur. Bu kapsamda, sadece bu elemanın bir özelliği olarak mevcut bulunmaktadır. [HTMLInputElement].getAttribute('blah')

Şimdi 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", bu öğe üzerinde son olarak ayarlanmış olmasın. Özellik giriş özniteliğinde değiştirildiğinden, DOM giriş öğesinin kendisi değil - temelde neredeyse birbirinden bağımsız çalışırlar.
  2. $('input').prop('blah'): döndürür 'pear'

Gerçekten dikkat etmeniz gereken şey sadece Uygulamanız boyunca aynı mülk için bunların kullanımını karıştırmayın Yukarıdaki sebepten dolayı.

Farkı gösteren bir fiddle bakı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 bildirim nesnesini döndürür; 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') - döndürür 'i changed the value'

* Not: jQuery bu sebeple bir .val() dahili olarak eşdeğer olan yöntem .prop('value')


132
2018-05-19 10:18



@Neal becaue jquery fonksiyonlarının yapısına daha iyi referans verir. "$ ('input'). prop ('blah'): undefined değerini döndürür - çünkü [HTMLInputElement] .blah - yapmaya çalışır ve bu DOM nesnesinde böyle bir özellik yoktur. Yalnızca bir özellik olarak varlığında bulunur. Bu elemanın yani [HTMLInputElement] .getAttribute ('blah') - Uğur Gümüşhan
Dokümandan farklı görünüyor api.jquery.com/prop: ".Prop () yöntemi devre dışı bırakmak ve .attr () yöntemi yerine kontrol etmek için kullanılmalıdır. Değeri almak ve ayarlamak için .val () yöntemi kullanılmalıdır." - swan
Sınıf veya stil özellik değiştiğinde neden değiştiğini anlamıyorum jsfiddle.net/featon/Jbw6m/3 ? - Damian


TL; DR

kullanım prop() üzerinde attr() çoğu durumda.

bir özellik giriş elemanının mevcut durumu. bir nitelik varsayılan değerdir.

Bir özellik farklı türde şeyler içerebilir. Bir özellik yalnızca dizeleri içerebilir


48
2017-07-16 09:45



Mümkünse birkaç kolay örnekle gelmek ve ne zaman kullanacağınızı göstermek prop() and when to go for attr(). cevap bekliyorum :) - Mou


Kirli kontrol

Bu kavram, farkın gözlemlenebilir olduğu bir örnektir. http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Denemek:

  • düğmeye bas. Her iki onay kutusu da kontrol edildi.
  • her iki onay kutusunun işaretini kaldırın.
  • düğmesine tekrar bası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>

Gibi bazı özellikler için disabled üzerinde buttoniçerik niteliğini ekleme veya kaldırma disabled="disabled" her zaman özelliği (HTML5'te IDL özniteliği olarak adlandırılır) değiştirir çünkü http://www.w3.org/TR/html5/forms.html#attr-fe-disabled diyor:

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

Böylece HTML'yi değiştirmeden çirkin olmasına rağmen, bundan kurtulabilirsiniz.

Gibi diğer özellikler için checked="checked" üzerinde input type="checkbox"şeyler kırılır, çünkü bir kez tıkladığınızda, kirlenir ve ardından ekleme veya çıkarma checked="checked" içerik özniteliği artık kontrol edilmiyor.

Bu yüzden çoğunlukla kullanmalısınız .propKarmaşık yan etkilere güvenmek yerine, etkili mülkiyeti doğrudan etkilediği için.


34
2017-07-06 11:43



Tamlık için bu varyasyonları da deneyin: 1) Düğmeye tıklamadan önce onay kutusunu işaretleyin ve ilk onay kutusunun işaretini kaldırın 2) (Bunun için snippet'i değiştirmeniz gerekecektir) İlk girişi verin. checkedözellik: checked="checked" - ᴠɪɴᴄᴇɴᴛ


Hepsi dokümanda:

Öznitelikler ve özellikler arasındaki fark, belirli durumlarda önemli olabilir. JQuery 1.6'dan önce, .attr () yöntemi, bazı öznitelikler alınırken, tutarsız davranışa neden olabilecek özellik değerlerini bazen hesaba katmıştır. JQuery 1.6'dan itibaren .prop () yöntemi, özellik değerlerini açıkça almanın bir yolunu sağlarken .attr () yalnızca öznitelikleri alır.

Öyleyse prop kullan!


32
2018-05-03 19:35



Yani ben 1.6'ya geçtiğimde, bir sürü şey kırılacak? - Neal
Hayır, sadece tutarsız bir davranış, eğer daha önce çalışırsa, her zaman jQuery 1.6 ile çalışır, sadece bu prop daha güvenlidir;) - Arnaud F.
Hatırlıyorum.$.attr() Onunla çalıştığım zamanların çoğunu almak, "bazen" değil. Bunun neden olduğu karışıklık bugün hala yankılanıyor. Ne yazık ki, bir sorun bulmakta çok zorlanıyorum. kesin HTML özniteliklerine ve DOM özelliklerine bakın, bu yüzden burada biraz cevap yazabilirim.
@ Arnaud-f Doğru değil. Onay kutularını kontrol etmek için attr ('işaretli') kullanan 1.6'dan önceki tüm kodlar artık bozulacak. - CaptSaltyJack
@Matt McDonald: Ne tür bir "... bulmakta sorun kesin HTML özniteliklerini ve DOM özelliklerini oku… "demek istiyor musunuz?" (Yansıyan ve aksi halde) özellikleri DOM2 HTML belirtimi; ayrıca başvurmanız gerekebilir DOM2 ve DOM3 gözünden. - T.J. Crowder


Öznitellikler HTML’nizde metin belgesi / dosya (== bunun, ayrıştırılmış html işaretlemenizin sonucu olduğunu düşünün)
özellikleriHTML’de DOM ağacı (== temelde JS anlamda bazı nesnelerin gerçek bir özelliği).

Önemli olarak, birçoğu senkronize edilir (eğer güncellerseniz) class mülkiyet, class html özniteliği de güncellenecektir; ve aksi halde). Fakat bazı özellikler beklenmedik özelliklerle senkronize edilebilir - nitelik  checked karşılık gelir özellik  defaultChecked, Böylece

  • bir onay kutusunu el ile kontrol etmek değişecektir .prop('checked') değer, ama değişmeyecek .attr('checked') ve .prop('defaultChecked') değerler
  • ayar $('#input').prop('defaultChecked', true) ayrıca değişecek .attr('checked')ama bu bir öğede görünmeyecek.

Başparmak kuralı: .prop() yöntem, boole öznitelikleri / özellikleri ve html'de bulunmayan özellikler için kullanılmalıdır   (window.location gibi). Diğer tüm özellikler (   html) ile manipüle edilmeye devam edebilir ve .attr()   yöntem. (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

Ve burada nerede olduğunu gösteren bir masa .prop() tercih edilir olsa bile .attr() hala kullanılabilir).

  table with preferred usage


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

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

26
2018-06-12 05:56



bunlar gibi bir şey değişti: $('#myImageId').prop('src', 'http://example.com/img.png'), var class = $('.myDivClass').prop('class')veya $('#myTextBox').prop('type', 'button'). Ve bunun gibi...
@ Mr.Wolf, özür dilerim? - lakesare
@ Mr.Wolf, üzgünüm, demek istediğini anlamadım. Ne değişti'? sözdizimi her zaman böyle olmuştur. - lakesare
Cevabındaki tablonun gereksiz olduğunu düşünüyorum. Çünkü .prop() tüm özellikleri ile iyi çalışıyor. Tüm özellikleri işaretlemek istemiyorsunuz .prop() sütun, sen
@ Mr.Wolf, bence gerekli, çünkü daha önce de belirtildiği gibi, .prop() tercih edilir olsa bile .attr() hala kullanılabilir) ' - lakesare