متد hide و show در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی دستور hide و show

دانلود فیلم و آموزش ویدئویی دستورات hide و show در جی کوئری . در این فیلم با این دو دستور آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش متدهای hide و show و toggle و fadeToggle در جی کوئری همراه با چندین مثال و توضیح کامل . کدها همه تست شده میباشد کافی است آنها را در یک فایل html ذخیره کرده و اجرا کنید تا نتیجه را ببینید.

دستور hide در جی کوئری

در این بخش از آموزش جاوا اسکریپت و جی کوئری از تاپ سایت 98 به سراغ دستور hide در جی کوئری میرویم.

متد hide در جی کوئری (jquery) برای مخفی کردن عناصر html بکار می رود.

در بخش زیر با سینتکس متد hide آشنا می شوید.

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

ابتدا علامت $ و سپس عنصر دلخواه ، سپس دستور یا متد hide و سپس speed یا سرعت مخفی شدن و در انتها نیز می توانید یک تابع معرفی کنید که اصطلاحا به آن callback می گویند.

مثال متد hide

مثال متد hide در جی کوئری را مشاهده می کنید.

ابتدا کد زیر را در یک فایل با پسوند html ذخیره کرده و حتما فایلی با نام jquery.js را در کنار فایل html قرار دهید وگرنه کد اجرا نخواهد شد.

ما یک تگ h1 را در کد قرار دادیم.

حال می خواهیم با متد hide آن را مخفی کنیم. پس طبق مثال زیر آن را فراخوانی کرده و با متد hide آن را پنهان می کنیم.

<!DOCTYPE html>
<html>
<head>
<script src=" jquery.js"></script>
<script>
$(document).ready(function(){
$("#h").click(function(){
$("h1").hide();
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<button id="h">Hide</button>
</body>
</html>

متد show در جی کوئری

دستور show در جی کوئری برای نمایش عنصر مخفی شده استفاده می شود.

برای نمایش عناصر مخفی شده از متد show استفاده می کنیم.

در زیر با سینتکس متد show در جی کوئری آشنا می شوید.

ابتدا $ و سپس نام عنصر و متد show و سپس سرعت نمایش و در صورت تمایل callback را قرار می دهید.

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

مثال متد show

در بخش زیر مثال متد show را مشاهده می کنید.

در مثال بالا ، ما یک عنصر h1 را مخفی کردیم حال قصد داریم با متد show آن را نمایش دهیم.

کد زیر را در یک فایل html قرار داده و تست نمایید.

حتما یک فایل جی کوئری را در کنار فایل قرار دهید وگرنه کد اجرا نمیشود.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#h").click(function(){
$("h1").hide();
});
$("#s").click(function(){
$("h1").show();
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<button id="h">Hide</button>
<button id="s">Show</button>
</body>
</html>

متد toggle در جی کوئری

متد toggle در جی کوئری کار هر دو متد hide و show را انجام می دهد یعنی با یک کلیک عنصر مخفی و با کلیک دوم عنصر نمایش داده می شود.

سینتکس متد یا دستور toggle را در قسمت پایین مشاده می کنید.

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

مثال زیر را ببینید.

در مثال زیر فقط یک دکمه را مشاهده می کنید. با کلیک روی دکمه تگ h1 مخفی و با کلیک دوم تگ h1 نمایش داده می شود.

متد toggle کاربرد فراوانی در طراحی سایت دارد.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").toggle();
});
});
</script>
</head>
<body>
<h1>TopSite98.com</h1>
<button>toggle</button>
</body>
</html>

متد fadetoggle در جی کوئری

متد fadetoggle در جی کوئری را در قالب یک مثال توضیح می دهیم.

در این مثال ما دو دکمه قرار داده ایم.

با کلیک روی دکمه سمت چپ ، تگ h1 مخفی می شود و با کلیک دوم نمایش داده می شود.

دکمه سمت راست یک کار اضافه تر انجام می دهد و آن اضافه کردن یک callback است.

با کلیک روی دکمه سمت راست ، بجز مخفی شدن تگ h2 یک div نیز به صفحه اضافه می شود.

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<button>toggle h1</button>
<button>toggle h2</button>
<h1>TopSite98.com</h1>
<h2>topsite98</h2>
<div id="dd"></div>
<script>
$( "button:first" ).click(function() {
$( "h1" ).fadeToggle(2000);
});
$( "button:last" ).click(function() {
$( "h2" ).fadeToggle( "slow", function() {
$( "#dd" ).append( "<div>finished</div>" );
});
});
</script>
</body>
</html>

کدها همه تست شده است. می توانید آنها را در فایل html ذخیره کنید و تست نمایید.

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید