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

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

دسته بندی موضوعات
سفارش تبلیغات

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

Jquery

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

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

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

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

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

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

 

pic

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

 

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

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

 

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

 

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

 

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

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • احمد

    سلام.
    فرق رویداد .ready و .load چیه ؟

    • میترا رحیمی

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

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

      و

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

      موفق باشید .

  • صادق

    باسلام
    ببخشید اگر بخواهیم رویدادی مثلا ۲ ثانیه بعد از لود کامل صفحه اجرا بشه چطوری باید عمل کنم؟!

    • میترا رحیمی

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

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

  • امید

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

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

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟