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

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 274 ۴ آبان ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع چهارم : ماهر شدن در JQuery

ترفند 51 : کار کردن با متد grep

همونطور که jQuery قدرت زیادی برای دستکاری کردن در Dom داره و همچنین کار با Event هارو راحتتر کرده ، توابع مفید و کاربردی نیز برای کار با آرایه ها در خودش قرار داده. یکی از اون توابع grep هست که میاد با استفاده از callback المنتهای آرایه رو فیلتر میکنه. برای روشن شدن موضوع مثالی رو براتون میزنم:

کدهای JS:

اول یک متغیر تعریف میکنیم و یک آرایه رو به اون نسبت میدیم:

اگر اعداد قرار داده شده در آرایه بالا ، روزهای یک ماه باشن ، چه روزهایی یکشنبه خواهد بود؟

با استفاده از متد grep میشه فیلتر قرار داده و کاری کنیم که به پاسخ سوالمون برسیم:

میبینید که در ابتدا یک متغیر تعریف کردیم و میخایم عددهایی که در آرایه روز یکشنبه رو نشون میدن مشخص کنیم. برای این کار از متد grep استفاده میکنیم. به عنوان پارامتر اول آرایه تعریف شده رو قرار میدیم و بعد از اون یک تابع قرار میدیم که نقش callback داره و به ازای هر عضو آرایه یکبار اجرا میشه. در هر بار اجرا تابع یک متغیر از نوع زمان ایجاد میشه و اون المنت جاری آرایه درونش قرار داده میشه و بعد از اون یک شرط در مقابل return قرار میگیره. اگر متد getDay برابر با 0 باشه به این معنی هست که روز یکشنبه هست و این عبارت منطقی برابر با true خواهد شد. در هر بار تکرار تابع callback ، هر المنتی که نتیجه true رو برگشت بده ، از فیلتر عبور میکنه و در آرایه sundays قرار میگیره. حالا متغیر sundays رو چاپ میکنیم تا نتیجه رو ببینیم:

میبینید که در ابتدا با استفاده از متد join ، المنتهای موجود در آرایه sundays رو به رشته تبدیل کردیم و بعد از اون ، در Console چاپش کردیم. خروجی:

با استفاده از این متد میتونین کارهای جالب دیگه ای هم انجام بدین.

ترفند 52 : مرتب کردن المنتها در یک مجموعه jQuery

این ترفند حول متد sort موجود در jQuery میچرخه. کار کردن با این ترفند شباهت زیادی با مرتب کردن آرایه ها داره. مثال زیر موضوع رو براتون روشنتر میکنه:

کدهای HTML:

میبینید که یک دکمه و یک لیست قرار دادیم. میخایم کاری کنیم که با کلیک بر روی دکمه بصورت صعودی اعداد مرتب بشن.

کدهای JS:

در ابتدا یک رویداد کلیک برای دکمه مورد نظر تعریف کردیم. یک متغیر تعریف کردیم و تمام li هارو به اون نسبت دادیم. بعد از اون برای همه اونا متد sort رو فراخوانی کردیم. این متد باعث میشه که دو عضو دو عضو ، اعضا رو به تابع درونش پاس بده. درون تابع در ابتدا اعدادی که درون li بصورت رشته ای هستن رو به عدد صحیح تبدیل میکنه. این کار برای اینه که مرتب کردنمون صحیح بشه و صعودی بشه. بعدش میاد دو به دو المنتها رو بررسی میکنه و اونی که بزرگتره رو بالاتر قرار میده. این کار برای همه اعضا تکرار میشه تا نهایت همه مرتب بشن. در نهایت هم با استفاده از متد appendTo نتیجه رو در ul قرار دادیم.

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

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

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

یا علی

Source

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram