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

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



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

ممکنه شما نیاز به jQuery نداشته باشید (قسمت 10)

0 281 ۴ بهمن ۹۴

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.
Javascript-vs-jquery

موضوع 3 : المنتها و کار با DOM

مورد 19 : بررسی تطابق دو المنت با یکدیگر

اگر بخوایم در jQuery بررسی کنیم که دو المنت با همدیگه تطابق دارند و یکی هستند، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد is بررسی کردیم که با المنت otherEl تطابق داره یا خیر. اگر تطابق داشته باشه true و در غیر اینصورت false رو برمیگردونه.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در Javascript میشه براحتی با استفاده از عملگر === بررسی کرد که دو المنت با هم دیگه تطابق دارند یا خیر.

مورد 20 : بررسی تطابق انتخابگر

اگر بخوایم در jQuery مثلا بررسی کنیم که المنت el دارای انتخابگر .my-class هست، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد is بررسی شده که آیا این المنت شامل انتخابگر مورد نظر هست یا خیر. اگر تطابق موفقیت آمیز باشه true و در غیر اینصورت false برگشت داده میشه.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در ابتدا یک تابع بنام matches ساختیم و این تابع برامون این مورد رو شبیه سازی میکنه.  هر جا هم که بخوایم از این تابع استفاده کنیم به راحتی اون رو فراخوانی میکنیم و 2 ورودی رو بهش میدیم. ورودی اول المنت مورد نظر و ورودی دوم انتخابگر مورد نظر برای بررسی هست.

برای IE9 به بالا:

میبینید که با توجه به مرورگرهای مختلف از دستور مخصوص هر کدوم استفاده کردیم. مثلا moz مربوط به firefox و o مربوط به opera هست. در نهایت هم با استفاده از متد call بررسی صورت گرفته. تابع بالا نسبت با تابع قبلی ساده تر هست و اونم به این دلیله که مرورگر IE9 به بالا پشتیبانی بهتری دارند.

مورد 21 : بررسی تطابق انتخابگر

اگر بخوایم در jQuery به المنت بعد از المنت خاصی دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد next به المنت بعدی رفتیم و اونو انتخاب کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در ابتدا یک تابع بنام nextElementSibling ساختیم و این تابع برامون این مورد رو شبیه سازی میکنه.  هر جا هم که بخوایم از این تابع استفاده کنیم به راحتی اون رو فراخوانی میکنیم.

برای IE9 به بالا:

مرورگرهای IE9 به بالا از خصوصیت nextElementSibling پشتیبانی میکنن و میتونین برای این منظور به راحتی از اون استفاده کنید.

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

موفق و سربلند باشید.

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram