رویداد ready در جی کوئری-درس ششم

آخرین بروز رسانی: شهریور ۱۸, ۱۳۹۶

آموزش جی کوئری (JQuery)

درس ششم : رویداد ready در جی کوئری

در این قسمت از آموزش می خواهیم با رویداد ready ، یکی از پرکاربردترین رویدادهای جی کوئری که تقریبا در هر کد اسکریپتی با آن مواجه هستید آشنا شویم . با وبیار همراه باشید.

رویداد ready در جی کوئری :

در یک صفحه وب زمانی که شی DOM به طور کامل لود شده و همچنین صفحه نیز به طور کامل لود شده باشد ( حتی تصاویر آن ) ،در واقع رویداد ready اتفاق می افتد .
به دلیل اینکه رویداد ready پس از لود شدن کامل صفحه اتفاق می افتد ، می تواند مکان مناسبی برای قرار دادن کدها و توابع جی کوئری باشد .
پس می توانید از این خاصیت رویداد ready استفاده کنید و رویدادها و توابعی که می خواهید به محض تمام شدن عملیات load صفحه ، اجرا شوند را در این تابع قرار دهید .

نحوه استفاده از رویداد ready :

$(document).ready(function(){
...
});

$(document).ready(function(){

...

});

یا می توانید بدون به کار بردن نام سند بر روی صفحه جاری نیز ، تابع را اجرا نمود.

$ ( function ) ;

1	$ ( function ) ;

Document : مقدار document به صفحه جاری اشاره می کند (selector).این پارامتر تعیین کننده صفحه یا سندی است که می خواهیم تابع را در آن اجرا کنیم .

Function : نام تابعی است که می خواهیم به محض لود شدن صفحه ، اجرا شود . (anonymous function)

آموزش رویداد ready در جی کوئری

برای درک بهتر رویداد ready به مثال زیر توجه کنید .

$(document).ready(function()
 
{
 
$("# button1").click(function(){
 
$("#image").animate({height:"۳۰۰px"});
 
});
 
$("# button2").click(function(){
 
$("#image").animate({height:"۱۰۰px"});
 
});
 
});

$(document).ready(function()

{

$("# button1").click(function(){

$("#image").animate({height:"۳۰۰px"});

});

$("# button2").click(function(){

$("#image").animate({height:"۱۰۰px"});

});

در کد بالا همانطور که قبلا گفتیم توابع ، زمانی می توانند اجرا شوند که صفحه بصورت کامل لود شده باشد که این دستور را با رویداد ready به توابع میدهیم ، سپس گفته شده زمانی که روی دکمه button1 کلیک شد ارتفاع image ما به ۳۰۰ پیکسل افزایش پیدا کند ، که وقتی از animate استفاده میکنیم این عمل با افکت انجام میشود. و وقتی روی دکمه button 2 کلیک شدimage ما به حالت اولیه یعنی به ارتفاع ۱۰۰ پیکسل بازمیگردد.

در پایان : سپاس از همراهی شما دوستان عزیز با تیم طراحی سایت وبیار

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