Rumah > hujung hadapan web > tutorial js > 5 sintaks jQuery asas berguna

5 sintaks jQuery asas berguna

Christopher Nolan
Lepaskan: 2025-03-08 00:02:23
asal
705 orang telah melayarinya

3

1) Sembunyikan/tunjukkan 5 Useful Basic jQuery Syntax Ini digunakan untuk menyembunyikan atau menunjukkan elemen HTML tanpa kesan. Gunakan ini jika anda ingin menyembunyikan atau menunjukkan beberapa elemen HTML dengan cepat.

5 sintaks jQuery asas berguna sintaks:

menyembunyikan (), tunjukkan ()

  • Contoh: Demo Langsung: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide 2) Pudar dalam/pudar Ini melibatkan bersembunyi dan menunjukkan elemen HTML menggunakan kesan pudar yang baik. Ia digunakan dengan baik apabila anda ingin menunjukkan atau menyembunyikan div dan kandungannya dengan cara yang baik.
sintaks:
<span>$(document).ready(function(){
</span>	<span>$(".btn1").click(function(){
</span>		<span>$("p").hide();
</span>	<span>});
</span>	<span>$(".btn2").click(function(){
</span>		<span>$("p").show();
</span>	<span>});
</span><span>});</span>
Salin selepas log masuk

fadein (), fadeout ()

  • Contoh: Demo Langsung: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein
3) Berhenti
<span>$(document).ready(function(){
</span>	<span>$(".btn1").click(function(){
</span>		<span>$("p").fadeOut()
</span>	<span>});
</span>	<span>$(".btn2").click(function(){
</span>		<span>$("p").fadeIn();
</span>	<span>});
</span><span>});</span>
Salin selepas log masuk
Jika anda mahu berhenti sekarang menjalankan animasi hanya gunakan ini.
    sintaks:

stop ()

  • Contoh: Demo Langsung: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop 4) Animate Sintaks yang bagus yang membuat perubahan kepada elemen dari satu negeri ke negeri yang lain dengan gaya CSS. Ia hanya secara beransur -ansur mengubah nilai harta CSS, yang akan menghasilkan kesan animasi.
sintaks:
<span>$(document).ready(function(){
</span>	<span>$("#start").click(function(){
</span>		<span>$("div").animate({height:300},3000);
</span>	<span>});
</span>	<span>$("#stop").click(function(){
</span>		<span>$("div").stop();
</span>	<span>});
</span><span>});</span>
Salin selepas log masuk

animate ()

  • Contoh: Demo Langsung: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate 5) Slaid togol Sintaks ini sangat digunakan di pelbagai laman web yang menggunakan jQuery. Idealnya hanya untuk menyembunyikan dan menunjukkan elemen HTML, tetapi dalam kesan gelongsor yang sangat bagus seperti menu bar sebelah kiri di kawasan pentadbir di laman web WordPress yang tipikal.
sintaks:
<span>$(document).ready(function()
</span><span>{
</span>	<span>$("#btn1").click(function(){
</span>		<span>$("#box").animate({height:"300px"});
</span>	<span>});
</span>	<span>$("#btn2").click(function(){
</span>		<span>$("#box").animate({height:"100px"});
</span>	<span>});
</span><span>});</span>
Salin selepas log masuk

slidetoggle ()

    Contoh:
  • Demo Langsung: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle Soalan Lazim (Soalan Lazim) Mengenai Sintaks JQuery Apakah sintaks asas jQuery?
  • Sintaks asas jQuery direka untuk memilih elemen HTML dan melakukan beberapa tindakan pada elemen. Ia ditulis sebagai $ (pemilih) .Action (). Di sini, tanda dolar ($) mentakrifkan atau mengakses jQuery, (pemilih) mendapati unsur -unsur HTML, dan .ction () kemudian dilakukan pada elemen. Sebagai contoh, $ ("p"). Sembunyikan () - menyembunyikan semua elemen perenggan. Ia memastikan bahawa kod JavaScript tidak berjalan sehingga dokumen dimuatkan sepenuhnya. Ini penting kerana jika kod jQuery anda berjalan sebelum dokumen dimuatkan sepenuhnya, ia mungkin tidak berfungsi dengan baik. Sintaks untuk ini adalah $ (dokumen). Ready (function () {// jQuery methods Go Here ...});

Apakah tujuan $ tanda dalam jQuery?

Tanda $ adalah alias untuk jQuery. Ia digunakan untuk menentukan atau mengakses jQuery. Jika anda menggunakan perpustakaan JavaScript yang lain yang menggunakan tanda $, anda boleh menggunakan jQuery.Noconflict () untuk mengelakkan konflik. Anda boleh memilih elemen dengan nama tag, nama kelas, id, atribut, atau kedudukan relatifnya dalam HTML. Sebagai contoh, untuk memilih semua elemen perenggan, anda akan menggunakan $ ("p"). Sebagai contoh, anda boleh menggunakan kaedah .hide () untuk menyembunyikan elemen yang dipilih, atau kaedah .show () untuk memaparkannya. Kaedah ini dipanggil pada unsur -unsur yang dipilih, seperti SO: $ ("P"). Sembunyikan (). Ini bermakna anda boleh melakukan pelbagai tindakan pada set elemen yang sama, semuanya dalam satu pernyataan. Sebagai contoh, $ ("P"). CSS ("Warna", "Merah"). SLIDEUP (2000). Ini termasuk tindakan pengguna seperti klik atau tekanan utama, atau perkara seperti pemuatan dokumen. Anda boleh bertindak balas terhadap peristiwa -peristiwa ini dengan fungsi, yang membolehkan anda membuat aplikasi web yang dinamik dan interaktif. Anda boleh menggunakan // untuk satu komen baris, atau / * * / untuk komen berbilang baris. Komen diabaikan oleh penyemak imbas dan boleh digunakan untuk membuat nota atau menerangkan kod anda. Ini boleh menjadi salinan tempatan, atau anda boleh menghubungkan ke versi yang dihoskan pada CDN. Tag skrip harus diletakkan di kepala HTML anda, atau tepat sebelum tag badan penutup. Ia menyediakan API yang lebih mudah, lebih mesra pengguna untuk bekerja dengan dokumen HTML, mengendalikan acara, mewujudkan animasi, dan banyak lagi. Walaupun anda boleh melakukan semua perkara ini dengan JavaScript biasa, jQuery menjadikannya lebih mudah dan berfungsi merentasi banyak pelayar.

Atas ialah kandungan terperinci 5 sintaks jQuery asas berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan