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

خانه » بلاگ » jquery » رویداد ready در جی کوئری-درس ششم

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

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

 

هدف از تابع Ready () چیست؟

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

 

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

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

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

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

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

$ ( function ) ;

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

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

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

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

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

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

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