Pertanyaan .prop () vs .attr ()


Begitu jQuery 1.6 memiliki fungsi baru prop().

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

atau dalam hal ini apakah mereka melakukan hal yang sama?

Dan jika saya melakukan harus beralih menggunakan prop(), semua yang lama attr() panggilan akan rusak jika saya beralih ke 1.6?

MEMPERBARUI

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>

(lihat juga biola ini: http://jsfiddle.net/maniator/JpUF2/)

Konsol log getAttribute sebagai string, dan attr sebagai string, tetapi prop sebagai CSSStyleDeclaration, Kenapa? Dan bagaimana hal itu mempengaruhi pengkodean saya di masa depan?


2053
2018-05-03 19:33


asal


Jawaban:


Perbarui 1 November 2012

Jawaban asli saya berlaku khusus untuk jQuery 1.6. Saran saya tetap sama tetapi jQuery 1.6.1 mengubah sedikit hal: dalam menghadapi tumpukan situs web rusak yang diprediksi, tim jQuery dikembalikan attr() untuk sesuatu yang dekat dengan (tetapi tidak persis sama dengan) perilaku lamanya untuk atribut Boolean. John Resig juga blog tentang itu. Saya dapat melihat kesulitan yang mereka hadapi tetapi masih tidak setuju dengan rekomendasi untuk memilih attr().

Jawaban asli

Jika Anda hanya pernah menggunakan jQuery dan bukan DOM secara langsung, ini bisa menjadi perubahan yang membingungkan, meskipun ini jelas merupakan perbaikan konseptual. Tidak begitu baik untuk bazillions situs menggunakan jQuery yang akan pecah sebagai akibat dari perubahan ini sekalipun.

Saya akan meringkas isu-isu utama:

  • Anda biasanya menginginkannya prop() daripada attr().
  • Dalam sebagian besar kasus, prop() melakukan apa attr() biasa dilakukan. Mengganti panggilan ke attr() dengan prop() dalam kode Anda umumnya akan berfungsi.
  • Properti umumnya lebih mudah ditangani daripada atribut. Nilai atribut hanya dapat berupa string sedangkan properti dapat berupa tipe apa pun. Misalnya, checked properti adalah Boolean, yang style properti adalah objek dengan properti individual untuk setiap gaya, size properti adalah angka.
  • Di mana baik properti dan atribut dengan nama yang sama ada, biasanya memperbarui satu akan memperbarui yang lain, tetapi ini tidak terjadi untuk atribut input tertentu, seperti value dan checked: untuk atribut ini, properti selalu mewakili keadaan saat ini sementara atribut (kecuali dalam versi lama IE) sesuai dengan nilai / pemeriksaan default input (tercermin dalam defaultValue / defaultChecked milik).
  • Perubahan ini menghilangkan beberapa lapisan jQuery magic yang terjebak di depan atribut dan properti, yang berarti pengembang jQuery harus belajar sedikit tentang perbedaan antara properti dan atribut. Ini hal yang bagus.

Jika Anda pengembang jQuery dan bingung dengan seluruh bisnis ini tentang properti dan atribut, Anda perlu mengambil langkah mundur dan belajar sedikit tentang hal itu, karena jQuery tidak lagi berusaha keras untuk melindungi Anda dari hal-hal ini. Untuk kata yang otoritatif tetapi agak kering pada subjek, ada spesifikasi: DOM4, DOM HTML, DOM Level 2, DOM Level 3. Dokumentasi DOM Mozilla berlaku untuk sebagian besar browser modern dan lebih mudah dibaca daripada spesifikasi, sehingga Anda dapat menemukannya Referensi DOM bermanfaat. Ada bagian tentang properti elemen.

Sebagai contoh tentang bagaimana properti lebih mudah ditangani daripada atribut, pertimbangkan kotak centang yang awalnya diperiksa. Berikut dua kemungkinan potongan HTML yang valid untuk melakukan ini:

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

Jadi, bagaimana Anda mengetahui apakah kotak centang dicentang dengan jQuery? Lihat Stack Overflow dan Anda biasanya akan menemukan saran berikut:

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

Ini sebenarnya hal yang paling sederhana di dunia untuk dilakukan dengan checked Properti Boolean, yang telah ada dan bekerja dengan sempurna di setiap browser skrip utama sejak 1995:

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

Properti juga membuat pemeriksaan atau tidak mencentang kotak centang sepele:

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

Di jQuery 1.6, ini tidak ambigu menjadi

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

Ide menggunakan checked atribut untuk scripting kotak centang tidak membantu dan tidak perlu. Properti adalah apa yang Anda butuhkan.

  • Tidak jelas apa cara yang benar untuk memeriksa atau tidak mencentang kotak centang menggunakan checked atribut
  • Nilai atribut mencerminkan default daripada status yang terlihat saat ini (kecuali pada beberapa versi IE yang lebih lama, sehingga membuat hal-hal menjadi lebih sulit). Atribut tidak memberi tahu Anda tentang apakah kotak centang di halaman dicentang. Lihat http://jsfiddle.net/VktA6/49/.

1734
2018-05-03 23:06



kupikir Tim mengatakannya dengan cukup baik, tapi mari kita mundur:

Elemen DOM adalah objek, sesuatu dalam memori. Seperti kebanyakan objek dalam OOP, ia memiliki properti. Ini juga, secara terpisah, memiliki peta atribut yang didefinisikan pada elemen (biasanya berasal dari markup yang dibaca browser untuk membuat elemen). Beberapa elemen properti dapatkan mereka awal nilai dari atribut dengan nama yang sama atau mirip (value mendapat nilai awal dari atribut "nilai"; href mendapat nilai awal dari atribut "href", tetapi bukan nilai yang sama persis; className dari atribut "class"). Properti lain mendapatkan nilai awal mereka dengan cara lain: Misalnya, parentNode properti mendapatkan nilainya berdasarkan elemen induknya; elemen selalu memiliki style properti, apakah itu memiliki atribut "style" atau tidak.

Mari pertimbangkan jangkar ini di halaman http://example.com/testing.html:

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

Beberapa seni ASCII serampangan (dan meninggalkan banyak hal):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| href: "http://example.com/foo.html" |
| nama: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| atribut: |
| href: "foo.html" |
| nama: "fooAnchor" |
| id: "fooAnchor" |
| class: "test one" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +

Perhatikan bahwa properti dan atribut berbeda.

Sekarang, meskipun mereka berbeda, karena semua ini berevolusi daripada dirancang dari bawah ke atas, sejumlah properti menulis kembali ke atribut yang mereka peroleh dari jika Anda mengaturnya. Tapi tidak semuanya, dan seperti yang Anda lihat hrefdi atas, pemetaan tidak selalu lurus "berikan nilai pada", terkadang ada interpretasi yang terlibat.

Ketika saya berbicara tentang properti yang menjadi properti suatu objek, saya tidak berbicara secara abstrak. Berikut ini beberapa kode non-jQuery:

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

(Nilai-nilai tersebut sesuai dengan sebagian besar browser; ada beberapa variasi.)

Itu link objek adalah hal yang nyata, dan Anda dapat melihat ada perbedaan nyata antara mengakses a milik di atasnya, dan mengakses sebuah atribut.

Seperti kata Tim, the Sebagian besar saat itu, kami ingin bekerja dengan properti. Sebagian itu karena nilai-nilai mereka (bahkan nama mereka) cenderung lebih konsisten di seluruh browser. Kami kebanyakan hanya ingin bekerja dengan atribut ketika tidak ada properti yang terkait dengannya (atribut khusus), atau ketika kami tahu bahwa untuk atribut tertentu itu, atribut dan properti tidak 1: 1 (seperti dengan href dan "href" di atas).

Properti standar tercantum dalam berbagai spesifikasi DOM:

Spesifikasi ini memiliki indeks yang sangat baik dan saya menyarankan agar tautan tetap berguna; Saya menggunakannya sepanjang waktu.

Atribut khusus akan mencakup, misalnya, apa pun data-xyz atribut yang mungkin Anda pakai pada elemen untuk menyediakan meta-data ke kode Anda (sekarang itu berlaku pada HTML5, selama Anda tetap pada data- awalan). (Versi terbaru dari jQuery memberi Anda akses ke data-xyz elemen melalui data fungsi, tetapi fungsi itu tidak hanya sebagai pengakses data-xyz atribut [lebih baik dan kurang dari itu]; kecuali Anda benar-benar membutuhkan fitur-fiturnya, saya akan menggunakan attr berfungsi untuk berinteraksi dengan data-xyz atribut.)

Itu attr fungsi digunakan untuk memiliki beberapa logika berbelit-belit di sekitar mendapatkan apa yang mereka pikir Anda inginkan, daripada benar-benar mendapatkan atribut. Ini menggabungkan konsep. Pindah ke prop dan attr dimaksudkan untuk membatalkan konfrontasi mereka. Secara singkat di v1.6.0 jQuery pergi terlalu jauh dalam hal itu, tetapi fungsionalitas dengan cepat ditambahkan kembali untuk attr untuk menangani situasi umum di mana orang menggunakan attr ketika secara teknis mereka harus menggunakannya prop.


621
2018-05-04 14:27



Perubahan ini sudah lama datang untuk jQuery. Selama bertahun-tahun, mereka sudah puas dengan fungsi bernama attr() yang kebanyakan diambil properti DOM, bukan hasil yang Anda harapkan dari namanya. Pemisahan dari attr() dan prop() seharusnya membantu mengurangi beberapa kebingungan antara atribut HTML dan properti DOM. $.fn.prop() mengambil properti DOM yang ditentukan, sementara $.fn.attr() mengambil atribut HTML yang ditentukan.

Untuk memahami sepenuhnya cara kerjanya, berikut penjelasan panjang tentang perbedaan antara atribut HTML dan properti DOM.

Atribut HTML

Sintaksis:

<body onload="foo()">

Tujuan: Memungkinkan markup untuk memiliki data yang terkait dengannya untuk acara, render, dan tujuan lainnya.

Visualisasi: HTML AttributesAtribut kelas ditampilkan di sini pada tubuh. Ini dapat diakses melalui kode berikut:

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

Atribut dikembalikan dalam bentuk string dan bisa tidak konsisten dari browser ke browser. Namun, mereka dapat menjadi penting dalam beberapa situasi. Seperti yang dicontohkan di atas, Mode IE 8 Quirks (dan di bawah) mengharapkan nama properti DOM di get / set / removeAttribute sebagai ganti nama atribut. Ini adalah salah satu dari banyak alasan mengapa penting untuk mengetahui perbedaannya.

Properti DOM

Sintaksis:

document.body.onload = foo;

Tujuan: Memberikan akses ke properti milik node elemen. Properti ini mirip dengan atribut, tetapi hanya dapat diakses melalui JavaScript. Ini adalah perbedaan penting yang membantu memperjelas peran properti DOM. Harap dicatat bahwa atribut benar-benar berbeda dari properti, karena penangan tugas handler ini tidak berguna dan tidak akan menerima event (body tidak memiliki event onload, hanya atribut onload).

Visualisasi: DOM Properties

Di sini, Anda akan melihat daftar properti di bawah tab "DOM" di Firebug. Ini adalah properti DOM. Anda akan segera melihat beberapa dari mereka, karena Anda akan menggunakannya sebelumnya tanpa menyadarinya. Nilai-nilai mereka adalah apa yang akan Anda terima melalui JavaScript.

Dokumentasi

Contoh

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

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

Di versi jQuery sebelumnya, ini mengembalikan string kosong. Di 1.6, mengembalikan nilai yang tepat, foo.

Tanpa melirik kode baru untuk fungsi baik, saya dapat mengatakan dengan keyakinan bahwa kebingungan lebih berkaitan dengan perbedaan antara atribut HTML dan properti DOM, daripada dengan kode itu sendiri. Semoga ini membereskan beberapa hal untuk Anda.

-Matt


234
2018-05-03 20:05



Properti ada di DOM; atribut dalam HTML yang diuraikan dalam DOM.

Lebih detail

Jika Anda mengubah atribut, perubahan akan tercermin di DOM (terkadang dengan nama yang berbeda).

Contoh: Mengubah class atribut tag akan mengubah className milik tag itu di DOM. Jika Anda tidak memiliki atribut pada tag, Anda masih memiliki properti DOM terkait dengan nilai kosong atau default.

Contoh: Saat tag Anda tidak class atribut, properti DOM className memang ada dengan nilai string kosong.

sunting

Jika Anda mengubah yang satu, yang lain akan diubah oleh pengontrol, dan sebaliknya. Kontroler ini tidak ada di jQuery, tetapi di kode asli browser.


232
2017-09-27 16:55



Hanya perbedaan antara atribut HTML dan objek DOM yang menyebabkan kebingungan. Bagi mereka yang nyaman bertindak pada elemen DOM properti asli seperti itu this.src  this.value  this.checked dll, .prop adalah sambutan yang sangat hangat untuk keluarga. Bagi yang lain, itu hanya menambah kebingungan. Mari kita perjelas.

Cara termudah untuk melihat perbedaan antara .attr dan .prop adalah contoh berikut:

<input blah="hello">
  1. $('input').attr('blah'): kembali 'hello'seperti yang diharapkan. Tidak ada supris di sini.
  2. $('input').prop('blah'): kembali undefined - Karena itu coba lakukan [HTMLInputElement].blah - dan tidak ada properti seperti itu pada objek DOM yang ada. Hanya ada di ruang lingkup sebagai atribut dari elemen itu yaitu [HTMLInputElement].getAttribute('blah')

Sekarang kita mengubah beberapa hal seperti ini:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
  1. $('input').attr('blah'): kembali 'apple' eh? Mengapa tidak "pir" karena ini ditetapkan terakhir pada elemen itu. Karena properti diubah pada atribut input, bukan elemen input DOM itu sendiri - mereka pada dasarnya hampir bekerja secara independen satu sama lain.
  2. $('input').prop('blah'): kembali 'pear'

Hal yang benar-benar perlu Anda waspadai adalah adil jangan mencampur penggunaan ini untuk properti yang sama di seluruh aplikasi Anda untuk alasan di atas.

Lihat biola yang menunjukkan perbedaannya:  http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop:

Putaran 1: gaya

<input style="font:arial;"/>
  • .attr('style') - mengembalikan gaya inline untuk elemen yang cocok yaitu "font:arial;"
  • .prop('style') - mengembalikan objek deklarasi gaya, yaitu CSSStyleDeclaration

Putaran 2: nilai

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

$('input').prop('value', 'i changed the value');
  • .attr('value') - kembali 'hello' *
  • .prop('value') - kembali 'i changed the value'

* Catatan: jQuery karena alasan ini memiliki .val() metode, yang secara internal setara dengan .prop('value')


131
2018-05-19 10:18



TL; DR

Menggunakan prop() lebih attr() di sebagian besar kasus.

SEBUAH milik adalah status elemen input saat ini. Sebuah atribut adalah nilai default.

Properti dapat berisi hal-hal dari berbagai jenis. Atribut hanya dapat berisi string


48
2017-07-16 09:45



Kewaspadaan kotor

Konsep ini adalah contoh di mana perbedaannya dapat diamati: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Cobalah:

  • klik tombolnya. Kedua kotak centang diperiksa.
  • hapus centang pada kedua kotak centang.
  • klik tombol itu lagi. Hanya itu prop kotak centang diperiksa. 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>

Untuk beberapa atribut seperti disabled di button, menambahkan atau menghapus atribut konten disabled="disabled" selalu matikan properti (disebut atribut IDL dalam HTML5) karena http://www.w3.org/TR/html5/forms.html#attr-fe-disabled mengatakan:

Atribut IDL yang dinonaktifkan harus mencerminkan atribut konten yang dinonaktifkan.

jadi Anda mungkin bisa lolos, meskipun itu jelek karena memodifikasi HTML tanpa perlu.

Untuk atribut lain seperti checked="checked" di input type="checkbox", hal-hal pecah, karena setelah Anda mengkliknya, itu menjadi kotor, dan kemudian menambahkan atau menghapus checked="checked" atribut konten tidak beralih kesiapan lagi.

Inilah mengapa Anda harus menggunakan sebagian besar .prop, karena mempengaruhi properti efektif secara langsung, daripada mengandalkan efek samping yang rumit.


34
2017-07-06 11:43



Semua ada di dalam dokumen:

Perbedaan antara atribut dan properti dapat menjadi penting dalam situasi tertentu. Sebelum jQuery 1.6, metode .attr () terkadang mengambil nilai properti ke dalam akun ketika mengambil beberapa atribut, yang dapat menyebabkan perilaku tidak konsisten. Pada jQuery 1.6, metode .prop () menyediakan cara untuk secara eksplisit mengambil nilai properti, sementara .attr () hanya mengambil atribut.

Jadi gunakan prop!


32
2018-05-03 19:35



atribut ada di HTML Anda dokumen teks / file (== bayangkan ini adalah hasil dari markup html Anda diurai), sedangkan
propertidalam HTML Pohon DOM (== pada dasarnya merupakan properti sebenarnya dari beberapa objek dalam pengertian JS).

Yang penting, banyak dari mereka yang disinkronkan (jika Anda memperbarui class milik, class atribut dalam html juga akan diperbarui; dan sebaliknya). Tapi beberapa atribut dapat disinkronkan dengan properti yang tidak terduga - misalnya, atribut  checked sesuai dengan milik  defaultChecked, maka

  • secara manual memeriksa kotak centang akan berubah .prop('checked') nilai, tetapi tidak akan berubah .attr('checked') dan .prop('defaultChecked') nilai-nilai
  • pengaturan $('#input').prop('defaultChecked', true) juga akan berubah .attr('checked'), tetapi ini tidak akan terlihat pada elemen.

Rule of thumb adalah: .prop() metode harus digunakan untuk atribut / properti boolean dan untuk properti yang tidak ada di html   (seperti window.location). Semua atribut lainnya (yang dapat Anda lihat   html) dapat dan harus terus dimanipulasi dengan .attr()   metode. (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

Dan ini adalah tabel yang menunjukkan di mana .prop() lebih disukai (meskipun .attr() masih bisa digunakan).

  table with preferred usage


Mengapa Anda kadang-kadang ingin menggunakan .prop () bukannya .attr () di mana yang terakhir secara resmi disarankan?

  1. .prop() dapat mengembalikan jenis apa pun - string, integer, boolean; sementara .attr() selalu mengembalikan string.
  2. .prop() dikatakan sekitar 2,5 kali lebih cepat daripada .attr().

26
2018-06-12 05:56