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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 278 ۲۱ دی ۹۴

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

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

مورد 6 : clone یا کپی برداری از المنت

اگر بخوایم در jQuery یک el رو clone کنیم، بصورت زیر عمل میکنیم:

میبینید که با استفاده از متد clone از المنت el یک کپی گرفتیم و میتونیم اون رو در یک متغیر دیگه ذخیره کنیم.

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

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

در اینجا با استفاده از متد cloneNode که یکی از متدهای پیش ساخته Javascript هست این کار انجام شده است. باید به عنوان ورودی به اون یک true رو وارد کنیم.

مورد 7 : استفاده از Contains

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

میبینید که با استفاده از متد contains این کار انجام شده و بررسی میشه که المنت child در المنت el موجود هست یا خیر.

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

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

در اینجا با استفاده از عملگر !== بررسی میشه که سمت چپ و راست با هم برابر نباشد. اگر نتیجه این عبارت true باشه مشخص میشه که child عضوی از el هست و el شامل child هست.

مورد 8 : استفاده از each

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

میبینید که در ابتدا یک selector قرار گرفته و بعد از اون با استفاده از متد each بر روی المنتهایی که انتخاب شده اند حلقه میزاریم. درون هر حلقه هم به i که همون ایندکس هست و el که یکی از اون المنتها هست، دسترسی داریم.

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

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

در ابتدا یک تابع بنام forEachElements میسازیم و دو ورودی براش مشخص میکنیم. بعد از اون با استفاده از selector و متد querySelectorAll همه المنتها رو انتخاب و در elements قرار میدیم. حالا میتونین هر جا که میخاید از این تابع که ساختیم استفاده کنیم و همون کاربرد تابع each در jQuery رو داره.

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

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

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram