سلام. به قسمت ششم آموزش جیکوئری خوش آمدید. در جلسه قبل با آموزش رویدادهای مرتبط با کیبورد آشنا شدید. در این جلسه قصد داریم تا به آموزش متدهای hide() و show() و toggle() در جیکوئری بپردازیم. پس همراه ما باشید.
متدهای hide و show در جی کوئری
یکی از قابلیت های مهم در جی کوئری ایجاد افکت های زیبا و کاربردی در صفحه وب است که این روند در جی کوئری به راحتی و آسانی انجام می گیرد. یکی از این افکت های پرکاربرد در jquery نمایش دادن (show) عناصر مخفی و همچنین مخفی کردن (hide) عناصر صفحه می باشد. در ادامه به توضیح هر یک از متدهای hide و show در جی کوئری می پردازیم.
متد hide() در جی کوئری
این متد جهت مخفی کردن عناصر صفحه توسط جی کوئری استفاده می شود. نگارش یا سینتکس متد hide به شکل زیر می باشد:
$(selector).hide(speed,callback);
متد show() در جی کوئری
متد show جهت نمایش عناصر مخفی صفحه توسط جی کوئری استفاده می شود. نگارش یا سینتکس مند show به شکل زیر می باشد:
$(selector).show(speed,callback);
متد toggle() در جی کوئری
توسط متد toggle امکان تغییر وضعیت بین دو متد hide و show را خواهید داشت. به این معنی که توسط متد toggle می توانید عناصر مخفی در صفحه را نمایش دهید و یا عناصر نمایش داده شده در صفحه را مخفی کنید. بستگی به وضعیت hide یا show بودن عنصر دارد. سینتکس یا نگارش این متد به شرح زیر است:
$(selector).toggle(speed,callback);
- پارامتر speed : این پارامتر در هر دو متد hide و show اختیاری می باشد. توسط این پارامتر می توانید سرعت مخفی شدن یا نمایش دادن عنصر مربوطه را تعیین کنی. مقدار این پارامتر می تواند کلمات کلیدی "slow" , "fast" یا عددی بر حسب میلی ثانیه باشد.
- پارامتر callback : این پارامتر در هر دو متد hide و show اختیاری می باشد. توسط این پارامتر می توانید یک تابع را پس از اجرا شدن کامل متدهای hide و show اجرا کنید.
در مثال های زیر پس از فشردن دکمه button عناصر مربوطه مخفی و نمایش داده می شوند.
$(document).ready(function(){ $("button").click(function(){ $("p").show(1000); }); });
در مثال بالا پس از فشردن دکمه button کلیه تگ های <p> مخفی در صفحه با سرعت 1000 میلی ثانیه نمایش داده می شوند
$("button").click(function(){ $("p").toggle("slow "); });
در مثال بالا پس از فشردن دکمه button کلیه تگ های <p> مخفی در صفحه با سرعت آهسته نمایش داده می شوند و کلیه تگ های <p> نمایان در صفحه مخفی می شوند.
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
در مثال بالا پس از فشردن دکمه button کلیه تگ های <p> نمایان در صفحه مخفی می شوند.
