Rumah > hujung hadapan web > tutorial js > jQuery $.attr() vs. $.data(): Bila Perlu Menggunakan Yang Mana?

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

Barbara Streisand
Lepaskan: 2024-12-20 11:40:10
asal
1055 orang telah melayarinya

jQuery $.attr() vs. $.data(): When to Use Which?

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"
Salin selepas log masuk

$.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"
Salin selepas log masuk

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>
Salin selepas log masuk

Boleh diakses sebagai:

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

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan