راهنمای سیستم شبکه بندی بوت استرپ
آموزش سیستم شبکه بندی در بوت استرپ در این مطلب از مجموعه آموزش های وب یار می خواهیم سیستم شبکه بندی بوت استرپ ر...
تاریخ بروزرسانی
۸ فروردین ۱۴۰۱
رویداد ready در جی کوئری-درس ششم
درس ششم : رویداد ready در جی کوئری
در این قسمت از آموزش می خواهیم با رویداد ready، یکی از پرکاربردترین رویدادهای جی کوئری که تقریبا در هر کد اسکریپتی با آن مواجه هستید آشنا شویم. با تیم طراحی سایت اصفهان وب یار همراه باشید.
هدف از تابع Ready () چیست؟
متد ready() یک متد داخلی در جی کوئری است که به بارگیری کل صفحه و سپس اجرای بقیه کد کمک می کند. این روش تابعی را مشخص می کند که در زمانی که DOM به طور کامل بارگذاری می شود اجرا شود.
رویداد ready در جی کوئری:
در یک صفحه وب زمانی که شی DOM به طور کامل لود شده و همچنین صفحه نیز به طور کامل لود شده باشد ( حتی تصاویر آن )،در واقع رویداد ready اتفاق می افتد.
به دلیل اینکه این رویداد پس از لود شدن کامل صفحه اتفاق می افتد، می تواند مکان مناسبی برای قرار دادن کدها و توابع جی کوئری باشد.
پس می توانید از این خاصیت رویداد ready استفاده کنید و رویدادها و توابعی که می خواهید به محض تمام شدن عملیات load صفحه اجرا شوند را در این تابع قرار دهید.
نحوه استفاده از رویداد ready :
|
1 2 3 |
$(document).ready(function(){ ... }); |
یا می توانید بدون به کار بردن نام سند بر روی صفحه جاری نیز، تابع را اجرا نمود.
|
1 |
$ ( function ) ; |
Document : مقدار document به صفحه جاری اشاره می کند (selector). این پارامتر تعیین کننده صفحه یا سندی است که می خواهیم تابع را در آن اجرا کنیم.
Function : نام تابعی است که می خواهیم به محض لود شدن صفحه، اجرا شود . (anonymous function)
برای درک بهتر به مثال زیر توجه کنید .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() { $("# button1").click(function(){ $("#image").animate({height:"۳۰۰px"}); }); $("# button2").click(function(){ $("#image").animate({height:"۱۰۰px"}); }); }); |
در کد بالا همانطور که قبلا گفتیم توابع زمانی می توانند اجرا شوند که صفحه بصورت کامل لود شده باشد که این دستور را با رویداد ready به توابع میدهیم، سپس گفته شده زمانی که روی دکمه button1 کلیک شد ارتفاع image ما به ۳۰۰ پیکسل افزایش پیدا کند که وقتی از animate استفاده میکنیم این عمل با افکت انجام میشود. و وقتی روی دکمه button 2 کلیک شدimage ما به حالت اولیه یعنی به ارتفاع ۱۰۰ پیکسل بازمیگردد.
سپاس از همراهی شما دوستان عزیز با تیم طراحی سایت وبیار
فراموش نکنید طراحی سایت وب یار می تواند به شما در راستای رسیدن به اهداف بلندتان در راستای طراحی و بهینه سازی سایت کمک کند.
مقالات مرتبط
طراحی سایت ارزان قیمت در اصفهان با وب یار
تیم طراحی سایت ارزان قیمت اصفهان وب یار هدف ما از طراحی سایت ارزان چیست؟ تحلیل ، طراحی ، برنامه نویسی ، بهینه س...
آموزش کدهای وردپرس در طراحی سایت
آموزش کدهای وردپرس در طراحی سایت با نوشته ها شروع میشوند.این بخش بسیار مهم می باشد. شما می توانید با استفاده از ...