jquery menetapkan tetikus li

jQuery ialah perpustakaan JavaScript popular yang boleh memanipulasi dokumen HTML dan gaya CSS dengan mudah. Apabila menggunakan jQuery, anda selalunya perlu menetapkan acara tetikus, seperti alih tetikus (tetikus masuk) dan tetikus keluar (tetikus keluar). Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan acara alih tetikus li.

1. Sediakan dokumen HTML

Pertama, kita perlu menyediakan dokumen HTML yang mengandungi beberapa elemen li, seperti yang ditunjukkan di bawah:

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

2. Pengenalan Pustaka jQuery

Dalam teg pada dokumen HTML, tambahkan kod berikut untuk memperkenalkan perpustakaan jQuery:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Perhatikan bahawa pautan CDN digunakan di sini, yang boleh mempercepatkan pemuatan halaman.

3. Tulis kod jQuery

Seterusnya, kami menggunakan jQuery untuk menetapkan acara alih tetikus li. Selepas halaman dimuatkan, pilih semua elemen li dan gunakan kaedah alih tetikus untuk menambah pengendali acara:

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  });
});
</script>

Maksud kod ini ialah selepas dokumen dimuatkan, pilih semua elemen li dan tambahkannya apabila tetikus bergerak dalam Tetapkan warna latar belakang kepada kuning. $(this) mewakili elemen li semasa.

4. Uji kesannya

Kami menampal kod lengkap ke dalam dokumen HTML dan membuka halaman dalam penyemak imbas. Apabila tetikus bergerak ke atas elemen li, warna latar belakang elemen akan bertukar kepada kuning.

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

5. Tambah acara tetikus

Selain acara alih tetikus, kita juga boleh menambah acara tetikus, iaitu peristiwa yang dicetuskan apabila tetikus bergerak menjauhi sesuatu unsur. Dalam kod di atas, kita boleh menambah acara keluar tetikus dalam acara alih tetikus:

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  }).mouseout(function(){
    $(this).css('background-color', '');
  });
});
</script>

Maksud kod ini ialah menetapkan warna latar belakang kepada kuning apabila tetikus bergerak ke elemen li dan tetapkan warna latar belakang kepada kuning apabila tetikus bergerak keluar Kembali ke kosong.

6. Kod Penuh

Kod lengkap akhir adalah seperti berikut:

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      }).mouseout(function(){
        $(this).css('background-color', '');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

7. Ringkasan

Artikel ini menerangkan cara Gunakan jQuery untuk menetapkan acara alih tetikus li, menukar warna latar belakang apabila tetikus bergerak masuk dan memulihkan warna latar belakang apabila tetikus bergerak keluar. Melalui contoh ini, kita boleh belajar cara menggunakan jQuery untuk menambah pengendali acara dan cara menggunakan gaya CSS untuk menukar rupa elemen. Dalam pembangunan tapak web sebenar, kami boleh menggunakan acara tetikus dan peraturan gaya yang berbeza mengikut keperluan untuk mencapai kesan interaktif yang lebih kompleks.

Atas ialah kandungan terperinci jquery menetapkan tetikus li. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!