6) Hide و Show در جی کوئری

تونل یادگیری جی کوئری

در قسمت های قبلی یادگیری جی کوئری با سلکتور ها (selectors) و رویدادها (events) را در Jquery یاد گرفتیم و از این قسمت به بعد با افکت های جی کوئری آشنا میشویم و آنها را به طور کامل یاد خواهیم گرفت. افکت ها در جی کوئری به صورت توابع نوشته میشوند و اغلب مقادیر ورودی ای میتوان برای آنها در نظر گرفت.

SHOW و HIDE در جی کوئری

در این مقاله متد هایی که مربوط به نمایش و عدم نمایش عناصر در جی کوئری میشه بررسی میکنیم.

متد HIDE

با استفاده از متد ()hide میتوان یک عنصر html  را پنهان کرد. به مثال زیر توجه کنید.

$("button.test).click(function(){
$("p.test").hide();
});

هر گاه بر روی کمه با کلاس test کلیک کنیم، پاراگراف با کلاس test پنهان می شود.

متد SHOW

برای متد های hide و show  میتوان دو مقدار به عنوان پارامتر ورودی در نظر گرفت.

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

مقدار اول سرعت  است، که  به سه طریق قابل مشخص کردن است.

پارامتر Speed در متد های hide و show

۱-slow = عمل پنهان کردن یا نمایش دادن به آرامی انجام میشود.

$("p").hide(“slow”);

۲-fast  = نمایش دادن یا پنهان کردن به سرعت انجام میشود.

$("p").hide(“fast”);

۳-milliseconds = کار نمایش دادن و پنهان کردن در بازه ای از زمان بر حسب میلی ثانیه صورت میگیرد.

$("p").hide(1000);

پارامتر Callback در متد های hide و show

مقدار دوم که callback  است یک پارامتر اختیاری است و به صورت یک تابع است که بعد از کامل شدن عملیات اجرا میشود. در جلسات آینده ی تونل یادگیری جی کوئری به بررسی بیشتر callback میپردازیم.

متد TOGGLE

متد toggle در جی کوئری بین حالت پنهان و نمایان تغییر وضعیت میدهد به طوری که اگر عنصری پنهان باشد، نمایان میشود و اگر نمایان باشد، پنهان میشود. از نظر نوشتاری این متد مانند hide و show می باشد.

$(selector).toggle(speed,callback);

این متد هم دو پارامتر ورودی دارد که دقیقا شبیه به پارامتر های ورودی متد hide و show است.

$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});

درمثال بالا پس از کلیک شدن روی دکمه پاراگراف ها اگر پنهان باشند نمایان میشوند و اگر در حالت نمایان  باشند پنهان می شوند.