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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 323 ۳۰ دی ۹۴

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

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

مورد 16 : دریافت استایلهای یک المنت

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

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد css به خاصیت ruleName دسترسی پیدا کردیم.

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

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

شما میتونین با استفاده از el.currentStyle به خصوصیتهای المنت دسترسی داشته باشید، منتها با توجه به نوع خصوصیت CSS انواع مختلفی برگشت داده میشن. پس باید بفکر راه بهتری باشیم. اگر بخواید حتما IE8 رو پشتیبانی کنه میتونین از این polyfills استفاده کنید و به هدفتون برسید.

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

میبینید که به سادگی با استفاده از getComputedStyle به خصوصیت مورد نظر از el دست پیدا کردیم.

مورد 17 : دریافت متون یک المنت

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

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد text به متنهای درون اون دسترسی پیدا کردیم.

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

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

میبینید که با استفاده از textContent  یا innerText به متن درون المنت دسترسی پیدا کردیم.

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

میبینید که به سادگی با استفاده از خصوصیت textContent به متن درون المنت دسترسی پیدا کردیم.

مورد 18 : بررسی داشتن کلاسی خاص

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

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

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

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

میبینید که در ابتدا بررسی میشه که مرورگر خصوصیت classList رو پشتیبانی میکنه یا خیر. اگر پشتیبانی نکرد با استفاده از عبارات منظم یا Regex بررسی میشه که className وجود داره یا خیر. اگر test با موفقیت انجام بشه، true برگشت داده میشه.

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

بدلیل اینکه مرورگر IE10 به بالا از خصوصیت classList پشتیبانی میکنه، میتونین با روش ساده بالا به هدفتون برسید. با استفاده از متد contains میتونین بررسی کنید که المنت el شامل کلاس className هست یا خیر.

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

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

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram