jQuery $.attr() vs. $.data(): Bila Perlu Menggunakan Yang Mana?

Data jQuery vs Attr

Apabila bekerja dengan atribut data, terdapat dua kaedah jQuery utama yang boleh anda gunakan: $.data dan $. attr. Memahami perbezaannya adalah penting untuk penyimpanan dan pengambilan data yang berkesan.

$.attr untuk Atribut Data HTML5

Jika anda berurusan dengan atribut data HTML5, seperti sebagai <a>, kaedah yang sesuai ialah $.attr. Ini membolehkan anda membaca dan menulis atribut data terus daripada HTML elemen. Contohnya:

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

$.data untuk Storan Data Sewenang-wenang

Sebaliknya, $.data membenarkan anda menyimpan data sewenang-wenangnya pada elemen, tidak berkaitan dengan khusus sifat-sifat. Data ini tidak boleh diakses melalui HTML, sebaliknya melalui cache jQuery. Ia sering digunakan untuk instantiasi widget dan menyimpan objek kompleks. Contohnya:

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

Sempang dan CamelCase dalam $.data

Apabila menggunakan $.data, nama atribut data sempang ditukar secara automatik kepada camelCase, manakala yang asal format sempang kekal tersedia dalam HTML. Walau bagaimanapun, menggunakan sempang dalam JavaScript tidak disyorkan untuk akses melalui $.data().

Auto-Hantar dalam $.data

Satu lagi ciri berguna $.data () ialah keupayaannya untuk menghantar nilai secara automatik. Jika nilai sepadan dengan corak yang diiktiraf, ia akan ditukar kepada jenis data yang sesuai. Corak yang dipermudahkan ini:

<a>

Boleh diakses sebagai:

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

Bila Menggunakan $.attr vs $.data

Secara amnya , gunakan $.attr untuk mengakses atribut data HTML5 yang memerlukan interaksi langsung dengan HTML. Gunakan $.data untuk menyimpan data arbitrari yang tidak boleh diakses melalui HTML, terutamanya apabila bekerja dengan objek kompleks.

Atas ialah kandungan terperinci jQuery $.attr() vs. $.data(): Bila Perlu Menggunakan Yang Mana?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!