Bagaimana untuk menggunakan jQuery untuk menyembunyikan elemen li dalam ul

jQuery ialah perpustakaan JavaScript popular yang boleh memanipulasi elemen HTML dengan beberapa kod mudah. Dalam reka bentuk web, senarai sering digunakan, seperti ul, ol, dsb. Dalam sesetengah kes, kita perlu menyembunyikan elemen senarai ini, dalam hal ini kita perlu menggunakan fungsi hide() jQuery. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk menyembunyikan elemen li dalam ul.

1. Memperkenalkan perpustakaan jQuery

Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Kami boleh memuat turun versi terkini fail jQuery dari laman web rasmi https://jquery.com/ dan memperkenalkannya dalam fail HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

supaya kami boleh menggunakan perpustakaan jQuery dalam halaman web .

2. Struktur HTML

Seterusnya, kita perlu mencipta senarai ul dan menambah beberapa elemen li di dalamnya. Berikut ialah kod HTML untuk contoh:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

3. Sembunyikan elemen li menggunakan jQuery

Selepas memperkenalkan perpustakaan jQuery dalam fail HTML dan mencipta senarai ul , kita boleh menggunakan Kod berikut menyembunyikan elemen li:

$(document).ready(function(){
  $("li").hide();
});

Dalam kod di atas, $(document).ready() ialah fungsi jQuery yang biasa digunakan, yang digunakan untuk melaksanakan kod selepas halaman dimuatkan. $("li") digunakan untuk memilih semua elemen li Simbol $ ialah pintasan untuk jQuery, yang bersamaan dengan melaksanakan jQuery("li"). .hide() ialah fungsi yang disediakan oleh jQuery untuk menyembunyikan elemen.

4. Nyatakan elemen li untuk disembunyikan

Dalam aplikasi praktikal, kita mungkin hanya perlu menyembunyikan beberapa elemen li, bukan semua. Pada masa ini, kita boleh menggunakan pemilih CSS untuk menentukan elemen untuk disembunyikan. Sebagai contoh, kita boleh menggunakan kod berikut untuk menyembunyikan elemen li kedua:

$(document).ready(function(){
  $("li:nth-child(2)").hide();
});

Dalam kod di atas, :nth-child(2) bermaksud memilih elemen li kedua dalam senarai ul.

5. Kesimpulan

Menggunakan fungsi hide() jQuery boleh menyembunyikan elemen li dalam senarai ul dengan mudah. Kita boleh memilih untuk menyembunyikan semua atau menentukan elemen untuk disembunyikan. Dalam reka bentuk web, operasi ini sangat biasa Melalui kaedah ini, kita boleh mengawal paparan dan penyembunyian kandungan web dengan lebih fleksibel.

Artikel ini hanya memperkenalkan penggunaan asas jQuery untuk menyembunyikan elemen li dalam senarai ul Pembaca boleh menjalankan lebih banyak penerokaan dan penyelidikan mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan jQuery untuk menyembunyikan elemen li dalam ul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!