نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3481
تاریخ بروزرسانی ۸ فروردین ۱۴۰۱

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

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

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

 

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

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

 

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

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

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

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

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

$ ( function ) ;

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

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

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

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

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

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

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

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

مقالات مرتبط
بهترین راهکار برای رفع محدودیت فالو در اینستاگرام

انواع محدودیت های حال حاضر در اینستاگرام • محدودیت فالوو کردن سایر کاربران اینستاگرام: • محدودیت لایک کردن پست‌های مختلف کاربران اینستاگرام: • محدودیت کامنت گذاشتن برای پست‌های مختلف شبکه اینستاگرام: • محدودیت به کار بردن هشتگ در پست‌های مختلف شبکه اینستاگرام: • محدودیت تعداد کلمات متن (کپشن) پست اینستاگرام: • محدودیت تعداد کاراکترهای Biography کاربران اینستاگرام: هدف از فالو و آنفالو کردن در اینستاگرام…

شرکت های طراحی اپلیکیشن

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…