آموزش طراحی وب

رویداد ( )ready در جی کوئری

در این جلسه ی آموزشی رویداد ()ready رو بررسی می کنیم .

Jquery

فصل سوم ( Event ها در جی کوئری )

جلسه دوم : رویداد ()ready  در JQuery

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

در این فصل تمامی رویدادهارو بهتون معرفی می کنم . تو این جلسه میخوام راجع به رویداد  ready صحبت کنم . مثل میشه بدون حاشیه میریم سر اصل مطلب .

به دلیل اینکه رویداد ( ) ready پس از لود شدن کامل صفحه اتفاق میوفته ، مکان مناسبی برای قرار دادن کدها و توابع jQuery است .

شما می تونید رویدادها و توابعی رو که می خواین به محض تمام شدن عملیات load صفحه ، اجرا شوند در این تابع قرار بدید.

 

pic

شکل کلی این رویداد به صورت زیر هست :

 

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

Function : فانکشن هم به این موضوع اشاره می کنه که وقتی صفحه لود شد توابعی که داخل {} قرار داره اجرا بشه.

 

برای درک بهتر از این رویداد به مثال زیر دقت کنید :

 

خوب بیاید باهم این کد رو بررسی کنیم ، اول اینکه گفتیم توابع ، زمانی می تونن اجرا بشن که صفحه بصورت کامل لود شده باشه که این دستور و با رویداد ready به توابع میدیم ، بعد از اون ، گفتیم زمانی که روی دکمه btn1 کلیک شد ارتفاع box ما به ۳۰۰ پیکسل افزایش پیدا کنه ، که وقتی از animate استفاده میکنیم این عمل با افکت انجام میشه . و وقتی روی دکمه btn2 کلیک شد box ما به حالت اولیه یعنی به ارتفاع ۱۰۰ پیکسل برمیگرده .

 

این بود تعریف ساده ی رویداد ready() ، در جلسات آتی تمامی رویدادهارو بررسی می کنیم .

فایل این جلسه در پیوست آماده دانلود می باشد ، آن را دریافت و برای درک بهتر مشاهده کنید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۷

    • سلام دوست عزیز
      بصورت استاندارد از رویدادهایی که نام بردید به شکل زیر استفاده میشه :

      $(document).ready(function(){
      زمانی اجرا میشه که html document یا سند اچ تی ام ال شما به طور کامل لود شده باشه .
      });

      و

      $(window).load(function(){
      زمانی اجرا میشه که تمام صفحه با تمامی عناصر از جمله iframe ها , image ها و … بصورت کامل لود شده باشن .
      });

      موفق باشید .

    • سلام دوست عزیز
      برای اینکه متوجه بشید براتون یه نمونه کد مینویسم:

      ما در اینجا یه فانکشن تعریف کردیم که یه عملی و انجام میده . بعد گفتیم این عمل بعد از اینکه صفحه لود شد بعد از ۳ ثانیه اجرا بشه .
      کد رو کپی کنید و اجرا کنید.
      از این به بعد سوالاتتون رو از طریق بخش پرسش و پاسخ مطرح کنید ممنونتون میشم که دوستان دیگه هم بتونن استفاده کنند .
      موفق و پیروز باشید .

  • با سلام و خسته نباشید خدمت شما
    اموزش ها خیلی عالیه فقط اگه ممکنه مثل ها رو داخل فایل جدا نزارید همون پایین باشه خیلی خوبه.
    با تشکر

  • سلام من وقتی از این ready استفاده میکنم اجرا نمیشه از اینکه جی کوئری به خوبی لود شده باشه مطمعنم

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین