طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

خواندن خاصیت Data در HTML5 با jQuery


خواندن خاصیت Data در HTML5 با jQuery

خاصیت Data در HTML5 برای ذخیره کردن داده های سفارشی به همراه یک المنت HTML است. این ویژگی ها (attributes) برای نگه داشتن اطلاعات بیشتر بر روی المان های HTML به کار می رود.

زمانی که ما از طریق جاوااسکریپت به این المان ها دسترسی پیدا می کنیم. اطلاعات ذخیره شده به کار ما را بسیار ساده تر می کنند.

قصد داریم یک مثال از خواندن خاصیت Data در HTML5 با jQuery را ببینم. در این مثال یک تگ <img> با خاصیت data-* داریم. ما از این ویژگی ها را برای انجام عملیات بزرگنمایی (zoom-in) و کوچک کردن  (zoom-out)بهره می بریم.

خواندن خاصیت Data در HTML5 با jQuery

کد HTML به همراه خاصیت Data

این کد شامل دو خاصیت data است . data-action و data-imgname.

data-action برای ذخیره عملیات (zoom-in , zoom-out) به کار می رود و data-imgname برای ذخیره نام تصویر که بعد از عملیات zoom نمایش داده می شود.

کد خواندن خاصیت Data در HTML5 با jQuery

ما با استفاده از متد data در جی کوئری به خاصیت data-action دسترسی پیدا می کنیم. بر اساس مقدار ذخیره شده یکی از عملیات zoom را انجام می دهیم.

طی این عملیات ها, ما مقدار data-imgname را نیر تغییر می دهیم.

در اینجا ما از دو تصویر بندانگشتی و تصویر اصلی استفاده کردیم که شما می توانید فقط از یک تصویر استفاده کردن و به جای تغییر تصویر, سایز آن ها را تغییر بدید.

حتما بخوانید  بزرگنمایی تصویر با php و جاوااسکریپت

 

امیدوارم از آموزش خواندن خاصیت Data در HTML5 با jQuery نهایت استفاده را برده باشید .

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

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

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه