Cara menggunakan jQuery untuk mengubah suai kandungan elemen HTML

JQuery ialah perpustakaan JavaScript popular yang direka untuk mencari elemen dalam dokumen HTML dengan mudah dan kemudian beroperasi padanya. Dalam artikel ini, kita akan membincangkan cara menggunakan jQuery untuk mengubah suai kandungan elemen HTML (iaitu, elemen), dan pengubahsuaian ini dicapai dengan klik pengguna (iaitu, klik).

Langkah Pertama: Persediaan

Sebelum kami mula menulis kod jQuery, kami perlu menyediakan halaman HTML kami. Berikut ialah contoh halaman HTML yang ringkas, yang mengandungi elemen > > dengan elemen rentang > Pendengar acara ini akan dicetuskan apabila pengguna mengklik butang, dan menukar kandungan teks bagi < oleh seorang.

  
    
    
    <script>
      $(document).ready(function(){
        $("#clickButton").click(function(){
          $("span").text("你点击了按钮！");
        });
      });
    </script>
  
  

    
JQuery事件点击修改span内容
    
点击下面的按钮!

    点击这里

    
点这里看看下面会变化！

  
Langkah 2: Pengikatan peristiwa jQuery 

Fungsi $(document).ready() ialah salah satu fungsi khas jQuery, yang digunakan untuk melaksanakan kod kami apabila halaman sudah sedia. Ini bermakna kod di dalam fungsi $(document).ready() akan dilaksanakan sebaik sahaja pepohon DOM dimuatkan. Oleh itu, kami perlu mengikat fungsi untuk acara klik kami dalam blok ini. 
Kami menggunakan $("#clickButton").click() untuk mengikat acara klik, yang akan dicetuskan apabila pengguna mengklik butang dengan ID "clickButton". Ambil perhatian bahawa kami juga boleh menggunakan pemilih kelas atau pemilih teg untuk memadankan elemen HTML, tetapi dalam kes ini, kami menggunakan pemilih ID. 
Di dalam pengendali acara klik, kami menggunakan kaedah $ ("span").text() untuk menukar kandungan teks bagi < span > Kami lulus parameter rentetan dalam kaedah, "Anda mengklik butang!", supaya kami boleh menukar kandungan teks elemen < 
Langkah Tiga: Keputusan Ujian
Sekarang, kami membuka halaman yang mengandungi kod HTML di atas dan klik butang, kami dapat melihat bahawa kandungan teks dalam < , seperti yang ditunjukkan di bawah: 

 Dalam contoh ini kita menggunakan kod jQuery yang sangat asas, tetapi ini memberi kita titik permulaan yang baik untuk memahami cara menggunakan jQuery untuk mengubah suai elemen pada halaman HTML. Jika perlu, anda boleh melanjutkan contoh kod ini untuk memenuhi keperluan anda. 
Atas ialah kandungan terperinci Cara menggunakan jQuery untuk mengubah suai kandungan elemen HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!