jquery menunjukkan kesan sembunyi

jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh digunakan untuk meningkatkan interaktiviti tapak web. Salah satu kesan biasa adalah untuk menunjukkan dan menyembunyikan elemen Berikut akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mencapai kesan ini.

Pertama sekali, dalam HTML, perlu ada elemen untuk disembunyikan atau ditunjukkan, yang boleh berupa sebarang teg seperti div, span, p, dsb. Contohnya, kod berikut mencipta dua butang dan elemen div:

<button id="show">显示</button>
<button id="hide">隐藏</button>

<div id="target">
  <p>这是要隐藏或显示的内容</p>
</div>

di mana atribut id digunakan untuk mengenal pasti elemen dan digunakan dalam kod JavaScript di belakang.

Seterusnya, dalam JavaScript, anda perlu menggunakan perpustakaan jQuery untuk memilih elemen dan menambah pengendali acara untuknya. Dalam contoh ini, elemen div perlu ditunjukkan atau disembunyikan apabila butang diklik. Berikut ialah kod untuk mencapai kesan ini:

$(document).ready(function() {
  $("#show").click(function() {
    $("#target").show();
  });
  $("#hide").click(function() {
    $("#target").hide();
  });
});

Kod di atas dibahagikan kepada dua bahagian. Pertama, dalam fungsi $(document).ready, dua pengendali acara klik ditentukan. $("#show")Elemen butang dengan id "tunjukkan" dipilih, $("#hide")Elemen butang dengan id "sembunyikan" dipilih. Pemilih ini mengembalikan objek jQuery yang kaedahnya boleh dipanggil untuk menambah pengendali acara.

Kedua, apabila butang diklik, pengendali yang sepadan akan dicetuskan. $("#target")Elemen div dengan id "sasaran" dipilih dan kaedah show() atau kaedah hide() dipanggil untuk menunjukkan atau menyembunyikan elemen.

Perhatikan bahawa simbol $ digunakan di sini. Ini kerana perpustakaan jQuery mentakrifkan simbol $ dalam skop global. Anda boleh menggunakan notasi ini dan bukannya jQuery dan memendekkan kod anda. Contohnya, $("#target") bersamaan dengan jQuery("#target").

Selain itu, kaedah show() dan hide() menerima beberapa parameter pilihan untuk mengawal cara menunjukkan atau menyembunyikan. Contohnya, anda boleh menggunakan $("#target").show("slow") untuk menghidupkan paparan secara perlahan. Begitu juga, anda boleh menggunakan $("#target").hide(1000) untuk membuat animasi sorok bertahan selama 1 saat.

Selain kaedah show() dan hide(), jQuery juga menyediakan beberapa kaedah lain untuk mengawal keterlihatan elemen. Sebagai contoh, kaedah fadeIn() dan kaedah fadeOut() membuat elemen pudar masuk dan keluar. Kaedah slideDown() dan slideUp() boleh membuat elemen slaid ke bawah dan runtuh. Apabila menggunakan kaedah ini, anda boleh menggunakan parameter yang sama seperti kaedah show() dan hide() untuk mengawal kesan animasi.

Akhir sekali, jika anda ingin menukar antara keadaan paparan elemen, anda boleh menggunakan kaedah toggleClass(). Contohnya, kod berikut mencipta butang togol yang, apabila diklik, sama ada menunjukkan atau menyembunyikan elemen div:

<button id="toggle">切换</button>

<div id="target">
  <p>这是要隐藏或显示的内容</p>
</div>

Kod JavaScript adalah seperti berikut:

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#target").toggleClass("hidden");
  });
});

Di sini kelas CSS tersembunyi ialah digunakan untuk Mengawal paparan dan menyembunyikan elemen. Apabila elemen div mempunyai kelas ini, ia akan disembunyikan. Dan apabila tiada kelas sedemikian, ia akan dipaparkan. Kaedah toggleClas bertukar antara dua keadaan elemen.

Atas ialah kandungan terperinci jquery menunjukkan kesan sembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!