cari

Rumah  >  Artikel  >  hujung hadapan web  >  jquery menentukan status kotak semak yang disemak dan membezakan attr dan prop_jquery

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

WBOY
WBOYasal
2016-05-16 15:25:001931semak imbas

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

3bf9641bf4d128c196981f801f852009Baidu5db79b134e9f6b82c0b36e0489ee08ed
Dalam contoh ini, atribut DOM bagi elemen 3499910bf9dac5ae3c52d5ede7383485 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.

ddec45da1f9fc3d73ad4ec9e6cfd94cbDelete5db79b134e9f6b82c0b36e0489ee08ed
Dalam contoh ini, atribut DOM bagi elemen 3499910bf9dac5ae3c52d5ede7383485 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>

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ketahui helah return false_javascript dalam jQueyArtikel seterusnya：Ketahui helah return false_javascript dalam jQuey

Artikel berkaitan

Lihat lagi