jquery menentukan status kotak semak yang disemak dan membezakan attr dan prop

jquery menentukan status kotak semak yang disemak dan membezakan attr dan prop_jquery

WBOY

Lepaskan： 2016-05-16 15:25:00

asal

1930 orang telah melayarinya

Dalam projek baru-baru ini, saya perlu menggunakan jquery untuk menentukan sama ada kotak pilihan dalam input telah dipilih jQuery 1.6 telah menambah kaedah prop(), meminjam daripada keterangan rasmi mengenainya ialah:

Perbezaan antara atribut dan sifat boleh menjadi penting dalam situasi tertentu Sebelum jQuery 1.6, kaedah .attr() kadangkala mengambil kira nilai harta apabila mendapatkan semula beberapa atribut, yang boleh menyebabkan kelakuan tidak konsisten. . Mulai jQuery 1.6, kaedah .prop() menyediakan cara untuk mendapatkan semula nilai sifat secara eksplisit, manakala .attr() mendapatkan semula atribut.
Terjemahan di atas mungkin: prop() mengendalikan atribut yang berasal dari objek nod, yang mengandungi banyak sifat asli dan attr() berasal dari atribut objek, yang mungkin apabila kita tambah atribut pada nod elemen Hanya nod akan wujud. Sudah tentu, terjemahan sebelum ini hanya mewakili pandangan saya sendiri Jika terdapat sebarang kesilapan, anda boleh menunjukkannya~~

Ringkasnya:

Untuk atribut yang wujud bagi elemen HTML itu sendiri, gunakan kaedah prop semasa memproses.
Untuk atribut DOM tersuai kami sendiri bagi elemen HTML, kami menggunakan kaedah attr semasa memprosesnya.
Penerangan di atas mungkin agak kabur saya akan memetik beberapa kandungan blog daripada pakar dan menambah ujian saya untuk memberi beberapa contoh.

Contoh pertama: Atribut yang wujud dan perihalan atribut tersuai bagi elemen

http://www.baidu.com" target="_self" class="btn">Baidu
Dalam contoh ini, atribut DOM bagi elemen termasuk "href, sasaran dan kelas". perkataan, Sifat yang boleh digesa secara bijak dalam IDE dipanggil sifat intrinsik. Apabila berurusan dengan sifat-sifat ini, disyorkan untuk menggunakan kaedah prop.

Delete
Dalam contoh ini, atribut DOM bagi elemen termasuk "href, id dan tindakan". Ia sendiri tidak mempunyai sifat ini. Ini ialah atribut DOM tersuai. Apabila berurusan dengan atribut ini, adalah disyorkan untuk menggunakan kaedah attr. Apabila menggunakan kaedah prop untuk mendapatkan nilai dan menetapkan nilai harta, nilai yang tidak ditentukan akan dikembalikan.

Contoh kedua: Perbezaan antara prop() dan attr() dalam aplikasi borang

Mari kita lihat sekeping kod menggunakan kaedah attr():

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用attr（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").attr("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").attr("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

Salin selepas log masuk

Hasil ujian program di atas ialah:

Seperti yang dapat dilihat daripada rajah dinamik, menggunakan attr() tidak boleh mendapatkan status pilihan pengguna Ia hanya mengembalikan nilai awal borang.

Mari lihat sekeping kod menggunakan kaedah prop():

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title> attr() vs prop()</title>
 </head>
 <body>
  <h3>用prop（）判断是否选中</h3>
  <input type="checkbox" id="input01" />我是第一个复选框A<br />
  <input type="checkbox" id="input02" checked="checked"/>我是第二个复选框B<br />
  <input type="button" id="button01" value="获取A的checked状态" />
  <input type="button" id="button02" value="获取B的checked状态" />
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    $("#button01").click(function(){
     var $state01=$("#input01").prop("checked");
     alert($state01);
    })
    $("#button02").click(function(){
     var $state02=$("#input02").prop("checked");
     alert($state02);
    })
   })
  </script>
 </body>
</html>

Salin selepas log masuk

Hasil ujian program di atas ialah:

Seperti yang dapat dilihat daripada rajah dinamik, prop() boleh digunakan untuk mendapatkan status operasi pemilihan dan pembatalan pengguna dalam masa nyata.

Jadi perbezaan yang saya rumuskan ialah: nilai yang direkodkan oleh hartanah akan dikemas kini dalam masa nyata mengikut operasi pengguna, manakala nilai yang direkodkan oleh atribut ialah nilai awal, yang hanya mewakili pendapat saya sendiri.

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.