illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ترفندهای پیشرفته jQuery (قسمت اول)

6 1475 ۲۱ شهریور ۹۴

همونطور که میدونین jQuery یکی از محبوبترین کتابخانه های Javascript هست و تعداد زیادی از طراحان وب از اون استفاده میکنن. در این سری آموزشی میخایم تعدادی نکات و ترفند پیشرفته رو در اختیار شما قرار بدیم که دونستن اونا میتونه به شما کمک کنه.jquery trickshot

موضوع اول : دستکاری در DOM

ترفند 1 : رویداد DOM Ready

اولین قدم در دستکاری DOM این است که رویداد Ready رو روبراه کنیم و کاری کینم که کدهای مورد نظر ما بعد از اینکه DOM بطور کامل لود شد ، اجرا بشن. این نه تنها یک قرارداد هست ، بلکه میتونه به شما تضمین بده که کدهای شما فقط در صورتی که همه المنتها در دسترس بودن ، اجرا بشه. شاید شما با تعدادی از روشهای اون آشنا باشید ، اما در این ترفند یک راه به شما نشون داده میشه که میتونین بدون jQuery هم اینکارو انجام بدین و در همه مرورگرها هم پشتیبانی بشه.

با jQuery:

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

روش کوتاهتر با jQuery:

با این روش هم اکثرا کم و بیش آشنا هستید و نیازی به توضیح نداره.

بدون jQuery (در مرورگرهای قدیمی پشتیبانی نمیشه)

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

ترفند پیشرفته : بدون jQuery (در همه جا پشتیبانی میشه)

اگر این کد رو اجرا کنید در مرورگرهای خیلی قدیمی هم بخوبی اجرا میشه و اصلا نیازی به jQuery نداره. این یک ترفند هست که در این لینک بصورت کامل توضیح داده شده است. روشش اینه که میاد و خصوصیت readyState از عنصر document رو چک میکنه. بعد از اون با استفاده از یک عبارت منظم بررسی شده که رشته in در پاسخ document.readyState وجود داره یا نه. اگر پاسخ document.readyState بصورت Loading باشه ، در نتیجه in در اون وجود داره و بعد از 9 میلی ثانیه توسط setTimeout دوباره چک میشه و بعد از اینکه Loading به پایان رسید کدهای مورد نظر شما اجرا میشه. در بالا یک alert نشون داده میشه.

ترفند 2 : اجرای مجموعه کدهای مشخص در URL خاص

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

در ابتدا باید یک متغیر بنام route تعریف کنیم و ویژگی ها و متدهایی برای اون قرار بدیم. بصورت زیر:

اگر با شئ گرایی آشنا باشید ، راحت میتونین معنی کد بالا رو درک کنید. میبینید که یک متغیر از نوع آرایه بنام _routes تعریف شده که کارش اینه که مسیرها و URL ها رو در خودش ذخیره کنه.

بعد از اون یک متد بنام add تعریف شده که دو پارامتر url و action رو دریافت میکنه و با اجرا شدن هر بار متد add یک عضو به آرایه _routes اضافه میشه که اندیس اون url و مقدار اون تابع action خواهد بود.

تابع run هم وظیفش اینه که function هایی که مرتبط با مسیر خاص هستن رو اجرا کنه.

برای اضافه کردن یک عضو به آرایه مورد نظر بصورت زیر عمل میکنیم:

همونطور که دیدین اول متد add فراخوانی شده و دو آرگومان به اون فرستاده شده. اولی مسیری هست که باید کد مد نظر در اون اجرا بشه و دومین آرگومان تابعی هست که در زمان فراخوانی این مسیر اجرا خواهد شد.

حالا اگر از متد run استفاده کنیم ، اگر در صفحه مورد نظر باشیم که در اون jquery.html باشه  کد مورد نظر اجرا میشه و یک alert به ما داده میشه.

همچنین میتونین از عبارات منظم هم استفاده کنید و بگید که مسیرهایی که با این Regex مطابقت دارن ، این کد رو اجرا بکنن. بصورت زیر:

این کد در همه صفحات اجرا میشه چون از * استفاده شده و با همه چیز مطابقت داره. برای استفاده از عبارات منظم در URL میتونین از این لینک کمک بگیرید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمدحسین(۲۴ آذر ۱۳۹۴)

    سلام
    تشکر بابت روندی که پیش گرفتین و آموزش های مرتبی که ارائه می دین.
    من از ترفند دوم شما استفاده کردم در ابتدا جواب گرفتم فقط می خواستم این کارو بکنم :
    یک صفحه دارم با عنوان page.html که داخل اون تگ a و رویداد onClick=”a_click()” قرار دادم می خوام برای این رویداد فراخوانی انجام بدم ولی به هنگام Load صفحه این فراخوانی انجام می شه.
    به این صورت درسته :

    اما در هنگام لود صفحه پیغام میاد! من می خوام به ازای رویداد کلیک عمل انجام بشه.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram