Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana jquery memaparkan keterlihatan

Bagaimana jquery memaparkan keterlihatan

WBOY
WBOYasal
2023-05-12 09:39:36811semak imbas

Cara jQuery memaparkan keterlihatan

Keterlihatan ialah sifat CSS yang mengawal sama ada sesuatu elemen boleh dilihat. Dalam pembangunan web, kita selalunya perlu mengawal atribut keterlihatan sesuatu elemen untuk mencapai kesan dinamik yang kompleks.

Dalam jQuery, kita boleh menggunakan kaedah .css() untuk mendapatkan atau menetapkan gaya elemen, termasuk keterlihatan. Khususnya, dalam jQuery, kita boleh menunjukkan atau menyembunyikan elemen dalam cara berikut:

  1. Tunjukkan elemen: $(element).css({ visibility: 'visible' });
  2. Sembunyikan elemen: $(element).css({ visibility: 'hidden' });
  3. Togol keadaan paparan elemen: $(element).toggle();

Di mana, $(elemen) ialah objek jQuery bagi elemen yang akan dikendalikan. Berdasarkan kod di atas, kita dapati bahawa dalam jQuery, kita boleh mengawal secara langsung paparan atau keadaan elemen tersembunyi dengan mengendalikan sifat CSS.

Selain kaedah di atas, jQuery juga menyediakan beberapa kaedah lain yang boleh membantu kami mengendalikan operasi berkaitan keterlihatan dengan lebih mudah. Di bawah, kami memperkenalkan kaedah ini satu demi satu.

  1. .show() dan .hide()

Kaedah .show() dan .hide() adalah serupa dengan kaedah .css(), mereka boleh dikawal oleh CSS Properties untuk mengawal keadaan elemen yang ditunjukkan atau tersembunyi. Walau bagaimanapun, tidak seperti kaedah .css(), kaedah .show() dan .hide() juga boleh mengawal ketinggian dan lebar elemen, serta beberapa sifat berkaitan keterlihatan, seperti kelegapan. Khususnya, apabila menggunakan kaedah .show() atau .hide(), anda boleh menulis seperti ini:

Tunjukkan elemen: $(element).show();
Sembunyikan elemen: $( element).hide();

  1. .fadeIn() dan .fadeOut()

.fadeIn() dan .fadeOut() kaedah digunakan dalam jQuery untuk melaksanakan Bagaimana untuk pudar masuk dan keluar kesan. Prinsip pelaksanaan adalah untuk mengawal ketelusan elemen dengan mengubah suai atribut kelegapan, dengan itu mencapai kesan fade-in dan fade-out bagi elemen tersebut. Khususnya, apabila menggunakan kaedah .fadeIn() atau .fadeOut(), anda boleh menulis seperti ini:

Fade in an element: $(element).fadeIn();
Fade out an element: $( element).fadeOut();

  1. .slideDown() dan .slideUp()

.slideDown() dan .slideUp() kaedah digunakan dalam jQuery untuk melaksanakan Kaedah untuk kesan seperti menu lungsur turun dan panel lipat. Kaedah ini mencapai kesan menunjukkan dan bersembunyi dengan mengubahsuai ketinggian elemen. Khususnya, apabila menggunakan kaedah .slideDown() atau .slideUp(), anda boleh menulis seperti ini:

Kembangkan elemen: $(element).slideDown();
Runtuhkan elemen: $( element).slideUp();

Ringkasan

Setakat ini, kami telah memperkenalkan kaedah utama untuk mengawal paparan dan keadaan tersembunyi elemen dalam jQuery Ia adalah:

  1. Kawal atribut keterlihatan elemen secara langsung melalui kaedah .css()
  2. Kawal atribut keterlihatan, ketinggian, lebar dan kelegapan elemen melalui kaedah .show() dan .hide() ;
  3. Melalui kaedah .fadeIn() dan .fadeOut() mengawal sifat kelegapan elemen
  4. mengawal sifat ketinggian elemen melalui .slideDown() dan .slideUp( ) kaedah.

Dalam pembangunan sebenar, kita perlu memilih kaedah yang sesuai untuk mengawal paparan dan keadaan tersembunyi elemen mengikut keperluan khusus untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci Bagaimana jquery memaparkan keterlihatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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