TechnoFunnel menyajikan artikel lain untuk mendemonstrasikan cara meneruskan data ke komponen khusus yang dibuat menggunakan JavaScript. Pada artikel sebelumnya kami telah membuat Elemen HTML Khusus yang dapat digunakan kembali tanpa menggunakan Kerangka apa pun. Mari kita buat Komponen Kustom Dinamis dengan JavaScript
Metode .data()_ memungkinkan kita untuk melampirkan data jenis apa pun ke elemen DOM dengan cara yang aman dari referensi melingkar dan karenanya dari kebocoran memori
Kita dapat menetapkan beberapa nilai berbeda untuk satu elemen dan mengambilnya nanti
1
2
3
4
5
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { isManual: true } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );
$( "body" ).data( "foo" ); // 52
$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }
Menggunakan metode data()_ untuk memperbarui data tidak memengaruhi atribut di DOM. Untuk menyetel nilai atribut data-*, gunakan
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
0Sebelum jQuery 1. 4. 3,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
_1 sepenuhnya mengganti semua data. Sejak jQuery 1. 4. 3, data malah diperpanjang oleh penggabungan dangkalSejak jQuery 3, setiap urutan dua karakter "-" (U+002D) diikuti dengan huruf ASCII huruf kecil di kunci diganti dengan versi huruf besar dari huruf tersebut, sejalan dengan. Pernyataan seperti
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
_2 akan mengembalikan<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
3Karena cara browser berinteraksi dengan plugin dan kode eksternal, metode .data() tidak dapat digunakan pada elemen
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
5 (kecuali jika itu adalah plugin Flash),<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
7catatan tambahan
- Perhatikan bahwa metode ini saat ini tidak menyediakan dukungan lintas platform untuk menyetel data pada dokumen XML, karena Internet Explorer tidak mengizinkan data dilampirkan melalui properti expando
- undefined_ tidak dikenali sebagai nilai data. Panggilan seperti
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
_9 akan mengembalikan objek jQuery yang dipanggil, memungkinkan untuk chaining
Contoh
Simpan lalu ambil nilai dari elemen div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
_Demo
. data( key )Pengembalian.
Keterangan. Kembalikan data sewenang-wenang yang terkait dengan elemen pertama dalam koleksi jQuery, seperti yang ditetapkan oleh data() atau oleh atribut HTML5 data-*
versi ditambahkan. 1. 2. 3
kunci
Jenis.
Nama data yang disimpan
versi ditambahkan. 1. 4
Tanda tangan ini tidak menerima argumen apa pun
Metode .data()_ memungkinkan kita untuk membaca data yang sebelumnya terkait dengan elemen DOM. Kami dapat mengambil beberapa nilai berbeda untuk satu elemen satu per satu, atau sebagai satu set
1
2
3
4
5
6
7
var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }
Memanggil .data() tanpa parameter mengembalikan objek JavaScript yang berisi setiap nilai tersimpan sebagai properti. Objek dapat digunakan secara langsung untuk mendapatkan nilai data (namun perhatikan bahwa nama properti yang awalnya berisi tanda hubung akan dimodifikasi seperti yang dijelaskan di bawah)
Sejak jQuery 3, setiap urutan dua karakter "-" (U+002D) diikuti dengan huruf ASCII huruf kecil di kunci diganti dengan versi huruf besar dari huruf tersebut, sejalan dengan. Pernyataan seperti
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
_2 akan mengembalikan<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.6.3.js"></script>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
</body>
</html>
3Sejak jQuery 1. 4. 3, digunakan untuk menginisialisasi data jQuery. Atribut data-* elemen diambil saat pertama kali metode data() dipanggil, dan kemudian tidak lagi diakses atau dimutasi (semua nilai disimpan secara internal oleh jQuery)
Setiap upaya dilakukan untuk mengonversi nilai string atribut menjadi nilai JavaScript (termasuk boolean, angka, objek, larik, dan nol). Sebuah string hanya diubah menjadi angka jika hal itu tidak mengubah representasinya (misalnya, string "100" diubah menjadi angka 100, tetapi "1E02" dan "100. 000" dibiarkan sebagai string karena nilai numeriknya 100 diserialisasi menjadi "100"). Ketika sebuah string dimulai dengan '{' atau '[', maka
var elem = document.createElement( "span" );
$( elem ).data( "foo" ); // undefined
$( elem ).data(); // {}
$( elem ).data( "foo", 42 );
$( elem ).data( "foo" ); // 42
$( elem ).data(); // { foo: 42 }
9 digunakan untuk menguraikannya; . String yang tidak dapat diuraikan karena nilai JavaScript tidak dikonversi