.prop () vs .attr ()

Jadi jQuery 1.6 memiliki fungsi prop() .

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

atau dalam hal ini mereka melakukan hal yang sama?

Dan jika saya perlu beralih menggunakan prop() , apakah semua panggilan attr() lama akan rusak jika saya beralih ke 1.6?

PEMBARUAN

 <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 skrip ini: http://jsfiddle.net/maniator/JpUF2/ )

Konsol mendaftar getAttribute sebagai string, dan attr - sebagai string, tetapi CSSStyleDeclaration sebagai CSSStyleDeclaration , mengapa? Dan bagaimana ini akan mempengaruhi pengkodean saya di masa depan?

2141
03 мая '11 в 22:33 2011-05-03 22:33 Neal ditetapkan pada 03 Mei '11 pada 10:33 pada 2011-05-03 22:33
@ 18 jawaban

Pembaruan 1 November 2012

Jawaban awal saya berkaitan khusus dengan jQuery 1.6. Saran saya tetap sama, tetapi jQuery 1.6.1 sedikit mengubah situasinya: dalam menghadapi prediksi tumpukan situs web yang rusak, tim jQuery mengembalikan attr() ke sesuatu yang dekat (tetapi tidak persis sama) dengan perilaku lamanya untuk atribut logis , John Resig juga melaporkan ini di blog . Saya melihat kesulitan yang mereka hadapi, tetapi masih tidak setuju dengan rekomendasinya untuk lebih memilih attr() .

Jawaban asli

Jika Anda hanya pernah menggunakan jQuery, dan bukan DOM secara >

Saya akan merangkum masalah utama:

  • Biasanya Anda membutuhkan prop() dan bukan attr() .
  • Dalam kebanyakan kasus, prop() melakukan apa yang attr() lakukan sebelumnya. Mengganti panggilan attr() dengan prop() dalam kode Anda biasanya akan berfungsi.
  • Properti biasanya lebih mudah untuk berurusan dengan atribut. Nilai atribut hanya bisa berupa string, sedangkan properti bisa dari jenis apa pun. Sebagai contoh, properti yang checked adalah properti logis, properti style adalah objek dengan properti individual untuk setiap style, properti size adalah angka.
  • Di mana ada properti dan atribut dengan nama yang sama, biasanya memperbarui yang satu akan memperbarui yang lain, tetapi ini tidak berlaku untuk beberapa atribut data input, seperti value dan checked : untuk atribut ini, properti selalu mewakili keadaan saat ini sementara atribut (untuk Dengan pengecualian dari versi IE yang lebih lama, itu sesuai dengan nilai / validasi input default (tercermin dalam defaultValue / defaultChecked ).
  • Perubahan ini menghapus beberapa lapisan jQuery ajaib, terjebak di depan atribut dan properti, yang berarti bahwa pengembang jQuery harus belajar sedikit tentang perbedaan antara properti dan atribut. Ini hal yang baik.

Jika Anda seorang pengembang jQuery dan bingung tentang properti dan atribut dalam bisnis ini, Anda perlu mengambil >nyata tentang masalah ini ada spesifikasi: DOM4 , HTML DOM , DOM Level 2 , DOM Level 3 . Dokumentasi DOM Mozilla valid untuk sebagian besar browser modern dan lebih mudah dibaca daripada spesifikasinya, sehingga Anda dapat menemukan informasi referensi DOM mereka. Ada bagian tentang properti elemen .

Sebagai contoh bagaimana properti lebih mudah diproses daripada atribut, pertimbangkan kotak centang yang awalnya diperiksa. Berikut adalah dua kemungkinan bagian HTML yang valid:

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

Jadi, bagaimana Anda tahu jika kotak centang diatur menggunakan jQuery? Lihatlah tumpukan overflow dan Anda biasanya akan menemukan kalimat berikut:

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

Sebenarnya, ini adalah hal paling sederhana di dunia yang dikaitkan dengan properti Boolean yang checked yang telah ada dan bekerja dengan sempurna di setiap browser utama dengan kemampuan untuk melihat sejak 1995:

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

Properti juga membuat pengecekan atau pembersihan bendera sepele:

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

Di jQuery 1.6, ini pasti menjadi

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

Gagasan menggunakan atribut yang checked untuk kotak centang skrip tidak berguna dan tidak perlu. Properti adalah yang Anda butuhkan.

  • Tidak jelas apa cara yang benar untuk memeriksa atau menghapus centang cek dengan atribut yang checked
  • Nilai atribut mencerminkan nilai default, bukan keadaan yang terlihat saat ini (dengan pengecualian beberapa versi IE yang lebih lama, yang membuat segalanya semakin rumit). Atribut tidak menunjukkan apakah kotak centang dicentang pada halaman. Lihat http://jsfiddle.net/VktA6/49/ .
1790
04 мая '11 в 2:06 2011-05-04 02:06 jawabannya diberikan oleh Tim Down pada 04 Mei '11 pukul 2:06 2011-05-04 02:06

Saya pikir Tim mengatakannya dengan cukup baik , tetapi mengecewakannya:

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

Pertimbangkan jangkar ini di halaman di 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" | + + –––––––––––––––––––––––––––––––––––––––

Harap perhatikan bahwa properti dan atribut berbeda.

Sekarang, meskipun mereka berbeda, karena semua ini berkembang, dan tidak dikembangkan dari awal, sejumlah properti ditulis kembali ke atribut dari mana mereka diperoleh, jika Anda mengaturnya. Tetapi tidak semua orang melakukannya, dan, seperti yang dapat Anda lihat dari href atas, pemetaan tidak selalu >

Ketika saya berbicara tentang properti yang merupakan properti dari 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 ini sesuai dengan sebagian besar browser, ada beberapa opsi.)

Objek link adalah hal yang nyata, dan Anda dapat melihat ada perbedaan nyata antara mengakses dan mengaksesnya.

Seperti yang dikatakan Tim, sebagian besar waktu itu, kami ingin bekerja dengan properti. Ini sebagian karena nilainya (bahkan nama mereka) biasanya lebih konsisten di antara browser. Kami terutama ingin bekerja hanya dengan atribut ketika tidak ada properti yang terkait dengannya (atribut pengguna), atau ketika kami tahu bahwa untuk atribut khusus ini atribut dan properti bukan 1: 1 (seperti dengan href dan "href" di atas).

Properti standar ditetapkan dalam berbagai spesifikasi DOM:

Spesifikasi ini memiliki indeks yang sangat baik, dan saya sarankan agar mereka tetap nyaman digunakan; Saya menggunakannya sepanjang waktu.

Atribut khusus mencakup, misalnya, atribut data-xyz apa pun yang dapat Anda masukkan ke dalam elemen untuk memberikan metadata ke kode Anda (sekarang ini valid dengan HTML5, jika Anda mengikuti awalan data- ), (Versi jQuery terbaru memberi Anda akses ke data-xyz menggunakan fungsi data , tetapi fungsi ini tidak hanya untuk aksesori untuk atribut data-xyz [ia melakukan ini dan lebih dan lebih dari itu], jika Anda benar-benar tidak memerlukan fungsinya, saya akan menggunakan fungsi attr untuk berinteraksi dengan atribut data-xyz .)

Fungsi attr menggunakan beberapa logika yang membingungkan di sekitar mendapatkan apa yang mereka pikir Anda inginkan, daripada benar-benar mendapatkan atribut. Dia menggabungkan konsep itu. Pindah ke prop dan attr dimaksudkan untuk dekonfigurasinya. Secara singkat di v1.6.0, jQuery me>tersebut dengan cepat ditambahkan kembali ke attr untuk menangani situasi umum di mana orang menggunakan attr ketika secara teknis mereka harus menggunakan prop .

639
04 мая '11 в 17:27 2011-05-04 17:27 Jawaban diberikan oleh TJ Crowder 04 Mei '11 pada 17:27 2011-05-04 17:27

Perubahan ini sudah lama sekali untuk jQuery. Selama bertahun-tahun, mereka telah puas dengan fungsi yang disebut attr() yang pada dasarnya mengambil properti DOM, daripada hasil yang Anda harapkan dari namanya. Pemisahan attr() dan prop() harus membantu mengurangi beberapa kebingungan antara atribut HTML dan properti DOM. $.fn.prop() menangkap properti DOM yang ditentukan, dan $.fn.attr() menangkap atribut HTML yang ditentukan.

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

Atribut HTML

Sintaks:

<body onload="foo()">

Tujuan: memungkinkan markup untuk memiliki data yang terkait dengannya untuk acara, rendering, dan tujuan lain.

Visualisasi: 2019

242
03 мая '11 в 23:05 2011-05-03 23:05 jawabannya diberikan oleh user1385191 03 Mei '11 pada 23:05 2011-05-03 23:05

Properti berada di DOM; Atributnya dalam HTML, yang diuraikan dalam DOM.

Informasi tambahan

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

Contoh: mengubah atribut class dari tag akan mengubah properti className dari tag ini di DOM. Jika Anda tidak memiliki atribut di tag, Anda masih memiliki properti DOM yang sesuai dengan nilai kosong atau default.

Sebuah contoh Meskipun tag Anda tidak memiliki atribut class , properti DOM className ada dengan nilai string kosong.

untuk berubah

Jika Anda mengubah satu, yang lain akan diubah oleh controller dan sebaliknya. Pengontrol ini bukan di jQuery, tetapi di kode asli browser.

237
27 сент. balas diberikan yunzen 27 Sep 2011-09-27 19:55 '11 pada 19:55 2011-09-27 19:55

Hanya perbedaan antara atribut HTML dan objek DOM yang membingungkan. Bagi mereka yang merasa nyaman dengan properti properti DOM, seperti this.src this.value this.checked , etc., .prop adalah sambutan yang sangat hangat dalam keluarga. Bagi yang lain, ini hanya kebingungan tambahan. Biarkan itu jelas.

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

 <input blah="hello"> 
  • $('input').attr('blah') : mengembalikan 'hello' , seperti yang diharapkan. Tidak ada kejutan.
  • $('input').prop('blah') : mengembalikan undefined - karena mencoba membuat [HTMLInputElement].blah - dan tidak ada properti seperti itu pada objek DOM ini. Itu hanya ada di domain sebagai atribut dari elemen ini, mis. [HTMLInputElement].getAttribute('blah')

Sekarang kita mengubah beberapa hal seperti ini:

 $('input').attr('blah', 'apple'); $('input').prop('blah', 'pear'); 
  • $('input').attr('blah') : mengembalikan 'apple' eh? Mengapa tidak “pir” karena itu adalah elemen terakhir untuk elemen ini. Karena properti telah diubah menjadi atribut input, dan bukan ke elemen input DOM - mereka pada dasarnya bekerja hampir secara independen satu sama lain.
  • $('input').prop('blah') : mengembalikan 'pear'

Apa yang Anda benar-benar harus berhati-hati adalah tidak mencampur penggunaan ini untuk properti yang sama di seluruh aplikasi karena alasan di atas.

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


.attr vs .prop :

Babak 1: Gaya

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

Babak 2: makna

 <input value="hello" type="text"/> $('input').prop('value', 'i changed the value'); 
  • .attr('value') - mengembalikan 'hello' *
  • .prop('value') - mengembalikan 'i changed the value'

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

134
19 мая '11 в 13:18 2011-05-19 13:18 jawabannya diberikan oleh Gary Green pada 19 Mei 2011 pukul 13:18 2011-05-19 13:18

Tl; DR

Gunakan prop() atas attr() dalam banyak kasus.

Properti adalah keadaan saat ini dari item input. Atribut adalah nilai default.

Properti dapat berisi hal-hal dari tipe yang berbeda. Atribut hanya dapat berisi string.

49
16 июля '14 в 12:45 2014-07-16 12:45 jawabannya diberikan oleh agjmills 16 Juli '14 pukul 12:45 2014-07-16 12:45

Cek kotor

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

Coba:

  • klik tombol Kedua kotak centang dicentang.
  • hapus centang pada kedua kotak.
  • tekan tombol lagi. Hanya bendera prop yang dicentang. BANG!

 <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 pada button , menambah atau menghapus atribut konten disabled="disabled" selalu mengubah properti (disebut atribut IDL dalam HTML5), karena http://www.w3.org/TR/html5/forms.html #attr -fe-disable mengatakan:

Atribut IDL yang dinonaktifkan harus mencerminkan atribut konten yang dinonaktifkan.

jadi Anda bisa menghindarinya, meskipun jelek, karena tidak perlu mengubah HTML.

Untuk atribut lainnya, seperti checked="checked" pada input type="checkbox" , semuanya rusak, karena begitu Anda mengkliknya, itu menjadi kotor, dan kemudian menambahkan atau menghapus atribut checked="checked" tidak checked="checked" untuk membatalkan centang .

Itu sebabnya Anda harus menggunakan sebagian besar .prop , karena secara >

35
06 июля '14 в 14:43 2014-07-06 14:43 balasan yang diberikan oleh Ciro Santilli 新疆 改造 中心 六四 事件 法轮功 06 Juli '14 pada 14:43 2014-07-06 14:43

Semua dermaga :

Perbedaan antara atribut dan properti dapat menjadi penting dalam situasi tertentu. Sebelum jQuery 1.6, metode .attr () terkadang memperhitungkan nilai properti saat mengekstraksi atribut tertentu, yang dapat menyebabkan perilaku tidak konsisten. Dimulai pada jQuery 1.6, metode .prop () menyediakan cara untuk secara eksplisit mendapatkan nilai properti, sementara .attr () mengembalikan atribut.

Jadi, gunakan prop!

32
03 мая '11 в 22:35 2011-05-03 22:35 jawabannya diberikan oleh Arnaud F. 03 Mei '11 pada 10:35 2011-05-03 22:35

atribut ada di dokumen teks / file HTML Anda (== bayangkan bahwa ini adalah hasil dari analisis markup html markup), sementara properti berada di pohon HTML DOM (== pada dasarnya properti aktual dari beberapa objek dalam arti JS).

Penting untuk dicatat bahwa banyak dari mereka disinkronkan (jika Anda memperbarui properti class , dan atribut class di html juga akan diperbarui, tetapi jika tidak). Tetapi beberapa atribut dapat disinkronkan dengan properti yang tidak terduga - misalnya, atribut yang checked sesuai dengan properti defaultChecked , jadi

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

Aturan praktis : metode .prop() harus digunakan untuk atribut / properti logis dan untuk properti yang tidak ada dalam html (misalnya, window.location). Semua atribut lainnya (yang dapat Anda lihat dalam html) dapat dan harus terus dimanipulasi menggunakan metode .attr() . ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

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

2019

26
12 июня '15 в 8:56 2015-06-12 08:56 Jawabannya diberikan oleh lakesare 12 Juni, '15 jam 8:56 2015-06-12 08:56

.attr() :

  • Dapatkan nilai atribut untuk elemen pertama dalam set elemen yang cocok.
  • Memberi Anda nilai elemen seperti yang didefinisikan dalam html pada pemuatan halaman.

.prop() :

  • Dapatkan nilai properti untuk elemen pertama dalam set elemen yang cocok.
  • Memberikan nilai yang diperbarui dari elemen yang dimodifikasi menggunakan javascript / jquery
18
08 дек. Jawabannya diberikan Kgn-web 08 Des . 2015-12-08 12:14 '15 pada 12:14 2015-12-08 12:14

Biasanya Anda ingin menggunakan properti. Gunakan atribut hanya untuk:

  • Mendapatkan atribut HTML khusus (karena tidak disinkronkan dengan properti DOM).
  • Mendapatkan atribut HTML yang tidak disinkronkan dengan properti DOM, misalnya. dapatkan "nilai asli" dari atribut HTML standar, misalnya <input value="abc">.
13
02 февр. jawabannya diberikan naor 02 Feb. 2014-02-02 23:36 '14 pukul 11:36 2014-02-02 23:36

attributes → HTML

properties → DOM

7
26 дек. Jawabannya diberikan NkS 26 Des. 2014-12-26 16:28 '14 pada 16:28 2014-12-26 16:28

Sebelum jQuery 1.6, metode attr() kadang - kadang memperhitungkan nilai properti saat mengekstraksi atribut, ini menyebabkan perilaku yang agak kontradiktif.

Pengenalan metode prop() menyediakan cara untuk secara eksplisit mengambil nilai properti, sementara .attr() mengekstraksi atribut.

Dokumen:

jQuery.attr() Dapatkan nilai atribut untuk elemen pertama di set elemen yang cocok.

jQuery.prop() Dapatkan nilai properti untuk elemen pertama di set elemen yang cocok.

6
25 окт. balasan yang diberikan oleh Gothburz pada 25 Oktober '15 в 3:05 2015-10-25 03:05

Осторожно напоминайте об использовании prop() , например:

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