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

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



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

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

0 286 ۱۵ دی ۹۴

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

موضوع 2 : افکتها و انیمیشنها

مورد 2 : مخفی کردن المنتها

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

el همون المنتی هست که قصد مخفی کردن اون رو دارید.

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

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

میبینید که خصوصیت display رو برابر با none قرار دادیم. با اینکار المنت مورد نظر مخفی خواهد شد.

مورد 3 : نمایان کردن المنتها

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

el همون المنتی هست که قصد نمایان کردن اون رو دارید.

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

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

میبینید که خصوصیت display رو برابر با '' قرار دادیم. با اینکار المنت مورد نظر نمایان خواهد شد.

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

  • animate.css : کتابخانه انیمیشنی CSS برای مخفی و نمایان کردن المنتها با افکتهای زیبا
  • move.js : ابزار Javascript برای انیمیشنی کردن المنتها با CSS

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

مورد 1 : اضافه کردن کلاس

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

در بالا کلاس className به المنت el اضافه شده است.

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

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

اول بررسی میشه که classList در مرورگر پشتیبانی میشه یا خیر. اگر بشه که با استفاده از متد add ، کلاس مورد نظر رو بهش اضافه میکنیم. اگر هم پشتیبانی نشه با استفاده از روشی که در else قرار داده شده، کلاس رو به المنت مورد نظر اضافه میکنیم.

برای IE10 به بالا:

چون در IE10 به بالا از classList پشتیبانی میشه پس براحتی میشه از روش بالا کلاس مورد نظر رو اضافه کنیم.

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

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

میبینید که با استفاده از متد after رشته htmlstring رو بعد از el قرار دادیم.

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

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

در اینجا با استفاده از متد insertAdjacentHTML و خصوصیت afterend، عبارت htmlstring رو بعد از el اضافه کردیم.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram