JavaScript: Manfaatkan atribut data HTML5 untuk kecekapan maksimum

Dalam artikel ini, kita akan membincangkan cara mendapatkan atribut data HTML5 menggunakan JavaScript. Kami akan menelusuri beberapa contoh praktikal untuk menunjukkan cara menggunakan sifat data ini dengan JavaScript dan jQuery biasa.

JavaScript ialah salah satu teknologi teras Internet. Ia digunakan oleh kebanyakan laman web dan disokong oleh semua pelayar web moden tanpa memerlukan pemalam. Dalam siri ini, kami akan membincangkan petua dan kiat untuk membantu anda dengan pembangunan JavaScript harian anda.

Selalunya, anda perlu menyimpan beberapa maklumat tambahan bersama-sama dengan elemen HTML yang berbeza pada aplikasi web atau tapak web anda. Ia mungkin tidak bermakna apa-apa kepada pengguna, tetapi ia mungkin berguna kepada anda jika anda ingin bertindak berdasarkan maklumat tersebut.

Sebagai contoh, jika anda mempunyai jadual HTML yang mengandungi baris daripada pangkalan data, anda mungkin mahu menyimpan ID pangkalan data yang sepadan untuk setiap baris. Ini akan memudahkan penyuntingan dan tugasan lain. Ini adalah kegunaan hebat untuk atribut data tersuai.

Sebelum pengenalan atribut data tersuai ini, pembangun selalunya menggunakan atribut kelas untuk menyimpan maklumat sedemikian, tetapi atribut kelas sebenarnya tidak digunakan untuk tujuan ini, dan amalan ini boleh menyebabkan kekeliruan dalam memahami kod dan penanda tapak.

Dengan pengenalan atribut data tersuai HTML5, menyimpan dan mendapatkan semula data tersuai dalam HTML menjadi sangat mudah.

Akses atribut data menggunakan JavaScript Vanila

Dalam bahagian ini, kami akan membincangkan cara yang berbeza untuk mendapatkan atribut data HTML5 menggunakan JavaScript biasa.

HTMLElement.dataset property

Atribut HTMLElement.dataset 属性

dataset 属性允许您轻松访问元素的数据属性。

让我们考虑以下示例。

首先，我们在每个 <li> 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 ID。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 <li> 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getEmpId 函数，该函数最终获取 employee 的值 - id 与相应 <li> 元素关联的数据属性。

在 getEmpId 函数中，我们使用了 <li> 元素的 dataset 属性，该属性作为第一个参数传递。 dataset 属性返回 DOMStringMap 对象，您可以使用该对象获取各个属性。

当您使用 dataset 属性获取各个属性时，有一些重要的事情。 data- 前缀已从属性名称中删除。任何后跟连字符的小写字符都会转换为大写字符，并删除连字符。换句话说， dash-style 属性名称将转换为 camelCase 对象键。其他角色保持不变。

在我们的示例中，使用这些规则，data-employee-id 属性将转换为 employeeId。因此，您可以使用 element.dataset.employeeId 来获取 data-employee-id 属性的值。

这就是 dataset 在 vanilla JavaScript 中正确工作的方式。

getAttribute() 方法

在本节中，我们将讨论如何使用 getAttribute 方法获取数据属性的值。

我们将修改上一节中讨论的示例。

如您所见，使用 HTML 元素的 getAttribute 方法获取自定义数据属性非常简单。您只需传递整个属性名称以及 data- 前缀即可获取属性的值。

使用 jQuery 库访问数据属性

在本节中，我们将讨论如何使用 jQuery 库获取 HTML5 数据属性。

data() 方法

jQuery data 方法允许您轻松获取元素的数据属性。

让我们通过以下示例来了解 jQuery 数据方法的工作原理。

如您所见，我们只需要传递数据属性名称的驼峰式版本即可获取其值。

attr() 方法

在 jQuery 中，还可以使用 attrdataset membolehkan anda mengakses atribut data elemen dengan mudah.

🎜Mari kita pertimbangkan contoh berikut. 🎜 🎜🎜 🎜Pertama sekali, kami mentakrifkan atribut data tersuai data-employee-id pada setiap elemen <li> untuk menyimpan ID pekerja. Ini boleh digunakan kemudian untuk mendapatkan butiran lanjut tentang pekerja jika perlu. Seterusnya, kami mentakrifkan pengendali acara onclick pada setiap elemen <li>, jadi apabila anda mengklik pada mana-mana baris, ia akan memanggil fungsi getEmpId yang akhirnya memperoleh nilai atribut data employee - id yang dikaitkan dengan elemen <li> yang sepadan. 🎜 🎜Dalam fungsi getEmpId, kami menggunakan atribut dataset elemen <li>, yang diluluskan sebagai parameter pertama. Sifat dataset mengembalikan objek DOMStringMap yang boleh anda gunakan untuk mendapatkan sifat individu. 🎜 🎜Terdapat beberapa perkara penting apabila anda menggunakan atribut dataset untuk mendapatkan sifat individu. Awalan data- telah dialih keluar daripada nama harta. Sebarang aksara huruf kecil diikuti dengan sempang ditukar kepada huruf besar dan sempang dialih keluar. Dalam erti kata lain, nama sifat gaya sempang ditukar kepada kunci objek camelCase. Peranan lain kekal tidak berubah. 🎜 🎜Dalam contoh kami, menggunakan peraturan ini, atribut data-employee-id akan ditukar kepada employeeId. Oleh itu, anda boleh menggunakan element.dataset.employeeId untuk mendapatkan nilai atribut data-employee-id. 🎜 🎜Beginilah cara set data berfungsi dengan betul dalam JavaScript vanila. 🎜 🎜getAttribute() kaedah 🎜Dalam bahagian ini, kita akan membincangkan cara mendapatkan nilai atribut data menggunakan kaedah getAttribute. 🎜 🎜Kami akan mengubah suai contoh yang dibincangkan dalam bahagian sebelumnya. 🎜 🎜🎜 🎜Seperti yang anda lihat, mendapatkan atribut data tersuai adalah sangat mudah menggunakan kaedah getAttribute bagi elemen HTML. Anda hanya menghantar keseluruhan nama harta bersama-sama dengan awalan data- untuk mendapatkan nilai harta tersebut. 🎜 🎜Akses sifat data menggunakan perpustakaan jQuery🎜 🎜Dalam bahagian ini, kita akan membincangkan cara mendapatkan atribut data HTML5 menggunakan perpustakaan jQuery. 🎜 🎜data() kaedah 🎜 Kaedah data jQuery membolehkan anda mendapatkan atribut data elemen dengan mudah. 🎜 🎜Mari kita fahami cara kaedah data jQuery berfungsi dengan contoh berikut. 🎜 🎜🎜 🎜Seperti yang anda lihat, kami hanya perlu lulus versi camelCase nama atribut data untuk mendapatkan nilainya. 🎜 🎜attr() kaedah 🎜Dalam jQuery, anda juga boleh menggunakan kaedah attr untuk mendapatkan nilai atribut tertentu bagi sesuatu elemen. 🎜

Mari belajar dengan cepat cara menggunakan kaedah attr dalam jQuery. attr 方法。

…
…
var empId = $(element).attr('data-employee-id');
…
…

如您所见，attr 方法的工作方式与普通 JavaScript 中的 getAttribute 方法相同。

在 jQuery 中，data 和 attr 方法的区别在于 data rrreee

Seperti yang anda lihat, kaedah attr berfungsi sama seperti kaedah getAttribute dalam JavaScript biasa.

Dalam jQuery, perbezaan antara kaedah data dan attr ialah kaedah data menukar secara dalaman rentetan yang diperoleh daripada atribut data ke dalam Jenis yang sepadan, seperti nombor, nilai Boolean, dsb.

Ini adalah cara mudah mendapatkan atribut data menggunakan jQuery.

KESIMPULAN#🎜🎜# #🎜🎜#Hari ini, kami membincangkan cara mendapatkan atribut data HTML5 menggunakan JavaScript. Dengan bantuan beberapa contoh praktikal, anda mempelajari cara atribut data HTML5 berfungsi dengan pustaka JavaScript dan jQuery biasa. #🎜🎜#

Atas ialah kandungan terperinci JavaScript: Manfaatkan atribut data HTML5 untuk kecekapan maksimum. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!