Rumah > Artikel > hujung hadapan web > Apakah perbezaan antara data() dan attr() dalam jquery
Perbezaan: "$.attr()" mengambil nilai atribut daripada elemen DOM setiap kali, iaitu, ia konsisten dengan nilai atribut dalam teg dalam paparan manakala "$.data() " mengambil nilai daripada Jquery Oleh kerana nilai atribut objek disimpan dalam ingatan, ia mungkin tidak konsisten dengan nilai atribut dalam paparan.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
$.attr()
dan $.data()
pada asasnya tergolong dalam perbezaan antara DOM属性
dan Jquery对象属性
.
Contoh mudah
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app" data-foo="hello"></p> </body> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> var getAttr1 = $('#app').attr('data-foo'); var getData1 = $('#app').data('foo'); console.log('getAttr1: ' + getAttr1); //hello console.log('getData1: ' + getData1); //hello $('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值 var getAttr2 = $('#app').attr('data-foo'); var getData2 = $('#app').data('foo'); console.log('getAttr2: ' + getAttr2); //world console.log('getData2: ' + getData2); //*** hello *** $('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值 var getAttr3 = $('#app').attr('data-foo'); var getData3 = $('#app').data('foo'); console.log('getAttr3: ' + getAttr3); //world console.log('getData3: ' + getData3); //*** WORLD *** </script> </html>
$.attr() mengambil nilai atribut daripada DOM元素
setiap kali, iaitu nilai atribut dalam teg dalam nilai atribut paparan kekal konsisten.
$.attr('data-foo') akan mendapat nilai atribut data-foo daripada teg; ' data-foo', 'world') akan memasukkan rentetan 'world' ke dalam atribut 'data-foo' bagi teg; ( ) mengambil nilai daripada
Memandangkan nilai atribut objek disimpan dalam ingatan, ia mungkin tidak konsisten dengan nilai atribut dalam paparan.Jquery对象
Jquery对象
Jadi $.attr() dan $.data() harus mengelakkan penggunaan bercampur, iaitu, dua situasi berikut harus dielakkan sebaik mungkin:
Dengan $. attr() untuk menetapkan atribut, dan kemudian gunakan $.data() untuk mendapatkan nilai atribut; gunakan $.attr() Dapatkan nilai atribut. Jquery对象
Tutorial video berkaitan yang disyorkan:
Tutorial jQuery(Video)
Atas ialah kandungan terperinci Apakah perbezaan antara data() dan attr() dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!