این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش صفت عمومی data در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت عمومی data در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت عمومی data در HTML
صفت data صفتی است که ما با استفاده از آن میتوانیم داده هارو در درون یک عنصر ( تگ ) قرار بدیم و حالا بعدش مثلا با استفاده از جاوااسکریپت یا جی کوئری اون داده هارو دریافت کنیم و باهاشون کار کنیم.
شاید الان خیلی خوب نتونید عملکرد این صفت رو درک کنید ، چون شاید تا الان باهاش درگیر نشدید، لذا ان شاالله هرچی جلوتر برید و با چیزای بیشتری از طراحی وب یاد بگیرید ، با این صفتم بیشتر آشنا میشید.
بعضی از داده ها هستن که باید درون صفحه قرار داشته باشن تا ما بتونیم از اون داده ها استفاده کنیم، مثلا بتونیم داده هارو بفرستیم بسمت سرور یا حالا هرکاری.
بیشترین استفاده از این صفت در سایت هایی هست که بصورت آجاکس ( Ajax یا ایجکس ) کار میکنن، آجاکس که دیگه خودتون میدونید، چیزیه که با استفاده از اون میتونیم داده هارو بسمت سرور ارسال کنیم بدون اینکه صفحه رفرش بشه.
خب وقتی کاربر بروی دکمه اضافه کردن به سبد خرید کلیک میکنه اینجا یه شناسه ای یا حالا هرچیزی از اون محصول بسمت سرور ارسال میشه و بعدش در سمت سرور اون شناسه رو میگیریم و در نهایت کاری که میخوایم باهاش میکنیم.
اون شناسه یا حالا هرچی، دقیقا همون چیزیه که میتونه در درون صفت data قرار میگیره و بعدش با استفاده از Jquery خیلی راحت میتونیم اون شناسه رو بگیریم.
صفت data شامل ۲ بخش هست :
|
1 |
data-[MyData] |
- data ( بخش ثابت )
- [ داده دلخواه ما ]
Free-Learn
مثال از صفت data در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : مشخص کردن صفت data و بعدش گرفتن اون data هایی که مقدارشون music هست با استفاده از جاوااسکریپت
|
1 2 3 4 5 |
<button onclick="ChangeColor();">کلیک کن</button> <p><input type="text" data-kind="music" value="Music"></p> <p><input type="text" data-kind="text" value="Text"></p> <p><input type="text" data-kind="music" value="Music"></p> <p><input type="text" data-kind="text" value="Text"></p> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت data در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
روش استفاده
روش استفاده از این صفت در عناصر HTML بصورت زیر می باشد.
|
1 |
<element data-[Custom_Data]="Value"> |
- Custom_Data : یه نام دلخواه
Free-Learn
جدول مقادیر صفت data
در جدول زیر میتوانید مقادیر را که میتوان در این صفت استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| Value | تعریف یک مقدار از نوع رشته برای صفت |
Free-Learn
نکات و توضیحات
- نام صفت نباید حاوی حروف بزرگ انگلیسی باشد و باید حداقل یک حرف بعد از پیشوند -data وجود داشته باشه. ( مثال : data-test )
- مقدار این صفت میتونه از نوع رشته باشد.
