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

- visibility ٠ mode_comment

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

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

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

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

میبینید که به سادگی و با استفاده از $ اومدیم و انتخابگری بر پایه CSS وارد کردیم. حالا jQuery جستجو میکنه و المنتهای منطبق رو بر میگردونه.

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

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

میبینید که به سادگی با استفاده از متد querySelectorAll اینکارو کردیم و با وارد کردن انتخابگر مورد نظرمون المنتهای منطبق برگشت داده میشن.

برای این مورد، یعنی انتخاب کردن المنتهای مورد نظر میتونین از دو ابزار زیر نیز استفاده کنید:

مورد 13 : دسترسی به خصوصیت یک المنت

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

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

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

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

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

مورد 14 : دریافت محتویات HTML یک المنت

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

میبینید که در کد بالا بسادگی با استفاده از متد html به محتویات html المنت el دسترسی پیدا کردیم.

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

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

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

مورد 15 : دریافت Outer HTML یک المنت

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

میبینید که در ابتدا یک div موقتی ساخته شده و یک کپی از المنت مورد نظر درونش قرار داده شده. بعد از اون میتونیم با استفاده از متد html به کل کدهای html اون المنت دسترسی داشته باشیم با این تفاوت که خودش نیز شامل میشود.

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

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

میبینید که به سادگی با استفاده از خصوصیت outerHTML از المنت el به کل محتویات اون دسترسی پیدا کردیم. دیدید که Javascript در این مورد خیلی ساده و راحت بود و برای این مورد یک خصوصیت از پیش تعریف شده داشت.

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

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

یا علی

Source

comment دیدگاه کاربران
محمد کاشانی

ضمن تشکر….میشه کل این بیست و دو جلسه در قالب یک فایل PDF منتشر شه ؟؟؟

بله به احتمال زیاد آقای آوند این کارو انجام میدن
موفق باشید

محمد کاشانی

پس آقای آوند ما هم منتظر این فایل هستیم …فقط برای امکان کپی کدها بهتره فایل ورد باشه… ممنون از زحمات شما…فقط لطفآ به عنوان یه پست یا توی همین جلسه آخر بگذارید. در ضمن شنیدم پک وردپرس آماده شده ما منتظر ارسال اون دوره ارزشمند هم هستیم…تشکر

لقمان آوند

سلام
اگر جمع آوری بشه pdf خواهد بود و برای کاربرای vip در دسترس هست.
بسته وردپرس سه شنبه ارسال میشه

محمد کاشانی

لطفآ pdf ممکنه شما نیاز به jQuery نداشته باشید رو قبل عید توی دسترسی به فایل ویژه وکاربردی قرار بدید که vip های برنزی بتونن از اون استفاده کنند…ممنون

Trypsin

سلام آقای آوند
الان سال 96 هستش . لطفا این دوره ی ممکنه به jQuery نیاز نداشته باشیم رو بصورت pdf بزارید . هرچند برای کاربران VIP

وحید صالحی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.